@10yun/cv-mobile-ui 0.3.24 → 0.3.25

package/ui-cv/cv-lists-base/cv-lists-base.vue

@@ -1,23 +1,41 @@
 <template>
   <view class="cv-lists-base">
-    <view class="cv-lists-base-data-area" :style="disableTab==true?'height:100%;':''">
-      <scroll-view class="cv-lists-base-data-scroll-box" scroll-y="true"
-        :refresher-enabled="localTabLists[index] && localTabLists[index].enabled && disableEnabled===false" refresher-background="#eeeeee"
-        :refresher-triggered="localTabLists[index] && localTabLists[index].triggered" @scrolltolower="onTolower(index)" @scrolltoupper="onToupper"
-        @scroll="onScroll" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
+    <view class="cv-lists-base-data-area" :style="disableTab == true ? 'height:100%;' : ''">
+      <scroll-view
+        class="cv-lists-base-data-scroll-box"
+        scroll-y="true"
+        :refresher-enabled="localTabLists[index] && localTabLists[index].enabled && disableEnabled === false"
+        refresher-background="#eeeeee"
+        :refresher-triggered="localTabLists[index] && localTabLists[index].triggered"
+        @scrolltolower="onTolower(index)"
+        @scrolltoupper="onToupper"
+        @scroll="onScroll"
+        @refresherrefresh="onRefresh"
+        @refresherrestore="onRestore"
+        @refresherabort="onAbort"
+      >
         <view v-if="localTabLists[index] && localDataLists[index].data.length > 0" :class="listsClass">
-          <view v-for="(rows,i) in localDataLists[index].data" :key="i" style="display: contents !important;">
+          <view v-for="(rows, i) in localDataLists[index].data" :key="i" style="display: contents !important">
             <slot :rows="rows" :index="i" :tabIndex="index" />
           </view>
         </view>
-        <view class="cv-lists-base-data-scroll-box-nodata-msg" v-if="localTabLists[index] 
-          && localTabLists[index].loadMoreStatus =='noMore' 
-          && localDataLists[index].data.length <=0 
-          && localTabLists[index].nodataMsg ">
-          {{localTabLists[index].nodataMsg}}
+        <view
+          class="cv-lists-base-data-scroll-box-nodata-msg"
+          v-if="
+            localTabLists[index] &&
+            localTabLists[index].loadMoreStatus == 'noMore' &&
+            localDataLists[index].data.length <= 0 &&
+            localTabLists[index].nodataMsg
+          "
+        >
+          {{ localTabLists[index].nodataMsg }}
         </view>
-        <cv-load-more :status="localTabLists[index] && localTabLists[index].loadMoreStatus" @clickLoadMore="onTolower(index)"
-          :contentText="loadMoreText" v-else />
+        <cv-load-more
+          :status="localTabLists[index] && localTabLists[index].loadMoreStatus"
+          @clickLoadMore="onTolower(index)"
+          :contentText="loadMoreText"
+          v-else
+        />
       </scroll-view>
     </view>
   </view>
@@ -92,14 +110,14 @@ export default {
       localTabLists: [],
       localTabIndex: 0,
       localDataLists: [],
-      scrollTop: 0,//当前列顶部位置
+      scrollTop: 0, //当前列顶部位置
       triggered: false,
       tabItemStyle: '',
       windowWidth: 414,
       localTabScrollLeft: 0,
       tabScrollLeft: 0,
-      loadMoreText: { contentdown: "上拉或点击显示更多", contentrefresh: "正在加载...", contentnomore: "没有更多数据了" }
-    }
+      loadMoreText: { contentdown: '上拉或点击显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' }
+    };
   },
   watch: {
     tabsConfig: {
@@ -129,7 +147,7 @@ export default {
   created() {
     uni.getSystemInfo({
       success: (res) => {
-        this.windowWidth = res.windowWidth
+        this.windowWidth = res.windowWidth;
       }
     });
   },
@@ -143,14 +161,14 @@ export default {
       for (const key in this.tabsConfig) {
         localTabLists.push({ ...this.tabsConfig[key] });
         localTabLists[key].enabled = true; //开启自定义下拉刷新
-        localTabLists[key].loadMoreStatus = 'more';//cv-load-more 组件 status 状态
+        localTabLists[key].loadMoreStatus = 'more'; //cv-load-more 组件 status 状态
         localTabLists[key].scrollTop = 0;
-        localTabLists[key].ordersort = this.tabsConfig[key].ordersort == 'DESC' ? 'DESC' : 'ASC';//默认倒叙
-        localTabLists[key].pagesize = this.tabsConfig[key].pagesize || 10;//页长
+        localTabLists[key].ordersort = this.tabsConfig[key].ordersort == 'DESC' ? 'DESC' : 'ASC'; //默认倒叙
+        localTabLists[key].pagesize = this.tabsConfig[key].pagesize || 10; //页长
         localDataLists[key] = {
           page: 1,
           data: []
-        }
+        };
       }
       this.localTabLists = localTabLists;
       this.localDataLists = localDataLists;
@@ -169,36 +187,20 @@ export default {
       /* #ifdef APP-PLUS */
       let query = uni.createSelectorQuery().in(this);
       for (var i = 1; i <= localTabLists.length; ++i) {
-        query.select('.cv-lists-base-tab-item-id-' + i).boundingClientRect((data) => {
-          tabItemWidth += 40
-          if (data) {
-            tabItemWidth += data.width
-          }
-        }).exec();
-      }
-      query.select('.cv-lists-base-tab-box').boundingClientRect((data) => {
-        tabWidth = data.width
-        /* 写在这里面是为了兼容微信小程序，如果写在外面这句会先执行 */
-        if (tabItemWidth <= tabWidth) {
-          tabItemStyle += 'width:calc(100% / ' + localTabLists.length + ' - 40px);';
-        }
-        tabItemStyle += 'top:0;';
-        this.tabItemStyle = tabItemStyle;
-        this.$forceUpdate();
-      }).exec();
-      /* #endif */
-      /* #ifndef APP-PLUS */
-      setTimeout(() => {
-        for (var i = 1; i <= localTabLists.length; ++i) {
-          uni.createSelectorQuery().in(this).select('.cv-lists-base-tab-item-id-' + i).boundingClientRect((data) => {
-            tabItemWidth += 40
+        query
+          .select('.cv-lists-base-tab-item-id-' + i)
+          .boundingClientRect((data) => {
+            tabItemWidth += 40;
             if (data) {
-              tabItemWidth += data.width
+              tabItemWidth += data.width;
             }
-          }).exec();
-        }
-        uni.createSelectorQuery().in(this).select('.cv-lists-base-tab-box').boundingClientRect((data) => {
-          tabWidth = data.width
+          })
+          .exec();
+      }
+      query
+        .select('.cv-lists-base-tab-box')
+        .boundingClientRect((data) => {
+          tabWidth = data.width;
           /* 写在这里面是为了兼容微信小程序，如果写在外面这句会先执行 */
           if (tabItemWidth <= tabWidth) {
             tabItemStyle += 'width:calc(100% / ' + localTabLists.length + ' - 40px);';
@@ -206,8 +208,40 @@ export default {
           tabItemStyle += 'top:0;';
           this.tabItemStyle = tabItemStyle;
           this.$forceUpdate();
-        }).exec();
-      }, 0)
+        })
+        .exec();
+      /* #endif */
+      /* #ifndef APP-PLUS */
+      setTimeout(() => {
+        for (var i = 1; i <= localTabLists.length; ++i) {
+          uni
+            .createSelectorQuery()
+            .in(this)
+            .select('.cv-lists-base-tab-item-id-' + i)
+            .boundingClientRect((data) => {
+              tabItemWidth += 40;
+              if (data) {
+                tabItemWidth += data.width;
+              }
+            })
+            .exec();
+        }
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('.cv-lists-base-tab-box')
+          .boundingClientRect((data) => {
+            tabWidth = data.width;
+            /* 写在这里面是为了兼容微信小程序，如果写在外面这句会先执行 */
+            if (tabItemWidth <= tabWidth) {
+              tabItemStyle += 'width:calc(100% / ' + localTabLists.length + ' - 40px);';
+            }
+            tabItemStyle += 'top:0;';
+            this.tabItemStyle = tabItemStyle;
+            this.$forceUpdate();
+          })
+          .exec();
+      }, 0);
       /* #endif */
     },
     /* 处理滚动条距离左边的距离 */
@@ -219,16 +253,21 @@ export default {
         windowWidth = this.windowWidth;
       let tabLeft = 0,
         localTabScrollLeft = this.tabScrollLeft,
-        tabWidth = 0
-      uni.createSelectorQuery().in(this).select('.cv-lists-base-tab-item-id-' + i).boundingClientRect(data => {
-        tabLeft = data.left - 20;
-        tabWidth = data.width + 40
-        localTabScrollLeft += tabLeft - (windowWidth / 2) + tabWidth / 2
-        this.localTabScrollLeft = localTabScrollLeft;
-      }).exec();
+        tabWidth = 0;
+      uni
+        .createSelectorQuery()
+        .in(this)
+        .select('.cv-lists-base-tab-item-id-' + i)
+        .boundingClientRect((data) => {
+          tabLeft = data.left - 20;
+          tabWidth = data.width + 40;
+          localTabScrollLeft += tabLeft - windowWidth / 2 + tabWidth / 2;
+          this.localTabScrollLeft = localTabScrollLeft;
+        })
+        .exec();
     },
     onTabScroll(e) {
-      this.tabScrollLeft = e.detail.scrollLeft
+      this.tabScrollLeft = e.detail.scrollLeft;
     },
     changeTab(e) {
       if (e != this.localTabIndex) {
@@ -242,10 +281,10 @@ export default {
         if (this.localTabLists[e].orderby) {
           //console.warn('< cvjs >：支持排序的Tab哦');
           if (this.localTabLists[e].ordersort == 'DESC') {
-            this.localTabLists[e].ordersort = 'ASC'
+            this.localTabLists[e].ordersort = 'ASC';
             //console.warn(this.localTabLists[e].orderby, '排序改为：', this.localTabLists[e].ordersort,)
           } else {
-            this.localTabLists[e].ordersort = 'DESC'
+            this.localTabLists[e].ordersort = 'DESC';
             //console.warn(this.localTabLists[e].orderby, '排序改为：', this.localTabLists[e].ordersort)
           }
           // console.log('< cvjs >：重置当前列数据重新发起请求');
@@ -265,13 +304,13 @@ export default {
         // console.log('< cvjs >：第一次打开此区初始化数据');
         this.getData();
       }
-      this._dealTabScrollLeft()
-      this.$set(this.localTabLists[current], 'enabled', true)
+      this._dealTabScrollLeft();
+      this.$set(this.localTabLists[current], 'enabled', true);
     },
     getData() {
-      const localTabLists = this.localTabLists;//Tab数组
-      const localTabIndex = this.localTabIndex;//当前区域坐标
-      const localDataLists = this.localDataLists;//滑块缓存数据
+      const localTabLists = this.localTabLists; //Tab数组
+      const localTabIndex = this.localTabIndex; //当前区域坐标
+      const localDataLists = this.localDataLists; //滑块缓存数据
 
       console.log(localTabLists);
 
@@ -279,68 +318,66 @@ export default {
         console.warn('< cvjs >：localTabLists 参数为有误');
         return;
       }
-      this.localTabLists[localTabIndex].loadMoreStatus = 'loading'
+      this.localTabLists[localTabIndex].loadMoreStatus = 'loading';
       let apiUrl = localTabLists[localTabIndex].apiUrl;
       let page = 1;
       if (localDataLists[localTabIndex]) {
-        page = localDataLists[localTabIndex].page
+        page = localDataLists[localTabIndex].page;
       }
       let apiParam = {
         pagesize: localTabLists[localTabIndex].pagesize,
         page: page
       };
-      apiParam = Object.assign(apiParam, this.publicParam);//公共参数
-      apiParam = Object.assign(apiParam, localTabLists[localTabIndex].apiParam);//当前列参数
+      apiParam = Object.assign(apiParam, this.publicParam); //公共参数
+      apiParam = Object.assign(apiParam, localTabLists[localTabIndex].apiParam); //当前列参数
       //排序字段
       if (localTabLists[localTabIndex].orderby) {
-        apiParam[localTabLists[localTabIndex].orderby] = localTabLists[localTabIndex].ordersort
+        apiParam[localTabLists[localTabIndex].orderby] = localTabLists[localTabIndex].ordersort;
       }
       // console.warn('< cvjs >：apiParam', apiParam)
 
-
       if (localTabLists[localTabIndex].apiFunc) {
         if (typeof localTabLists[localTabIndex].apiFunc == 'function') {
           //使用私有方法请求
-          localTabLists[localTabIndex].apiFunc(apiParam).then((successRes) => {
-            this.dealDataList(successRes.data, localTabIndex, page);
-          }).catch((error) => {
-            this.dealDataList([], localTabIndex, page);
-            // console.log('< cvjs >：error', error);
-          });
+          localTabLists[localTabIndex]
+            .apiFunc(apiParam)
+            .then((successRes) => {
+              this.dealDataList(successRes.data, localTabIndex, page);
+            })
+            .catch((error) => {
+              this.dealDataList([], localTabIndex, page);
+              // console.log('< cvjs >：error', error);
+            });
         } else {
-          console.warn('< cvjs >：',
-            '拿到 apiFunc 开始请求,此处代码不全'
-          );
+          console.warn('< cvjs >：', '拿到 apiFunc 开始请求,此处代码不全');
         }
       } else if (this.publicFunc) {
         /* 使用公共方法请求 */
         if (localTabLists[localTabIndex].apiFlag) {
           //有标识
-          this.publicFunc(localTabLists[localTabIndex].apiFlag, apiParam).then((successRes) => {
-            this.dealDataList(successRes.data, localTabIndex, page);
-          }).catch((error) => {
-            this.dealDataList([], localTabIndex, page);
-            // console.log('< cvjs >：error', error);
-          });
+          this.publicFunc(localTabLists[localTabIndex].apiFlag, apiParam)
+            .then((successRes) => {
+              this.dealDataList(successRes.data, localTabIndex, page);
+            })
+            .catch((error) => {
+              this.dealDataList([], localTabIndex, page);
+              // console.log('< cvjs >：error', error);
+            });
         } else {
           //无标识
-          this.publicFunc(apiParam).then((successRes) => {
-            this.dealDataList(successRes.data, localTabIndex, page);
-          }).catch((error) => {
-            this.dealDataList([], localTabIndex, page);
-            // console.log('< cvjs >：error', error);
-          });
+          this.publicFunc(apiParam)
+            .then((successRes) => {
+              this.dealDataList(successRes.data, localTabIndex, page);
+            })
+            .catch((error) => {
+              this.dealDataList([], localTabIndex, page);
+              // console.log('< cvjs >：error', error);
+            });
         }
-
       } else if (localTabLists[localTabIndex].apiUrl) {
-        console.warn('< cvjs >：',
-          '拿到apiUrl 开始请求,此处代码不全'
-        );
-
+        console.warn('< cvjs >：', '拿到apiUrl 开始请求,此处代码不全');
       } else {
-        console.warn('< cvjs >：',
-          '参数有误：apiFunc、apiUrl  至少有一个不为空'
-        );
+        console.warn('< cvjs >：', '参数有误：apiFunc、apiUrl  至少有一个不为空');
         setTimeout(() => {
           this.localTabLists[localTabIndex].triggered = false;
           //console.log('< cvjs >：请求结束，关闭下拉刷新状态', this.localTabLists[this.localTabIndex].enabled, this.localTabLists[this.localTabIndex].triggered)
@@ -350,8 +387,8 @@ export default {
             this.localTabLists[localTabIndex].triggered = 'restore';
             //console.log('< cvjs >：需要重置===========下啦状态')
             this.$forceUpdate();
-          }, 10)
-        }, 3000)
+          }, 10);
+        }, 3000);
       }
     },
     /* 整理列表数据 */
@@ -367,13 +404,13 @@ export default {
           data = this.localTabLists[index].parseFunc(data);
         }
         if (this.localDataLists[index]) {
-          dataLists = [...this.localDataLists[index].data]
+          dataLists = [...this.localDataLists[index].data];
         }
         for (const key in data) {
           dataLists.push(data[key]);
         }
-        this.$set(this.localDataLists[index], 'data', dataLists)
-        this.$set(this.localDataLists[index], 'page', page + 1)
+        this.$set(this.localDataLists[index], 'data', dataLists);
+        this.$set(this.localDataLists[index], 'page', page + 1);
         this.$forceUpdate();
         if (data.length < this.localTabLists[index].pagesize) {
           this.localTabLists[index].loadMoreStatus = 'noMore';
@@ -387,24 +424,22 @@ export default {
         setTimeout(() => {
           this.localTabLists[index].triggered = false;
           this.$forceUpdate();
-        }, 100)
+        }, 100);
       }
       this.$forceUpdate();
-
     },
     /* swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy */
     onTransition(e) {
       if (this.localTabLists[this.localTabIndex].enabled !== false) {
         // console.log('< cvjs >：swiper-item 左右滑动时 锁定‘scroll-view’下拉刷新功能', e)
-        this.$set(this.localTabLists[this.localTabIndex], 'enabled', false)
+        this.$set(this.localTabLists[this.localTabIndex], 'enabled', false);
       }
-
     },
     /* 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} */
     onAnimationfinish(e) {
       if (this.localTabLists[this.localTabIndex].enabled !== true && this.localTabLists[this.localTabIndex].scrollTop < 45) {
         // console.log('< cvjs >：swiper-item 动画结束时 开启‘scroll-view’下拉刷新功能', e)
-        this.$set(this.localTabLists[this.localTabIndex], 'enabled', true)
+        this.$set(this.localTabLists[this.localTabIndex], 'enabled', true);
       }
     },
     onScroll(e) {
@@ -415,14 +450,14 @@ export default {
         this.$forceUpdate();
         // console.log('< cvjs >：滑到顶部了 可以开启下拉刷新了', this.localTabLists[this.localTabIndex].enabled);
       } else if (scrollTop > 0 && this.localTabLists[this.localTabIndex].enabled != false) {
-        this.$set(this.localTabLists[this.localTabIndex], 'enabled', false)
+        this.$set(this.localTabLists[this.localTabIndex], 'enabled', false);
         // console.log('< cvjs >：没在顶部 必须禁止下拉刷新了', this.localTabLists[this.localTabIndex].enabled);
       }
     },
     /* 监听回到顶部 */
     onToupper(e) {
       // console.log('监听回到顶部', e);
-      this.$set(this.localTabLists[this.localTabIndex], 'enabled', true)
+      this.$set(this.localTabLists[this.localTabIndex], 'enabled', true);
     },
     /* 监听触底 */
     onTolower(e) {
@@ -468,7 +503,6 @@ export default {
       if (this.localTabLists[this.localTabIndex].enabled !== true) {
         // this.$set(this.localTabLists[this.localTabIndex], 'enabled', true)
       }
-
     }
   }
 };

package/ui-cv/cv-lists-swiper/cv-lists-swipe2r.vue

@@ -2,23 +2,35 @@
   <view>
     <view class="cv-ls-tabbox-wrap">
       <view class="cv-ls-tabbox-tabs">
-        <view class="cv-ls-tabbox-item" v-for="(item, i) in localTabs" :key="i" :class="{ 'cv-ls-tabbox-item-active': swiperCurrent == i }"
-          @click="swiperChange(i)" :style="{ transition: transtionTime + 'ms' }">
+        <view
+          class="cv-ls-tabbox-item"
+          v-for="(item, i) in localTabs"
+          :key="i"
+          :class="{ 'cv-ls-tabbox-item-active': swiperCurrent == i }"
+          @click="swiperChange(i)"
+          :style="{ transition: transtionTime + 'ms' }"
+        >
           <text>{{ item.name }}</text>
         </view>
-        <view class="cv-ls-tabbox-slider-box"
-          :style="{ width: 100 / localTabs.length + '%', transition: transtionTime + 'ms', left: swiperCurrentSliderLeft + '%' }">
+        <view
+          class="cv-ls-tabbox-slider-box"
+          :style="{ width: 100 / localTabs.length + '%', transition: transtionTime + 'ms', left: swiperCurrentSliderLeft + '%' }"
+        >
           <view class="cv-ls-tabbox-slider"></view>
         </view>
       </view>
     </view>
     <view class="cv-ls-main-wrap" :style="{ height: mainHeight }">
-      <swiper class="cv-ls-main__swiper" style="height: 100%;" :current="swiperCurrent" :duration="transtionTime" @animationfinish="animationfinish">
+      <swiper
+        class="cv-ls-main__swiper"
+        style="height: 100%"
+        :current="swiperCurrent"
+        :duration="transtionTime"
+        @animationfinish="animationfinish"
+      >
         <swiper-item class="swiper-item" v-for="(tabsItem, tabsIndex) in localTabs" :key="tabsIndex">
           <view class="cv-ls-main__scroll-items">
-            <scroll-view :refresher-enabled="reloadDown">
-
-            </scroll-view>
+            <scroll-view :refresher-enabled="reloadDown"></scroll-view>
           </view>
         </swiper-item>
       </swiper>
@@ -27,7 +39,6 @@
 </template>
 
 <script>
-
 // <!-- #ifdef H5 || APP-PLUS -->
 //               <slot :name="item.id"></slot>
 //               <!-- #endif -->
@@ -36,7 +47,7 @@
 //               <!-- #endif -->
 
 export default {
-  name: "cv-lists-swiper",
+  name: 'cv-lists-swiper',
   props: {
     tabsArr: {
       type: [Array, Object],
@@ -66,12 +77,10 @@ export default {
     for (let i in this.tabsArr) {
       let itemTabs = this.tabsArr[i];
       if (itemTabs.lists) {
-
       }
     }
 
     // this.swiperChange(option.order_state);
-
   },
   methods: {
     animationfinish({ detail: { current } }) {
@@ -97,7 +106,7 @@ export default {
         // 只获取一次数据
         // this.getOrderData(index)
         let apiParam = this.localTabs[index].apiParam || {};
-        this.$AllApi.getWmOrder(apiParam).then(res => {
+        this.$AllApi.getWmOrder(apiParam).then((res) => {
           setTimeout(() => {
             this.localTabs[index].data = res.data;
             this.localTabs[index].hide_load = true;
@@ -114,7 +123,7 @@ export default {
       this.$emit('close');
     }
   }
-}
+};
 </script>
 
 <style>
@@ -184,4 +193,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>