138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<template>
|
||
<view class="coupon-wrap bg-white" v-if="!loadding">
|
||
<block v-if="DataList.length > 0">
|
||
<view class="item-wrap" v-for="(item, index) in DataList" :key="index">
|
||
<view :class="'coupon-item coupon-item-'+item.color.text" @click="lookRule(item)">
|
||
<!--装饰用的小圆-->
|
||
<view class="circles">
|
||
<text v-for="(circle,num) in 8" :key="num"></text>
|
||
</view>
|
||
<view class="info">
|
||
<view >{{item.coupon_type.text}}</view>
|
||
</view>
|
||
<view class="operation d-b-c w-b">
|
||
<view class="flex-1 coupon-content">
|
||
<view :class="item.is_expire==0&&item.is_use==0?item.color.text:''">
|
||
<template v-if=" item.coupon_type.value == 10 ">
|
||
<view class="price" >
|
||
<text>￥</text>
|
||
<text class="f40 fb">{{ item.reduce_price }}</text>
|
||
</view>
|
||
</template>
|
||
<template v-if="item.coupon_type.value == 20 ">
|
||
<text class="f40 fb">{{ item.discount }}</text><text>折</text>
|
||
</template>
|
||
</view>
|
||
<view class="f30">{{item.name}}</view>
|
||
<view class="f24">
|
||
<template v-if="item.expire_type ==10">
|
||
有效期：领取{{ item.expire_day }}天内有效
|
||
</template>
|
||
<template v-if="item.expire_type ==20">
|
||
有效期：{{item.start_time.text}}至{{item.end_time.text}}
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="btns d-c-c">
|
||
<button type="default" v-if="item.state.value>0" :class="'btn-'+item.color.text" v-on:click.stop="receive(item.coupon_id )">
|
||
立即领取
|
||
</button>
|
||
<button type="default" v-else class="btn-gray" v-on:click.stop>
|
||
{{ item.state.text }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="none-data-box">
|
||
<image src="/static/none.png" mode="widthFix"></image>
|
||
<text>暂无数据</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
/*是否加载完成*/
|
||
loadding: true,
|
||
indicatorDots: true,
|
||
autoplay: true,
|
||
interval: 2000,
|
||
duration: 500,
|
||
DataList: [],
|
||
/*当前页面*/
|
||
page: 1,
|
||
/*每页条数*/
|
||
list_rows: 10,
|
||
};
|
||
},
|
||
mounted() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
/*获取优惠券列表*/
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
|
||
/*获取数据*/
|
||
getData() {
|
||
let self = this;
|
||
self._get('coupon.coupon/lists', {
|
||
page: self.page,
|
||
list_rows: self.list_rows,
|
||
}, function(res) {
|
||
self.DataList = res.data.list;
|
||
self.loadding = false;
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
/*查看规则*/
|
||
lookRule(item) {
|
||
item.rule = true;
|
||
},
|
||
|
||
/*关闭规则*/
|
||
closeRule(item) {
|
||
item.rule = false;
|
||
},
|
||
|
||
/*领取优惠券*/
|
||
receive(e) {
|
||
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: '领取中'
|
||
});
|
||
self._post('user.coupon/receive', {
|
||
coupon_id: e,
|
||
}, function(res) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
});
|
||
self.getData();
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.coupon-wrap {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.item-wrap {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
</style>
|