|
@@ -3,7 +3,7 @@ import {downFileBase64, getTemplateList} from "@/api/commitment";
|
|
|
import TemplateImg from "@/static/images/commitment/template.png";
|
|
|
|
|
|
export default {
|
|
|
- props:{
|
|
|
+ props: {
|
|
|
activeTemplateId: {
|
|
|
type: String,
|
|
|
default: ''
|
|
@@ -11,7 +11,9 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- templateList:[]
|
|
|
+ templateList: [],
|
|
|
+ current: 1,
|
|
|
+ size: 16
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
@@ -23,13 +25,19 @@ export default {
|
|
|
async getTemplateList() {
|
|
|
try {
|
|
|
const res = await getTemplateList({
|
|
|
- current: 1,
|
|
|
- size: 8,
|
|
|
+ current: this.current,
|
|
|
+ size: this.size,
|
|
|
departmentId: uni.getStorageSync("userInfo").deptId
|
|
|
});
|
|
|
- this.templateList = res.data.records || [];
|
|
|
- for (const [index, item] of this.templateList.entries()) {
|
|
|
- await this.handleDownImg(item.iconUrl, index);
|
|
|
+ if(res.data && res.data.records.length > 0) {
|
|
|
+ //每8个一组作为一个数组,push到templateList中
|
|
|
+ for (let i = 0; i < res.data.records.length; i += 8) {
|
|
|
+ this.templateList.push(res.data.records.slice(i, i + 8));
|
|
|
+// //依次下载每个模板的图片
|
|
|
+ for (const item of this.templateList[this.templateList.length - 1]) {
|
|
|
+ await this.handleDownImg(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.log(e);
|
|
@@ -39,14 +47,14 @@ export default {
|
|
|
handleClick(item) {
|
|
|
this.$emit('click', item);
|
|
|
},
|
|
|
- async handleDownImg(iconUrl, index) {
|
|
|
- if (!iconUrl) {
|
|
|
- this.templateList[index].imgUrl = TemplateImg;
|
|
|
- } else {
|
|
|
+ async handleDownImg(item) {
|
|
|
+ if (!item.iconUrl) {
|
|
|
+ item.imgUrl = TemplateImg;
|
|
|
+ } else if(!item.imgUrl) {
|
|
|
let res = await downFileBase64({
|
|
|
- uuid: iconUrl
|
|
|
+ uuid: item.iconUrl
|
|
|
});
|
|
|
- this.templateList[index].imgUrl = 'data:image/jpeg;base64,' + res.data;
|
|
|
+ item.imgUrl = 'data:image/jpeg;base64,' + res.data;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -54,14 +62,18 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="box">
|
|
|
- <view v-for="item in templateList" :key="item.uuid"
|
|
|
- @click="handleClick(item)"
|
|
|
- :class="{active: item.uuid === activeTemplateId}">
|
|
|
- <img :src="item.imgUrl" style="border-radius: 5px" alt="">
|
|
|
- <view class="text-overflow">{{item.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <van-swipe class="my-swipe" @change="onChange" indicator-color="white" :loop="false">
|
|
|
+ <van-swipe-item v-for="groupItem in templateList">
|
|
|
+ <view class="box">
|
|
|
+ <view v-for="item in groupItem" :key="item.uuid"
|
|
|
+ @click="handleClick(item)"
|
|
|
+ :class="{active: item.uuid === activeTemplateId}">
|
|
|
+ <img :src="item.imgUrl" style="border-radius: 5px" alt="">
|
|
|
+ <view class="text-overflow">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -75,12 +87,14 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
padding: 20px 10px;
|
|
|
background-image: linear-gradient(180deg, #FFFFFF 87%, #F2F3F5 100%);
|
|
|
+
|
|
|
> view {
|
|
|
margin: 0 2% 0 0;
|
|
|
width: 23%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+
|
|
|
> view {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
@@ -88,15 +102,18 @@ export default {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
width: 42px;
|
|
|
height: 42px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.active {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
+
|
|
|
.text-overflow {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|