修正项目

2024-01-07 01:10:08 +08:00
parent 2f29241806
commit b22014e976
943 changed files with 27699 additions and 28227 deletions
--- a/xlcs-user/components/CouponInfoList/CouponInfoList.vue
+++ b/xlcs-user/components/CouponInfoList/CouponInfoList.vue
@@ -0,0 +1,130 @@
+<template>
+  <u-popup v-model="showCouponInfoListModal" :closeable="true" border-radius="14" mode="bottom" @close="closeModal">
+    <view class="coupon">
+      <view v-for="couponInfoItem in couponInfoList" :key="couponInfoItem.id" class="content u-m-b-20">
+        <view class="left">
+          <view class="sum">
+            ￥
+            <text class="num">{{ couponInfoItem.amount }}</text>
+          </view>
+          <view class="type">{{ couponInfoItem.couponType === 'FULL_REDUCTION' ? '满减券' : '现金券' }}</view>
+          <view class="type">{{ getRangeType(couponInfoItem.rangeType) }}</view>
+        </view>
+        <view class="centre">
+          <view class="title">{{ couponInfoItem.couponName }}</view>
+          <view class="u-type-info">{{ couponInfoItem.rangeDesc }}</view>
+          <view class="valid-date">过期时间：{{ dayjs(couponInfoItem.expireTime).format('YYYY-MM-DD') }}</view>
+        </view>
+        <view class="right">
+          <block v-if="couponInfoItem.couponStatus === 1">
+            <u-tag text="已领取" type="success"/>
+          </block>
+          <block v-else-if="couponInfoItem.couponStatus === 2">
+            <u-tag text="已使用" type="info"/>
+          </block>
+          <block v-else>
+            <view :round="true" class="immediate-use" size="mini" @click="receiveCoupon(couponInfoItem.id)">领取</view>
+          </block>
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+
+export default {
+  props: ['showCouponInfoList', 'couponInfoList'],
+  name: 'CouponInfoList',
+  computed: {
+    getRangeType() {
+      return function (rangeType) {
+        switch (rangeType) {
+          case 'ALL':
+            return '全场通用';
+          case 'SKU':
+            return '指定商品';
+          case 'CATEGORY':
+            return '指定分类';
+        }
+      };
+    },
+    showCouponInfoListModal: {
+      get() {
+        return this.showCouponInfoList;
+      },
+      set(value) {
+        return false;
+      }
+    }
+  },
+  methods: {
+    dayjs,
+    closeModal() {
+      this.$emit('update:showCouponInfoList', false);
+    },
+    // 领取优惠券
+    receiveCoupon(id) {
+      this.$emit('getCouponInfo', id)
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.coupon {
+  margin: 80rpx auto;
+  margin-bottom: 30rpx;
+  background-color: #ffffff;
+  width: 700rpx;
+  color: $u-type-warning;
+  font-size: 28rpx;
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 40rpx 20rpx;
+    border: 10rpx;
+    background-color: #fff5f4;
+
+    .left {
+      .sum {
+        font-size: 32rpx;
+
+        .num {
+          font-size: 60rpx;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .centre {
+      margin-left: 40rpx;
+
+      .title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: $u-main-color;
+      }
+    }
+
+    .right {
+      margin-left: 30rpx;
+
+      .immediate-use {
+        padding: 0 20rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        line-height: 50rpx;
+        background-color: $u-type-warning !important;
+        color: #ffffff !important;
+        font-size: 24rpx;
+        border: none;
+        word-break: keep-all;
+      }
+    }
+  }
+}
+</style>