xinelu-applet-ui/pagesB/coupon/coupon.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>