jufubao-base 1.0.158 → 1.0.159-beta10

package/src/components/JfbBaseCardInfoEntry/JfbBaseCardInfoEntry.vue

@@ -10,18 +10,14 @@
       :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-base-card-info-entry__edit-icon" @click="delEdit"
-        >删除</view
-      >
+      <view class="jfb-base-card-info-entry__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
     <view class="jfb-base-card-info-entry__body" :style="{minHeight: layoutInfo.bodyMinHeightRpx + 'rpx'}">
       <view v-if="!qrcode && showForm">
         <view>
           <view class="jfb-base-card-info-entry__body-form">
-            <view class="jfb-base-card-info-entry__body-form-label"
-              >票券号码</view
-            >
+            <view class="jfb-base-card-info-entry__body-form-label">票券号码</view>
             <input
               type="number"
               max="32"
@@ -30,45 +26,56 @@
             />
           </view>
           <view class="jfb-base-card-info-entry__body-form">
-            <view class="jfb-base-card-info-entry__body-form-label"
-              >票券密码</view
-            >
+            <view class="jfb-base-card-info-entry__body-form-label">票券密码</view>
             <input
               max="18"
               :password="isPassword"
               v-model="card_password"
               :placeholder="card_pwd_placeholder"
             />
+            <!--#ifdef H5-->
             <xd-font-icon
-              @click="isPassword = !isPassword"
+              @click="handleIcon()"
               :icon="isPassword ? 'iconbiyan' : 'iconchakan'"
             ></xd-font-icon>
+            <!--#endif-->
+            <!--#ifdef MP-WEIXIN-->
+            <xd-font-icon
+              :width="72"
+              :height="72"
+              @click="handleIcon()"
+              :icon="isPassword ? 'iconbiyan' : 'iconchakan'"
+            ></xd-font-icon>
+            <!--#endif-->
           </view>
         </view>
         <view :style="{ height: '100rpx' }"></view>
         <view class="fixe_bottom" :style="prod_bottom">
-          <xd-button
-            type="primary"
-            width="360rpx"
-            @click="handleGetInfo"
-            >确认</xd-button
-          >
+          <view>
+            <xd-button
+              type="primary"
+              width="460rpx"
+              @click="handleGetInfo"
+            >确认</xd-button>
+          </view>
         </view>
       </view>
 
       <view v-if="showInfo && info !== null">
-        <view class="card-list" :style="{
+        <view
+          class="card-list"
+          :style="{
             background: headerBg['color'],
             backgroundSize: '100%'
           }">
-                <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
+          <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
             <view class="card-list__title"><view>{{info['card_type_name']}}</view></view>
-            <div class="card-list__content">
+            <view class="card-list__content">
               <view>
                 <text>券号：</text>
                 <text>{{info.card_number}}</text>
               </view>
-            </div>
+            </view>
             <view class="card-list__date">
               <text>有效期：</text>
               <text>{{info.end_time}}</text>
@@ -86,16 +93,8 @@
           v-if="info.site_entry_settings && info.site_entry_settings.length > 0"
           class="jfb-base-card-info-entry__body-business"
         >
-          <view class="jfb-base-card-info-entry__body-business-title">
-            支持业务板块
-          </view>
-          <view
-            style="
-              display: flex;
-              align-content: center;
-              justify-content: flex-start;
-            "
-          >
+          <view class="jfb-base-card-info-entry__body-business-title">支持业务板块</view>
+          <view style="display: flex;align-content: center;justify-content: flex-start;">
             <view class="jfb-base-card-info-entry__body-business-content">
               <view
                 class="jfb-base-card-info-entry__body-business-content-item"
@@ -110,12 +109,13 @@
         </view>
         <view :style="{ height: '100rpx' }"></view>
         <view class="fixe_bottom" :style="prod_bottom">
-          <xd-button
-            type="primary"
-            width="360rpx"
-            @click="handleToLink"
-            >立即绑定</xd-button
-          >
+          <view>
+            <xd-button
+              type="primary"
+              width="460rpx"
+              @click="handleToLink"
+            >立即绑定</xd-button>
+          </view>
         </view>
       </view>
     </view>
@@ -142,18 +142,18 @@ export default {
     XdButton,
   },
   mixins: [
-      componentsMixins, extsMixins, JfbBaseCardInfoEntryMixin,colorCardMixins
+    componentsMixins, extsMixins, JfbBaseCardInfoEntryMixin,colorCardMixins
   ],
   data() {
     return {
       info: null,
-      card_number: "", //卡号
-      card_password: "", //卡密码
+      card_number: "171003500000580", //卡号
+      card_password: "70420410", //卡密码
       isPassword: true,
       card_num_placeholder: "",
       card_pwd_placeholder: "",
-
       showInfo: false,
+      entryGroupId: '',//加载入口数据组别
 
       qrcode: "", //二维码
       showForm: true,
@@ -168,25 +168,32 @@ export default {
     };
   },
   watch: {
-    container(value) {
-      this.init(value);
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
     },
   },
   computed: {
     prod_bottom() {
       return this.fixedStyle({ height: 0, zIndex: 111 });
     },
+
     isShowBalance(){
-      if(this.info.is_expired === "Y"){
+      if(this.info && this.info.is_expired === "Y"){
         return this.is_show_balance === "Y";
       }
       return true;
-    }
+    },
+  },
+  created() {
+    this.init(this.container);
   },
-  created() {},
+
   methods: {
+    handleIcon(){
+      this.isPassword = !this.isPassword
+    },
     toShowCouponDialog(){
-      // jfbRootFnExec(this, 'onCustomEvent')("@showBaseConDialog", {user_card_number: "10001000001133"})
       if(this.info){
         jfbRootFnExec(this, 'onCustomEvent')("@showBaseConDialog", {user_card_number: this.info.card_number})
       }
@@ -194,16 +201,16 @@ export default {
     handleToLink() {
       if(this.info.card_point===0) {
         this.$xdConfirm({
-        $vm: this,
-        content: "票券余额为0，是否确认绑定?",
-        width: "80%",
-        success: (res) => {
-          if (res.confirm) {
-           this.handleToBind()
-          }
-        },
-      });
-      return
+          styles: this.styles,
+          content: "票券余额为0，是否确认绑定?",
+          width: "80%",
+          success: (res) => {
+            if (res.confirm) {
+              this.handleToBind()
+            }
+          },
+        });
+        return
       }
       this.handleToBind()
     },
@@ -238,7 +245,6 @@ export default {
       }
     },
     handlerAfterBindCard(res){
-
       if(res.pop_info && res.pop_info.pop_code === '1001'){
         this.handleBindConfirm();
         return;
@@ -269,7 +275,7 @@ export default {
     //卡券已被自己绑定时的弹框
     handleBindConfirm(){
       this.$xdConfirm({
-        $vm: this,
+        styles: this.styles,
         width: '90%',
         content: '您已绑定该票券，无需再次绑定',
         confirmText: '我的票券',
@@ -286,28 +292,24 @@ export default {
         }
       })
     },
-    init() {
-      this.backUrl = getContainerPropsValue(
-        this.container,
-        "content.back_url",
-        { value: "/pages/card/card" }
-      ).value;
-      this.card_num_placeholder = getContainerPropsValue(
-        this.container,
-        "content.card_num_placeholder",
-        "请输入券号(电子券除外)"
-      );
-      this.card_pwd_placeholder = getContainerPropsValue(
-        this.container,
-        "content.card_pwd_placeholder",
-        "请输入密码"
-      );
-      this.my_card_url = getContainerPropsValue(this.container, 'content.my_card_url', { value: "" }).value;
-      this.is_show_balance = getContainerPropsValue(this.container, 'content.is_show_balance', "N");
+    init(container) {
+      this.backUrl = getContainerPropsValue(container, "content.back_url", { value: "/pages/card/card" }).value;
+      this.card_num_placeholder = getContainerPropsValue(container, "content.card_num_placeholder", "请输入券号(电子券除外)");
+      this.card_pwd_placeholder = getContainerPropsValue(container, "content.card_pwd_placeholder", "请输入密码");
+      this.my_card_url = getContainerPropsValue(container, 'content.my_card_url', { value: "" }).value;
+      this.is_show_balance = getContainerPropsValue(container, 'content.is_show_balance', "N");
+      //'wechat_mini_program|default'
+      this.entryGroupId = getContainerPropsValue(container,"content.entryGroupId","default");
     },
     onJfbLoad(options) {
-      this.init();
       this.qrcode = options.qrcode;
+
+      //#ifdef MP-WEIXIN
+      if(options.qrcode) {
+        this.qrcode = decodeURIComponent(options.qrcode);
+      }
+      //#endif
+
       if(options.inCallback) {
         this.inCallbackUrlOrg = options.inCallback;
       }
@@ -316,12 +318,12 @@ export default {
           vm: this,
           data: {
             card_qrcode: decodeURIComponent(this.qrcode),
-            is_show_entry_settings: "Y"
+            is_show_entry_settings: "Y",
+            group_id: this.entryGroupId
           },
         })
           .then((res) => {
-            res.is_exchange_name =
-              res.is_exchange === "Y" ? "可转换" : "不可转换";
+            res.is_exchange_name = res.is_exchange === "Y" ? "可转换" : "不可转换";
             let temp = {};
             Object.keys(res).map((key) => {
               if (key === "card_point" || key === "other_card_point") {
@@ -335,12 +337,19 @@ export default {
                 temp[key] = res[key];
               }
             });
-            if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
+
+            //过滤入口配置
+            if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
+              res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+            }
+
+
+            if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
               temp.site_entry_settings = res.site_entry_settings.filter(item=>{
-              item['image_url'] = getServiceUrl(item['image_url'])
-              return res.business_codes.includes(item.business_code)
-            })
-          }
+                item['image_url'] = getServiceUrl(item['image_url'])
+                return res.business_codes.includes(item.business_code)
+              })
+            }
 
             this.headerBg = this.getCardThemes(res.card_type_name);
             this.showInfo = true;
@@ -386,10 +395,7 @@ export default {
         .catch();
     },
     isEmpty(str) {
-      if (str === null || str === "") {
-        return true;
-      }
-      return false;
+      return str === null || str === "";
     },
     handleGetInfo() {
       if (this.isEmpty(this.card_password)) {
@@ -426,6 +432,7 @@ export default {
   &__body {
     color: #333;
     padding: unit(26, rpx);
+
     &-form {
       display: flex;
       align-items: center;
@@ -442,6 +449,14 @@ export default {
         text-align: center;
       }
 
+      & .mp {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 72rpx;
+        height: 72rpx
+      }
+
       input {
         font-size: unit(24, rpx);
       }
@@ -470,215 +485,215 @@ export default {
       transform: translate(-50rpx, -50rpx);
     }
     .card-list {
-  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;
+      overflow: hidden;
+      border-radius: unit(16, rpx);
+      margin-bottom: unit(30, rpx);
 
-    & > view {
-      padding: 0 unit(80, rpx);
-      font-size: unit(24, rpx);
-      line-height: unit(56, rpx);
-      background: rgba(102, 102, 102, 0.4);
-      color: #fff;
-      border-radius: 0 0 unit(16, rpx) 0;
-    }
+      &:last-child {
+        margin-bottom: 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;
-    }
+      &__title {
+        height: unit(56, rpx);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
 
-    & > 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;
-    }
-  }
+        & > view {
+          padding: 0 unit(80, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(56, rpx);
+          background: rgba(102, 102, 102, 0.4);
+          color: #fff;
+          border-radius: 0 0 unit(16, rpx) 0;
+        }
 
-  &__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;
+      &__content {
+        padding: unit(10, rpx) unit(40, rpx) 0;
+        height: unit(86, rpx);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-    & > text:nth-child(2) {
-      font-weight: 700;
-    }
-  }
+        & > view:first-child {
+          font-size: unit(36, rpx);
+          line-height: unit(86, rpx);
+          color: #fff;
+          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;
-    }
+        & > 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;
 
-  &__nodata {
-    padding: unit(20, rpx) unit(40, rpx) 0;
-    margin-top: unit(0, rpx);
-    color: #fff;
-    font-size: unit(28, rpx);
-  }
+        & > text:nth-child(2) {
+          font-weight: 700;
+        }
+      }
 
-  &__entry {
-    padding: unit(20, rpx) unit(40, rpx) 0;
-    & > view {
-      line-height: unit(64, rpx);
-      text-align: center;
-      font-size: unit(26, rpx);
-      border-radius: unit(32, 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;
-    }
-  }
+      &__other {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        margin-top: unit(0, rpx);
 
-  &__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);
+        & > 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;
+        }
 
-    &-title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
 
+      }
 
-      & > view:first-child {
+      &__nodata {
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        margin-top: unit(0, rpx);
+        color: #fff;
         font-size: unit(28, rpx);
-        font-weight: 500;
-        flex: 1;
       }
 
-      & > view:nth-child(2) {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-shrink: 0;
-        font-size: unit(20, rpx);
-        color: #999;
+      &__entry {
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        & > view {
+          line-height: unit(64, rpx);
+          text-align: center;
+          font-size: unit(26, rpx);
+          border-radius: unit(32, 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;
+        }
       }
-    }
 
-    &-scroll {
+      &__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;
 
-    &-item {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-flow: nowrap;
-      margin-left: unit(-14, rpx);
-      padding-top: unit(20, rpx);
 
-      & > view {
-        width: unit(120, rpx);
-        margin-right: unit(10, rpx);
-        flex-shrink: 0;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-
-        & > view:first-child {
-          width: unit(76, rpx);
-          height: unit(76, rpx);
-          overflow: hidden;
+          & > view:first-child {
+            font-size: unit(28, rpx);
+            font-weight: 500;
+            flex: 1;
+          }
 
-          & > image {
-            height: 100%;
-            width: 100%;
+          & > view:nth-child(2) {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex-shrink: 0;
+            font-size: unit(20, rpx);
+            color: #999;
           }
         }
 
-        & > view:nth-child(2) {
-          margin-top: unit(10, rpx);
-          font-size: unit(24, rpx);
-          line-height: unit(36, rpx);
-          margin-bottom: unit(10, rpx);
+        &-scroll {
+
         }
 
-        & > view:nth-child(3) {
+        &-item {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          flex-shrink: 0;
-          font-size: unit(20, rpx);
-          color: #999;
-        }
+          flex-flow: nowrap;
+          margin-left: unit(-14, rpx);
+          padding-top: unit(20, rpx);
 
-        &:last-child {
-          margin-right: 0;
-        }
+          & > view {
+            width: unit(120, rpx);
+            margin-right: unit(10, rpx);
+            flex-shrink: 0;
+            display: flex;
+            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);
+            }
 
-  &-warp {
-    width: unit(700, rpx);
-    // min-height: unit(290, rpx);
-    position: relative;
-    border-radius: unit(16, rpx);
-    background-size: 100%;
-    padding-bottom: unit(20, rpx);
-  }
-}
+            & > view:nth-child(3) {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              flex-shrink: 0;
+              font-size: unit(20, rpx);
+              color: #999;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+          }
+
+
+        }
+      }
+
+      &-warp {
+        width: unit(700, rpx);
+        // min-height: unit(290, rpx);
+        position: relative;
+        border-radius: unit(16, rpx);
+        background-size: 100%;
+        padding-bottom: unit(20, rpx);
+      }
+    }
 
     &-qrcode {
       text-align: center;
@@ -784,6 +799,7 @@ export default {
             font-size: unit(24, rpx);
             line-height: unit(36, rpx);
             margin-bottom: unit(10, rpx);
+            .uni-cut(1,36);
           }
 
           & > view:nth-child(3) {
@@ -803,13 +819,21 @@ export default {
     }
 
     .fixe_bottom {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
       height: unit(100, rpx);
       padding: 0 unit(40, rpx);
       background: #fff;
       box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > view {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
       .flex_l {
         display: flex;
         align-items: center;