jufubao-base 1.0.139 → 1.0.140-beta1

package/package.json

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

package/src/components/JfbBaseCard/Attr.js

@@ -16,31 +16,18 @@ export default {
           {label: "布局2", value: "2"},
         ]
       },
-      {
-        label: '票券登录文案:',
-        ele: 'el-input',
-        type: 'text',
-        valueKey: 'login_name',
-        groupKey:'content',
-        value: data.login_name || '',
-        placeholder: '请输入票券登录文案',
-        className: 'input80',
-        inline: false,
-        notice: '当未设置文案时候，前台页面显示为"<span style="color:red">登录</span>"'
-      },
-
       {
         ele: 'title',
         label: '登录样式设置',
         size: 'small',
-        groupKey: 'style',
+        groupKey: 'content',
       },
       {
         label: "登录文字大小",
         ele: "el-input",
         type: "number",
         valueKey: "login_text_size",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.login_text_size || '',
         placeholder: "请输入登录文字大小",
         className: "input80",
@@ -59,7 +46,7 @@ export default {
         label: "登录背景颜色配置",
         ele: 'xd-color',
         valueKey: "login_text_bg_color",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.login_text_bg_color || '',
         className: "input80",
         inline: false,
@@ -68,7 +55,7 @@ export default {
         label: "登录按钮圆角配置",
         ele: 'xd-site-select-list',
         valueKey: "login_text_radius",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.login_text_radius || '',
         placeholder: '请选择内容圆角设置',
         multiple: false,
@@ -88,14 +75,14 @@ export default {
         ele: 'title',
         label: '查看样式设置',
         size: 'small',
-        groupKey: 'style',
+        groupKey: 'content',
       },
       {
         label: "查看文字大小",
         ele: "el-input",
         type: "number",
         valueKey: "look_text_size",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.look_text_size || '',
         placeholder: "请输入登录文字大小",
         className: "input80",
@@ -105,7 +92,7 @@ export default {
         label: "查看字体颜色配置",
         ele: 'xd-color',
         valueKey: "look_text_color",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.look_text_color || '',
         className: "input80",
         inline: false,
@@ -114,7 +101,7 @@ export default {
         label: "查看背景颜色配置",
         ele: 'xd-color',
         valueKey: "look_text_bg_color",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.look_text_bg_color || '',
         className: "input80",
         inline: false,
@@ -123,7 +110,7 @@ export default {
         label: "查看按钮圆角配置",
         ele: 'xd-site-select-list',
         valueKey: "look_text_radius",
-        groupKey: 'style',
+        groupKey: 'content',
         value: data.look_text_radius || '',
         placeholder: '请选择内容圆角设置',
         multiple: false,
@@ -138,7 +125,18 @@ export default {
             });
         },
       },
-
+      {
+        label: '票券登录文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'login_name',
+        groupKey:'content',
+        value: data.login_name || '',
+        placeholder: '请输入票券登录文案',
+        className: 'input80',
+        inline: false,
+        notice: '当未设置文案时候，前台页面显示为"<span style="color:red">登录</span>"'
+      },
 
       {
         label: '失效卡列表地址:',

package/src/components/JfbBaseCard/JfbBaseCard.vue

@@ -114,9 +114,7 @@
             color: tabIndex === 2 ? '#fff' : '#B8B7BE',
             background: tabIndex === 2 ? mainColor : '#fff',
           }"
-        >
-          可转换票券
-        </view>
+        >可转换票券</view>
       </view>
       <view
         class="jfb-base-card__body-tips"
@@ -164,17 +162,13 @@
                 </view>
                 <view class="jfb-base-card__body-card-item-right-bottom">
                   <view class="jfb-base-card__body-card-item-right-bottom-info">
-                    <view
-                      class="jfb-base-card__body-card-item-right-bottom-info-residue"
-                    >
+                    <view class="jfb-base-card__body-card-item-right-bottom-info-residue">
                       剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}
                     </view>
                     <view
                       v-if="item.other_card_point && item.card_point_type !== 1"
                       class="jfb-base-card__body-card-item-right-bottom-info-deduction"
-                    >
-                      购买其他物品可抵：{{ item.other_card_point }}
-                    </view>
+                    >购买其他物品可抵：{{ item.other_card_point }}</view>
                   </view>
                   <view @click.stop="toDetail(item)" :style="lookStyle">查看</view>
                 </view>
@@ -269,12 +263,20 @@ export default {
     }
   },
   watch: {
-    tabIndex(newVal, oldVal) {
+    tabIndex(newVal) {
+      let data = [];
       if (newVal === 1) {
-        this.showList = this.cardList;
+        this.showList = this.getPageCardContent(this.cardList);
+        data = this.$xdUniHelper.cloneDeep(this.cardList)
       } else {
-        this.showList = this.changeList;
+        this.showList =  this.getPageCardContent(this.changeList);
+        data = this.$xdUniHelper.cloneDeep(this.changeList)
       }
+      this.$nextTick(()=>{
+        this.hasContent = data.length > this.pagesLimit;
+        this.offsetIndex = 1;
+      })
+
     },
     container(value) {
       this.init(value)
@@ -294,11 +296,15 @@ export default {
       isWx: true,
       cutIndex: 1,
       tabIndex: 1,
+      offsetIndex:0,//第几页
+      pagesLimit:20,//每页显示条数
+      cardSrcollLoading: false,//滚动获取数据中
+      hasContent:true, //是否有下一页
       isBack: null, //是否使用返回键
-      cardList: [],
-      showList: [],
-      changeList: [],
-      disableList: [],
+      cardList: [], //可用卡卡列表
+      showList: [], //当前显示卡列表
+      changeList: [], //可转化卡列表
+      disableList: [], //不可用卡列表
       inCallback: null, //内部跳转地址
       loadingCardList: true,
 
@@ -326,8 +332,7 @@ export default {
 
       dialogEvent: false,
       // is_show_change: false,
-      popup:
-        "https://img.zcool.cn/community/01784158abe781a801219c77e981ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
+      popup: "https://img.zcool.cn/community/01784158abe781a801219c77e981ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
     };
   },
   created() {
@@ -366,15 +371,17 @@ export default {
       this.confirmUrl = getContainerPropsValue(container,"content.confirm_url",{value: ""}).value;
       this.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
       this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
-      //样式
-      this.login_text_size = getContainerPropsValue(container, 'content.login_text_size', 28);
-      this.login_text_color = getContainerPropsValue(container, 'content.login_text_color', '#fff');
-      this.login_text_bg_color = getContainerPropsValue(container, 'content.login_text_bg_color', '#f90');
+
+      //登录样式
+      this.login_text_size = getContainerPropsValue(container, 'content.login_text_size', 26);
+      this.login_text_color = getContainerPropsValue(container, 'content.login_text_color', this.cardLayout==='2'? '#fff':'#333');
+      this.login_text_bg_color = getContainerPropsValue(container, 'content.login_text_bg_color', this.cardLayout === '2'? this.mainColor:'');
       this.login_text_radius = getContainerPropsValue(container, 'content.login_text_radius', '20');
 
+      //查看样式
       this.look_text_size = getContainerPropsValue(container, 'content.look_text_size', 24);
-      this.look_text_color = getContainerPropsValue(container, 'content.look_text_color', '#fff');
-      this.look_text_bg_color = getContainerPropsValue(container, 'content.look_text_bg_color', '#f90');
+      this.look_text_color = getContainerPropsValue(container, 'content.look_text_color', this.cardLayout==='2'? '#333':'#fff');
+      this.look_text_bg_color = getContainerPropsValue(container, 'content.look_text_bg_color', this.cardLayout === '2'? '' :this.mainColor);
       this.look_text_radius = getContainerPropsValue(container, 'content.look_text_radius', '20');
     },
 
@@ -564,25 +571,60 @@ export default {
               ),
             };
           });
-          this.cardList = res.list.filter((item) => {
+          this.cardList = res.list.filter((item,index) => {
             return item["is_valid"] === "Y";
+          }).map((item,index)=>{
+            item['index'] = index;
+            return item
           });
           this.disableList = res.list.filter((item) => {
             return item["is_valid"] === "N";
           });
           this.changeList = this.cardList.filter((item) => {
             return item["is_exchange"] === "Y";
-          });
-          this.showList = this.cardList;
+          })
+          this.showList = this.getPageCardContent(this.cardList);
+          if(this.hasContent) this.offsetIndex++;
           this.$xdHideLoading();
         })
         .catch(() => this.$xdHideLoading());
     },
 
+    getPageCardContent(orgData){
+      let newData = this.$xdUniHelper.cloneDeep(orgData);
+      return newData.slice(0,this.pagesLimit);
+    },
+
     onJfbShow(options) {
+      this.offsetIndex = 0;
+      this.hasContent = true;
+      this.tabIndex = 0;
       this.onJfbLoad(options);
     },
 
+    onJfbReachBottom(){
+      //加载在不处理,无下一页不处理，当前也为0不处理
+      if(this.cardSrcollLoading || !this.hasContent || this.offsetIndex === 0) return;
+      this.cardSrcollLoading = true;
+      this.$xdShowLoading({});
+      let data = [];
+      if(this.tabIndex === 1) data = this.$xdUniHelper.cloneDeep(this.cardList);
+      if(this.tabIndex === 2) data = this.$xdUniHelper.cloneDeep(this.changeList);
+      setTimeout(()=>{
+        this.$xdHideLoading();
+        let cardComputedList = data.slice(
+          this.offsetIndex*this.pagesLimit,
+          this.offsetIndex*this.pagesLimit + this.pagesLimit
+        );
+        if(cardComputedList.length < this.pagesLimit) {
+          this.hasContent = false;
+        }
+        this.showList = (this.showList||[]).concat(cardComputedList);
+        this.cardSrcollLoading = false;
+        this.offsetIndex++;
+      },500)
+    },
+
     onJfbUpdate(data) {
       this.getContent();
     },