jufubao-base 1.0.61-beta5 → 1.0.62

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -16,55 +16,31 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-card-detail-entry__body" v-if="info!==null">
-      <view
-        class="jfb-base-card-detail-entry__body-header"
-        :style="{
-          background: headerBg.color,
-          backgroundSize: '100%',
-        }"
-      >
-        <view
-          class="jfb-base-card-detail-entry__body-header-wrap"
-          :style="{
-            backgroundImage: `url(${headerBg.image})`,
-          }"
-        >
-          <view class="jfb-base-card-detail-entry__body-header-item">
-            <view>券名：</view>
-            <view>{{info.card_type_name}}</view>
-          </view>
-          <view
-            style="padding-bottom: 0px"
-            class="jfb-base-card-detail-entry__body-header-item"
-          >
-            <view>券号：</view>
-            <view>{{info.card_number}}</view>
-          </view>
-        </view>
-      </view>
-      <view
-        class="jfb-base-card-detail-entry__body-content"
-      >
-        <view
-          :class="
-            item.key === 'other_card_point'
-              ? 'jfb-base-card-detail-entry__body-content-special'
-              : 'jfb-base-card-detail-entry__body-content-item'
-          "
-          v-for="(item, index) in valueKey"
-          :key="index"
-        >
-        <view> {{ item.label }}： </view>
-          <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
-            {{ info[item.key] }}
-            <text>{{info.unit}}</text>
-          </view>
-          <view style="color: #333; font-weight: 500" v-else>
-            {{ info[item.key] }}
-            <text v-if="item.type === 'type'">券</text>
+      <view class="card-list" :style="{
+            background: headerBg['color'],
+            backgroundSize: '100%'
+          }">
+                <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>
+                <text>券号：</text>
+                <text>{{info.card_number}}</text>
+              </view>
+            </div>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{info.end_time}}</text>
+            </view>
+            <view class="card-list__yue">
+              <text>余额：</text>
+              <text>{{info.card_point}} {{ info.unit }}</text>
+            </view>
+            <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
+              <view><text>购买其他物品可抵：</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
+            </view>
           </view>
         </view>
-      </view>
       <view class="jfb-base-card-detail-entry__body-qrcode">
         <view>
           <view>
@@ -90,7 +66,7 @@
        >
       进入业务板块
       </view>
-      <view style="display:flex;align-content:center;justify-content:center">
+      <view style="display:flex;align-content:center;justify-content:flex-start">
         <view class="jfb-base-card-detail-entry__body-business-content">
         <view
         class="jfb-base-card-detail-entry__body-business-content-item"
@@ -106,25 +82,26 @@
     <view :style="{height: '100rpx'}"></view>
         <!-- 靠底支付 -->
         <view class="fixe_bottom" :style="prod_bottom">
-          <!-- <xd-button
-          size="small"
-          type="primary">
-          消费记录
-        </xd-button> -->
-          <xd-button
-          v-if="info.is_exchange==='Y'"
-          @click="handleToShift"
-          size="small"
-          type="primary">
-          券转换
-        </xd-button>
-          <xd-button
-          v-if="isShowUnbind"
-          @click="handleUnBindCard"
-          size="small"
-          type="primary">
-          解除绑定
-        </xd-button>
+          <view v-if="0">
+            <xd-button size="small" type="primary" width="100%">消费记录</xd-button>
+          </view>
+          <view v-if="info.is_exchange==='Y'">
+            <xd-button
+              width="100%"
+              @click="handleToShift"
+              size="small"
+              type="primary"
+            >券转换</xd-button>
+          </view>
+          <view v-if="isShowUnbind">
+            <xd-button
+              width="100%"
+              @click="handleUnBindCard"
+              size="small"
+              type="primary">
+              解除绑定
+            </xd-button>
+          </view>
         </view>
     </view>
   </view>
@@ -162,23 +139,6 @@ export default {
       userInfo: null, //用户信息（暂时不可用）
 
       info: null,
-      valueKey: [
-        {
-          label: "票券余额",
-          key: "card_point",
-          type: "price",
-        },
-        {
-          label: "购买其他物品可抵",
-          key: "other_card_point",
-          type: "price",
-        },
-        {
-          label: "有效期限",
-          key: "end_time",
-          type: "normal",
-        },
-      ],
       timeStr: "",
       timeer: null,
       date: 2, //时间底数
@@ -303,21 +263,11 @@ 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)
             })
-          }
-          if(res.other_card_point===0 || res.card_point_type === 1) {
-            this.valueKey.splice(1,1)
-          }
-          this.info = res;
-          if(!this.$configProject.isPreview) {
-            this.setInval(this.info.card_qrcode_expire);
-          }
-          this.show = false;
-          this.headerBg = this.getCardThemes(res.card_type_name);
-
+          } 
           //显示按钮
           if (res["is_show_qrcode_logo"] === "Y") {
             this.isBrandLogo = true;
@@ -325,6 +275,13 @@ export default {
 
           this.isShowUnbind =
             res["is_can_unbind"] === "Y" || res["is_can_unbind"] === undefined;
+          this.info = res;
+          if(!this.$configProject.isPreview) {
+            this.setInval(this.info.card_qrcode_expire);
+          }
+          this.show = false;
+          console.log(this.getCardThemes(res.card_type_name),'this.getCardThemes(res.card_type_name)');
+          this.headerBg = this.getCardThemes(res.card_type_name);
         })
         .catch((err) => {
           // this.$refs["pwPay"].clearPwd();
@@ -397,7 +354,7 @@ export default {
             if (this.$configProject.isPreview) {
               console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
             }
-            
+
             else {
               this.handleToApp(entry);
             }
@@ -420,7 +377,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) {
@@ -429,13 +386,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()}`
       }
@@ -463,7 +420,7 @@ export default {
     handleUnBindCard() {
       this.$xdConfirm({
         $vm: this,
-        content: "您确定要解除绑定卡券吗",
+        content: "您确定要解除绑定票券吗",
         title: "系统提示",
         width: "80%",
         isTitle: true,
@@ -483,7 +440,7 @@ export default {
             })
               .then((res) => {
                 this.$xdAlert({
-                  content: "解绑成功",
+                  content: "票券已解绑",
                   close: () => {
                     this.$xdUniHelper.redirectTo({
                       url: this.backUrl || this.settings.index,
@@ -610,65 +567,216 @@ export default {
       transform: translate(-50rpx, -50rpx);
     }
     padding: unit(26, rpx);
-    &-header {
-      border-radius: unit(16, rpx);
-      font-size: unit(40, rpx);
+    .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;
+
+    & > 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;
+    }
+
+  }
+
+  &__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;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
       color: #fff;
-      position: relative;
-      min-height: unit(260,rpx);
-
-      &-wrap {
-        width: unit(700, rpx);
-        border-radius: unit(16, rpx);
-        background-size: 100%;
-        min-height: unit(260,rpx);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+    }
+  }
+
+  &__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 {
+    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;
+    }
+  }
+
+  &__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;
       }
 
-      &-item {
+      & > view:nth-child(2) {
         display: flex;
         justify-content: flex-start;
-        align-content: center;
-        padding-bottom: unit(32, rpx);
-        padding-left: unit(40,rpx);
+        align-items: center;
+        flex-shrink: 0;
+        font-size: unit(20, rpx);
+        color: #999;
+      }
+    }
+
+    &-scroll {
+
+    }
+
+    &-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 {
-          flex-basis: unit(120,rpx);
+          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;
+          align-items: center;
           flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
         }
-      }
-    }
 
-    &-content {
-      background: #fff;
-      border-radius: unit(16, rpx);
-      padding: unit(38, rpx) 0;
-      margin-top: unit(24, rpx);
+        &:last-child {
+          margin-right: 0;
+        }
 
-      &-item {
-        display: flex;
-        color: #666;
-        justify-content: space-between;
-        align-content: center;
-        font-size: unit(28, rpx);
-        padding: unit(16, rpx) unit(48, rpx);
       }
 
-      &-special {
-        display: flex;
-        color: #666;
-        justify-content: space-between;
-        font-size: unit(24, rpx);
-        padding: unit(18, rpx) unit(24, rpx);
-        margin: 0 unit(24, rpx);
-        border-radius: unit(16, rpx);
-        background: #f9f9f9;
-        align-content: center;
-      }
+
     }
+  }
+
+  &-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;
@@ -695,12 +803,11 @@ export default {
         box-sizing: border-box;
         height: unit(200, rpx);
         width: 100%;
-        margin-top: unit(20, rpx);
 
         & > view {
           width: 100%;
           height: unit(200, rpx);
-          padding: unit(10, rpx);
+          padding: 0 unit(10, rpx) unit(10, rpx) unit(10, rpx);
           display: flex;
           justify-content: center;
           align-items: center;
@@ -749,7 +856,7 @@ export default {
       align-items: center;
       flex-flow: wrap;
       padding-left: unit(30, rpx);
-      
+
       & > view {
         width: unit(120, rpx);
         margin-right: unit(10, rpx);
@@ -758,25 +865,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;
@@ -785,7 +892,7 @@ export default {
           font-size: unit(20, rpx);
           color: #999;
         }
-        
+
         &:last-child {
           margin-right: 0;
         }
@@ -794,19 +901,27 @@ export default {
     }
 
     .fixe_bottom{
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: unit(100, rpx);
+      padding: 0 unit(40, rpx);
+      flex-flow: nowrap;
+      background: #FFF;
+      box-shadow: 0 0 unit(16, rpx) rgba(0,0,0,.05);
+      .flex_l{
         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,.05);
-        .flex_l{
-          display: flex;
-          align-items: center;
-          font-size: unit(32,rpx);
-        }
+        font-size: unit(32,rpx);
+      }
+
+      & > view {
+        flex: 1;
+        padding:0 unit(15, rpx);
+
       }
+
+    }
   }
 }
 </style>