yijianbao_user_uniapp/pages_user/myCouponList.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<u-tabs
			:current="status"
			:scrollable="false"
			:list="tabs"  
			lineColor="#2583EB"
			@change="statusChange">
			</u-tabs>
		</view>
		<mescroll-body top="88rpx" bottom="0" ref="mescrollRef" @init="mescrollInit"    :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<view class="coupon-box" >
		  <view class="item" v-for="(item) in dataList">
			<view class="left" >
			  <image v-if="item.status==0" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/0fdd75d89db84458886d38e615011048.png" mode="widthFix"></image>
			  <image v-if="item.status!=0" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/d950e4c7af1e4464be1a7777e9dca576.png" mode="widthFix"></image>
			  <view style="z-index: 999;">
				￥<span class="num"  v-if="item.price!=null">{{item.price.toFixed(2)}}</span>
			  </view>
			  <view class="pic-num" v-if="item.minPrice!=null" >满{{item.minPrice.toFixed(2)}}元可用</view>
			</view>
			<view class="right">
			  <view class="title">
				{{item.title}}
			  </view>
			  <view class="btns">
				<view  v-if="item.status==0||item.status==2" >{{item.limitTime}} 到期</view>
				<view  v-if="item.status==1">使用时间 {{item.useTime}}</view>
				<view class="bnt gray" v-if="item.status==1"  >已使用</view>
				<view class="bnt gray" v-if="item.status==2" >已过期</view>
				<view class="btn" v-if="item.status==0"  >可使用</view>
			  </view>
			</view>
		  </view>
		</view>
		</mescroll-body>
  </view>
</template>
<script>
import { getMyCouponList } from '@/api/user.js'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	name: 'UserCoupon',
	props: {},
	mixins: [MescrollMixin], // 使用mixin
	data: function() {
		return {
			tabs:[
				{
					id:0,
					name:'待使用'
				},
				{
					id:1,
					name:'已使用'
				},
				{
					id:2,
					name:'已过期'
				}
				 
			],
			status:0,
			mescroll:null,
			downOption: {   //下拉刷新
				use:true,
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				onScroll:false,
				use: true, // 是否启用上拉加载; 默认true
				page: {
					pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				textNoMore:"已经到底了",
				empty: {
					icon:'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/empty_icon.png',
					tip: '暂无数据'
				}
			},
			dataList: []
		}
	},
	watch: {
    
	},
	 
	onShow() {
  	
	},
	methods: {
		statusChange(item){
			console.log(item)
			this.status=item.id
			this.mescroll.resetUpScroll()
		},
		navTo(url){
			uni.navigateTo({
				url: url
			})
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调*/
		upCallback(page) {   
			//联网加载数据
			var that = this;
			var data = {
				status:this.status,
				pageNum: page.num,
				pageSize: page.size
			};
			getMyCouponList(data).then(res => {
				if(res.code==200){
					if (page.num == 1) {
						that.dataList = res.data.list; 
						
					} else {
						that.dataList = that.dataList.concat(res.data.list);
						 
					}
					that.mescroll.endBySize(res.data.list.length, res.data.total);
					
				}else{
					uni.showToast({
						icon:'none',
						title: "请求失败",
					});
					that.dataList = null;
					that.mescroll.endErr();
				}
			});
		},
	},
}
</script>
<style lang="less" scoped>
	.content{
		height: 100%;
		.top-fixed{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			height: 88upx;
			background-color: #fff;
		}
		.coupon-box{
			width: 100%;
			padding: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			box-sizing: border-box;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 16rpx;
				height:170rpx;
				&:last-child{
					margin-bottom: 0rpx;
				}
				.left{
					 color: #fff;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 230rpx;
					image{
						position: absolute;
						width: 230rpx;
						height:170rpx;
						color: #fff;
					}
					.num{
						font-size: 40rpx;
					}
					.pic-num{
						font-size: 20rpx;
						z-index: 99;
					}
				}
				.right{
					
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					height:170rpx;
					width: calc(100% - 230rpx);
					padding: 0 17rpx 0 24rpx;
					background-color: #fff;
					box-sizing: border-box;
					.title{
						width: 100%;
						font-size: 0.3 * 100rpx;
						color: #282828;
						height: 0.93 * 100rpx;
						line-height: 0.93 * 100rpx;
						border-bottom: 1px solid #f0f0f0;
					}
					.btns{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						font-size: 0.2 * 100rpx;
						color: #999;
						height: 0.76 * 100rpx;
						.btn{
							width: 1.36 * 100rpx;
							height: 0.44 * 100rpx;
							border-radius: 0.22 * 100rpx;
							font-size: 0.22 * 100rpx;
							color: #fff;
							text-align: center;
							line-height: 0.44 * 100rpx;
							background-color: #2583EB;
							.gray{
								 background-color: #ccc;
							}
						}
						
					}
				}
			}
			
		}
		 
	}
	
	
	
</style>