94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div ref="container">
|
|||
|
|
<div class="coupon-list" v-if="couponsList.length > 0">
|
|||
|
|
<div
|
|||
|
|
class="item acea-row row-center-wrapper"
|
|||
|
|
v-for="(item, couponsListIndex) in couponsList"
|
|||
|
|
:key="couponsListIndex"
|
|||
|
|
>
|
|||
|
|
<div class="money" :class="item.isUse ? 'moneyGray' : ''">
|
|||
|
|
￥
|
|||
|
|
<span class="num">{{ item.couponPrice }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="text">
|
|||
|
|
<div class="condition line1">购物满{{ item.useMinPrice }}元可用</div>
|
|||
|
|
<div class="data acea-row row-between-wrapper">
|
|||
|
|
<div v-if="item.endTime !== 0">
|
|||
|
|
<data-format-t :data="item.startTime"></data-format-t>-
|
|||
|
|
<data-format-t :data="item.endTime"></data-format-t>
|
|||
|
|
</div>
|
|||
|
|
<div v-else>不限时</div>
|
|||
|
|
<div class="bnt gray" v-if="item.isUse === true">已领取</div>
|
|||
|
|
<div class="bnt gray" v-else-if="item.isUse === 2">已领完</div>
|
|||
|
|
<div class="bnt bg-color-red" v-else @click="getCoupon(item.id, couponsListIndex)">立即领取</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Loading :loaded="loadend" :loading="loading"></Loading>
|
|||
|
|
<!--暂无优惠券-->
|
|||
|
|
<div class="noCommodity" v-if="couponsList.length === 0 && page > 1">
|
|||
|
|
<div class="noPictrue">
|
|||
|
|
<img :src="$VUE_APP_RESOURCES_URL+'/images/noCoupon.png'" class="image" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { getCoupon, getCouponReceive } from "@/api/user";
|
|||
|
|
import Loading from "@/components/Loading";
|
|||
|
|
import DataFormatT from "@/components/DataFormatT";
|
|||
|
|
export default {
|
|||
|
|
name: "getCoupon",
|
|||
|
|
components: {
|
|||
|
|
Loading,
|
|||
|
|
DataFormatT
|
|||
|
|
},
|
|||
|
|
props: {},
|
|||
|
|
data: function() {
|
|||
|
|
return {
|
|||
|
|
page: 1,
|
|||
|
|
limit: 10,
|
|||
|
|
couponsList: [],
|
|||
|
|
loading: false,
|
|||
|
|
loadend: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted: function() {
|
|||
|
|
this.getUseCoupons();
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
!this.loading && this.getUseCoupons();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getCoupon: function(id, index) {
|
|||
|
|
let that = this;
|
|||
|
|
let list = that.couponsList;
|
|||
|
|
getCouponReceive(id)
|
|||
|
|
.then(function(res) {
|
|||
|
|
list[index].isUse = true;
|
|||
|
|
that.$dialog.toast({ mes: "领取成功" });
|
|||
|
|
})
|
|||
|
|
.catch(function(res) {
|
|||
|
|
that.$dialog.toast({ mes: res.response.data.msg });
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getUseCoupons: function() {
|
|||
|
|
let that = this;
|
|||
|
|
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
|||
|
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
|||
|
|
that.loading = true;
|
|||
|
|
let q = { page: that.page, limit: that.limit };
|
|||
|
|
getCoupon(q).then(res => {
|
|||
|
|
that.loading = false;
|
|||
|
|
//apply();js将一个数组插入另一个数组;
|
|||
|
|
that.couponsList.push.apply(that.couponsList, res.data);
|
|||
|
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
|||
|
|
that.page = that.page + 1;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|