Browse Source

fix: 企业承诺首页模板可以滑动

梦辉 5 months ago
parent
commit
221309a54f

+ 1 - 1
src/api/commitment.js

@@ -146,7 +146,7 @@ export function editVerifyTask (data) {
  */
 export function getReminderList (data) {
     const url = zlbApi.getReminderList;
-    return myFetch(url, 'get', data, 'json');
+    return myFetch(url, 'get', data, 'jsonDown');
 }
 
 /**

+ 38 - 21
src/subPages/pages/commitment/home/components/templateList/index.vue

@@ -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;

+ 5 - 1
src/utils/fetch/handleReqLoading.js

@@ -3,7 +3,11 @@
  * 接收一个boolean值,如果为true则loading + 1,否则loading -1
  */
 let requestNum = 0;
-const handleReqLoading = (loadingStatus) => {
+const handleReqLoading = (loadingStatus,dataType='json') => {
+    // 如果是文件下载,不显示loading
+    if(dataType === 'jsonDown'){
+        return;
+    }
     if (loadingStatus) {
         requestNum++;
     } else {

+ 3 - 3
src/utils/fetch/index.js

@@ -208,14 +208,14 @@ export const myFetch = async (url, type = "get", data = {}, dataType) => {
     }
 
     try {
-        handleReqLoading(true);
+        handleReqLoading(true,dataType);
         const response = await handleRequest(reqConfig);
         const responseData = handleNormalResponse(response);
-        handleReqLoading(false);
+        handleReqLoading(false,dataType);
         //返回一个promise对象
         return responseData;
     }catch (err) {
-        handleReqLoading(false);
+        handleReqLoading(false,dataType);
         return handleHttpError(err);
     }
 }

+ 1 - 1
src/utils/fetch/requestHandler.js

@@ -8,7 +8,7 @@ export const handleRequest = (reqConfig) => {
     const promises = [];
 
     /** 普通请求 */
-    if (reqConfig.dataType === 'json') {
+    if (reqConfig.dataType === 'json' || reqConfig.dataType === 'jsonDown') {
         const promise = new Promise((resolve, reject) => {
             uni.request({
                 ...reqConfig,