jufubao-base 1.0.169-beta2 → 1.0.169-beta21

package/src/components/JfbBaseTfkCardLogin/JfbBaseTfkCardLogin.vue

@@ -18,70 +18,48 @@
     }">
       <view class="menu_wrap" :style="menuBoxStyle">
         <view class="menu_list">
-          <view class="menu_item" :style="{
-            marginRight: menuItemMargin + 'px'
-          }">
+          <view class="menu_item"
+            :style="{
+              marginRight: menuItemMargin + 'px'
+            }"
+            @click="changeMenu('card')"
+          >
             <view class="menu_item_inner"
               :style="[menuType === 'card' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的票券包</view>
           </view>
-          <view class="menu_item">
+          <view class="menu_item" @click="changeMenu('coupon')">
             <view class="menu_item_inner"
               :style="[menuType === 'coupon' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的优惠券</view>
           </view>
         </view>
-        <view @click="toBindCard">
+        <view class="bind_card" :style="bindCardBoxStyle" @click="toBindCard">
           <xd-font-icon :icon="bindCardIcon.icon"
             :color="bindCardIcon.color"
-            :style="{fontSize: bindCardIcon.fontSize}"
+            :size="bindCardIcon.size"
           ></xd-font-icon>
+          <view v-if="bindCardText" :style="getBindCardTextStyle">{{ bindCardText }}</view>
         </view>
       </view>
       <view class="JfbBaseNotice">
-        <!--notice-->
-        <view class="jfb-base-tfk-card-login__body-line" v-if="!notice"></view>
-        <view :style="{marginTop: '0rpx'}" class="jfb-base-tfk-card-login__body-notice" v-if="notice">
-          <view
-            class="jfb-base-tfk-card-login__body-notice-in"
-            :style="{ background: noticeBackgroundColor }"
-          >
-            <xd-notice-bar
-              style="width: 100%"
-              :showIcon="true"
-              :scrollable="true"
-              :speed="20"
-              :fontSize="24"
-              :height="70"
-              :is-no-bgc="false"
-            >
-              <template>
-                <view v-html="notice"></view>
-              </template>
-            </xd-notice-bar>
-          </view>
-        </view>
-        <view class="jfb-base-tfk-card-login__body-notice" v-if="noticeStatus && isPreview && notice === ''">
-          <view
-            class="jfb-base-tfk-card-login__body-notice-in"
-            :style="{
-              background: noticeBackgroundColor,
-              textAlign: 'center',
-              color: dangerColor,
-              fontSize: 26 + 'rpx',
-            }">该组件未配置数据，因此改模块在正式环境将不显示</view>
-        </view>
-        <!--notice end-->
+        <xd-notice
+          :panelSetting="noticeSetting"
+          :apiGetContent="apiGetContent"
+        ></xd-notice>
       </view>
       <view class="card_list_wrap" :style="listBoxStyle">
-
         <!-- 我的票券包- 已绑票券 -->
         <template v-if="menuType === 'card'">
           <view v-if="loadingList">
             <view class="bind_list skeleton-wrap">
               <view class="bind_item" v-for="i in 5" :key="i" :style="cardItemBoxStyle">
-                <view class="bind_point"></view>
-                <view class="bind_deduct"></view>
-                <view class="bind_number"></view>
-                <view class="bind_time"></view>
+                <view>
+                  <view class="bind_point"></view>
+                  <view class="bind_deduct"></view>
+                </view>
+                <view>
+                  <view class="bind_number"></view>
+                  <view class="bind_time"></view>
+                </view>
                 <view class="bind_type"></view>
                 <view class="bind_btn"></view>
               </view>
@@ -90,29 +68,48 @@
           <view v-else>
             <view v-if="cardList.length" class="bind_list">
               <view class="bind_item" v-for="(item, i) in cardList" :key="i"
-                :style="cardItemBoxStyle">
-                <view class="bind_point">120</view>
-                <view class="bind_deduct">兑换其他商品可抵：240元宝</view>
-                <view class="bind_number">1001000002541</view>
-                <view class="bind_time">2029-12-31到期</view>
+                :style="cardItemBoxStyle" @click="toCardDetail(item)">
+                <view>
+                  <view class="bind_point">
+                    <xd-unit
+                      :unitFontSize="24"
+                      :fontSize="48"
+                      :price="item.card_point"
+                      :isOld="false"
+                      :unit="item.unit || ''"
+                      :colorNew="cardFontColor"
+                    ></xd-unit>
+                  </view>
+                  <view v-if="item.other_card_point && item.card_point_type !== 1" class="bind_deduct">
+                    兑换其他商品可抵：{{ item.other_card_point }}
+                  </view>
+                </view>
+                <view>
+                  <view class="bind_number">{{ item.card_number }}</view>
+                  <view class="bind_time">{{ item.end_time }}到期</view>
+                </view>
                 <view class="bind_type" :style="{
                   top: cardPadding.top + 'rpx',
                   right: cardPadding.right + 'rpx',
                 }">
-                  <view>兰州vip优惠券</view>
-                  <view>(可转票券)</view>
+                  <view>{{ item.card_type_name }}</view>
+                  <view v-if="item.is_exchange === 'Y'">(可转票券)</view>
                 </view>
-                <view class="bind_btn" :style="[{
-                  right: cardPadding.right + 'rpx',
-                  bottom: cardPadding.bottom + 'rpx',
-                  borderRadius: cardBtnRadius + 'rpx',
-                  padding: bindCardBtnPadding
-                }, item.is_login !== 'Y' ? bindCardActiveStyle : bindCardBtnStyle]">登录</view>
+                <view class="bind_btn"
+                  :style="[{
+                    right: cardPadding.right + 'rpx',
+                    bottom: cardPadding.bottom + 'rpx',
+                    borderRadius: cardBtnRadius + 'rpx',
+                    padding: bindCardBtnPadding,
+                    minWidth: cardBtnMinWidth + 'rpx',
+                  }, item.is_login === 'Y' ? bindCardActiveStyle : bindCardBtnStyle]"
+                  @click.stop="doCardLogin(item)"
+                >{{ item.is_login === 'Y' ? '已登录' : '登录'}}</view>
               </view>
-              <view v-if="!hasCardList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+              <view v-if="!hasCardList" class="no_more_card" @click="toDisableUrl">没有更多券了，查看失效的票券 ></view>
             </view>
             <view v-else>
-              暂无数据
+              <!-- 暂无数据 -->
             </view>
           </view>
         </template>
@@ -128,8 +125,11 @@
               :couponBtnRadius="couponBtnRadius"
               :couponBtnTextStyle="couponBtnTextStyle"
               :couponLeftBgColor="couponLeftBgColor"
+              :item="item"
+              @useCoupon="doCardLogin(item)"
+              @toDetail="toCardDetail(item)"
             ></xd-coupon-item>
-            <view v-if="!hasCouponList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
+            <view v-if="!hasCouponList" class="no_more_card" @click="toDisableUrl">没有更多券了，查看失效的票券 ></view>
           </view>
           <view v-else>
             暂无数据
@@ -137,13 +137,15 @@
 
         </template>
       </view>
-      
+
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdNotice from "./XdNotice";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardLoginMixin from "./JfbBaseTfkCardLoginMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
@@ -153,25 +155,38 @@
   import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
   import XdCouponItem from "./XdCouponItem";
   import Color from "color"
+  import { mapState, mapActions } from "vuex";
   export default {
     name: "JfbBaseTfkCardLogin",
     components: {
       XdFontIcon,
       XdNoticeBar,
       XdCouponItem,
+      XdUnit,
+      XdNotice,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardLoginMixin
     ],
     data() {
       return {
-        menuType: "coupon", // card, coupon
-        loadingList: false,
-        cardList: [{id: 1}, {id: 2}],
-        couponList: [{id: 1}, {id: 2}],
+        // hideMask: true,
+        menuType: "card", // card, coupon
+        loadingList: true,
+        cardList: [],
+        couponList: [],
         hasCardList: false,
         hasCouponList: false,
 
+        inCallbackUrlOrg:'',//是否带有回调地址
+        inCallback: null, //内部跳转地址
+        allEntryPath: "", //综合福利入口页
+        cardDetailPath: "", //我的票券包详情页
+        disabledPath: "", //禁用票券包详情页
+
+        options: {},
+        showDisabled: 'Y',
+
         //todo
         previewCurrent: "",
         isPreview: false,
@@ -200,9 +215,47 @@
         couponUseBtnPadding: {},
         couponBtnRadius: 16,
         couponLeftBgColor: "",
+
+
+        noticeStyle: "",
+        notice_is_hide_dailog: "",
+        noticeIsTitle: "",
+        noticeTextAlign: "",
+        noticeRadius: "",
+        noticeBgc: "",
+        noticeTextColor: "",
+        noticeFontSize: "",
+        noticeNum: "",
+        noticeSpeed: "",
+        noticeScrollMargin: "",
+        noticeTime: "",
+
+        noticeBgColor: "",
+        noticeMargin: {},
+        noticePadding: {},
+        noticeFont: {},
+        noticeMoreFont: {},
+
+
+        bindCardText: "",
+        bindCardTextStyle: {},
+        bindCardShowType: "",
+        bindCardBtnRadius: 16,
+        cardBorder: {},
+        cardShadow: {},
+        cardImageMode: "",
+        entryGroupId: "",
+        cardHeight: 270,
+        cardBtnMinWidth: 100,
+        menuShowType: "text",
+        cardFontColor: "",
       }
     },
     computed: {
+      ...mapState({
+        jwxSDK: (state) => state.jwxSDK,
+        jfbAuthorize: (state) => state.jfbAuthorize,
+      }),
       menuBoxStyle(){
         let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
@@ -241,8 +294,13 @@
           background: this.menuTabColor['actBgColor'] || '#fff',
           fontSize: this.menuTabColor['actFontSize'] || '30rpx',
           fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
-          borderBottom: `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
         }
+        if(this.menuShowType === 'text'){
+          styleActiveObj.borderBottom = `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`
+        }else{
+          styleActiveObj.borderRadius = '100rpx';
+        }
+
         return this.styleObjectToString(styleActiveObj)
       },
       bindCardBtnPadding(){
@@ -287,6 +345,21 @@
         }
         return this.styleObjectToString(styleObj)
       },
+      bindCardBoxStyle(){
+        return this.styleObjectToString({
+          border: `1px solid ${this.bindCardShowType == 'button' ? this.bindCardTextStyle.color : 'transparent'}`,
+          borderRadius: this.bindCardBtnRadius + 'rpx',
+        })
+      },
+      getBindCardTextStyle(){
+        let styleObj = {
+          color: this.bindCardTextStyle['color'] || '#333',
+          fontSize: this.bindCardTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.bindCardTextStyle['fontWeight'] || 'normal',
+          marginLeft: this.bindCardIcon.icon ? '10rpx' : 0,
+        }
+        return this.styleObjectToString(styleObj)
+      },
       getCardBgImage(){
         let bg = '';
         if(this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'object'
@@ -300,18 +373,36 @@
       },
       cardItemBoxStyle(){
         let image = {};
+        let border = "none";
+        let boxShadow = "none";
+        if(this.cardBorder && this.cardBorder.type === 'Y'){
+          let { width, color } = this.cardBorder.value;
+          border = `${width}rpx solid ${color}`;
+        }
+        if(this.cardShadow && this.cardShadow.type === 'Y'){
+          let { width, color } = this.cardShadow.value;
+          boxShadow = `0 0 ${width}rpx ${color}`;
+        }
         if(this.cardImageUrl) image = {
           backgroundImage: `url(${this.getCardBgImage})`,
           backgroundSize: '100%',
           backgroundRepeat: 'no-repeat',
         }
+        if(this.cardImageMode) image['backgroundSize'] = this.cardImageMode;
+
         let padding = `${this.checkValue(this.cardPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.bottom, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.left, 20)}rpx`;
-        image['padding'] = padding;
-        image['borderRadius'] = this.cardRadius + 'rpx';
-        return this.styleObjectToString(image)
+        return this.styleObjectToString({
+          ...image,
+          padding: padding,
+          borderRadius: this.cardRadius + 'rpx',
+          border: border,
+          boxShadow: boxShadow,
+          height: this.cardHeight + 'rpx',
+          color: this.cardFontColor
+        })
       },
       listBoxStyle(){
         let padding = `${this.checkValue(this.cardListPadding.top, 20)}rpx`;
@@ -348,6 +439,49 @@
           borderRadius: this.couponRadius + 'rpx',
         })
       },
+      noticeWrapBoxStyle(){
+        let padding = `${this.checkValue(this.noticeMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticeMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticeMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticeMargin.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      noticeBoxStyle(){
+        let padding = `${this.checkValue(this.noticePadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticePadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticePadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.noticePadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding: padding,
+          background: this.noticeBgColor
+        })
+      },
+      noticeSetting(){
+
+        return {
+          style: this.noticeStyle,
+          is_hide_dailog: this.notice_is_hide_dailog,
+          isTitle: this.noticeIsTitle,
+          textAlign: this.noticeTextAlign,
+          radius: this.noticeRadius,
+          bgc: this.noticeBgc,
+          textColor: this.noticeFont.color || this.warningColor, // noticeTextColor,
+          fontSize: this.noticeFont.size, //noticeFontSize,
+          num: this.noticeNum,
+          speed: this.noticeSpeed,
+          scrollMargin: this.noticeScrollMargin,
+          time: this.noticeTime,
+          warningColor: this.warningColor,
+          containerId: this.containerId,
+          padding: this.noticePadding,
+          margin: this.noticeMargin,
+          moreTextColor: this.noticeMoreFont.color || this.warningColor,
+          moreFontSize: this.noticeMoreFont.size || 24,
+        }
+      }
     },
     watch: {
       container(value, oldValue) {
@@ -363,7 +497,22 @@
     },
     methods: {
       onJfbLoad(options) {
-        this.getContent();
+        this.options = options;
+        let { inCallback } = options;
+        if(!inCallback) this.$storage.remove("inCallback"); //作为入口
+        else {
+          this.$storage.set("inCallback", inCallback);
+          try{
+            inCallback = Base64.decode(inCallback);
+            this.inCallbackUrlOrg = options.inCallback;
+          }catch (e){
+            inCallback = null;
+          }
+        }
+        //登录成功调整地址优先级
+        this.inCallback = inCallback || this.allEntryPath || this.settings.index;
+
+        this.getCardList();
       },
       /**
        * @description 监听事件变化
@@ -394,40 +543,166 @@
         this.couponBtnRadius = getContainerPropsValue(value, "content.couponBtnRadius", 16);
         this.couponLeftBgColor = getContainerPropsValue(value, "content.couponLeftBgColor", "");
 
-        console.log(this.couponLeftBgColor, 'couponLeftBgColor')
+        this.bindCardText = getContainerPropsValue(value, "content.bindCardText", "");
+        this.bindCardTextStyle = getContainerPropsValue(value, "content.bindCardTextStyle", {});
+        this.bindCardShowType = getContainerPropsValue(value, "content.bindCardShowType", 'text');
+        this.bindCardBtnRadius = getContainerPropsValue(value, "content.bindCardBtnRadius", 16);
+        this.cardBorder = getContainerPropsValue(value, "content.cardBorder", {});
+        this.cardShadow = getContainerPropsValue(value, "content.cardShadow", {});
+        this.cardImageMode = getContainerPropsValue(value, "content.cardImageMode", '');
+        this.allEntryPath = getContainerPropsValue(value, "content.allEntryPath", {value: ""}).value;
+        this.cardDetailPath = getContainerPropsValue(value, "content.cardDetailPath", {value: ""}).value;
+        // this.entryGroupId = getContainerPropsValue(value,"content.entryGroupId","default");
+        this.cardHeight = getContainerPropsValue(value, "content.cardHeight", 270);
+        this.cardBtnMinWidth = getContainerPropsValue(value, "content.cardBtnMinWidth", 100);
+        this.disabledPath = getContainerPropsValue(value, "content.disabledPath", {value: ""}).value;
+        this.menuShowType = getContainerPropsValue(value, "content.menuShowType", 'text');
+        this.cardFontColor = getContainerPropsValue(value, "content.cardFontColor", '#333');
+
+        this.noticeStyle = getContainerPropsValue(value, "content.noticeStyle", '1');
+        this.notice_is_hide_dailog = getContainerPropsValue(value, "content.notice_is_hide_dailog", 'N');
+        this.noticeIsTitle = getContainerPropsValue(value, "content.noticeIsTitle", '');
+        this.noticeTextAlign = getContainerPropsValue(value, "content.noticeTextAlign", 'left');
+        this.noticeRadius = getContainerPropsValue(value, "content.noticeRadius", '');
+        this.noticeBgc = getContainerPropsValue(value, "content.noticeBgc", '');
+        this.noticeTextColor = getContainerPropsValue(value, "content.noticeTextColor", this.warningColor);
+        this.noticeFontSize = getContainerPropsValue(value, "content.noticeFontSize", '20');
+        this.noticeNum = getContainerPropsValue(value, "content.noticeNum", 1);
+        this.noticeSpeed = getContainerPropsValue(value, "content.noticeSpeed", 30);
+        this.noticeScrollMargin = getContainerPropsValue(value, "content.noticeScrollMargin", '');
+        this.noticeTime = getContainerPropsValue(value, "content.noticeTime", 3);
+
+        this.noticeBgColor = getContainerPropsValue(value, "content.noticeBgColor", "");
+        this.noticeMargin = getContainerPropsValue(value, "content.noticeMargin", {top: 20, left: 20, right: 20, bottom: 20});
+        this.noticePadding = getContainerPropsValue(value, "content.noticePadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.noticeFont = getContainerPropsValue(value, "content.noticeFont", {});
+        this.noticeMoreFont = getContainerPropsValue(value, "content.noticeMoreFont", {});
+
+        console.log(this.cardShadow, 'cardShadow')
+        if(this.bindCardTextStyle && !this.bindCardTextStyle.color){
+          this.bindCardTextStyle.color = this.mainColor;
+        }
+        if(this.bindCardIcon && !this.bindCardIcon.color){
+          this.bindCardIcon.color = this.mainColor;
+        }
+        if(this.menuTabColor && !this.menuTabColor.actColor){
+          this.menuTabColor.actColor = this.mainColor;
+        }
+        if(this.cardBtnTextStyle){
+          if(!this.cardBtnTextStyle.actBgColor){
+            this.cardBtnTextStyle.actBgColor = this.mainColor;
+          }
+          if(!this.cardBtnTextStyle.bgColor){
+            this.cardBtnTextStyle.bgColor = this.mainColor;
+          }
+        }
 
         if(this.$configProject.isPreview){
           this.menuType = this.previewCurrent;
+          this.getCardList();
         }
       },
-      toBindCard(){
+      toCardDetail(item){
         this.$xdUniHelper.navigateTo({
-          url: this.cardBindPath
-        })
+          url: this.cardDetailPath + `?card_number=${item["card_number"]}`
+        },false)
       },
-      getContent() {
-        jfbRootExec("getListBaseNewsContent", {
+      doCardLogin(item){
+        this.$xdShowLoading({});
+        jfbRootExec("loginTfkCardBind", {
           vm: this,
           data: {
-            page_id: this.pageAttr["page_id"], //页面ID
-            container_id: this.containerId, //组件ID
-            limit: 1,
-          },
-        })
-          .then((res) => {
-            if (res.list.length > 0) {
-              if(res.list && res.list.length > 0) {
-                this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
-              }
-              this.noticeStatus = true;
+            card_number: item["card_number"]
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          //#ifdef MP-WEIXIN
+          if (this.jfbAuthorize !== null) {
+            this.jfbAuthorize.setCardToken(res);
+          }
+          //#endif
+
+          if (this.$configProject.isPreview) {
+            console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+          } else {
+            this.$xdUniHelper.redirectTo({
+              url: this.inCallback,
+            });
+          }
+        }).catch((res) => {
+          this.$xdHideLoading();
+        });
+      },
+      changeMenu(menu){
+        this.menuType = menu;
+        this.getCardList();
+      },
+      getCardList(){
+        let show_type = this.menuType === 'coupon' ? 'coupon' : 'normal';
+        let params = {show_type};
+
+        // let params = {is_all: 'Y', is_show_entry_settings: 'Y'};
+        // if(options['jfb_business_code']) {
+        //   params['card_business_code'] = options['jfb_business_code'];
+        // }
+        // if(this.entryGroupId) params['group_id'] = this.entryGroupId;
+        this.$xdShowLoading({});
+        jfbRootExec("getTfkListCardBind", {
+          vm: this,
+          data: params,
+        }).then(res => {
+          this.loadingList = false;
+          this.$xdHideLoading();
+          this.showDisabled = res.is_show_invalid_card_entrance;
+
+          let list = res.list.map(item => {
+            item.other_card_point = item.other_card_point ? this.$xdUniHelper.divisionFloatNumber(item.other_card_point, 100) : 0
+            return item;
+          })
+          if(show_type === 'coupon'){
+            if(this.$configProject.isPreview){
+              list = list.filter(item => item.consume_type == 2)
+            }
+            this.couponList = list;
+          }
+          if(show_type === 'normal'){
+            if(this.$configProject.isPreview){
+              list = list.filter(item => item.consume_type != 2)
             }
+            this.cardList = list;
+          }
+        })
+        .catch(() => this.$xdHideLoading());
+      },
+      toBindCard(){
+        this.$xdUniHelper.navigateTo({
+          url: this.cardBindPath
+        })
+      },
+      apiGetContent(params){
+        return new Promise((resolve, reject) => {
+          jfbRootExec("getListBaseNewsContent", {
+            vm: this,
+            data: {
+              page_id: this.pageAttr["page_id"], //页面ID
+              container_id: this.containerId, //组件ID
+              page_size: this.noticeNum || 1,
+              ...params
+            },
+          }).then(res => {
+            resolve(res);
+          }).catch(err => {
+            reject(err);
           })
-          .catch((error) => {
-            console.error(error);
-          });
+        })
+      },
+      toDisableUrl(){
+        this.$xdUniHelper.navigateTo({
+          url: this.disabledPath
+        })
       },
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
@@ -469,22 +744,21 @@
             border-bottom: 1px solid transparent;
           }
         }
+        .bind_card{
+          display: flex;
+          align-items: center;
+          padding: 8rpx 20rpx;
+          border-radius: 16rpx;
+        }
       }
       &-notice {
         width: 100%;
-        margin-top: unit(30, rpx);
-        height: unit(80, rpx);
-        position: relative;
+        box-sizing: border-box;
         &-in {
-          position: absolute;
-          left: unit(-30, rpx);
-          top: unit(0, rpx);
-          right: unit(-30, rpx);
-          bottom: 0;
           display: flex;
-          padding: 0 unit(30, rpx);
           overflow: hidden;
           align-items: center;
+          box-sizing: border-box;
         }
 
       }
@@ -519,16 +793,25 @@
             padding: 32rpx;
             background: #fff;
             border-radius: 16rpx;
-            border: 1px solid #eeeeee;
+            box-sizing: border-box;
             margin: var(--card-list-margin) 0;
             position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
             .bind_point{
-              color: #000;
               font-size: 48rpx;
+              ::v-deep .xd-unit{
+                height: auto !important;
+                font-weight: bold;
+                align-items: flex-end;
+                .xd-unit__unit{
+                  line-height: 1.7 !important;
+                }
+              }
             }
             .bind_deduct{
               font-size: 28rpx;
-              color: #999;
               background: rgba(51, 51, 51, 0.05);
               display: inline-block;
               padding: 4rpx 20rpx;
@@ -536,20 +819,17 @@
             }
             .bind_number{
               font-size: 28rpx;
-              color: #999;
               margin-top: 20rpx;
               font-weight: 500;
             }
             .bind_time{
               font-size: 24rpx;
-              color: #999;
               margin-top: 16rpx;
               font-weight: 500;
               line-height: 1;
             }
             .bind_type{
               font-size: 28rpx;
-              color: #333333;
               position: absolute;
               top: 32rpx;
               right: 32rpx;
@@ -566,10 +846,17 @@
               background: #ddd;
               padding: 16rpx 60rpx;
               border-radius: 12rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
             }
           }
         }
-        .coupon_list{}
+        .coupon_list{
+          ::v-deep .xd-coupon_item{
+            margin: var(--card-list-margin) 0;
+          }
+        }
         .no_more_card{
           text-align: center;
           padding: 20rpx 0;