131 lines
3.2 KiB
Vue
131 lines
3.2 KiB
Vue
<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>
|