更新

src/views/coupons/index.module.less

@@ -15,3 +15,123 @@
   background-color: #fff;
   border-radius: 10px;
 }
+
+.item {
+  position: relative;
+  border-radius: 10px;
+  background: #fae6e7;
+  padding: 20px 10px 20px 18px;
+  color: #fc1a19;
+  + .item {
+    margin-top: 12px;
+  }
+
+  &.USED,
+  &.EXPIRED {
+    background: #f8f8f8;
+    color: #666666;
+
+    .conditionTag {
+      background-color: #ebebeb;
+    }
+  }
+
+  // 是否可以选择
+  &.select {
+    padding-left: 40px;
+  }
+  // 优惠是否能使用
+  &.disabled {
+    opacity: 0.6;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    content: ' ';
+    z-index: 1;
+    top: 50%;
+    background: #fff;
+    margin-top: -8px;
+  }
+  &:before {
+    left: -8px;
+  }
+
+  &:after {
+    right: -8px;
+  }
+
+  .top,
+  .bottom {
+    display: flex;
+    align-items: center;
+  }
+  .price {
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 42px;
+    width: 112px;
+
+    font-family: PingFangSC-Regular, PingFang SC;
+    .suffix {
+      font-size: 24px;
+      line-height: 33px;
+    }
+  }
+  .type {
+    max-width: 165px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .bottom {
+    padding-top: 5px;
+    font-size: 12px;
+  }
+  .condition {
+    width: 112px;
+  }
+  .conditionTag {
+    background: #fbd0d1;
+    border-radius: 8px;
+    font-weight: 600;
+    line-height: 17px;
+    min-width: 80px;
+    display: inline-block;
+    text-align: center;
+  }
+
+  .iconUsed,
+  .iconExpired {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 54px;
+    height: 41px;
+  }
+
+  .iconUsed {
+    background: url('./images/icon_used.png') no-repeat center;
+    background-size: contain;
+  }
+  .iconExpired {
+    background: url('./images/icon_expired.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .img-icon {
+    position: absolute;
+    top: 9px;
+    left: 9px;
+    width: 22px;
+    height: 22px;
+  }
+}

src/views/coupons/item.tsx

@@ -1,8 +1,67 @@
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import dayjs from 'dayjs'
+import { Checkbox } from 'vant'
+import activeIcon from './images/activeIcon.png'
+import inactiveIcon from './images/inactiveIcon.png'
 
 export default defineComponent({
   name: 'coupon-item',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    },
+    isSelect: {
+      type: Boolean,
+      default: false
+    },
+    onClick: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
   render() {
-    return <>优惠券</>
+    const item: any = this.item
+    return (
+      <div
+        class={[
+          styles.item,
+          styles[item.useState],
+          this.isSelect && styles.select,
+          item.disabled && styles.disabled
+        ]}
+        onClick={() => {
+          if (item.disabled) return
+          this.onClick(item)
+        }}
+      >
+        <img
+          class={styles['img-icon']}
+          src={item.checked ? activeIcon : inactiveIcon}
+        />
+        <div class={styles.top}>
+          <div class={styles.price}>
+            <span class={styles.suffix}>￥</span>
+            <span>{item.discountPrice}</span>
+          </div>
+
+          <div class={styles.type}>{item.name}</div>
+        </div>
+
+        <div class={styles.bottom}>
+          <div class={styles.condition}>
+            <span class={styles.conditionTag}>满{item.useLimit}可用</span>
+          </div>
+          <div class={styles.useTime}>
+            有效期：{dayjs(item.startTime).format('YYYY.MM.DD')}~
+            {dayjs(item.endTime).format('YYYY.MM.DD')}
+          </div>
+        </div>
+
+        {item.useState === 'USED' && <div class={styles.iconUsed}></div>}
+        {item.useState === 'EXPIRED' && <div class={styles.iconExpired}></div>}
+      </div>
+    )
   }
 })

src/views/coupons/list.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
   },
   data() {
     return {
-      list: [],
+      list: [] as any,
       dataShow: true, // 判断是否有数据
       loading: false,
       finished: false,
@@ -30,7 +30,42 @@ export default defineComponent({
   },
   mounted() {
     // this.getList()
-    this.dataShow = false
+
+    this.list = [
+      {
+        couponType: 'FULL_DISCOUNT',
+        discountPrice: '200',
+        useLimit: '20',
+        endTime: new Date(),
+        id: 1,
+        name: '小酷Ai充值券',
+        startTime: new Date(),
+        useState: 'EXPIRED',
+        useTime: new Date()
+      },
+      {
+        couponType: 'FULL_DISCOUNT',
+        discountPrice: '300',
+        useLimit: '100',
+        endTime: new Date(),
+        id: 2,
+        name: '小酷Ai充值券',
+        startTime: new Date(),
+        useState: 'USED',
+        useTime: new Date()
+      },
+      {
+        couponType: 'FULL_DISCOUNT',
+        discountPrice: '3000',
+        useLimit: '10',
+        endTime: new Date(),
+        id: 2,
+        name: '小酷Ai充值券',
+        startTime: new Date(),
+        useState: 'USABLE',
+        useTime: new Date()
+      }
+    ]
   },
   methods: {
     onSort() {
@@ -75,8 +110,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.list}>
-        <Item />
-        {/* {this.dataShow ? (
+        {this.dataShow ? (
           <List
             v-model:loading={this.loading}
             finished={this.finished}
@@ -85,11 +119,20 @@ export default defineComponent({
             onLoad={this.getList}
             immediateCheck={false}
           >
-            <span>11212</span>
+            {this.list.map((item: any) => (
+              <Item
+                isSelect
+                item={item}
+                onClick={(obj: any) => {
+                  obj.checked = !obj.checked
+                  obj.disabled = true
+                }}
+              />
+            ))}
           </List>
         ) : (
           <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无优惠券" />
-        )} */}
+        )}
       </div>
     )
   }