You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
4.6 KiB
175 lines
4.6 KiB
<template>
|
|
<view class="personal-coupon" >
|
|
<u-subsection :list="list"
|
|
active-color="#ffaa48"
|
|
bg-color="#fff"
|
|
inactive-color="#aaaaaa"
|
|
font-size="16"
|
|
:current="curNow"
|
|
@change="sectionChange" ></u-subsection>
|
|
<view v-if="curNow==0">
|
|
<view v-for="(item,index) in sendedList" style="padding:14px 18px 0;" :key="index">
|
|
<view class="card">
|
|
<view class="card-left">{{switchType(item.stockType)}}</view>
|
|
<view class="card-right">
|
|
<view class="card-content">
|
|
<view class="card-info">{{item.stockName}}</view>
|
|
<view class="card-time">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
|
|
</view>
|
|
<view style="width: 20%;">
|
|
<u-button shape="circle" size="mini" color="#ffaa48" text="去使用" @click="useCoupon()"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="curNow==1">
|
|
<view v-for="(item,index) in usedList" style="padding:14px 18px 0;" :key="index">
|
|
<view class="card">
|
|
<view class="card-left" style="color: #aaaaaa;">{{switchType(item.stockType)}}</view>
|
|
<view class="card-right">
|
|
<view class="card-content">
|
|
<view class="card-info" style="color: #aaaaaa;">{{item.stockName}}</view>
|
|
<view class="card-time" style="color: #aaaaaa;">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
|
|
</view>
|
|
<view class="card-icon">
|
|
<image src="./../../static/images/personal/used.png" alt="used" style="width: 60px;height: 60px;"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="curNow==2">
|
|
<view v-for="(item,index) in exporedList" style="padding:14px 18px 0;" :key="index">
|
|
<view class="card">
|
|
<view class="card-left" style="color: #aaaaaa;">{{switchType(item.stockType)}}</view>
|
|
<view class="card-right">
|
|
<view class="card-content" >
|
|
<view class="card-info" style="color: #aaaaaa;">{{item.stockName}}</view>
|
|
<view class="card-time" style="color: #aaaaaa;">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
|
|
</view>
|
|
<view class="card-icon">
|
|
<image src="./../../static/images/personal/invalid.png" alt="invalid" style="width: 60px;height: 60px;"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {getCouponList} from "@/api/system/personal.js"
|
|
export default{
|
|
data(){
|
|
return{
|
|
list: ['未使用', '已使用', '已失效'],
|
|
curNow: 0,
|
|
sendedList:[],
|
|
usedList:[],
|
|
exporedList:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// this.openIdStr = this.$globalData.openIdStr;
|
|
this.getCouponList()
|
|
},
|
|
methods: {
|
|
sectionChange(index) {
|
|
this.curNow = index;
|
|
},
|
|
getCouponList() {
|
|
getCouponList().then(res=>{
|
|
let rows = res.rows
|
|
console.log(rows)
|
|
this.sendedList=rows.filter(item=>item.couponState=="SENDED")
|
|
this.usedList=rows.filter(item=>item.couponState=="USED")
|
|
this.exporedList=rows.filter(item=>item.couponState=="EXPORED")
|
|
})
|
|
},
|
|
switchType(type){
|
|
if(type=='PNORMAL'){
|
|
return '满减券'
|
|
}
|
|
if(type=='PDISCOUNT'){
|
|
return '折扣券'
|
|
}
|
|
if(type=='PTRAIL'){
|
|
return '体验券'
|
|
}
|
|
return '优惠券'
|
|
|
|
},
|
|
useCoupon(){
|
|
this.$globalData.newOrderData={
|
|
currentAddress:{},
|
|
currentPets:[],
|
|
totalPrice:0,
|
|
needPreFamiliarize:[]
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/newOrder/serviceNew`
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.personal-coupon{
|
|
.card{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, #d8d8d8 4.5px),radial-gradient(closest-side circle at 50%, #d8d8d8 99%, transparent 100%);
|
|
-webkit-mask-size: 100%, 2px 4px;
|
|
-webkit-mask-repeat: repeat, repeat-y;
|
|
-webkit-mask-position: 0 -4px, 87px;
|
|
-webkit-mask-composite: source-out;
|
|
mask-composite: subtract;
|
|
// background: linear-gradient(45deg, orange, red);
|
|
}
|
|
.card-left{
|
|
width: 88px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
|
|
}
|
|
.card-right{
|
|
padding: 0px 12px;
|
|
display: flex;
|
|
flex: 1;
|
|
/* flex-direction: column; */
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60px;s
|
|
.card-content {
|
|
width: 80%;
|
|
}
|
|
.card-icon{
|
|
position: relative;
|
|
right: -10px;
|
|
top: -10px;
|
|
}
|
|
}
|
|
.card-info{
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color:#333333;
|
|
}
|
|
.card-time{
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
font-weight: normal;
|
|
color: #aaaaaa;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
</style>
|