卡包样式

src/pages-charge/card/card.vue

@@ -18,70 +18,58 @@
         <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">
+            <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-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>
+              <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
-              >
-              <view class="fs-26 color-999 mt-24"
-              >{{ item.endTime }}到期</view
-              >
-            </view>
-            <block >
-              <view class="fs-26 color-999 mt-10">{{ item.remark }}</view>
-              <view
-                  class="fs-26 color-999 mt-8"
-                  @click.stop="
-                to(`/pages-common/activity/activity?id=${item.activityId}`)
-              "
-              >
-                <text>有效期{{ item.validity }}天，</text>
-                <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>
             </block>
           </view>
-<!--          <view v-if="mode === 0" class="right width-80 flex-center">
-            <style-checkbox
-                :size="48"
-                :checked="checkIndex === index"
-                :iconsize="17"
-            ></style-checkbox>
-          </view>-->
-<!--          <view
-              v-if="mode === 1"
-              class="right flex-center"
-              :style="{
-            width: '210rpx',
-            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
-          }"
-          >
-            <view class="btn flex-center fs-28" @click.stop="toCharge(index)"
-            >前往充值</view
-            >
-          </view>-->
+          <!--          <view v-if="mode === 0" class="right width-80 flex-center">
+                      <style-checkbox
+                          :size="48"
+                          :checked="checkIndex === index"
+                          :iconsize="17"
+                      ></style-checkbox>
+                    </view>-->
+          <!--          <view
+                        v-if="mode === 1"
+                        class="right flex-center"
+                        :style="{
+                      width: '210rpx',
+                      borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+                    }"
+                    >
+                      <view class="btn flex-center fs-28" @click.stop="toCharge(index)"
+                      >前往充值</view
+                      >
+                    </view>-->
         </view>
       </view>
     </view>
@@ -94,10 +82,10 @@
           v-for="(item, index) in couponList"
           :key="index"
       >
-<!--        <image
-            class="full-percent"
-            src="/pages-charge/static/discount-bg.png"
-        ></image>-->
+        <!--        <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="flex-align-end">
@@ -110,64 +98,59 @@
                 ></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>
+                  {{ ((item.discount || 0) / 100).toFixed(2) }}元
+                </view>
 
                 <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-else>
-                  {{ item.discount }}折</view>
+                  {{ (item.discount / 10).toFixed(1) }}折
+                </view>
 
                 <view class="fs-26 color-999 ml-16">
-                  {{ item.couponType=='FullDiscount'?'满减券':'折扣券' }}</view>
+                  {{ 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 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
-              >
-              <view class="fs-26 color-999 mt-24"
-              >{{ item.endTime }}到期</view
-              >
-            </view>
+
             <block v-if="mode === 1">
-              <view class="fs-26 color-999 mt-10">{{ item.remark }}</view>
-              <view
-                  class="fs-26 color-999 mt-8"
-                  @click.stop="
-                to(`/pages-common/activity/activity?id=${item.activityId}`)
-              "
-              >
-                <text>有效期{{ item.validity }}天，</text>
-                <text class="color-primary">详细规则</text>
-                <text class="fs-24 ml-4 color-primary">>></text>
+              <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>
             </block>
           </view>
-<!--          <view v-if="mode === 0" class="right width-80 flex-center">
-            <style-checkbox
-                :size="48"
-                :checked="checkIndex === index"
-                :iconsize="17"
-            ></style-checkbox>
-          </view>-->
-<!--          <view
-              v-if="mode === 1"
-              class="right flex-center"
-              :style="{
-            width: '210rpx',
-            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
-          }"
-          >
-            <view class="btn flex-center fs-28"
-            >{{ item.discount }}折</view
-            >
-          </view>-->
+          <!--          <view v-if="mode === 0" class="right width-80 flex-center">
+                      <style-checkbox
+                          :size="48"
+                          :checked="checkIndex === index"
+                          :iconsize="17"
+                      ></style-checkbox>
+                    </view>-->
+          <!--          <view
+                        v-if="mode === 1"
+                        class="right flex-center"
+                        :style="{
+                      width: '210rpx',
+                      borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+                    }"
+                    >
+                      <view class="btn flex-center fs-28"
+                      >{{ item.discount }}折</view
+                      >
+                    </view>-->
         </view>
       </view>
     </view>
@@ -176,10 +159,10 @@
 </template>
 
 <script setup lang="ts">
-import { onLoad, onShow,onPullDownRefresh } from "@dcloudio/uni-app";
-import { ref } from "vue";
-import { to } from "../../utils/navigate";
-import { fetchProfile,fetchRightsAndCoupons } from "@/api/user";
+import {onPullDownRefresh, onShow} from "@dcloudio/uni-app";
+import {ref} from "vue";
+import {to} from "../../utils/navigate";
+import {fetchRightsAndCoupons} from "@/api/user";
 
 const mode = ref(0);
 const list = ref<any[]>([]);
@@ -202,7 +185,7 @@ onPullDownRefresh(() => {
   loadData();
 });
 
-const changeTab = (tab:number) => {
+const changeTab = (tab: number) => {
   mode.value = tab;
 }
 
@@ -227,7 +210,7 @@ onLoad((options: any) => {
   }
 });
 */
-const loadData = ()=>{
+const loadData = () => {
   uni.showLoading({
     title: "加载中",
   });
@@ -235,14 +218,14 @@ const loadData = ()=>{
     uni.stopPullDownRefresh();
     console.log(res)
     uni.hideLoading();
-    let {userCouponList,userRechargeRightsList}  = res;
+    let {userCouponList, userRechargeRightsList} = res;
     list.value = userRechargeRightsList;
     couponList.value = userCouponList;
   });
 }
 
 onShow(() => {
- loadData();
+  loadData();
 
 
 });
@@ -253,17 +236,21 @@ onShow(() => {
   min-height: 100vh;
   width: 100%;
   background-color: #f6f7fa;
+
   .item {
     position: relative;
     min-height: 240rpx;
     border-radius: 20rpx;
     overflow: hidden;
     background: #fff;
+
     .left {
       flex-grow: 1;
     }
+
     .right {
       flex-shrink: 0;
+
       .btn {
         border-radius: 8rpx;
         border: 1px solid var(--color-primary);
@@ -274,21 +261,21 @@ onShow(() => {
     }
   }
 
-  .tab-list{
+  .tab-list {
     width: 100%;
 
-    .w50{
+    .w50 {
       width: 50%;
       text-align: center;
     }
 
-    .active{
+    .active {
       color: var(--color-primary);
     }
   }
 }
 
-.item-status{
+.item-status {
   font-size: 24rpx;
   padding: 0rpx 2rpx;
   color: var(--color-primary);
@@ -297,22 +284,22 @@ onShow(() => {
 
 }
 
-.item-header__left{
+.item-header__left {
   display: inline-flex;
   align-items: flex-end;
 }
 
-.item-header__right{
+.item-header__right {
   padding: 5rpx;
   display: flex;
   justify-content: flex-end;
 }
 
-.inactive{
+.inactive {
   cursor: not-allowed;
   pointer-events: none;
 
-  .item-status{
+  .item-status {
     font-size: 24rpx;
     padding: 0rpx 2rpx;
     color: #ccc !important;
@@ -321,7 +308,7 @@ onShow(() => {
 
   }
 
-  .color-primary{
+  .color-primary {
     color: #ccc !important;
   }
 }