前端：首页、分类，增加跳转到搜索
This commit is contained in:
YunaiV
@@ -1,421 +0,0 @@
|
||||
<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 { GetCoupon,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>
|
||||
Reference in New Issue
Block a user