优惠券样式调整

src/pages-charge/card/card.vue

@@ -13,36 +13,42 @@
       >
         <image class="full-percent" src="/pages-charge/static/discount-bg.png"></image>
         <view class="absolute-full flex pt-8 pb-8">
-          <view class="left flex-column flex-justify-center pl-48">
+          <view class="left  flex-justify-center pl-48">
 
-            <view class="flex-align-end">
-              <view class="item-header__left">
-                <image class="width-84" src="/pages-charge/static/discount-rights-card.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 class="item-content_left">
+              <view class="flex-align-end">
+                <view class="item-header__left">
+                  <image class="width-84" src="/pages-charge/static/discount-rights-card.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>
 
-              <view class="item-header__right flex-grow">
-                <view class="item-status ml-10">{{ item.status == 0 ? '已失效' : '生效中' }}</view>
+                <!--                <view class="item-header__right flex-grow">
+                                  <view class="item-status ml-10">{{ item.status == 0 ? '已失效' : '生效中' }}</view>
+                                </view>-->
               </view>
-            </view>
 
 
-            <block>
-              <view class="fs-26 color-999 mt-8"
-                    @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
-              <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
-                <view class="flex-align-center" v-if="mode === 0">
-                  <view class="fs-26 color-999 mt-24">权益余额：{{ ((item.rightsBalance || 0) / 100).toFixed(2) }}元
-                    <text class="color-primary">详细规则</text>
-                    <text class="fs-24 ml-4 color-primary">>></text>
+              <block>
+                <view class="fs-26 color-999 mt-8"
+                      @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
+                  <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
+                  <view class="flex-align-center" v-if="mode === 0">
+                    <view class="fs-26 color-999 mt-24">权益余额：{{ ((item.rightsBalance || 0) / 100).toFixed(2) }}元
+                      <text class="color-primary">详细规则</text>
+                      <text class="fs-24 ml-4 color-primary">>></text>
+                    </view>
                   </view>
                 </view>
-              </view>
-            </block>
+              </block>
+            </view>
+            <view class="item-content_right">
+              <view class="item-status ml-10">{{ item.status == 0 ? '已失效' : '生效中' }}</view>
+            </view>
+
           </view>
           <!--          <view v-if="mode === 0" class="right width-80 flex-center">
                       <style-checkbox
@@ -80,50 +86,60 @@
                     src="/pages-charge/static/discount-bg.png"
                 ></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">
-              <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="left  flex-justify-center pl-48">
+            <view class="item-content_left">
+              <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></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 / 10).toFixed(1) }}折
-                </view>
+                  <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-else>
+                    {{ (item.discount / 10).toFixed(1) }}折
+                  </view>
 
-                <view class="fs-26 color-999 ml-16">
-                  {{ item.couponType == 'FullDiscount' ? '满减券' : '折扣券' }}：抵扣充电服务费
+                  <view class="fs-26 color-999 ml-16">
+                    {{ item.couponType == 'FullDiscount' ? '满减券' : '折扣券' }}:抵扣充电服务费
+                  </view>
                 </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 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>
 
-            <block v-if="mode === 1">
-              <view class="fs-26 color-999 mt-8"
-                    @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
-                <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
-                <view class="flex-align-center">
-                  <view class="fs-26 color-999 mt-24">服务费门槛：{{ ((item.minServiceMoney || 0) / 100).toFixed(2) }}元
-                    <text class="color-primary">详细规则</text>
-                    <text class="fs-24 ml-4 color-primary">>></text>
+              <block v-if="mode === 1">
+                <view class="fs-26 color-999 mt-8"
+                      @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
+                  <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
+                  <view class="flex-align-center">
+                    <view class="fs-26 color-999 mt-24">服务费门槛：{{ ((item.minServiceMoney || 0) / 100).toFixed(2) }}元
+                      <text class="color-primary">详细规则</text>
+                      <text class="fs-24 ml-4 color-primary">>></text>
+                    </view>
                   </view>
                 </view>
-              </view>
-            </block>
+              </block>
+            </view>
+            <view class="item-content_right">
+              <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 v-if="mode === 0" class="right width-80 flex-center">
                       <style-checkbox
@@ -232,7 +248,7 @@ onShow(() => {
 
   .item {
     position: relative;
-    min-height: 240rpx;
+    min-height: 220rpx;
     border-radius: 20rpx;
     overflow: hidden;
     background: #fff;
@@ -285,7 +301,7 @@ onShow(() => {
 .item-header__right {
   padding: 5rpx;
   display: flex;
-  justify-content: flex-end;
+  //justify-content: flex-end;
 }
 
 .inactive {
@@ -305,4 +321,19 @@ onShow(() => {
     color: #ccc !important;
   }
 }
+
+.item-content_left {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+}
+
+.item-content_right {
+  width: 120rpx;
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
 </style>