jufubao-base 1.0.56-beta2005 → 1.0.56-beta2007

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntry.vue

@@ -21,27 +21,121 @@
       style="position: relative"
       v-if="info !== null"
     >
-      <view>
+    <view
+        class="jfb-base-card-shift-entry__body-header"
+        :style="{
+          background: headerBg.color,
+          backgroundSize: '100%',
+        }"
+      >
         <view
-          class="jfb-base-card-shift-entry__body-info"
+          class="jfb-base-card-shift-entry__body-header-wrap"
+          :style="{
+            backgroundImage: `url(${headerBg.image})`,
+          }"
+        >
+        <view class="jfb-base-card-shift-entry__body-header__title">
+          <view>
+            <xd-font-icon
+            size="40"
+            color="#fff"
+            icon="iconzhuanhuanshitu"
+            style="margin-right:10rpx"
+          ></xd-font-icon>
+            {{info.card_type_name}}
+          </view>
+        </view>
+          <view class="jfb-base-card-shift-entry__body-header-item">
+            <view>券名：</view>
+            <view>{{info.card_type_name}}</view>
+          </view>
+          <view
+            style="padding-bottom: 0px"
+            class="jfb-base-card-shift-entry__body-header-item"
+          >
+            <view>券号：</view>
+            <view>{{info.card_number}}</view>
+          </view>
+        </view>
+      </view>
+      <!-- 转换之前 -->
+      <view
+        class="jfb-base-card-shift-entry__body-content"
+      >
+        <view
+          :class="
+            item.key === 'other_card_point'
+              ? 'jfb-base-card-shift-entry__body-content-special'
+              : 'jfb-base-card-shift-entry__body-content-item'
+          "
           v-for="(item, index) in valueKey"
           :key="index"
         >
-          <view class="jfb-base-card-shift-entry__body-info-label">{{item.label }}</view>
-          <view class="jfb-base-card-shift-entry__body-info-value">{{info[item.key]}}</view>
-        </view>
-        <view class="jfb-base-card-shift-entry__body-tips" v-if="notice">
-          <xd-content-xss :html="notice"></xd-content-xss>
+          <view> {{ item.label }}： </view>
+          <xd-unit v-if="item.type === 'price'&&info.unit==='点'" fontSize="28" :price="info[item.key]">
+          </xd-unit>
+          <view :style="{color:mainColor,fontWeight:500}" v-else-if="item.type === 'price'&&info.unit==='次'">
+            {{ 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>
         </view>
       </view>
-      <view :style="{height:bottomHeight+100+'rpx'}"></view>
-      <view class="jfb-base-card-shift-entry__body-footer" :style="prod_bottom">
-        <view class="jfb-base-card-shift-entry__body-agree">
-          <xd-radio size="small" v-model="isCheck"></xd-radio>
-          <view>我已经阅读和同意积分转换规则</view>
+      <!-- 转换剩余 -->
+      <view
+        class="jfb-base-card-shift-entry__body-content"
+        :style="{background:changeBg}"
+      >
+      <view class="jfb-base-card-shift-entry__body-content-title">
+        <xd-font-icon
+            size="32"
+            :color="mainColor"
+            icon="iconrepository-xialaxuanxiangdown"
+          ></xd-font-icon>
+          <view>转换后预估票券额度</view>
+      </view>
+        <view
+          :class="
+            item.key === 'other_card_point'
+              ? 'jfb-base-card-shift-entry__body-content-special'
+              : 'jfb-base-card-shift-entry__body-content-item'
+          "
+          v-for="(item, index) in changeValueKey"
+          :key="index"
+        >
+          <view> {{ item.label }}： </view>
+          <xd-unit v-if="item.type === 'price'&&info.unit==='点'" fontSize="28" :price="info[item.key]">
+          </xd-unit>
+          <view :style="{color:mainColor,fontWeight:500}" v-else-if="item.type === 'price'&&info.unit==='次'">
+            {{ 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>
         </view>
-        <xd-button type="primary" width="360rpx" @click="handleChange">立即转换</xd-button>
       </view>
+      <!-- 注意事项 -->
+      <view class="jfb-base-card-shift-entry__body-tips">
+        <view style="text-align:center;padding-bottom:24rpx;color:#333;font-weight:500">注意事项</view>
+          <xd-content-xss :html="notice"></xd-content-xss>
+      </view>
+      <view :style="{height: '100rpx'}"></view>
+        <!-- 靠底支付 -->
+        <view class="fixe_bottom" :style="prod_bottom">
+          <xd-button 
+          @click="handleChange"
+          width="500rpx"
+          radius="8rpx" 
+          size="small" 
+          type="primary">
+          转换
+        </xd-button>
+        </view>
       <xd-dailog
         class="dialog"
         title=""
@@ -49,19 +143,24 @@
         :showClose="false"
         :confirm="false"
         :cancel="false"
+        :radius="20"
       >
         <view class="jfb-base-card-shift-entry__body-success">
-          <xd-font-icon
-            size="100"
-            color="#52C41A"
+          <view class="jfb-base-card-shift-entry__body-success-title">
+            <xd-font-icon
+            size="48"
+            :color="mainColor"
             icon="icondui-01"
           ></xd-font-icon>
-          <view class="jfb-base-card-shift-entry__body-success-title">转换成功</view>
+          <text :style="{color:mainColor,marginLeft:'20rpx'}">转换成功</text>
+          </view>
           <view class="jfb-base-card-shift-entry__body-success-content">
-            您已成功将 {{ card_number }} 转换为
-            {{ changeNumber }}已自动帮您绑定成功，可在卡列表查询
+            已成功将  <text style="color:#333;padding: 0 16rpx">{{ card_number }}</text>  转换成为 
+            <text style="color:#333;padding: 0 16rpx">{{ changeNumber }}</text>可在券包中查看
           </view>
-          <xd-button type="primarys" width="360rpx" @click="handleToLink">返回列表</xd-button>
+          <xd-button type="primarys" width="360rpx" @click="handleToLink"
+            >返回列表</xd-button
+          >
         </view>
       </xd-dailog>
     </view>
@@ -76,9 +175,11 @@ import XdDailog from "@/components/XdDailog/XdDailog";
 import { jfbRootExec } from "@/utils/xd.event";
 import JfbBaseCardShifEntrytMixin from "./JfbBaseCardShiftEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
 import extsMixins from "@/mixins/extsMixins";
 import { getContainerPropsValue } from "@/utils/xd.base";
 import XdContentXss from '@/components/XdContentXss/XdContentXss'
+const Color = require("color");
 
 export default {
   name: "JfbBaseCardShiftEntry",
@@ -89,62 +190,64 @@ export default {
     XdDailog,
     XdContentXss
   },
-  mixins: [JfbBaseCardShifEntrytMixin, componentsMixins, extsMixins],
+  mixins: [JfbBaseCardShifEntrytMixin, componentsMixins, extsMixins,colorCardMixins],
   data() {
     return {
       info: null,
       valueKey: [
         {
-          label: "票券名称",
-          key: "card_type_name",
-        },
-        {
-          label: "票券号码",
-          key: "card_number",
+          label: "票券余额",
+          key: "card_point",
+          type: "price",
         },
         {
-          label: "票券剩余",
-          key: "card_point",
+          label: "购买其他物品可抵",
+          key: "other_card_point",
+          type: "price",
         },
         {
-          label: "票券转换",
-          key: "exchange_card_type_name",
+          label: "有效期限",
+          key: "end_time",
+          type: "normal",
         },
+      ],
+      changeValueKey: [
         {
-          label: "转换剩余",
+          label: "票券余额",
           key: "exchange_card_point",
+          type: "price",
         },
+        {
+          label: "购买其他物品可抵",
+          key: "other_card_point",
+          type: "price",
+        }
       ],
       card_number: "",
       changeNumber: "",
       success: false,
-      isCheck: false,
       notice: "",
 
       //页面跳转地址
       backUrl: "",
-      bottomHeight: 120
+      bottomHeight: 120,
+      changeBg: ''
     };
   },
   computed: {
     prod_bottom() {
-      return this.fixedStyle({ height: this.bottomHeight, zIndex: 111 });
+      return this.fixedStyle({height: 0, zIndex: 111});
     },
   },
   created() {
+    this.changeBg = Color(this.warningColor).alpha(0.2).toString();
     this.backUrl = getContainerPropsValue(this.container, "content.back_url", {
       value: "",
     }).value;
   },
   methods: {
     handleChange() {
-      if (!this.isCheck) {
-        this.$xdAlert({
-          content: "请先同意转换规则",
-        });
-        return;
-      }
-      jfbRootExec("changeCardBind", {
+      jfbRootExec("changeCardBindEntry", {
         vm: this,
         data: {
           card_number: this.card_number,
@@ -162,7 +265,7 @@ export default {
       });
     },
     getContent() {
-      jfbRootExec("getListGiftNewsContent", {
+      jfbRootExec("getListGiftNewsContentEntry", {
         vm: this,
         data: {
           page_id: this.pageAttr["page_id"], //页面ID
@@ -171,19 +274,22 @@ export default {
         },
       })
         .then((res) => {
-          if(res.list && res.list.length > 0) {
-            this.notice = res.list[0].content;
-          }
+          this.notice = res.list[0].content;
         })
         .catch((error) => {
-          this.$xdLog.catch(error)
+          console.error(error);
         });
     },
 
     onJfbLoad(options) {
       this.card_number = options.card_number;
       this.getContent();
-      jfbRootExec("getByIdCardDetailEntry", {vm: this, data: {card_number: this.card_number}})
+      jfbRootExec("getByIdCardDetailEntry", {
+        vm: this,
+        data: {
+          card_number: this.card_number,
+        },
+      })
         .then((res) => {
           let temp = {};
           Object.keys(res).map((key) => {
@@ -193,11 +299,10 @@ export default {
               temp[key] = res[key];
             }
           });
+          this.headerBg = this.getCardThemes(res);
           this.info = temp;
         })
-        .catch((err) => {
-          this.$xdLog.catch(err)
-        });
+        .catch((err) => {});
     },
     onJfbUpdate(data) {
       this.getContent();
@@ -218,32 +323,94 @@ export default {
 
   &__body {
     color: #333;
-    &-info {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      font-size: unit(26, rpx);
-      padding: unit(40, rpx);
-      border-bottom: unit(2, rpx) solid #eeeeee;
+    margin: unit(26, rpx);
+    &-header {
+      border-radius: unit(16, rpx);
+      font-size: unit(40, rpx);
+      font-weight: 700;
+      padding: unit(88,rpx) unit(32, rpx) unit(48, rpx) unit(32, rpx);
+      color: #fff;
+      position: relative;
+
+      &__title {
+        height: unit(56, rpx);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+    
+      & > 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:unit(16, rpx) 0 unit(16, rpx) 0;
+        display: flex;
+      }
+    
+    }
+
+      &-wrap {
+        width: unit(700, rpx);
+        border-radius: unit(16, rpx);
+        background-size: 100%;
+      }
+
+      &-item {
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        padding-bottom: unit(32, rpx);
+      }
+    }
+
+    &-content {
       background: #fff;
+      border-radius: unit(16, rpx);
+      padding: unit(38, rpx) 0;
+      margin-top: unit(24, rpx);
 
-      &-label {
-        width: unit(120, rpx);
-        color: #a6a6a6;
-        margin-right: unit(70, rpx);
-        text-align: center;
+      &-title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-weight: 500;
+        margin-bottom: unit(32,rpx);
+      }
+
+      &-item {
+        display: flex;
+        color: #666;
+        justify-content: space-between;
+        align-content: center;
+        font-size: unit(28, rpx);
+        padding: unit(16, rpx) unit(48, rpx);
       }
 
-      &-value {
-        flex: 1;
+      &-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;
       }
     }
 
     &-tips {
-      font-size: unit(24, rpx);
-      padding: unit(60, rpx);
-      color: #bbb;
-      background: #f9f9f9;
+      font-size: unit(28, rpx);
+      padding: unit(28, rpx);
+      color: #666;
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24,rpx);
     }
 
     &-agree {
@@ -260,30 +427,40 @@ export default {
       }
     }
 
-    &-footer {
-      position: fixed;
-      left: 0;
-      right: 0;
-      // bottom: unit(120,rpx) !important;
-      height: unit(100, rpx);
-    }
+    .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,.05);
+        .flex_l{
+          display: flex;
+          align-items: center;
+          font-size: unit(32,rpx);
+        }
+      }
 
     &-success {
       padding: unit(70, rpx);
       &-title {
-        font-size: unit(42, rpx);
-        color: #242424;
+        font-size: unit(32, rpx);
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       &-content {
-        font-size: unit(32, rpx);
-        color: #5a5a5a;
+        font-size: unit(28, rpx);
+        color: #666;
         text-align: center;
         line-height: unit(42, rpx);
         margin: unit(50, rpx) 0;
       }
     }
 
+
     .dialog ::v-deep .xd-dailog__body-content {
       padding: 0;
     }

package/src/components/JfbBaseCardShiftEntry/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  getByIdCardDetailEntry:{"card_number":"171003500000390","card_point":900,"card_type_name":"一对一次卡（无限制）","end_time":"2024-09-30","card_status":"Y","card_status_name":"开启","card_qrcode":"\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/qrcode?code_content=h.161.4tzflzciaovkl5e","barcode":"\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/barcode?code_content=h.161.4tzflzciaovkl5e","card_qrcode_expire":600,"unit":"次","main_business_code_name":"","other_card_point":0,"is_exchange":"Y","exchange_card_type_name":"福券","exchange_card_point":26730,"card_point_type":1,"is_show_qrcode_logo":"Y","is_can_unbind":"Y","site_entry_settings":[],"business_codes":["movie","cake","video"],"request_id":"e27d6887c093c381"}
+}