<template>
|
<view class="coupon-wrap">
|
<view class="item-wrap" v-for="(item, index) in DataList" :key="index" v-if="DataList.length > 0">
|
<view class="coupon-box coupon-item " :class="item.state.value>0?'coupon-item-'+item.color.text:'coupon-item-normal'" @click="lookRule(item)">
|
<!--装饰用的小圆-->
|
<view class="circles circles-right">
|
<text v-for="(circle,num) in 5" :key="num"></text>
|
</view>
|
<!-- <view class="info">
|
<view >{{item.coupon_type.text}}</view>
|
</view> -->
|
<view class="operation coupon-sp d-b-c w-b" v-if=" item.apply_range == 10 || item.coupon_type.value == 30 ">
|
<view class="flex-1 coupon-content">
|
<template v-if="item.shop_supplier_id==0">
|
<view class="coupon-tong f60">通</view>
|
</template>
|
<template v-else>
|
<view class="coupon-product d-c-c">
|
<view class="coupon-product-item">
|
<view>
|
<image :src="item.supplier.logo.file_path"></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
</view>
|
<view class="btns d-b-s d-c">
|
<view>
|
<view class="f26 fb">
|
<text v-if="item.shop_supplier_id>0">[{{item.supplier.name}}]{{item.apply_range==10?'店铺通用券':item.name}}</text>
|
<text v-else>平台通用券</text>
|
</view>
|
<view class="f24 mt10 gray9" v-if="item.coupon_type.value==30">
|
仅限到店使用
|
</view>
|
<view class="f24 mt10 gray9" v-else>
|
<template v-if="item.min_price ==0">
|
无低消门槛
|
</template>
|
<template v-if="item.min_price >0">
|
满{{item.min_price}}元可用
|
</template>
|
</view>
|
</view>
|
<view class="btns-box" :class="item.coupon_type.value == 30?'d-b-c':'d-b-e'">
|
<view class="red" :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>
|
<template v-if="item.coupon_type.value == 30 ">
|
<view class="gray6" @click.stop="gotoPage('/pages/coupon/detail?coupon_id='+ item.coupon_id+'&apply_range='+item.apply_range)">使用规则 ></view>
|
</template>
|
</view>
|
<view class="btns-sp">
|
<button type="default" v-if="item.state.value>0" class="btn-gray coupon-text" v-on:click.stop="receive(item.coupon_id, index)">
|
立即领取
|
</button>
|
<button type="default" v-else class="btn-gray" v-on:click.stop>
|
{{ item.state.text }}
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="operation d-b-c w-b" v-else>
|
<view class="flex-1 coupon-content">
|
<view class="f26 fb">
|
<text>仅可购买</text>
|
<text v-if="item.shop_supplier_id>0">[{{item.supplier.name}}]</text>
|
<text>部分商品</text>
|
</view>
|
<view class="coupon-product mt20 d-b-c">
|
<view class="coupon-product-item" v-for="(item,index2) in item.product" :key="index2"
|
@click="goto_product(item.product_id)">
|
<view>
|
<image :src="item.product_image"></image>
|
</view>
|
<view class="coupon-product-item-price">
|
<view class="f20 tc gray6">¥{{item.product_price}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="btns d-c-c d-c">
|
<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 class="f40 fb">减{{ item.reduce_price*1 }}元</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.min_price>0?'满'+item.min_price*1+'元可用':'无门槛'}}</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-gray"
|
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 class="range_item d-b-c" v-if="item.apply_range == 20"
|
@click.stop="gotoPage('/pages/coupon/detail?coupon_id='+ item.coupon_id+'&apply_range='+item.apply_range)">
|
<view>仅可购买指定部分商品</view>
|
<view><text class="icon iconfont icon-jiantou" style="color: #999999; font-size: 24rpx;"></text>
|
</view>
|
</view>
|
<view class="range_item d-b-c" v-if="item.apply_range == 30"
|
@click.stop="gotoPage('/pages/coupon/detail?coupon_id='+ item.coupon_id+'&apply_range='+item.apply_range)">
|
<view>仅可购买指定分类商品</view>
|
<view><text class="icon iconfont icon-jiantou" style="color: #999999; font-size: 24rpx;"></text>
|
</view>
|
</view>
|
</view>
|
<!-- 没有记录 -->
|
<view class="none-data-box" v-if="DataList.length==0 && !loading">
|
<image src="/static/none.png" mode="widthFix"></image>
|
<text>暂无数据</text>
|
</view>
|
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
</view>
|
</template>
|
|
<script>
|
import uniLoadMore from "@/components/uni-load-more.vue";
|
export default {
|
components: {
|
uniLoadMore
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
indicatorDots: true,
|
autoplay: true,
|
interval: 2000,
|
duration: 500,
|
DataList: [],
|
/*最后一页码数*/
|
last_page: 0,
|
/*当前页面*/
|
page: 1,
|
/*每页条数*/
|
list_rows: 5,
|
no_more: false,
|
};
|
},
|
computed: {
|
/*加载中状态*/
|
loadingType() {
|
if (this.loading) {
|
return 1;
|
} else {
|
if (this.DataList.length != 0 && this.no_more) {
|
return 2;
|
} else {
|
return 0;
|
}
|
}
|
}
|
},
|
mounted() {
|
// uni.showLoading({
|
// title: '加载中'
|
// });
|
/*获取优惠券列表*/
|
this.getData();
|
},
|
methods: {
|
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
self._get('coupon.coupon/lists', {
|
page: self.page || 1,
|
list_rows: self.list_rows,
|
}, function(res) {
|
self.loading = false;
|
self.last_page = res.data.list.last_page;
|
self.DataList = self.DataList.concat(res.data.list.data);
|
if (res.data.list.last_page <= 1) {
|
self.no_more = true;
|
} else {
|
self.no_more = false;
|
}
|
});
|
},
|
/*查看规则*/
|
lookRule(item) {
|
item.rule = true;
|
},
|
|
/*关闭规则*/
|
closeRule(item) {
|
item.rule = false;
|
},
|
|
/*领取优惠券*/
|
receive(e, i) {
|
let self = this;
|
uni.showLoading({
|
title: '领取中'
|
});
|
self._post('user.coupon/receive', {
|
coupon_id: e,
|
}, function(res) {
|
self.DataList[i]['state'] = {text : '已领取', value : 0};
|
uni.hideLoading();
|
uni.showToast({
|
title: '领取成功',
|
duration: 2000,
|
icon: 'success'
|
});
|
});
|
},
|
//跳转商品页面
|
goto_product(product_id) {
|
this.gotoPage('/pages/product/detail/detail?product_id=' + product_id);
|
},
|
onReachBottom() {
|
let self = this;
|
if (self.page < self.last_page) {
|
self.page++;
|
self.getData();
|
}
|
self.no_more = true;
|
},
|
}
|
};
|
</script>
|
|
<style>
|
.coupon-wrap {
|
padding: 30rpx;
|
background-color: #EEEEEE;
|
}
|
|
.item-wrap {
|
margin-bottom: 20rpx;
|
}
|
.range_item{
|
border: 1rpx solid #D9D9D9;
|
border-top: none;
|
padding: 8rpx;
|
border-bottom-left-radius:10rpx ;
|
border-bottom-right-radius:10rpx ;
|
color: #666666;
|
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
|
}
|
/* 新样式 by lyzflash */
|
.coupon-box {
|
border-radius: 12rpx;
|
height: 242rpx;
|
}
|
.coupon-box .circles {
|
left: auto;
|
right: 0;
|
top: 70rpx;
|
bottom: 70rpx;
|
}
|
.coupon-box .circles-right text {
|
border-radius: 10rpx 0 0 10rpx;
|
width: 8rpx;
|
height: 15rpx;
|
background: #f6f6f6;
|
}
|
.coupon-box .operation .coupon-content {
|
position: relative;
|
background-color: #FFFFFF;
|
color: #333333;
|
padding: 20rpx 30rpx;
|
}
|
.coupon-box .coupon-content::before,
|
.coupon-box .coupon-content::after {
|
position: absolute;
|
display: block;
|
content: '';
|
width: 22rpx;
|
height: 11rpx;
|
background: #EEEEEE;
|
z-index: 10;
|
}
|
.coupon-box .coupon-content::before {
|
top: 0;
|
right: -10rpx;
|
border-radius: 0 0 15rpx 15rpx;
|
}
|
.coupon-box .coupon-content::after {
|
bottom: 0;
|
right: -10rpx;
|
border-radius: 15rpx 15rpx 0 0;
|
}
|
.coupon-box .btns {
|
width: 150rpx;
|
padding: 0 20rpx;
|
background: transparent;
|
}
|
.coupon-box.coupon-item- .btns {
|
/* background-color: #BEBEBE; */
|
}
|
.coupon-box .btns button {
|
width: auto;
|
background: #FFFFFF;
|
border-radius: 60rpx;
|
font-size: 22rpx;
|
padding: 4rpx 20rpx;
|
}
|
.coupon-box .operation {
|
padding-left: 0;
|
margin-left: 4rpx;
|
border-radius: 12rpx;
|
}
|
.coupon-product {
|
width: 100%;
|
}
|
.coupon-product-item image {
|
width: 124rpx;
|
height: 124rpx;
|
border-radius: 12rpx;
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
.coupon-box .coupon-sp .btns {
|
width: 446rpx;
|
background: #FFFFFF;
|
position: relative;
|
color: #333333;
|
box-sizing: border-box;
|
padding: 20rpx;
|
}
|
.coupon-box .coupon-sp .btns:after {
|
position: absolute;
|
content: " ";
|
border-left: 2rpx dashed #EEEEEE;
|
left: -2rpx;
|
height: 100%;
|
}
|
.coupon-sp .coupon-product-item image {
|
width: 180rpx;
|
height: 180rpx;
|
}
|
.btns-box {
|
width: 100%;
|
padding-top: 30rpx;
|
border-top: 1rpx solid #eee;
|
}
|
.btns-box .btns-sp {
|
width: 150rpx;
|
text-align: center;
|
}
|
.btns-box .btns-sp button {
|
color: #FFFFFF;
|
display: inline-block;
|
}
|
.coupon-item-red .btns-sp button {
|
background: #e62423;
|
}
|
|
.coupon-item-blue .btns-sp button {
|
background: #178ed9;
|
/* linear-gradient(-128deg, #1fd6ff, #3661ff); */
|
}
|
|
.coupon-item-violet .btns-sp button {
|
background: #ab0bf6;
|
/* linear-gradient(-128deg, #d63efc, #6600c3); */
|
}
|
|
.coupon-item-yellow .btns-sp button {
|
background: #f4a50b;
|
/* linear-gradient(-128deg, #ffe31f, #ffaf36); */
|
}
|
|
.coupon-item-gray .btns-sp button {
|
background: #999999;
|
/* linear-gradient(-128deg, #888888, #999999); */
|
}
|
.coupon-item .coupon-sp .coupon-content {
|
align-items: center;
|
}
|
.coupon-sp .coupon-tong {
|
background: #eee;
|
width: 150rpx;
|
height: 150rpx;
|
text-align: center;
|
line-height: 150rpx;
|
border-radius: 150rpx;
|
}
|
.coupon-item-normal {
|
background: #BEBEBE;
|
}
|
.coupon-item-normal .btns button {
|
color: #BEBEBE;
|
}
|
.coupon-item-normal .btns-sp button {
|
background: #BEBEBE;
|
color: #FFFFFF;
|
}
|
</style>
|
