jufubao-base 1.0.61-beta1002 → 1.0.61-beta1004

package/package.json

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

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -262,9 +262,9 @@ export default {
             );
           }
           if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
-            res.site_entry_settings = res.site_entry_settings.map(item=>{
+            res.site_entry_settings = res.site_entry_settings.filter(item=>{
               item['image_url'] = getServiceUrl(item['image_url'])
-              return item
+              return res.business_codes.includes(item.business_code)
             })
           }
           this.info = res;
@@ -770,7 +770,7 @@ export default {
   
   &-warp {
     width: unit(700, rpx);
-    min-height: unit(290, rpx);
+    // min-height: unit(290, rpx);
     position: relative;
     border-radius: unit(16, rpx);
     background-size: 100%;

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -34,7 +34,7 @@
               size="45"
               icon="iconsaoma"
             ></xd-font-icon>
-            
+
           </view>
           <view
             class="jfb-base-card-entry__body-cut-item"
@@ -51,7 +51,7 @@
               size="45"
               icon="iconyuechi"
             ></xd-font-icon>
-         
+
           </view>
         </template>
         <template v-else>
@@ -107,7 +107,7 @@
           }"
         >已绑定票券</view>
         <view
-          v-if="changeList.length > 0"
+          v-if="hasChangeStatus"
           @click="tabIndex = 2"
           :style="{
             color: tabIndex === 2 ? '#fff' : '#B8B7BE',
@@ -120,16 +120,141 @@
         :style="{ color: warningColor }"
         v-if="tabIndex === 2"
       >* 目前仅支持电影票兑换券进行转换</view>
-      <view v-if="showList.length>0">
+      <view class="card-content">
         <view
-        v-if="tabIndex === 2 || tabIndex === 1"
-        class="jfb-base-card-entry__body-card"
-      >
+          v-if="tabIndex === 2 || tabIndex === 1 && 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"
+            class="card-list"
+            :key="item.card_number"
+            @click="toDetail(item)"
+            v-if="setCardItemShow(item,index)"
+            :style="{
+              background: item['theme']['color'],
+              backgroundSize: '100%',
+              height: item.height + 'px'
+            }"
+          >
+            <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+              <view class="card-list__title"><view>{{item['card_type_name']}}</view></view>
+              <view class="card-list__content">
+                <view>
+                  <text>券号：</text>
+                  <text>{{item.card_number}}</text>
+                </view>
+                <view @click.stop="toDetail(item)" v-if="0">
+                  <view>
+                    <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                  </view>
+                  <view>点击查看</view>
+                </view>
+              </view>
+              <view class="card-list__date">
+                <text>有效期：</text>
+                <text>{{item.end_time}}</text>
+              </view>
+              <view class="card-list__yue">
+                <text>余额：</text>
+                <text>{{item.card_point}} {{ item.unit }}</text>
+              </view>
+              <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
+                <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
+              </view>
+              <template v-if="tabIndex === 1">
+                <view class="card-list__entry" v-if="item.entries.length === 1">
+                  <view
+                    @click.stop="handleBindLogin(item,item['entries'][0])"
+                    :style="{color: item['theme']['color']}"
+                  >进入{{item['entries'][0]['entry_name']}}</view>
+                </view>
+                <view class="card-list__nodata" v-if="item.entries.length === 0">暂无支持服务列表</view>
+                <view class="card-list__entrys" v-if="item.entries.length > 1">
+                  <view class="card-list__entrys-title">
+                    <view>可兑换权益</view>
+                    <view @click.stop="toDetail(item, false)">
+                      <text>查看详情</text>
+                      <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                    </view>
+                  </view>
+                  <view class="card-list__entrys-list">
+                    <scroll-view scroll-x class="card-list__entrys-scroll">
+                      <view class="card-list__entrys-item">
+                        <view
+                          v-for="(entry,idx) in item.entries"
+                          :key="idx"
+                          @click.stop="handleBindLogin(item, entry)"
+                        >
+                          <view><image :src="entry.image_url"></image></view>
+                          <view>{{entry|cutstr}}</view>
+                          <view>
+                            <text>去兑换</text>
+                            <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                          </view>
+                        </view>
+                      </view>
+                    </scroll-view>
+                  </view>
+                </view>
+              </template>
+              <view class="card-list__entry" v-else>
+                <view
+                  @click.stop="handleBindLogin(item,item['entries'][0])"
+                  :style="{color: item['theme']['color']}"
+                >票券转换</view>
+              </view>
+            </view>
+          </view>
+          <view
+            class="card-content-empty card-list"
+            v-else
+            :style="{
+              height: item.height + 'px',
+            }"
+          ><image :src="item.entries.length > 1 ? cardItemBg2: cardItemBg1"></image></view>
+        </view>
+        <view v-else-if="cardList === null && cardList.length === 0">
+          <view class="jfb-base-card-entry__body-empty">
+            <view class="jfb-base-card-entry__body-empty-wrap">
+              <image :src="emptyBg"></image>
+              暂无票券
+            </view>
+          </view>
+        </view>
         <view
-          v-for="(item) in showList"
-          class="card-list"
+          v-if="showDisabled==='Y'"
+          @click="handleToDisabled"
+          class="jfb-base-card-entry__body-disabled"
+        >已失效票券>>></view>
+      </view>
+      <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
+        <view class="jfb-base-card-entry__body-dialog-content">
+          <image
+            class="jfb-base-card-entry__body-dialog-content-img"
+            alt=""
+            :src="popup"
+          ></image>
+          <xd-font-icon
+            icon="icondanchuangguanbi_xian"
+            width="52"
+            height="52"
+            size="26"
+            color="#fff"
+            class="jfb-base-card-entry-entry__body-dialog-content-close"
+            @click="dialogEvent = false"
+          ></xd-font-icon>
+        </view>
+      </view>
+      <view class="computed-height" >
+        <view
+          v-for="(item,index) in cardComputedList"
+          :data-card="item.card_number"
+          class="card-list computed-box"
           :key="item.card_number"
-          @click="toDetail(item)"
+          v-if="index < 20"
           :style="{
             background: item['theme']['color'],
             backgroundSize: '100%'
@@ -205,40 +330,8 @@
           </view>
         </view>
       </view>
-      </view>
-      <view v-else>
-        <view class="jfb-base-card-entry__body-empty">
-          <view class="jfb-base-card-entry__body-empty-wrap">
-            <image :src="emptyBg"></image>
-            暂无票券
-          </view>
-        </view>
-      </view>
-      <view
-        v-if="showDisabled==='Y'"
-        @click="handleToDisabled"
-        class="jfb-base-card-entry__body-disabled"
-      >已失效票券>>></view>
-    </view>
-      <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
-        <view class="jfb-base-card-entry__body-dialog-content">
-          <image
-            class="jfb-base-card-entry__body-dialog-content-img"
-            alt=""
-            :src="popup"
-          ></image>
-          <xd-font-icon
-            icon="icondanchuangguanbi_xian"
-            width="52"
-            height="52"
-            size="26"
-            color="#fff"
-            class="jfb-base-card-entry-entry__body-dialog-content-close"
-            @click="dialogEvent = false"
-          ></xd-font-icon>
-        </view>
-      </view>
     </view>
+  </view>
 </template>
 
 <script>
@@ -250,6 +343,7 @@ import JfbBaseCardEntryMixin from "./JfbBaseCardEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
 import extsMixins from "@/mixins/extsMixins";
 import colorCardMixins from "@/mixins/colorCardMixins";
+import cardListMixins from "@/mixins/cardListMixins";
 import { mapState, mapActions } from "vuex";
 import { getContainerPropsValue, isWechat } from "@/utils/xd.base";
 import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
@@ -264,15 +358,12 @@ export default {
     XdNoticeBar,
     XdCardV2
   },
-  mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins],
+  mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins, cardListMixins],
   computed: {
     ...mapState({
       jwxSDK: (state) => state.jwxSDK,
       jfbAuthorize: (state) => state.jfbAuthorize,
     }),
-    showList(){
-      return this.tabIndex === 1 ? this.cardList: this.changeList
-    },
     emptyBg() {
         return this.getNoData();
     },
@@ -286,6 +377,10 @@ export default {
   watch: {
     container(value) {
       this.init(value)
+    },
+    tabIndex(){
+      this.clearDefault();
+      this.handleCardInit(this.ajaxCardList, this.tabIndex === 1);
     }
   },
   data() {
@@ -300,11 +395,9 @@ export default {
       cutIndex: 1,
       tabIndex: 1,
       isBack: null, //是否使用返回键
-      cardList: [],
-      changeList: [],
-      disableList: [],
       inCallback: null, //内部跳转地址
 
+
       //页面跳转地址
       login_name:'',//登陆文案
       changeUrl: "",
@@ -325,7 +418,6 @@ export default {
     this.init(this.container);
     this.noticeBackgroundColor = Color(this.warningColor).alpha(0.2).toString();
     this.isPreview = this.$configProject.isPreview;
-    
 
     //#ifdef H5
     this.isWx = this.isPreview || isWechat();
@@ -345,7 +437,7 @@ export default {
 
   },
   methods: {
-    
+
     init(container){
       //设置
       this.cardLayout = getContainerPropsValue(container,"content.cardLayout","1");
@@ -357,7 +449,7 @@ export default {
       //this.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
       this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
     },
-    
+
     handleToLink(path) {
       this.$xdUniHelper.navigateTo({
         url: path,
@@ -443,7 +535,7 @@ export default {
         if (item["is_valid"] !== "Y") {
           return;
         }
-        
+
         this.$xdShowLoading({});
         jfbRootExec("loginEntryCardBind", {
           vm: this,
@@ -462,7 +554,7 @@ export default {
             if (this.$configProject.isPreview) {
               console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
             }
-            
+
             else {
               this.handleToApp(entry);
             }
@@ -471,7 +563,7 @@ export default {
             this.$xdHideLoading();
           });
       }
-      
+
       //转换卡跳转
       else {
         this.$xdUniHelper.navigateTo({
@@ -493,7 +585,7 @@ export default {
       }
       const {dir, path, host} = item;
       let nsp = Base64.encodeURI(JSON.stringify({business_code: entry['business_code']}));
-      
+
       //外站配置地址
       if (entry.redirect_type === 'URL') {
         if (item['path'].indexOf('?') === -1) {
@@ -502,13 +594,13 @@ export default {
         this.toApp(redirectUrl);
         return;
       }
-      
+
       //站内转换
       let jumpUrl = item.path;
       //#ifdef H5
       jumpUrl = `//${host}/${dir}${path}`;
       //#endif
-  
+
       if (item['fixed_business_code'] === '') {
         redirectUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}`
       }
@@ -517,7 +609,7 @@ export default {
       }
       this.toApp(redirectUrl);
     },
-    
+
     toDetail(item, out=true) {
       if(out) {
         if(item.entries.length === 1) {
@@ -531,7 +623,7 @@ export default {
           url: `${this.detailUrl}?card_number=${item["card_number"]}`,
         }, false);
       }
-      
+
     },
 
     onJfbLoad(options) {
@@ -565,7 +657,7 @@ export default {
       })
         .then((res) => {
           this.showDisabled = res.is_show_invalid_card_entrance;
-          res.list = res.list.map((item) => {
+          res.list.map((item) => {
             return {
               ...item,
               card_point: this.$xdUniHelper.divisionFloatNumber(
@@ -578,15 +670,13 @@ export default {
               ),
             };
           });
-          
-          this.cardList = this.getCardGroupItem(res.list.filter((item) => {
-            return item["is_valid"] === "Y";
-          }), res['site_entry_settings']);
-          
-          this.changeList = this.getCardGroupItem(this.cardList.filter((item) => {
+          this.ajaxCardList =  res;
+          this.handleCardInit(this.ajaxCardList, this.tabIndex === 1);
+
+
+          this.hasChangeStatus = this.getCardGroupItem(this.ajaxCardList.list.filter((item) => {
             return item["is_exchange"] === "Y";
-          }), res['site_entry_settings']);
-          
+          }), res['site_entry_settings']).length > 0;
           this.$xdHideLoading();
         })
         .catch(() => this.$xdHideLoading());
@@ -674,7 +764,7 @@ export default {
         }
       }
     }
-  
+
     &-line {
       height: 1px;
       background: #eee;
@@ -686,7 +776,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      
+
 
       &-item {
         border: unit(6, rpx) solid;
@@ -699,13 +789,13 @@ export default {
         align-items: center;
         justify-content: center;
         box-sizing: border-box;
-        
+
       }
     }
 
     &-notice {
       margin: unit(30, rpx) unit(-35, rpx) 0 unit(-35, rpx);
-      
+
       padding: unit(22, rpx) unit(35, rpx);
       line-height: unit(70, rpx);
     }
@@ -746,18 +836,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);
@@ -766,23 +856,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;
@@ -793,32 +883,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);
@@ -832,17 +922,17 @@ 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 {
@@ -855,26 +945,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;
@@ -884,11 +974,11 @@ export default {
         color: #999;
       }
     }
-    
+
     &-scroll {
-    
+
     }
-  
+
     &-item {
       display: flex;
       justify-content: flex-start;
@@ -896,7 +986,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);
@@ -905,25 +995,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;
@@ -932,18 +1022,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);
@@ -953,4 +1043,22 @@ export default {
     padding-bottom: unit(20, rpx);
   }
 }
+
+.computed-height {
+  position: fixed;
+  top:-999999px;
+  width: 100%;
+  z-index: 99999;
+}
+
+.card-content-empty {
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: top center;
+
+  & > image {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

package/src/components/JfbBaseCardInfoEntry/JfbBaseCardInfoEntry.vue

@@ -201,7 +201,7 @@ export default {
         })
           .then((res) => {
             this.$xdAlert({
-              content: "绑定成功",
+              content: "票券绑定成功",
               close: () => {
                 this.$xdUniHelper.redirectTo({
                   url: this.backUrl,
@@ -289,9 +289,9 @@ export default {
               }
             });
             if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
-            res.site_entry_settings = res.site_entry_settings.map(item=>{
+              res.site_entry_settings = res.site_entry_settings.filter(item=>{
               item['image_url'] = getServiceUrl(item['image_url'])
-              return item
+              return res.business_codes.includes(item.business_code)
             })
           }
 
@@ -326,9 +326,9 @@ export default {
             }
           });
           if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
-            res.site_entry_settings = res.site_entry_settings.map(item=>{
+            res.site_entry_settings = res.site_entry_settings.filter(item=>{
               item['image_url'] = getServiceUrl(item['image_url'])
-              return item
+              return res.business_codes.includes(item.business_code)
             })
           }
           this.headerBg = this.getCardThemes(res.card_type_name);
@@ -619,7 +619,7 @@ export default {
   
   &-warp {
     width: unit(700, rpx);
-    min-height: unit(290, rpx);
+    // min-height: unit(290, rpx);
     position: relative;
     border-radius: unit(16, rpx);
     background-size: 100%;

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntry.vue

@@ -484,7 +484,7 @@ export default {
   
   &-warp {
     width: unit(700, rpx);
-    min-height: unit(290, rpx);
+    // min-height: unit(290, rpx);
     position: relative;
     border-radius: unit(16, rpx);
     background-size: 100%;

package/src/mixins/cardListMixins.js

@@ -0,0 +1,148 @@
+'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(){
+      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 + 15;
+            card['top'] =  this.cardNextTop;
+            this.cardNextTop =  this.cardNextTop + card['height']
+            return card
+          });
+
+
+          this.cardList = this.cardList.concat(arr);
+
+
+
+          this.$xdHideLoading();
+        }).exec();
+      })
+    },
+
+    handleCardInit(cardList,isChange = false){
+      let newCardList = this.$xdUniHelper.cloneDeep(cardList);
+      let validCardList = this.getCardGroupItem(newCardList.list.filter((item) => {
+        if(isChange === true)  return item["is_valid"] === "Y";
+        else return item["is_exchange"] === "Y";
+      }), 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().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;
+    }
+  }
+}
+
+