jufubao-base 1.0.169-beta2 → 1.0.169-beta21

package/src/components/JfbBaseTfkCardLogin/XdCouponItem.vue

@@ -1,33 +1,61 @@
 <template>
-  <view class="xd-coupon_item" :style="couponItemBoxStyle">
+  <view class="xd-coupon_item" :style="couponItemBoxStyle"
+    @click="toDetail">
     <view class="coupon_left" :style="{
       background: couponLeftBgColor
     }">
-      <view class="_point">200<text style="font-size: 24rpx;">点</text></view>
-      <view class="_rule">满100减40</view>
+      <view class="_point">
+        <xd-unit
+          :unitFontSize="24"
+          :fontSize="48"
+          :price="item.card_point"
+          :isOld="false"
+          :unit="item.unit || ''"
+          :colorNew="'#ffffff'"
+        ></xd-unit>
+        <!-- <text style="font-size: 24rpx;">{{ item.unit }}</text> -->
+      </view>
+      <view class="_rule">{{ item.show_name }}</view>
     </view>
     <view class="coupon_right" :style="couponRightItemBoxStyle">
       <view class="cont_top" :style="{
         background: couponTitleBgColor
-      }">众福优选-众选全场通兑次票60档（上海）</view>
+      }">{{ item.card_type_name }}</view>
       <view class="cont_main">
-        <view class="cou_number">券号：923974909815654</view>
-        <view class="cou_time">有效期：2023-09-09</view>
-        <view class="cou_point">余额：120</view>
-        <view class="cou_btn" :style="[couponBtnStyle, {
-          padding: couponBtnPadding,
-          borderRadius: couponBtnRadius + 'rpx'
-        }]">去使用</view>
+        <view class="cou_number">券号：{{ item.card_number }}</view>
+        <view class="cou_time">有效期：{{ item.end_time }}</view>
+        <view class="cou_point">
+          余额：
+          <xd-unit
+            :unitFontSize="24"
+            :fontSize="28"
+            :price="item.card_point"
+            :isOld="false"
+            :unit="item.unit || ''"
+            :colorNew="'#333333'"
+          ></xd-unit>
+        </view>
+        <view class="cou_btn"
+          :style="[
+            item.is_login === 'Y' ? couponBtnActiveStyle : couponBtnStyle,
+            {
+              padding: couponBtnPadding,
+              borderRadius: couponBtnRadius + 'rpx'
+            }
+          ]"
+          @click.stop="goToUseCoupon"
+        >{{item.is_login === 'Y' ? '已登录' : '去使用'}}</view>
       </view>
       <view class="cont_bottom">
-        <view class="switch_rule">
+        <view class="switch_rule" @click.stop="switchRule">
           <view>使用规则</view>
           <view>
-            <xd-font-icon icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-if="!expand" icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-else icon="iconshang_up" size="24"></xd-font-icon>
           </view>
         </view>
-        <view class="expand_rule">
-          这是一段文字规则描述，不知道又多长多长长...
+        <view v-if="expand" class="expand_rule">
+          {{ item.card_use_rule }}
         </view>
       </view>
     </view>
@@ -35,13 +63,18 @@
 </template>
 <script>
   import getServiceUrl from '@/common/getServiceUrl'
+  import XdUnit from "@/components/XdUnit/XdUnit";
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   export default{
     name: "XdCouponItem",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdUnit
     },
     props: {
+      item:{
+        type: Object,
+      },
       couponRadius: {
         type: String,
         default: "16"
@@ -86,7 +119,7 @@
     },
     data() {
       return {
-        
+        expand: false,
       }
     },
     computed: {
@@ -111,11 +144,19 @@
         }
         return this.styleObjectToString(styleObj)
       },
+      couponBtnActiveStyle(){
+        return this.styleObjectToString({
+          color: this.couponBtnTextStyle['actColor'] || '#fff',
+          background: this.couponBtnTextStyle['actBgColor'] || '#ff5722',
+          fontSize: this.couponBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['actFontWeight'] || 'normal',
+        })
+      },
       couponRightItemBoxStyle(){
         let image = {};
-        if(this.cardImageUrl) image = {
+        if(this.couponImageUrl) image = {
           backgroundImage: `url(${this.getCouponBgImage})`,
-          backgroundSize: '100%',
+          backgroundSize: 'cover',
           backgroundRepeat: 'no-repeat',
         }
         return this.styleObjectToString(image)
@@ -133,6 +174,15 @@
       },
     },
     methods: {
+      switchRule(){
+        this.expand = !this.expand;
+      },
+      toDetail(){
+        this.$emit('toDetail', this.item);
+      },
+      goToUseCoupon(){
+        this.$emit('useCoupon', this.item);
+      },
       checkValue(value, dValue = 0){
         if(value === undefined || value === '' || value === null) return dValue;
         return Number(value || 0);
@@ -177,6 +227,7 @@
       .cont_main{
         position: relative;
         padding: 28rpx 20rpx 28rpx 40rpx;
+        color: #333333;
         .cou_number{
           font-size: 32rpx;
           font-weight: bold;
@@ -187,6 +238,8 @@
         }
         .cou_point{
           font-size: 28rpx;
+          display: flex;
+          align-items: center;
         }
         .cou_btn{
           position: absolute;
@@ -204,10 +257,13 @@
           align-items: center;
           justify-content: space-between;
           padding: 12rpx 40rpx;
+          font-size: 24rpx;
+          color: #666666;
         }
         .expand_rule{
           padding: 12rpx 40rpx;
           font-size: 20rpx;
+          color: #333333;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;