You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.1 KiB
118 lines
3.1 KiB
5 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="coupon-list-window" :class="value === true ? 'on' : ''">
|
||
|
|
<div class="title">
|
||
|
|
优惠券
|
||
|
|
<span class="iconfont icon-guanbi" @click="close"></span>
|
||
|
|
</div>
|
||
|
|
<div v-if="couponList.length > 0">
|
||
|
|
<div class="coupon-list">
|
||
|
|
<div
|
||
|
|
class="item acea-row row-center-wrapper"
|
||
|
|
v-for="coupon in couponList"
|
||
|
|
:key="coupon.id"
|
||
|
|
@click="click(coupon)"
|
||
|
|
>
|
||
|
|
<div class="money">
|
||
|
|
￥
|
||
|
|
<span class="num">{{ coupon.couponPrice }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="text">
|
||
|
|
<div class="condition line1">{{ coupon.couponTitle }}</div>
|
||
|
|
<div class="data acea-row row-between-wrapper">
|
||
|
|
<div v-if="coupon.endTime === 0">不限时</div>
|
||
|
|
<div v-else><data-format-t :data="coupon.addTime"></data-format-t> - <data-format-t :data="coupon.endTime"></data-format-t></div>
|
||
|
|
<div
|
||
|
|
class="iconfont icon-xuanzhong1 font-color-red"
|
||
|
|
v-if="checked === coupon.id"
|
||
|
|
></div>
|
||
|
|
<div class="iconfont icon-weixuanzhong" v-else></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="couponNo bg-color-red" @click="couponNo">不使用优惠券</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="!couponList.length && loaded">
|
||
|
|
<div class="pictrue">
|
||
|
|
<img :src="$VUE_APP_RESOURCES_URL+'/images/noCoupon.png'" class="image" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="mask"
|
||
|
|
@touchmove.prevent
|
||
|
|
:hidden="value === false"
|
||
|
|
@click="close"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped>
|
||
|
|
.coupon-list-window .iconfont {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
}
|
||
|
|
.couponNo {
|
||
|
|
font-size: 0.3rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #fff;
|
||
|
|
width: 6.9rem;
|
||
|
|
height: 0.86rem;
|
||
|
|
border-radius: 0.43rem;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.86rem;
|
||
|
|
margin: 0.6rem auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import { getOrderCoupon } from "@/api/order";
|
||
|
|
import DataFormatT from "@/components/DataFormatT";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "CouponListWindow",
|
||
|
|
components: {
|
||
|
|
DataFormatT
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
value: Boolean,
|
||
|
|
checked: Number,
|
||
|
|
price: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: undefined
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: function() {
|
||
|
|
return {
|
||
|
|
couponList: [],
|
||
|
|
loaded: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
price(n) {
|
||
|
|
if (n === undefined || n == null) return;
|
||
|
|
this.getCoupon();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function() {},
|
||
|
|
methods: {
|
||
|
|
close: function() {
|
||
|
|
this.$emit("input", false);
|
||
|
|
this.$emit("close");
|
||
|
|
},
|
||
|
|
getCoupon() {
|
||
|
|
getOrderCoupon(this.price).then(res => {
|
||
|
|
this.couponList = res.data;
|
||
|
|
this.loaded = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
click(coupon) {
|
||
|
|
this.$emit("checked", coupon);
|
||
|
|
this.$emit("input", false);
|
||
|
|
},
|
||
|
|
couponNo: function() {
|
||
|
|
this.$emit("checked", null);
|
||
|
|
this.$emit("input", false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|