代码提交

pages/discountCoupon/components/CouponItem.vue

@@ -0,0 +1,136 @@
+<!--
+    @name: CouponItem
+    @author: kahu4
+    @date: 2023-10-31 11:22
+    @description：CouponItem
+    @update: 2023-10-31 11:22
+-->
+<script setup>
+import { toRefs } from "vue";
+import { receiveACoupon } from "@/api/coupon";
+import { useRouter } from "@/hooks/useRouter";
+
+const {push} = useRouter()
+const props = defineProps({
+  coupons: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'select'
+  },
+  tabType: {
+    type: Number,
+    default: 0
+  }
+})
+
+const {
+  coupons
+} = toRefs(props)
+
+const getCoupon = async () => {
+  await receiveACoupon(coupons.value.id)
+  uni.showToast({
+    title: "领取成功",
+    icon: "none",
+    duration: 2000
+  });
+}
+
+const goToProduct = () => {
+  push({
+    url: '/pages/goodsList/goodsList'
+  })
+}
+
+</script>
+
+<template>
+  <view class="coupon-item">
+    <!-- 折扣力度 -->
+    <view class="discount">
+      <view class="unit pre-unit" v-if="coupons.couponType === 1">
+        ￥
+      </view>
+      {{coupons.couponType == 1 ? coupons.couponValue : coupons.discount}}
+      <view class="unit" v-if="coupons.couponType === 2">
+        折
+      </view>
+    </view>
+    <!-- 优惠券信息 -->
+    <view class="info">
+      <view class="row">
+        {{coupons.couponType == 1 ? '满减券' : '折扣券'}}
+      </view>
+      <view class="row tip">
+        (实付{{coupons.threshold}}元使用)
+      </view>
+    </view>
+    <!-- button -->
+    <view v-if="type === 'select'">
+      <view class="button" v-if="tabType === 0">
+        <span @click="goToProduct">去使用</span>
+      </view>
+      <view class="button disable" v-if="tabType === 1">
+        <span>已使用</span>
+      </view>
+      <view class="button expired" v-if="tabType === 2">
+        <span>已失效</span>
+      </view>
+    </view>
+    <view class="button get-coupon" v-if="type === 'get'" @click="getCoupon">
+      领取
+    </view>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.coupon-item{
+  margin-bottom: 30rpx;
+  width: 100%;
+  aspect-ratio: 682/176;
+  background: url("@/static/background/coupon-bg.png") no-repeat ;
+  background-size: 100%;
+  padding: 25rpx 60rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .discount{
+    display: flex;
+    align-items: flex-end;
+    font-size: 68rpx;
+    .unit{
+      font-size: 38rpx;
+      margin-bottom: 15rpx;
+    }
+  }
+
+  .info{
+    font-size: 38rpx;
+    .tip{
+      font-size: 24rpx;
+    }
+  }
+
+  .button{
+    padding: 14rpx 22rpx;
+    background: #ee6d46;
+    color: #fff;
+  }
+  .get-coupon {
+
+  }
+  .disable{
+    background: #666666;
+  }
+  .expired{
+    background: #999999;
+  }
+}
+</style>