deming/components/mine/coupon/index.vue
2020-07-17 17:34:42 +08:00

140 lines
3.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="c-coupon">
<view :class="type == 1 && status != 0 ? 'coupon-unable' : 'coupon-usable'">
<view class="info-type" :style="{ backgroundImage: 'url(' + (status == 0 ? '/static/image/mine/30.png' : '/static/image/mine/31.png') + ')', backgroundSize:'contain', backgroundRepeat: 'no-repeat' }">
<div class="wrap_left_top"></div>
{{ couponInfo.type == 2 ? '店铺优惠券' : '平台优惠券' }}
</view>
<view class="coupon-info">
<view class="info-usable">
<view class="price"><span>{{ couponInfo.vouchertemplate_price }}</span></view>
<view class="condition">{{ couponInfo.vouchertemplate_limit }}使用</view>
</view>
<view class="info-store u-line-1">仅限{{ couponInfo.vouchertemplate_storename }}鞋子商品使用</view>
<view class="info-integral">兑换积分{{ couponInfo.vouchertemplate_points }}积分</view>
<view class="info-date">有效期{{ couponInfo.vouchertemplate_startdate }}-{{ couponInfo.vouchertemplate_enddate }}</view>
</view>
<view class="coupon-btn">
<text v-if="type == 0 && status == 0" @click="exchangeCoupon">立即兑换</text>
<text v-if="type == 1 && status == 0" @click="use">立即使用</text>
<image v-if="type == 1 && status == 1" src="/static/image/mine/28.png"></image>
<image v-if="type == 1 && status == 2" src="/static/image/mine/29.png"></image>
</view>
</view>
</view>
</template>
<script>
/**
* coupon 优惠券
* @description 优惠券组件
* @property {Number} type 优惠券操作方式(可兑换的优惠券: 0 / 自己的优惠券: 1)
* @property {Object} coupon-info 优惠券信息
* @event {Function} exchange 兑换优惠券
* @event {Function} use 使用优惠券
*/
export default {
data() {
return {}
},
props: {
status: Number,
type: Number,
couponInfo: Object,
},
created() {
console.log(this.couponInfo);
},
methods: {
exchange() {
this.$emit('exchange', this.couponInfo.vouchertemplate_id);
},
exchangeCoupon() {
this.$u.api.getCoupon({ id: this.couponInfo.vouchertemplate_id }).then(res => {
this.$u.toast(res.message);
if(res.errCode == 0) {}
})
},
use() {
this.$emit('use', this.couponInfo.vouchertemplate_id);
},
},
};
</script>
<style lang="scss" scoped>
.c-coupon {
position: relative;
z-index: 9;
@mixin coupon-image($url) {
width: 690rpx;
height: 194rpx;
background: url($url) no-repeat left top / contain;
color: #FFFFFF;
.info-type {
width: 150rpx;
height: 30rpx;
line-height: 30rpx;
font-size: 20rpx;
border-radius: 10rpx 0rpx 10rpx 0rpx;
padding-left: 25rpx;
margin-bottom: 6rpx;
}
.coupon-info {
z-index: 10;
position: absolute;
top: 36rpx;
left: 0;
font-weight: 500;
padding-left: 20rpx;
width: 360rpx;
.info-usable{
margin-bottom: 6rpx;
display: flex;
align-items: center;
.price {
margin-right: 16rpx;
font-size: 40rpx;
> span {
font-size: 50rpx;
}
}
.condition {
font-size: 24rpx;
}
}
.info-store{
margin-bottom: 10rpx;
font-size: 22rpx;
}
.info-integral{
margin-bottom: 10rpx;
font-size: 22rpx;
}
.info-date{
font-size: 20rpx;
}
}
.coupon-btn {
z-index: 10;
position: absolute;
right: 60rpx;
top: 50%;
transform: translate(0, -50%);
> text {
font-size: 32rpx;
font-weight: 500;
color: rgba(255,255,255,1);
}
> image {
width: 122rpx;
height: 122rpx;
}
}
}
.coupon-usable {
@include coupon-image('/static/image/mine/26.png');
}
.coupon-unable {
@include coupon-image('/static/image/mine/27.png');
}
}
</style>