购物车，积分，订单详情

src/pages/mall/subs/components/coupon-item.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class='coupon-content'>
+    <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
+    <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
+    <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
+      <text>{{ item.price }}</text>
+      <text>满{{ item.threshold }}元可用</text>
+    </view>
+
+    <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
+      <text>{{ item?.title }}</text>
+      <text>有效期至{{ item.useTime }}</text>
+      <image class='checkbox' :src='assetsUrl("ic_checkbox_active.png")' />
+    </view>
+  </view>
+
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+
+defineProps({
+  item: Object
+});
+</script>
+
+<style lang='scss' scoped>
+.coupon-content {
+  display: flex;
+  flex-direction: row;
+  height: 200rpx;
+  position: relative;
+  margin: 10rpx 0 10rpx 0;
+
+  image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding-left: 50rpx;
+
+    text:nth-of-type(1) {
+      font-size: 55rpx;
+      font-weight: bold;
+    }
+
+    text:nth-of-type(1):after {
+      content: '元';
+      font-size: 24rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      font-weight: 400;
+    }
+  }
+
+  .left-content-disabled {
+    @extend .left-content;
+    color: #C2C2C2;
+  }
+
+  .right-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex: 1;
+    justify-content: center;
+    margin-left: 100rpx;
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      margin-top: 20rpx;
+      color: #333333;
+    }
+
+    .checkbox {
+      display: flex;
+      width: 42rpx;
+      height: 42rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      position: absolute;
+      right: 36rpx;
+    }
+  }
+
+  .right-content-disabled {
+    @extend .right-content;
+    color: #C2C2C2;
+
+    text:nth-of-type(2) {
+      color: #C2C2C2;
+    }
+  }
+}
+
+</style>