422 lines
15 KiB
Vue
422 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<headerNav title="我的优惠券"/>
|
|
<van-cell-group>
|
|
<van-field
|
|
center
|
|
clearable
|
|
placeholder="请输入优惠码"
|
|
|
|
v-model="couponCode"
|
|
>
|
|
<van-button slot="button" size="small" type="primary" :loading="exchangeLoading" @click="onExchange">兑换</van-button>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<van-tabs >
|
|
<van-tab title="未使用">
|
|
<ul>
|
|
<van-list
|
|
v-model="unusedData.loading"
|
|
:finished="unusedData.finished"
|
|
@load="onLoad"
|
|
>
|
|
<li v-for="(item,index) in unusedData.list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
|
|
<div class="couponTop">
|
|
<div class="cpnamount">
|
|
<div class="amountWrap">
|
|
<div class="amount" v-if="item.preferentialType === 1">
|
|
<span class="amountSign" >￥</span>
|
|
<span class="amountNum">{{item.priceOff / 100}}</span>
|
|
</div>
|
|
<div class="amount" v-else="item.preferentialType === 2">
|
|
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
|
<span class="amountSign">折</span>
|
|
</div>
|
|
<div class="condition">
|
|
<span>满 {{item.priceAvailable / 100.0}} 元可用</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="couponInfoWrap">
|
|
<div class="cpninfo">
|
|
<div class="detail">
|
|
<span class="name">{{item.title}}</span></div>
|
|
</div>
|
|
<div class="validity">
|
|
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
|
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
|
|
</div>
|
|
<van-button type="danger" size="mini">立即使用</van-button>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="couponMid " v-if="item.Info!=''">-->
|
|
<!-- <span>详细信息</span>-->
|
|
<!-- <van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />-->
|
|
<!-- </div>-->
|
|
<!-- <div class="info" v-if="item.Info!=''" >-->
|
|
<!-- <div class="text">-->
|
|
<!-- {{item.Info}}-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- todo 芋艿，后续做优化。指定哪些商品 / 分类可用 -->
|
|
<div class="info" v-if="item.Info!=''" >
|
|
<div class="text">
|
|
{{item.Info}}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</van-list>
|
|
</ul>
|
|
</van-tab>
|
|
<van-tab title="使用记录">
|
|
<ul class="gray" >
|
|
<van-list
|
|
v-model="usedData.loading"
|
|
:finished="usedData.finished"
|
|
@load="onLoadUse"
|
|
>
|
|
<li v-for="(item,index) in usedData.list" :key="index" class="couponitem">
|
|
<div class="couponTop">
|
|
<div class="cpnamount">
|
|
<div class="amountWrap">
|
|
<div class="amount" v-if="item.preferentialType === 1">
|
|
<span class="amountSign" >￥</span>
|
|
<span class="amountNum">{{item.priceOff / 100}}</span>
|
|
</div>
|
|
<div class="amount" v-else="item.preferentialType === 2">
|
|
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
|
<span class="amountSign">折</span>
|
|
</div>
|
|
<div class="condition">
|
|
<span>满 {{item.priceAvailable}} 元可用</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="couponInfoWrap">
|
|
<div class="cpninfo">
|
|
<div class="detail">
|
|
<span class="name">{{item.title}}</span></div>
|
|
</div>
|
|
<div class="validity">
|
|
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
|
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</van-list>
|
|
</ul>
|
|
</van-tab>
|
|
<van-tab title="已过期">
|
|
<ul class="gray" >
|
|
|
|
<van-list
|
|
v-model="expireData.loading"
|
|
:finished="expireData.finished"
|
|
@load="onLoadEnd"
|
|
>
|
|
<li v-for="(item,index) in expireData.list" :key="index" class="couponitem">
|
|
<div class="couponTop">
|
|
<div class="cpnamount">
|
|
<div class="amountWrap">
|
|
<div class="amount" v-if="item.preferentialType === 1">
|
|
<span class="amountSign" >￥</span>
|
|
<span class="amountNum">{{item.priceOff / 100}}</span>
|
|
</div>
|
|
<div class="amount" v-else="item.preferentialType === 2">
|
|
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
|
<span class="amountSign">折</span>
|
|
</div>
|
|
<div class="condition">
|
|
<span>满 {{item.priceAvailable}} 元可用</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="couponInfoWrap">
|
|
<div class="cpninfo">
|
|
<div class="detail">
|
|
<span class="name">{{item.title}}</span></div>
|
|
</div>
|
|
<div class="validity">
|
|
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
|
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</van-list>
|
|
</ul>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ExchangeCoupon } from "../../api/user.js";
|
|
import { getCouponPage } from "../../api/promotion.js";
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
// loading:false,
|
|
// finished:false,
|
|
// list:[],
|
|
// page:0,
|
|
//
|
|
//
|
|
// useLoading:false,
|
|
// useFinished:false,
|
|
// useList:[],
|
|
// usePage:0,
|
|
//
|
|
//
|
|
// endLoading:false,
|
|
// endFinished:false,
|
|
// endList:[],
|
|
// endPage:0,
|
|
|
|
couponCode:'',
|
|
exchangeLoading:false,
|
|
|
|
unusedData: {
|
|
page: 0,
|
|
pageSize: 10,
|
|
list: [],
|
|
loading: false,
|
|
finished: false,
|
|
},
|
|
|
|
usedData: {
|
|
page: 0,
|
|
pageSize: 10,
|
|
list: [],
|
|
loading: false,
|
|
finished: false,
|
|
},
|
|
|
|
expireData: {
|
|
page: 0,
|
|
pageSize: 10,
|
|
list: [],
|
|
loading: false,
|
|
finished: false,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
onLoad() {
|
|
// 进入下一页
|
|
let page = this.unusedData.page + 1;
|
|
getCouponPage(1, page, this.unusedData.pageSize).then(data => {
|
|
// debugger;
|
|
// 设置下页面
|
|
this.unusedData.page = page;
|
|
// 数据保存到 list 中
|
|
this.unusedData.list.push(...data.list);
|
|
// 判断页数
|
|
if (this.unusedData.list.length >= data.total) {
|
|
this.unusedData.finished = true;
|
|
}
|
|
// 标记不在加载中
|
|
this.unusedData.loading = false;
|
|
});
|
|
|
|
// GetCoupon({page:this.page}).then(response=>{
|
|
// response.List.forEach(item => {
|
|
// item.show=false;
|
|
// this.list.push(item);
|
|
// });
|
|
// this.loading = false;
|
|
// if(response.TotalPage<=this.page){
|
|
// this.finished = true;
|
|
// }
|
|
//
|
|
// })
|
|
},
|
|
// onShowInfo(id,index){
|
|
// this.list.forEach((item,itemIndex) => {
|
|
// if(index==itemIndex){
|
|
// item.show=!item.show;
|
|
// return;
|
|
// }
|
|
// });
|
|
// },
|
|
onLoadUse() {
|
|
// 进入下一页
|
|
let page = this.usedData.page + 1;
|
|
getCouponPage(2, page, this.usedData.pageSize).then(data => {
|
|
// debugger;
|
|
// 设置下页面
|
|
this.usedData.page = page;
|
|
// 数据保存到 list 中
|
|
this.usedData.list.push(...data.list);
|
|
// 判断页数
|
|
if (this.usedData.list.length >= data.total) {
|
|
this.usedData.finished = true;
|
|
}
|
|
// 标记不在加载中
|
|
this.usedData.loading = false;
|
|
});
|
|
},
|
|
onLoadEnd() {
|
|
// 进入下一页
|
|
let page = this.expireData.page + 1;
|
|
getCouponPage(3, page, this.expireData.pageSize).then(data => {
|
|
// debugger;
|
|
// 设置下页面
|
|
this.expireData.page = page;
|
|
// 数据保存到 list 中
|
|
this.expireData.list.push(...data.list);
|
|
// 判断页数
|
|
if (this.expireData.list.length >= data.total) {
|
|
this.expireData.finished = true;
|
|
}
|
|
// 标记不在加载中
|
|
this.expireData.loading = false;
|
|
});
|
|
},
|
|
onExchange(){
|
|
if(this.exchangeLoading){
|
|
return;
|
|
}
|
|
this.exchangeLoading=true;
|
|
ExchangeCoupon(this.couponCode).then(response=>{
|
|
this.$toast('兑换成功');
|
|
this.exchangeLoading=false;
|
|
this.$router.go(0);
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.couponitem {
|
|
padding: 0 10px;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
font-size: 12px;
|
|
.couponTop {
|
|
background-color: #fcebeb;
|
|
border-left: 1px solid #f3d4d4;
|
|
border-right: 1px solid #f3d4d4;
|
|
border-bottom: 1px dashed #f3d4d4;
|
|
border-radius: 8px;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
.cpnamount {
|
|
position: relative;
|
|
height: 90px;
|
|
width: 34.08%;
|
|
text-align: center;
|
|
float: left;
|
|
border-right: 1px dashed #f3d4d4;
|
|
}
|
|
.amountWrap {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
.amount {
|
|
font-size: 15px;
|
|
.amountSign {
|
|
margin-right: 3px;
|
|
}
|
|
.amountNum {
|
|
font-size: 39px;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.couponInfoWrap {
|
|
position: relative;
|
|
margin-left: 37.465%;
|
|
height: 90px;
|
|
.cpninfo {
|
|
position: absolute;
|
|
top: 26px;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
width: 100%;
|
|
.detail {
|
|
padding-right: 15px;
|
|
word-break: break-all;
|
|
.name {
|
|
font-size: 13px;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
.validity {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
font-size: 10px;
|
|
}
|
|
button{
|
|
right: 16px;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
}
|
|
}
|
|
.couponMid {
|
|
position: relative;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
padding-left: 16px;
|
|
font-size: 12px;
|
|
|
|
background-color: #fcebeb;
|
|
border-left: 1px solid #f3d4d4;
|
|
border-right: 1px solid #f3d4d4;
|
|
border-bottom: 1px solid #f3d4d4;
|
|
border-radius: 8px;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
i{
|
|
right: 16px;
|
|
position: absolute;
|
|
top: 8px;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.info{
|
|
display: none;
|
|
background-color: #fcebeb;
|
|
border-left: 1px solid #f3d4d4;
|
|
border-right: 1px solid #f3d4d4;
|
|
border-bottom: 1px solid #f3d4d4;
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
padding: 10px 25px 12px 15px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.show{
|
|
|
|
.couponMid {
|
|
border-bottom: 1px dashed #f3d4d4;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
i{
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
.info{
|
|
display: block;
|
|
}
|
|
}
|
|
.gray{
|
|
-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
|
|
}
|
|
</style>
|