<!--
|
/**
|
* @description 优惠券组件
|
* @author shm
|
*/
|
-->
|
<template>
|
<div class="w-coupon-style">
|
<div class="w-coupon row-between con-list" :class="addClass(item, 'out')">
|
<div class="left">
|
<div class="copon-price row-center coloum-center top-style">
|
<span class="font24">￥</span> {{ item.deductionAmount }}
|
</div>
|
<div v-if="type == 'default'">
|
<div v-if="item.status == '02' || item.status == '03'" @click="clickGet">
|
<!-- 已使用 -->
|
<div v-if="item.status == '02'" class="yy-style"></div>
|
<!-- 已过期 -->
|
<div v-if="item.status == '03'" class="gq-style"></div>
|
</div>
|
<div v-else>
|
<div class="get-btn" :class="addClass(item, 'get')" @click="clickGet">
|
<div v-if="item.status == '01'">去使用</div>
|
<div v-if="item.status == '04'">不可用</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="get-btn"
|
:class="addClass(item, 'get')"
|
v-if="type == 'get'"
|
@click="clickGet"
|
>
|
{{ item.isReceive | fillterReciveStatus }}
|
</div>
|
</div>
|
<div
|
class="right flex1"
|
:class="addClass(item, 'out') === 'dis-bg' ? 'dis-right' : 'active-right'"
|
>
|
<div
|
:class="
|
addClass(item, 'out') === 'dis-bg' ? 'dis-coupon-name' : 'active-coupon-name'
|
"
|
class="word-break coupon-name font600 font26"
|
>
|
{{ item.couponName }}
|
</div>
|
<div
|
class="coupon-date mt10 font24 letter"
|
v-if="item.effectiveStartDate && item.effectiveEndDate"
|
>
|
{{ item.effectiveStartDate | fillterTime }}—{{
|
item.effectiveEndDate | fillterTime
|
}}
|
</div>
|
<div
|
:class="
|
addClass(item, 'out') === 'dis-bg' ? 'dis-coupon-date' : 'active-coupon-date'
|
"
|
class="coupon-date mt10 font24 letter"
|
v-else
|
>
|
领取当日生效
|
</div>
|
<div
|
:class="
|
addClass(item, 'out') === 'dis-bg' ? 'dis-coupon-date' : 'active-coupon-date'
|
"
|
class="tips-txt mt10 spky-style"
|
@click="goMore"
|
>
|
<span class="text-style">{{
|
item.applyType == "1" ? "全部商品可用" : "指定商品可用"
|
}}</span>
|
<van-icon
|
:name="!afold ? 'arrow-down' : 'arrow-up'"
|
size="16"
|
color="#FFF"
|
class="arrow-style dis-arrow-style"
|
/>
|
</div>
|
</div>
|
<div class="semicircle-bottom"></div>
|
<div class="semicircle-top"></div>
|
</div>
|
<div class="des-style" v-if="afold">{{ item.couponDes }}</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "w-coupon",
|
props: {
|
item: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
type: {
|
type: String,
|
default: "default",
|
},
|
},
|
data() {
|
return {
|
afold: false,
|
};
|
},
|
methods: {
|
clickGet() {
|
if (this.item.status == "01" || this.item.status == "1") {
|
if (this.item.isReceive == "2") {
|
return;
|
}
|
this.$emit("click-right", this.item);
|
}
|
},
|
clickLeft() {
|
this.$emit("click-left", this.item);
|
},
|
addClass(item, name) {
|
let btnClass = "";
|
if (item.status == "01" || item.status == "1" || item.isReceive == "1") {
|
if (item.isReceive == "2") {
|
if (name == "out") {
|
btnClass = "dis-bg";
|
} else {
|
btnClass = "dis-btn";
|
}
|
} else {
|
if (name == "out") {
|
btnClass = "bg-box";
|
} else {
|
btnClass = "active-btn";
|
}
|
}
|
} else {
|
if (name == "out") {
|
btnClass = "dis-bg";
|
} else {
|
btnClass = "dis-btn";
|
}
|
}
|
return btnClass;
|
},
|
goMore(obj) {
|
this.afold = !this.afold;
|
this.item.flag = this.afold;
|
},
|
},
|
filters: {
|
fillterTime(val) {
|
if (val) {
|
return val.substr(0, 10);
|
} else {
|
return "--";
|
}
|
},
|
fillterStatus(val) {
|
if (val == "01") {
|
return "立即使用";
|
}
|
if (val == "02") {
|
return "已使用";
|
}
|
if (val == "03") {
|
return "已过期";
|
}
|
if (val == "04") {
|
return "不可用";
|
}
|
},
|
fillterReciveStatus(val) {
|
switch (val) {
|
case "1":
|
return "领取";
|
break;
|
case "2":
|
return "已领取";
|
break;
|
default:
|
return "领取";
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.dis-bg {
|
// background: url('~@/assets/images/goodsDetail/yhq2.jpg') !important;
|
// background-size: cover !important;
|
// background-repeat: no-repeat !important;
|
background: #e6e6e6;
|
color: #000;
|
z-index: 1001;
|
}
|
|
.bg-box {
|
padding: 20px;
|
color: #fff;
|
background: linear-gradient(108deg, #da474b, #a41c1f 100%);
|
// background: url("~@/assets/images/goodsDetail/yhq1.jpg");
|
// background-size: 100% 248px;
|
// background-size: cover;
|
// background-repeat: no-repeat;
|
// color: #EB0F17;
|
}
|
|
.w-coupon {
|
// width: 709px;
|
height: 248px;
|
border-radius: 4px;
|
margin-top: 20px;
|
padding: 0;
|
.overdue-img {
|
width: 120px;
|
height: 115px;
|
position: absolute;
|
bottom: 32px;
|
right: 20px;
|
}
|
.dis-coupon-name {
|
color: #fff;
|
}
|
.active-coupon-name {
|
color: #fff;
|
}
|
.active-coupon-date {
|
color: #fff;
|
}
|
.dis-coupon-date {
|
color: #fff;
|
}
|
.coupon-name {
|
line-height: 42px;
|
}
|
.left {
|
width: 240px;
|
padding-top: 60px;
|
}
|
.dis-right,
|
.active-right {
|
padding: 40px 30px;
|
}
|
.active-right {
|
border-left: 2px dashed rgba(255, 255, 255, 0.2);
|
}
|
.dis-right {
|
border-left: 2px dashed #d9d9d9;
|
}
|
.right-b-style {
|
border-left: 4px dotted #fff;
|
padding-left: 30px;
|
}
|
|
.copon-price {
|
font-size: 42px;
|
}
|
.coupon-date {
|
line-height: 39px;
|
}
|
.dis-btn {
|
border: 1px solid #fff;
|
border-radius: 4px;
|
color: #fff;
|
}
|
// .active-btn {
|
// border: 1px solid #fff;
|
// color: #fff;
|
// border-radius: 4px;
|
// }
|
.get-btn {
|
width: 150px;
|
height: 50px;
|
background-color: rgba(255, 255, 255, 0.2);
|
border-radius: 34px;
|
font-size: 24px;
|
font-weight: 400;
|
color: #fff;
|
line-height: 50px;
|
text-align: center;
|
margin: 0 auto;
|
}
|
|
.tips-txt {
|
line-height: 30px;
|
font-size: 20px;
|
}
|
.tm {
|
opacity: 0.65;
|
}
|
}
|
.spky-style {
|
opacity: 0.65;
|
font-size: 28px;
|
font-weight: 400;
|
color: #fff;
|
overflow: hidden;
|
margin-top: 41px;
|
.text-style {
|
float: left;
|
}
|
.arrow-style {
|
float: right;
|
}
|
}
|
.des-style {
|
background-color: #fff;
|
font-size: 24px;
|
font-weight: 400;
|
color: #666;
|
padding: 22px 32px 20px 30px;
|
}
|
.semicircle-bottom,
|
.semicircle-top {
|
width: 20px;
|
height: 10px;
|
background-color: #fff;
|
position: absolute;
|
left: 232px;
|
}
|
.semicircle-bottom {
|
border-radius: 0 0 20px 20px;
|
top: 0;
|
}
|
.semicircle-top {
|
border-radius: 20px 20px 0 0;
|
bottom: 0;
|
}
|
.con-list {
|
position: relative;
|
}
|
.gq-style,
|
.yy-style {
|
width: 130rpx;
|
height: 110rpx;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
.yy-style {
|
background: url("~@/assets/images/yy.png");
|
background-size: 130rpx 110rpx;
|
}
|
.gq-style {
|
background: url("~@/assets/images/ygq.png");
|
background-size: 130rpx 110rpx;
|
}
|
.top-style {
|
margin-top: 36px;
|
}
|
</style>
|
