权益及优惠券状态和类型

src/pages-charge/card/card.vue

@@ -6,8 +6,9 @@
     </view>
     <view v-if="mode===0">
       <view
-          class="item mt-20"
+          class="item mt-20 "
           v-for="(item, index) in list"
+          :class="item.status==0?'inactive':''"
           :key="index"
       >
         <image
@@ -16,19 +17,30 @@
         ></image>
         <view class="absolute-full flex pt-8 pb-8">
           <view class="left flex-column flex-justify-center pl-48">
-            <view class="flex-align-end">
-              <image
-                  class="width-92"
-                  src="/pages-charge/static/discount-coupon.png"
-                  mode="widthFix"
-              ></image>
-              <view class="fs-48 lh-58 color-000 fw-500 ml-16"
-              >{{ item.discountAmount }}折</view
-              >
-              <view class="fs-26 color-999 ml-16" v-if="mode === 0"
-              >充电服务费</view
-              >
+
+              <view class="flex-align-end">
+                <view class="item-header__left">
+                <image
+                    class="width-84"
+                    src="/pages-charge/static/discount-coupon.png"
+                    mode="widthFix"
+                ></image>
+                <view class="fs-48 lh-58 color-000 fw-500 ml-16"
+                >{{ item.discountAmount }}折</view
+                >
+                <view class="fs-26 color-999 ml-16" v-if="mode === 0"
+                >充电服务费</view
+                >
+              </view>
+
+
+                <view class="item-header__right flex-grow">
+                  <view class="item-status ml-10" >{{item.status==0?'已失效':'生效中'}}</view>
+                </view>
             </view>
+
+
+
             <view class="flex-align-center" v-if="mode === 0">
               <view class="fs-26 color-999 mt-24"
               >权益余额{{ ((item.rightsBalance||0)/100).toFixed(2) }}元｜</view
@@ -38,7 +50,7 @@
               >
             </view>
             <block >
-              <view class="fs-26 color-999 mt-24">{{ item.remark }}</view>
+              <view class="fs-26 color-999 mt-10">{{ item.remark }}</view>
               <view
                   class="fs-26 color-999 mt-8"
                   @click.stop="
@@ -78,39 +90,53 @@
     <view v-else-if="mode===1">
       <view
           class="item mt-20"
+          :class="item.usageStatus==1||item.status==0?'inactive':''"
           v-for="(item, index) in couponList"
           :key="index"
       >
-        <image
+<!--        <image
             class="full-percent"
             src="/pages-charge/static/discount-bg.png"
-        ></image>
+        ></image>-->
         <view class="absolute-full flex pt-8 pb-8">
           <view class="left flex-column flex-justify-center pl-48">
             <view class="flex-align-end">
-              <image
-                  class="width-92"
-                  src="/pages-charge/static/discount-coupon.png"
-                  mode="widthFix"
-              ></image>
-              <view>{{item.couponName}}</view>
-              <view class="fs-48 lh-58 color-000 fw-500 ml-16"
-              >{{ item.discount }}折</view
-              >
-<!--              <view class="fs-26 color-999 ml-16"
-              >优惠券</view
-              >-->
+              <view class="item-header__left">
+
+                <image
+                    class="width-84"
+                    src="/pages-charge/static/discount-coupon.png"
+                    mode="widthFix"
+                ></image>
+                <view></view>
+                <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-if="item.couponType=='FullDiscount'">
+                  {{ ((item.discount||0)/100).toFixed(2) }}元</view>
+
+                <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-else>
+                  {{ item.discount }}折</view>
+
+                <view class="fs-26 color-999 ml-16">
+                  {{ item.couponType=='FullDiscount'?'满减券':'折扣券' }}</view>
+              </view>
+
+
+              <view class="item-header__right flex-grow">
+                <view class="item-status ml-10" v-if="item.status==0">已失效</view>
+                <view class="item-status ml-10" v-else>{{item.usageStatus==0?'未使用':'已使用'}}</view>
+              </view>
+
+
             </view>
             <view class="flex-align-center" >
               <view class="fs-26 color-999 mt-24"
-              >消费门槛金额{{ ((item.minServiceMoney||0)/100).toFixed(2) }}元｜</view
+              >消费门槛{{ ((item.minServiceMoney||0)/100).toFixed(2) }}元｜</view
               >
               <view class="fs-26 color-999 mt-24"
-              >{{ item.end }}到期</view
+              >{{ item.endTime }}到期</view
               >
             </view>
             <block v-if="mode === 1">
-              <view class="fs-26 color-999 mt-24">{{ item.remark }}</view>
+              <view class="fs-26 color-999 mt-10">{{ item.remark }}</view>
               <view
                   class="fs-26 color-999 mt-8"
                   @click.stop="
@@ -130,7 +156,7 @@
                 :iconsize="17"
             ></style-checkbox>
           </view>-->
-          <view
+<!--          <view
               v-if="mode === 1"
               class="right flex-center"
               :style="{
@@ -141,7 +167,7 @@
             <view class="btn flex-center fs-28"
             >{{ item.discount }}折</view
             >
-          </view>
+          </view>-->
         </view>
       </view>
     </view>
@@ -229,7 +255,7 @@ onShow(() => {
   background-color: #f6f7fa;
   .item {
     position: relative;
-    height: 240rpx;
+    min-height: 240rpx;
     border-radius: 20rpx;
     overflow: hidden;
     background: #fff;
@@ -261,4 +287,42 @@ onShow(() => {
     }
   }
 }
+
+.item-status{
+  font-size: 24rpx;
+  padding: 0rpx 2rpx;
+  color: var(--color-primary);
+  border: 2rpx solid var(--color-primary);
+  border-radius: 6rpx;
+
+}
+
+.item-header__left{
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.item-header__right{
+  padding: 5rpx;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.inactive{
+  cursor: not-allowed;
+  pointer-events: none;
+
+  .item-status{
+    font-size: 24rpx;
+    padding: 0rpx 2rpx;
+    color: #ccc !important;
+    border: 2rpx solid #ccc;
+    border-radius: 6rpx;
+
+  }
+
+  .color-primary{
+    color: #ccc !important;
+  }
+}
 </style>