156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<template>
|
|
<view class="app">
|
|
<view class="tabs">
|
|
<view class="tab-item">
|
|
<view class="title">
|
|
券
|
|
</view>
|
|
<view class="text">
|
|
{{total}}张
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="statuss">
|
|
<view class="statusitem" @tap="changingcoupon('')" :style="couponstatus==''?'color: #F44B2F;':''">
|
|
全部
|
|
</view>
|
|
<span> |</span>
|
|
<view class="statusitem" @tap="changingcoupon('NOT_USED')"
|
|
:style="couponstatus=='NOT_USED'?'color: #F44B2F;':''">
|
|
未使用
|
|
</view>
|
|
<span> |</span>
|
|
<view class="statusitem" @tap="changingcoupon('USED')"
|
|
:style="couponstatus=='USED'?'color: #F44B2F;':''">
|
|
已使用
|
|
</view>
|
|
<span> |</span>
|
|
<view class="statusitem" @tap="changingcoupon('EXPIRED')"
|
|
:style="couponstatus=='EXPIRED'?'color: #F44B2F;':''">
|
|
已过期
|
|
</view>
|
|
</view>
|
|
<view class="rollup" v-if="couponlist">
|
|
<view class="item" v-for="(item,index) in couponlist" :key="index"
|
|
:style="item.useStatus!='NOT_USED'?'height:180rpx':''">
|
|
<view class="top" :style="item.useStatus!='NOT_USED'?'background: #EFECEC;color: #4B4B4B;':''">
|
|
<view class="title">
|
|
<span class="text">
|
|
￥
|
|
</span>
|
|
<span class="price">
|
|
{{item.couponPrice}}
|
|
</span>
|
|
</view>
|
|
<view class="what" :style="item.useStatus!='NOT_USED'?'background: #DADADA;;':''">
|
|
{{item.couponTitle}}
|
|
</view>
|
|
<view class="texts">
|
|
满{{item.couponConsumePrice}}可用
|
|
</view>
|
|
<view class="time">
|
|
有效期至{{item.expirationEndTime}}
|
|
</view>
|
|
<view class="btngq" v-if="item.useStatus!='NOT_USED'">
|
|
{{item.useStatus=='EXPIRED'?'已过期':''}}
|
|
{{item.useStatus=='USED'?'已使用':''}}
|
|
</view>
|
|
<view class="btn" v-else @tap='goshoping'>
|
|
{{item.useStatus=='NOT_USED'?'使用':''}}
|
|
</view>
|
|
</view>
|
|
<view class="bottom" v-if="item.useStatus=='NOT_USED'||item.useStatus=='RECEIVE'">
|
|
领取来源：{{item.receiveSource =='NEW_PEOPLE_WELFARE'?'新人福利':''}}
|
|
{{item.receiveSource =='EVENT_GIFT'?'活动赠送':''}}
|
|
{{item.receiveSource =='CONSUME_REBATE'?'消费返券':''}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="noorder" v-if="couponlist==null||couponlist.length==0">
|
|
<u-empty mode="coupon" icon-size='220'></u-empty>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
selectCoupon
|
|
} from '@/api/pagesB/coupon/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
couponlist: null,
|
|
total: 0,
|
|
couponstatus: '', //状态
|
|
patientId: null,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.pageNum = 1
|
|
var that = this
|
|
const value = uni.getStorageSync('patientId');
|
|
if (value) {
|
|
that.patientId = value
|
|
that.getlist();
|
|
} else {
|
|
that.$refs.uToast.show({
|
|
title: '未登录,请先登录',
|
|
type: 'error',
|
|
duration: '2000',
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
getlist() {
|
|
selectCoupon(this.pageNum, this.pageSize, this.patientId, this.couponstatus).then(res => {
|
|
if (res.rows.length > 0) {
|
|
this.couponlist = res.rows
|
|
}
|
|
this.total = res.total
|
|
})
|
|
},
|
|
changingcoupon(item) {
|
|
this.pageNum = 1
|
|
if (this.couponstatus == item) {
|
|
this.couponstatus = ''
|
|
} else {
|
|
this.couponstatus = item
|
|
}
|
|
selectCoupon(this.pageNum, this.pageSize, this.patientId, this.couponstatus).then(res => {
|
|
this.couponlist = res.rows
|
|
this.total = res.total
|
|
})
|
|
},
|
|
goshoping() {
|
|
uni.navigateTo({
|
|
url: '/pages/shopping/shopping'
|
|
})
|
|
},
|
|
},
|
|
onReachBottom() { //下滑加载
|
|
if (this.couponlist.length >= this.total) {} else {
|
|
this.pageNum++;
|
|
selectCoupon(this.pageNum, this.pageSize, this.patientId, this.couponstatus).then(res => {
|
|
res.rows.forEach(e => {
|
|
this.couponlist.push(e)
|
|
})
|
|
})
|
|
}
|
|
},
|
|
onPullDownRefresh() { //下拉刷新
|
|
this.pageNum = 1;
|
|
this.getlist();
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./coupon.scss";
|
|
</style> |