deming/components/mine/coupon/index.vue
2020-07-08 18:14:41 +08:00

131 lines
3.1 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="status == 0 ? 'coupon-usable' : 'coupon-unable'">
<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.index&1 ? '店铺优惠券' : '平台优惠券' }}
</view>
<view class="coupon-info">
<view class="info-usable">
<view class="price"><span>10</span></view>
<view class="condition">满100使用</view>
</view>
<view class="info-store u-line-1">仅限 nike官方旗舰店 鞋子商品使用</view>
<view class="info-integral">兑换积分200积分</view>
<view class="info-date">有效期2018.09.06-2018.10.06</view>
</view>
<view class="coupon-btn">
<text v-if="type == 0 && status == 0" @click="exchange">立即兑换</text>
<text v-if="type == 1 && status == 0" @click="use">立即使用</text>
<image v-if="status == 1" src="/static/image/mine/28.png"></image>
<image v-if="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,
},
methods: {
exchange() {
this.$emit('exchange', this.couponInfo.index);
},
use() {
this.$emit('use', this.couponInfo.index);
},
},
};
</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>