xlcs/xlcs-user/components/CouponInfoList/CouponInfoList.vue

131 lines
3.2 KiB
Vue
Raw Normal View History

2023-09-22 15:41:37 +08:00
<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>