|
|
<template>
|
|
|
<view class="">
|
|
|
<!-- 未领取，已领取 -->
|
|
|
<view class="coupon-wrap" :style="gradientColor" :class="{ 'gray-wrap': state === 3 || state === 2 || couponData.status_code == 'cannot_get' }">
|
|
|
<view class="coupon-item u-flex u-row-between">
|
|
|
<!-- <view class="coupon-left u-flex-col ">
|
|
|
<view class="sum-box">
|
|
|
<text class="unit " :style="{ color: priceColor }">￥</text>
|
|
|
<text class="sum " :style="{ color: priceColor }">{{ couponData.amount }}</text>
|
|
|
<text class="sub " :style="{ color: priceColor }">{{ couponData.name }}</text>
|
|
|
</view>
|
|
|
<view class="notice " :style="{ color: color }">满{{ couponData.enough }}元可用</view>
|
|
|
<view class="notice" :style="{ color: color }">
|
|
|
有效期：{{ $u.timeFormat(couponData.usetime.start, 'yyyy-mm-dd') }} 至 {{ $u.timeFormat(couponData.usetime.end, 'yyyy-mm-dd') }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="coupon-right u-flex-col">
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 0" @tap.stop="getCoupon">{{ stateMap[couponData.status_code] || '立即领取' }}</button>
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 1">去使用</button>
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 2">暂不可用</button>
|
|
|
<button class="get-btn" v-if="state === 3">{{ stateMap[couponData.status_code] }}</button>
|
|
|
<view class="surplus-num" :style="{ color: color }" v-if="state === 0">仅剩{{ stock }}张</view>
|
|
|
</view> -->
|
|
|
<view class="coupon-left u-flex-col ">
|
|
|
<view class="sum-box">
|
|
|
<view class="couponInfo">
|
|
|
<text class="unit " :style="{ color: priceColor }">￥</text>
|
|
|
<text class="sum " :style="{ color: priceColor }">{{ couponData.amount }}</text>
|
|
|
</view>
|
|
|
<view class="notice" :style="{ color: color }">满{{ couponData.enough }}元可用</view>
|
|
|
<!-- <text class="sub " :style="{ color: priceColor }">{{ couponData.name }}</text> -->
|
|
|
</view>
|
|
|
|
|
|
<image src="../../static/images/yhq.png" mode="heightFix"></image>
|
|
|
</view>
|
|
|
<view class="coupon-right u-flex-col">
|
|
|
<text class="sub " :style="{ color: priceColor }">{{ couponData.name }}</text>
|
|
|
<view class="validDate" :style="{ color: color }">
|
|
|
有效期：{{ $u.timeFormat(couponData.usetime.start, 'yyyy-mm-dd') }} 至 {{ $u.timeFormat(couponData.usetime.end, 'yyyy-mm-dd') }}
|
|
|
</view>
|
|
|
<view style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
<view class="surplus-num" :style="{ color: color }" v-if="state === 0">仅剩{{ stock }}张</view>
|
|
|
<view class="">
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 0" @tap.stop="getCoupon">{{ stateMap[couponData.status_code] || '立即领取' }}</button>
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 1">去使用</button>
|
|
|
<button class="get-btn" :style="{ color: btnTextColor }" v-if="state === 2">暂不可用</button>
|
|
|
<button class="get-btn" v-if="state === 3">{{ stateMap[couponData.status_code] }}</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* shoproCoupon-优惠券
|
|
|
* @property {Number} state - 0:立即领取，1：去使用，2：查看详情，3：已失效。
|
|
|
* @property {Object} couponData - 优惠劵数据。
|
|
|
* @property {String} gradientColor - 渐变色。
|
|
|
*/
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
stock: 0,
|
|
|
stateMap: {
|
|
|
can_use: '立即使用',
|
|
|
used: '已使用',
|
|
|
expired: '已失效',
|
|
|
cannot_use: '暂不可用',
|
|
|
can_get: '立即领取',
|
|
|
cannot_get: '已领取'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
state: 0, //0:立即领取，1：去使用，2：查看详情，3：已失效。
|
|
|
couponData: {},
|
|
|
gradientColor: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
color: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
btnTextColor: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
priceColor: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
created() {
|
|
|
this.$nextTick(() => {
|
|
|
this.stock = this.couponData.stock;
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
getCoupon() {
|
|
|
let that = this;
|
|
|
|
|
|
that.$http(
|
|
|
'coupons.get',
|
|
|
{
|
|
|
id: that.couponData.id
|
|
|
},
|
|
|
'领取中...'
|
|
|
).then(res => {
|
|
|
if (res.code === 1) {
|
|
|
that.stock -= 1;
|
|
|
that.$u.toast('领取成功');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
// 失效
|
|
|
.gray-wrap {
|
|
|
-webkit-filter: grayscale(1); /* Webkit */
|
|
|
filter: gray; /* IE6-9 */
|
|
|
filter: grayscale(1); /* W3C */
|
|
|
}
|
|
|
// 未领取，已领取
|
|
|
.coupon-wrap {
|
|
|
// mask: url($IMG_URL+'/imgs/coupon_bg1.png');
|
|
|
// -webkit-mask-box-image: url($IMG_URL+'/imgs/coupon_bg1.png');
|
|
|
mask-size: 100% 100%;
|
|
|
position: relative;
|
|
|
border-radius: 10rpx;
|
|
|
width: 710rpx;
|
|
|
height: 220rpx;
|
|
|
background: #ffffff;
|
|
|
// background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning);
|
|
|
.coupon-item {
|
|
|
width: 100%;
|
|
|
// height: 168rpx;
|
|
|
height:100%;
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
.coupon-left {
|
|
|
position: relative;
|
|
|
// height: 100%;
|
|
|
justify-content: center;
|
|
|
width:220rpx;
|
|
|
height:220rpx;
|
|
|
// padding-left: 40rpx;
|
|
|
.sum-box{
|
|
|
position: absolute;
|
|
|
z-index: 99;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
image{
|
|
|
width:auto;
|
|
|
height:220rpx;
|
|
|
}
|
|
|
.couponInfo{
|
|
|
|
|
|
}
|
|
|
.unit {
|
|
|
font-size: 24rpx;
|
|
|
color: #222;
|
|
|
}
|
|
|
|
|
|
.sum {
|
|
|
font-size: 48rpx;
|
|
|
font-weight: bold;
|
|
|
color: #222;
|
|
|
|
|
|
// line-height: 55rpx;
|
|
|
// padding-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.notice {
|
|
|
|
|
|
margin-top: 38rpx;
|
|
|
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.coupon-right {
|
|
|
height: 100%;
|
|
|
// width: 220rpx;
|
|
|
flex:1;
|
|
|
justify-content: space-around;
|
|
|
padding: 0 30rpx 0 25rpx;
|
|
|
.sub {
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #222222;
|
|
|
}
|
|
|
.validDate{
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #999999;
|
|
|
}
|
|
|
.get-btn {
|
|
|
|
|
|
width: 150rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 44rpx;
|
|
|
background: #FFFFFF;
|
|
|
border: 1px solid #222222;
|
|
|
border-radius: 25rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
}
|
|
|
|
|
|
.surplus-num {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
