jufubao-base 1.0.56-beta4 → 1.0.56-beta5

package/package.json

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

package/src/components/JfbBaseCardEntry/Api.js

@@ -1,18 +1,12 @@
 'use strict';
 
 /**
- * @description API模型
- * 建议：Ffff=>模块  Xxxx=>自定义名字
- * 获取单记录(getByIdFfffXxxx)
- * 获取列表记录(getByListFfffXxxx)
- * 添加列表记录(addFfffXxxxx)
- * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
- * 更新列表记录(updateFfffXxxxx)
+ * @description 卡券登陆
  * @type {*[]}
  */
 module.exports = [
   {
-    mapFnName: 'getListCardBind',
+    mapFnName: 'getListEntryCardBind',
     isRule: false,
     title: '获得绑定卡',
     prefix: 'list',
@@ -21,7 +15,7 @@ module.exports = [
     disabled: true,
   },
   {
-    mapFnName: 'loginCardBind',
+    mapFnName: 'loginEntryCardBind',
     isRule: false,
     title: '登录卡',
     prefix: 'login',

package/src/components/JfbBaseCardEntry/Attr.js

@@ -80,17 +80,6 @@ export default {
       },
       inline: false,
     },
-    {
-      label: '综合福利入口页:',
-      ele: 'xd-select-pages-path',
-      valueKey: 'allEntryPath',
-      placeholder: '请选择综合福利入口页',
-      value: null,
-      setting: {
-        router: XdBus.getParentApi('getPagesTree'),
-      },
-      inline: false,
-    },
     {
       label: '提示内容:',
       ele: 'xd-site-news',
@@ -302,10 +291,7 @@ export default {
         }
       },
       inline: false,
-      notice: '',
-      rules: [
-        {required: true, message: '请配置温馨提示内容', trigger: 'change'},
-      ],
+      notice: '请配置温馨提示内容，未配置的情况将不显示此模块',
     },
   ],
 };

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -28,12 +28,13 @@
               color: cutIndex === 1 ? '#fff' : mainColor,
             }"
           >
+            <view>使用扫码绑定</view>
             <xd-font-icon
-              style="margin-bottom: 15rpx"
-              size="80"
+              :style="{marginLeft: '15rpx'}"
+              size="50"
               icon="iconsaoma"
             ></xd-font-icon>
-            <view>使用扫码绑定</view>
+            
           </view>
           <view
             class="jfb-base-card-entry__body-cut-item"
@@ -44,12 +45,13 @@
               color: cutIndex === 2 ? '#fff' : mainColor,
             }"
           >
+            <view>券号密码绑定</view>
             <xd-font-icon
-              style="margin-bottom: 15rpx"
-              size="80"
+              :style="{marginLeft: '15rpx'}"
+              size="50"
               icon="iconyuechi"
             ></xd-font-icon>
-            <view>券号密码绑定</view>
+         
           </view>
         </template>
         <template v-else>
@@ -67,7 +69,6 @@
           </view>
         </template>
       </view>
-      <view class="jfb-base-card-entry__body-line"></view>
       <view
         class="jfb-base-card-entry__body-notice"
         :style="{ background: noticeBackgroundColor }"
@@ -127,72 +128,53 @@
         v-if="tabIndex === 2 || tabIndex === 1"
         class="jfb-base-card-entry__body-card"
       >
-        <template v-if="cardLayout === '1'">
-          <view
-            v-for="(item, index) in showList"
-            :key="index"
-            @click="handleBindLogin(item)"
-            class="jfb-base-card-entry__body-card-item"
-          >
-            <view class="jfb-base-card-entry__body-card-item-left">
-              <xd-font-icon
-                size="100"
-                :color="mainColor"
-                icon="iconyouhuiquan1-011"
-              ></xd-font-icon>
-              <view>{{ tabIndex === 1 ? login_name : "转换" }}</view>
-            </view>
-            <view class="jfb-base-card-entry__body-card-item-right">
-              <view class="jfb-base-card-entry__body-card-item-right-top">
-                <view>
-                  <xd-font-icon
-                    icon="iconkaquan"
-                    size="38"
-                    :style="{marginRight: '18rpx'}"
-                    :color="mainColor"
-                  ></xd-font-icon>
-                  <view>{{ item.card_type_name }}</view>
-                </view>
+        <view
+          v-for="(item,index) in cardList"
+          class="card-list"
+          :key="item.card_number"
+          :style="{
+            backgroundImage: item['theme']['color'],
+          }"
+        >
+          <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+            <view class="card-list__title"><view>{{item['card_type_name']}}</view></view>
+            <div class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{item.card_number}}</text>
+              </view>
+              <view @click.stop="toDetail(item)">
                 <view>
-                  <view>{{ item.card_number }}</view>
-                  <view>有效期至：{{ item.end_time }}</view>
+                  <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
                 </view>
+                <view>点击查看</view>
               </view>
-              <view class="jfb-base-card-entry__body-card-item-right-bottom">
-                <view class="jfb-base-card-entry__body-card-item-right-bottom-info">
-                  <view
-                    class="jfb-base-card-entry__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-entry__body-card-item-right-bottom-info-deduction"
-                  >
-                    购买其他物品可抵：{{ item.other_card_point }}
-                  </view>
-                </view>
-                <view
-                  @click.stop="toDetail(item)"
-                  :style="{ background: mainColor }"
-                  >查看</view
-                >
+            </div>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{item.end_time}}</text>
+            </view>
+            <view class="card-list__yue">
+              <text>余额：</text>
+              <text>{{item.card_point}}</text>
+            </view>
+            <view class="card-list__other" v-if="item.other_card_point && item.card_point_type !== 1">
+              <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}}</text></view>
+            </view>
+            <view class="card-list__entry" v-if="item.entry.length === 1">
+              <view :style="{color: mainColor}">{{login_name}}</view>
+            </view>
+            <view class="card-list__nodata" v-if="item.entry.length === 0">暂无支持服务列表</view>
+            <view class="card-list__entrys" v-if="item.entry.length > 1">
+              <view>
+                <view></view>
+                <view></view>
               </view>
+              <div></div>
             </view>
           </view>
-        </template>
-        <template v-else>
-          <xd-card-v2
-            :login-name="login_name"
-            v-for="(item, index) in showList"
-            :mainColor="mainColor"
-            :key="index"
-            :cardInfo="item"
-            :tabIndex="tabIndex"
-            @toDetail="toDetail(item)"
-            @bindLogin="handleBindLogin(item)">
-          </xd-card-v2>
-        </template>
+         
+        </view>
       </view>
       <view v-if="showDisabled==='Y'" @click="handleToDisabled" class="jfb-base-card-entry__body-disabled">
         已失效票券>>>
@@ -284,16 +266,26 @@ export default {
       bindUrl: "",
       detailUrl: "",
       confirmUrl: "",
-      allEntryPath: "", //综合福利入口页
+      //allEntryPath: "", //综合福利入口页
       disabledUrl: "",
       cardLayout: "1",  //票券布局
-
       showDisabled: 'Y',
-
+      
+      cardThemesColor: [
+        'radial-gradient(50% 50%, rgba(255, 151, 128, 1) 0%, rgba(255, 64, 61, 1) 100%)',
+        'radial-gradient(50% 50%, rgba(247, 198, 35, 1) 0%, rgba(255, 81, 0, 1) 99.91%)',
+        'radial-gradient(50% 50%, rgba(0, 207, 193, 1) 0%, rgba(0, 117, 108, 1) 99.91%)',
+        'radial-gradient(50% 50%, rgba(255, 148, 77, 1) 0%, rgba(240, 92, 0, 1) 100%)',
+        'radial-gradient(50% 50%, rgba(252, 126, 49, 1) 0%, rgba(255, 143, 67, 1) 100%)'
+      ],
+      cardThemesImage: [
+        '//img.jufubao.cn/component/card/vip.png',
+        //'//img.jufubao.cn/component/card/vip2.png'
+      ],
+
+      //活动
       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() {
@@ -320,6 +312,49 @@ export default {
 
   },
   methods: {
+    stringToNumber(str) {
+      let result = 0;
+      let len = str.length;
+      for (let i = 0; i < len; i++) {
+        result = result + str.charCodeAt(i) + i;
+      }
+      return result;
+    },
+    getCardThemes(name){
+      let colorLen = this.cardThemesColor.length;
+      let imgLen = this.cardThemesImage.length;
+      let colorIndex = this.stringToNumber(name)% colorLen;
+      let imgIndex = this.stringToNumber(name) % imgLen;
+      return {
+        color: this.cardThemesColor[colorIndex],
+        image: this.cardThemesImage[imgIndex],
+      }
+    },
+    
+    getEntry(codes=[] , allEntry=[]){
+      //无支持业务线或者未配置业务入口
+      if(codes.length ===0 || allEntry.length === 0) return [];
+      
+      let support = [];
+      codes.map(bus=>{
+        allEntry.map(it=>{
+          if(bus === it['business_code']){
+            support.push(it);
+          }
+        })
+      });
+      return support
+    },
+    
+    getCardGroupItem(list, allEntry){
+      list.map(item=>{
+        //设置卡片样式
+        item['theme'] = this.getCardThemes(item['card_type_name']);
+        item['entry'] = this.getEntry(item['business_codes'], allEntry)
+      });
+      return list
+    },
+    
     init(container){
       //设置
       this.cardLayout = getContainerPropsValue(container,"content.cardLayout","1");
@@ -328,7 +363,7 @@ export default {
       this.bindUrl = getContainerPropsValue(container,"content.bind_url",{value: ""}).value;
       this.detailUrl = getContainerPropsValue(container,"content.detail_url",{value: ""}).value;
       this.confirmUrl = getContainerPropsValue(container,"content.confirm_url",{value: ""}).value;
-      this.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
+      //this.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
       this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
     },
     handleToLink(path) {
@@ -489,12 +524,12 @@ export default {
     },
 
     getCardList(options) {
-      let params = {is_all: 'Y'};
+      let params = {is_all: 'Y', is_show_entry_settings: 'Y'};
       if(options['jfb_business_code']) {
         params['card_business_code'] = options['jfb_business_code'];
       }
       this.$xdShowLoading({});
-      jfbRootExec("getListCardBind", {
+      jfbRootExec("getListEntryCardBind", {
         vm: this,
         data: params
       })
@@ -513,9 +548,9 @@ export default {
               ),
             };
           });
-          this.cardList = res.list.filter((item) => {
+          this.cardList = this.getCardGroupItem(res.list.filter((item) => {
             return item["is_valid"] === "Y";
-          });
+          }), res['site_entry_settings']);
           this.disableList = res.list.filter((item) => {
             return item["is_valid"] === "N";
           });
@@ -551,7 +586,7 @@ export default {
   box-sizing: border-box;
 
   &__body {
-    padding: unit(55, rpx) unit(35, rpx);
+    padding: unit(40, rpx) unit(26, rpx);
     color: #333;
 
     &-dialog {
@@ -592,43 +627,25 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      
 
       &-item {
         border: unit(6, rpx) solid;
         font-size: unit(36, rpx);
         color: #fe7a63ff;
         border-radius: unit(16, rpx);
-        width: unit(308, rpx);
-        height: unit(182, rpx);
+        width: unit(320, rpx);
+        height: unit(94, rpx);
         display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
-
-        &.one {
-          width: 100%;
-          flex-direction: row;
-          height: unit(100, rpx);
-          align-items: center;
-          justify-content: center;
-
-          & > view {
-            font-size: unit(36, rpx);
-            margin-left: unit(10, rpx);
-          }
-        }
+        box-sizing: border-box;
+        
       }
     }
 
-    &-line {
-      width: 120%;
-      height: unit(4, rpx);
-      background: #eee;
-      margin: unit(60, rpx) unit(-35, rpx) 0 unit(-35, rpx);
-    }
-
     &-notice {
-      margin: 0 unit(-35, rpx) 0 unit(-35, rpx);
+      margin: unit(40, rpx) unit(-35, rpx) 0 unit(-35, rpx);
       padding: unit(22, rpx) unit(35, rpx);
       line-height: unit(70, rpx);
     }
@@ -656,87 +673,136 @@ export default {
       margin-bottom: unit(46, rpx);
     }
 
-    &-card {
-      &-item {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        border: unit(2, rpx) solid #eeeeee;
-        border-radius: unit(20, rpx);
-        margin-bottom: unit(30, rpx);
-        background: #fff;
-
-        &-left {
-          width: unit(200, rpx);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          font-size: unit(24, rpx);
-        }
-
-        &-right {
-          flex: 1;
-          border-left: unit(2, rpx) solid #eeeeeeff;
-
-          &-top {
-            border-bottom: unit(2, rpx) solid #eeeeeeff;
-            padding: unit(30, rpx) unit(40, rpx);
-
-            & > view:nth-child(1) {
-              display: flex;
-              font-size: unit(28, rpx);
-              margin-bottom: unit(18, rpx);
-            }
-
-            & > view:nth-child(2) {
-              font-size: unit(24, rpx);
-              color: #666;
-
-              & > view:nth-child(1) {
-                margin-right: unit(30, rpx);
-              }
-            }
-          }
-
-          &-bottom {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: unit(20, rpx) unit(40, rpx);
-
-            &-info {
-              &-residue {
-                font-size: unit(24, rpx);
-                margin-bottom: unit(8, rpx);
-              }
-
-              &-deduction {
-                font-size: unit(24, rpx);
-                color: #666;
-              }
-            }
-
-            & > view:nth-child(2) {
-              width: unit(80, rpx);
-              height: unit(40, rpx);
-              border-radius: unit(40, rpx);
-              font-size: unit(22, rpx);
-              color: #fff;
-              text-align: center;
-              line-height: unit(40, rpx);
-              padding: unit(5, rpx) unit(9, rpx);
-            }
-          }
-        }
-      }
-    }
-
     &-disabled {
       font-size: unit(28, rpx);
       color: #b8b7be;
       margin-bottom: unit(30, rpx);
+      padding-top: unit(30, rpx);
+    }
+  }
+}
+
+.card-list {
+  overflow: hidden;
+  border-radius: unit(16, rpx);
+  background-size: 100%;
+  
+  
+  &__title {
+    height: unit(46, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    
+    & > view {
+      padding: 0 unit(80, rpx);
+      font-size: unit(24, rpx);
+      line-height: unit(46, rpx);
+      background: rgba(102, 102, 102, 0.4);
+      color: #fff;
+      border-radius: 0 0 unit(16, rpx) 0;
+    }
+    
+  }
+  
+  &__content {
+    padding: unit(20, 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;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
+      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);
+      height: unit(48, rpx);
+      line-height: unit(48, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: 400;
+      font-size: unit(24, rpx);
+      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 {
+    position: absolute;
+    bottom: unit(28, rpx);
+    left: unit(40, rpx);
+    right: unit(40, rpx);
+    height: unit(64, rpx);
+    
+    & > view {
+      line-height: unit(64, rpx);
+      text-align: center;
+      font-size: unit(26, rpx);
+      border-radius: unit(8, rpx);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+      font-weight: 500;
+    }
+  }
+  
+  & > view {
+    width: unit(700, rpx);
+    min-height: unit(410, rpx);
+    position: relative;
+    border-radius: unit(16, rpx);
+    background-size: 100%;
+  }
 }
 </style>

package/src/components/JfbBaseCardEntry/Mock.js

@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = {
-  getListCardBind: {
+  getListEntryCardBind: {
     "is_show_invalid_card_entrance": "Y",
     "list": [{
       "card_number": "101001000005195",
@@ -105,7 +105,7 @@ module.exports = {
       "is_exchange": "N"
     }], "request_id": "dd73b058e5de1e90"
   },
-  loginCardBind: {
+  loginEntryCardBind: {
     "card_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhM2U4YjQ5OWEwNzUwN2EyIiwiaWF0IjoxNjc0OTYzODE3LjY2OTM1MywiZXhwIjoxNjc1MDIwNTc3LjY2OTM1MywiY2FyZF9udW1iZXIiOiIxMDEwMDEwMDAwMDUxOTUiLCJjYXJkX3R5cGVfbmFtZSI6IjZJR2E1NmFQNWE2ZDU2YVA1WTJoNXJXTDZLK1Y2SnVMNTdPViIsInByaWNlIjoxMDAsIm9ubGluZV9wcmljZSI6MTAwLCJ1c2Vfc2NlbmNlIjozLCJidXNpbmVzc19jb2RlcyI6IjAsMSwyLDMsNCJ9.LsoBJq4pC_gSc1jZRwDhD2rAfOf1DMCy29VHomGiqYE",
     "card_expire_in": 56760,
     "request_id": "8fde2506c426a55d"