jufubao-base 1.0.61-beta1007 → 1.0.61-beta1009

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.61-beta1007",
+  "version": "1.0.61-beta1009",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -440,7 +440,7 @@ export default {
             })
               .then((res) => {
                 this.$xdAlert({
-                  content: "解绑成功",
+                  content: "票券已解绑",
                   close: () => {
                     this.$xdUniHelper.redirectTo({
                       url: this.backUrl || this.settings.index,

package/src/components/JfbBaseCardDisabledEntry/JfbBaseCardDisabledEntry.vue

@@ -74,7 +74,7 @@
         </view>
       </view>
       <view class="bottom_btn-mask"></view>
-      <view v-if="disableList&&disableList.length>0" class="bottom_btn" :style="prod_bottom">
+      <view v-if="ajaxCardList && ajaxCardList.length>0" class="bottom_btn" :style="prod_bottom">
         <xd-button
           width="680rpx"
           radius="50rpx"
@@ -92,6 +92,7 @@ import { jfbRootExec } from "@/utils/xd.event";
 import JfbBaseCardDisabledEntryMixin from "./JfbBaseCardDisabledEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
 import colorCardMixins from "@/mixins/colorCardMixins";
+import cardListMixins from "./cardListMixins";
 import XdButton from "@/components/XdButton/XdButton";
 import XdNoData from '@/components/XdNoData/XdNoData'
 import extsMixins from "@/mixins/extsMixins";
@@ -102,7 +103,7 @@ export default {
     XdNoData,
     XdButton
   },
-  mixins: [componentsMixins, extsMixins, JfbBaseCardDisabledEntryMixin, colorCardMixins],
+  mixins: [componentsMixins, extsMixins, JfbBaseCardDisabledEntryMixin, colorCardMixins, cardListMixins],
   data() {
     return {
       disableList: [],
@@ -123,14 +124,13 @@ export default {
     },
   },
   created() {
-    console.log(this.getNoData(),'this.getNoData()this.getNoData()');
     this.init(this.container);
   },
   methods: {
     onJfbLoad(options) {
       this.getCardList();
     },
-    
+
     getCardList() {
       this.$xdShowLoading({});
       jfbRootExec("getDisableCardListEntry", {vm: this, data: {is_all: "Y", is_show_entry_settings: 'Y'},})
@@ -149,14 +149,16 @@ export default {
               ),
             };
           });
-          this.disableList = this.getCardGroupItem(res.list.filter((item) => {
-            return item["is_valid"] === "N";
-          }), res['site_entry_settings'], 'Y');
+
+          //设置列表
+          this.ajaxCardList =  res;
+          this.handleCardInit(this.ajaxCardList);
+
           this.$xdHideLoading();
         })
         .catch(() => this.$xdHideLoading());
     },
-  
+
     handleAllUnBindCard(){
       this.$xdConfirm({
         $vm: this,
@@ -186,9 +188,9 @@ export default {
           }
         },
       });
-      
+
     },
-    
+
     handleUnBindCard(item) {
       this.$xdConfirm({
         $vm: this,
@@ -222,13 +224,13 @@ export default {
         },
       });
     },
-    
+
     /**
      * @description 监听事件变化
      * @param container {object} 业务组件对象自己
      */
     init(container) {},
-    
+
     onJfbBack(options) {
       console.log("event.onJfbBack", options);
     },
@@ -357,18 +359,18 @@ export default {
   overflow: hidden;
   border-radius: unit(16, rpx);
   margin-bottom: unit(30, rpx);
-  
+
   &:last-child {
     margin-bottom: 0;
   }
-  
-  
+
+
   &__title {
     height: unit(56, rpx);
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    
+
     & > view {
       padding: 0 unit(80, rpx);
       font-size: unit(24, rpx);
@@ -377,23 +379,23 @@ export default {
       color: #fff;
       border-radius: 0 0 unit(16, rpx) 0;
     }
-    
+
   }
-  
+
   &__content {
     padding: unit(10, rpx) unit(40, rpx) 0;
     height: unit(86, rpx);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     & > view:first-child {
       font-size: unit(36, rpx);
       line-height: unit(86, rpx);
       color: #fff;
       font-weight: 700;
     }
-    
+
     & > view:nth-child(2) {
       font-size: unit(24, rpx);
       display: flex;
@@ -404,32 +406,32 @@ export default {
       color: #fff;
     }
   }
-  
+
   &__date {
     padding: 0 unit(40, rpx);
     font-size: unit(28, rpx);
     line-height: unit(32, rpx);
     color: #fff;
   }
-  
+
   &__yue {
     padding: unit(10, rpx) unit(40, rpx) 0;
     font-size: unit(28, rpx);
     line-height: unit(32, rpx);
     color: #fff;
-    
+
     & > text:nth-child(2) {
       font-weight: 700;
     }
   }
-  
+
   &__other {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     padding: unit(20, rpx) unit(40, rpx) 0;
     margin-top: unit(0, rpx);
-    
+
     & > view {
       border-radius: unit(8, rpx);
       background: rgba(255, 255, 255, 0.2);
@@ -443,20 +445,20 @@ export default {
       padding: 0 unit(20, rpx);
       color: #fff;
     }
-    
-    
+
+
   }
-  
+
   &__nodata {
     padding: unit(20, rpx) unit(40, rpx) 0;
     margin-top: unit(0, rpx);
     color: #fff;
     font-size: unit(28, rpx);
   }
-  
+
   &__entry {
     padding: unit(20, rpx) unit(40, rpx) 0;
-  
+
     & > view {
       line-height: unit(64, rpx);
       text-align: center;
@@ -467,26 +469,26 @@ export default {
       font-weight: 500;
     }
   }
-  
+
   &__entrys {
     margin: unit(20, rpx) unit(20, rpx) 0;
     padding: unit(30, rpx);
     border-radius: unit(16, rpx);
     background: rgba(255, 255, 255, 1);
     box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
-    
+
     &-title {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      
-      
+
+
       & > view:first-child {
         font-size: unit(28, rpx);
         font-weight: 500;
         flex: 1;
       }
-      
+
       & > view:nth-child(2) {
         display: flex;
         justify-content: flex-start;
@@ -496,11 +498,11 @@ export default {
         color: #999;
       }
     }
-    
+
     &-scroll {
-    
+
     }
-    
+
     &-item {
       display: flex;
       justify-content: flex-start;
@@ -508,7 +510,7 @@ export default {
       flex-flow: nowrap;
       margin-left: unit(-14, rpx);
       padding-top: unit(20, rpx);
-      
+
       & > view {
         width: unit(120, rpx);
         margin-right: unit(10, rpx);
@@ -517,25 +519,25 @@ export default {
         justify-content: center;
         flex-direction: column;
         align-items: center;
-        
+
         & > view:first-child {
           width: unit(76, rpx);
           height: unit(76, rpx);
           overflow: hidden;
-          
+
           & > image {
             height: 100%;
             width: 100%;
           }
         }
-        
+
         & > view:nth-child(2) {
           margin-top: unit(10, rpx);
           font-size: unit(24, rpx);
           line-height: unit(36, rpx);
           margin-bottom: unit(10, rpx);
         }
-        
+
         & > view:nth-child(3) {
           display: flex;
           justify-content: flex-start;
@@ -544,18 +546,18 @@ export default {
           font-size: unit(20, rpx);
           color: #999;
         }
-        
+
         &:last-child {
           margin-right: 0;
         }
-        
+
       }
-      
-      
+
+
     }
   }
-  
-  
+
+
   &-warp {
     width: unit(700, rpx);
     min-height: unit(310, rpx);
@@ -574,7 +576,7 @@ export default {
   align-items: center;
   height: unit(120, rpx);
   background: #ffffff;
-  
+
   &-mask {
     height: unit(120, rpx);
   }

package/src/components/JfbBaseCardDisabledEntry/cardListMixins.js

@@ -0,0 +1,142 @@
+'use strict';
+import {mapState} from "vuex";
+
+export default {
+  data() {
+    return {
+      ajaxCardList: null, //接口返回原始数据
+
+      //卡券列表
+      cardOrgList:[], //原始数据
+      cardList:[], //计算后的卡列表
+      cardPageNum: 0, //当前页面
+      cardPageLen: 10, //每页获取数据调试
+      cardComputedList:[], //当前获取的数据列表
+      cardLoading: false, //加载状态值设置
+      cardNextTop: 0, //计算到每一个节点的距离顶部Top值
+      contentStatus: false, //内容框是否已经进行过计算距离顶部Top值状态
+      hasContent: true, //是否可以进行继续加载状态
+
+      //转换按钮
+      hasChangeStatus: false,//是否有转换按钮
+
+      cardItemBg1: '//img.jufubao.cn/component/card/card_item_02.png',
+      cardItemBg2: '//img.jufubao.cn/component/card/card_item_01.png'
+    }
+  },
+  computed:{
+    ...mapState(['srollPreview'])
+  },
+  watch:{
+    // srollPreview(value){
+    //   console.log(value)
+    // }
+  },
+  created(){
+
+  },
+
+  mounted(){
+
+
+  },
+  methods:{
+    setCardItemShow({height , top},index){
+
+      //预览模式只获取10条
+      if(this.$configProject.isPreview) {
+        console.log(this.cardPageLen, index, this.cardPageLen > index)
+        return this.cardPageLen > index;
+      }
+
+      //打包模式
+      let fiexd = 50;
+      let boxTop = top + height + fiexd;
+      let boxBottom = top - (fiexd);
+      let {pageWindowPrevStart, pageWindowPrevEnd} = this.srollPreview;
+      return boxTop > pageWindowPrevStart && boxBottom < pageWindowPrevEnd;
+    },
+
+    getBoxTop(){
+      return new Promise((resolve, reject)=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.select('.card-content').boundingClientRect(data=>{
+          this.cardNextTop = data.top;
+          this.contentStatus = true;
+          resolve();
+        }).exec()
+      })
+
+    },
+
+    async handleCardComputed(paddingBottom=30){
+      this.$xdShowLoading({});
+      if(this.contentStatus === false)  await this.getBoxTop();
+      this.$nextTick(()=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.selectAll('.computed-box').boundingClientRect(data => {
+          let arr = data.map(item=>{
+            let card =  this.cardComputedList.filter(it=>{
+              return item.dataset.card === it.card_number;
+            })[0];
+            card['height'] = item.height;
+            card['top'] =  this.cardNextTop;
+            this.cardNextTop =  this.cardNextTop + card['height'] +  (paddingBottom * this.$rpxNum)
+            return card
+          });
+          this.cardList = this.cardList.concat(arr);
+          this.$xdHideLoading();
+        }).exec();
+      })
+    },
+
+    handleCardInit(cardList, paddingBottom =30){
+      let newCardList = this.$xdUniHelper.cloneDeep(cardList);
+      let validCardList = this.getCardGroupItem(newCardList.list.filter((item) => {
+         return item["is_valid"] === "N";
+      }), newCardList['site_entry_settings']).map((item,index)=>{
+        item['index'] = index;
+        return item
+      });
+      this.cardOrgList = this.$xdUniHelper.cloneDeep(validCardList);
+      this.cardComputedList = this.cardOrgList.slice(this.cardPageNum,this.cardPageLen);
+      this.handleCardComputed(paddingBottom).then().catch();
+    },
+
+    onJfbReachBottom(){
+      if(this.cardLoading || !this.hasContent) return;
+      this.cardLoading = true;
+      this.$xdShowLoading({});
+      this.cardPageNum++;
+      console.log('onJfbReachBottom',this.cardPageNum)
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          this.cardLoading = false;
+          this.$xdHideLoading();
+          this.cardComputedList = this.cardOrgList.slice(
+            this.cardPageNum*this.cardPageLen,
+            this.cardPageNum*this.cardPageLen + this.cardPageLen
+          );
+          this.handleCardComputed().then().catch();
+          if(this.cardComputedList.length < this.cardPageLen) {
+            this.hasContent = false;
+          }
+        },500)
+      })
+
+    },
+
+    clearDefault(){
+      this.cardOrgList = [];
+      this.cardList = [];
+      this.cardPageNum = 0;
+      this.cardComputedList = [];
+      this.cardLoading = false;
+      this.cardNextTop = 0;
+      this.contentStatus = false;
+      this.hasContent = true;
+    }
+  }
+}
+
+

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -124,13 +124,14 @@
       >* 目前仅支持电影票兑换券进行转换</view>
       <view class="card-content">
         <view
-          v-if="tabIndex === 2 || tabIndex === 1 && cardList.length > 0"
+          v-if="tabIndex === 2 || tabIndex === 1 && (cardList && cardList.length > 0)"
           class="jfb-base-card-entry__body-card"
         >
           <view
             v-for="(item,index) in cardList"
             :data-index="item.card_number"
             :data-idx="index"
+            :data-top="item.top"
             class="card-list"
             :key="item.card_number"
             @click="toDetail(item)"
@@ -212,13 +213,17 @@
           </view>
           <view
             class="card-content-empty card-list"
+            :data-index="item.card_number"
+            :data-idx="index"
+            :data-top="item.top"
             v-else
             :style="{
               height: item.height + 'px',
+              backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
             }"
-          ><image :src="item.entries.length > 1 ? cardItemBg2: cardItemBg1"></image></view>
+          ></view>
         </view>
-        <view v-else-if="cardList === null && cardList.length === 0">
+        <view v-else-if="cardList === null">
           <view class="jfb-base-card-entry__body-empty">
             <view class="jfb-base-card-entry__body-empty-wrap">
               <image :src="emptyBg"></image>
@@ -1014,6 +1019,9 @@ export default {
           width: unit(76, rpx);
           height: unit(76, rpx);
           overflow: hidden;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
           & > image {
             height: 100%;
@@ -1049,7 +1057,6 @@ export default {
 
 
   &-warp {
-    width: unit(700, rpx);
     min-height: unit(310, rpx);
     position: relative;
     border-radius: unit(16, rpx);

package/src/mixins/cardListMixins.js

@@ -10,7 +10,7 @@ export default {
       cardOrgList:[], //原始数据
       cardList:[], //计算后的卡列表
       cardPageNum: 0, //当前页面
-      cardPageLen: 10, //每页获取数据调试
+      cardPageLen: 5, //每页获取数据调试
       cardComputedList:[], //当前获取的数据列表
       cardLoading: false, //加载状态值设置
       cardNextTop: 0, //计算到每一个节点的距离顶部Top值