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.
117 lines
3.1 KiB
117 lines
3.1 KiB
<template> |
|
<view> |
|
<view class="coupon-list-window" :class="value === true ? 'on' : ''"> |
|
<view class="title"> |
|
优惠券 |
|
<text class="iconfont icon-guanbi" @click="close"></text> |
|
</view> |
|
<view v-if="couponList.length > 0"> |
|
<view class="coupon-list"> |
|
<view |
|
class="item acea-row row-center-wrapper" |
|
v-for="coupon in couponList" |
|
:key="coupon.id" |
|
@click="click(coupon)" |
|
> |
|
<view class="money"> |
|
￥ |
|
<text class="num">{{ coupon.couponPrice }}</text> |
|
</view> |
|
<view class="text"> |
|
<view class="condition line1">{{ coupon.couponTitle }}</view> |
|
<view class="data acea-row row-between-wrapper"> |
|
<view v-if="coupon.endTime === 0">不限时</view> |
|
<view v-else><data-format-t :date="coupon.addTime"></data-format-t> - <data-format-t :date="coupon.endTime"></data-format-t></view> |
|
<view |
|
class="iconfont icon-xuanzhong1 font-color-red" |
|
v-if="checked === coupon.id" |
|
></view> |
|
<view class="iconfont icon-weixuanzhong" v-else></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="couponNo bg-color-red" @click="couponNo">不使用优惠券</view> |
|
</view> |
|
<view v-if="!couponList.length && loaded"> |
|
<view class="pictrue"> |
|
<image src="@/static/images/noCoupon.png" class="image" /> |
|
</view> |
|
</view> |
|
</view> |
|
<view |
|
class="mask" |
|
@touchmove.prevent |
|
:hidden="value === false" |
|
@click="close" |
|
></view> |
|
</view> |
|
</template> |
|
<style scoped lang="less"> |
|
.coupon-list-window .iconfont { |
|
font-size: 40rpx; |
|
} |
|
.couponNo { |
|
font-size: 30rpx; |
|
font-weight: bold; |
|
color: #fff; |
|
width: 690rpx; |
|
height: 86rpx; |
|
border-radius: 43rpx; |
|
text-align: center; |
|
line-height: 86rpx; |
|
margin: 60rpx 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>
|
|
|