mp-ui-user/src/packagePrize/ticket/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的盲票" leftIconSize="0"></u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的盲票"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view v-if="pagesNum > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的盲票" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="我的盲票">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->
		
		<!-- 状态 -->
		<view class="state">
			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="60" lineHeight="3"
				lineColor="#F9822C" :activeStyle="{
									color: '#F9822C',
									transform: 'scale(1.1)',
									width: '100px'
								}" :inactiveStyle="{
									color: '#999',
									transform: 'scale(1)',
									width: '100px'
								}" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px; text-align: center;">
			</u-tabs>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<image :src="item.picUrl" mode="aspectFit"></image>
				<view class="list-item-content flex">
					<view class="top">
						<view class="top-title">{{ item.title }}</view>
						<view class="top-num">序列号：{{ item.serialNo }}</view>
						<view class="top-price" v-if="item.status != '2'">面值：￥{{ $numberFormat(item.facePrice) }}</view>
					</view>
					<view class="bottom flex" v-if="item.status == '2'">
						<view class="bottom-price">面值：<text>￥{{ $numberFormat(item.facePrice) }}</text></view>
						<view class="bottom-btn" @click="toChoice(item)">立即兑奖</view>
					</view>
					<view class="bottom" v-else>
						<!-- #ifdef MP-ALIPAY -->
						<view class="bottom-pricetwo"><view>奖品：</view><text>{{ item.prizeInfo || '-' }}</text></view>
						<!-- #endif -->
						<!-- #ifndef MP-ALIPAY -->
						<view class="bottom-price ells-one">奖品：<text>{{ item.prizeInfo || '-' }}</text></view>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<u-loadmore :line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
		</view>
		<view class="flex empty" v-if="!list.length">
			<view class="center">
				<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png" mode="scaleToFill"></image>
				<view class="center-font">暂无盲票</view>
			</view>
			<!-- <u-empty text="数据为空" mode="order" /> -->
		</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				status: 'nomore',//上拉刷新状态
				stateArr: [{
					name: ' 待兑奖',
				}, {
					name: ' 已兑奖',
				}],
				state: 2,
				pageNum: 1,
				total: 0,
				list: [],
				pagesNum: '',

			};
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
			this.pageList()
		},
		onLoad(){
			this.rewardNum()
		},
		methods: {
			getList() {
				$http.post(`/api/v1/mp/user/mine/ticket/list?pageNum=${this.pageNum}&pageSize=20`, {
					status: this.state
				}).then(res => {
					if (res.code == 0) {
						res.rows.forEach(item => {
							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/170'
						})
						this.total = res.total
						this.list = this.list.concat(res.rows)
					}
				}).catch(() => {
				})
			},

			pageList() {
				this.pageNum = 1
				this.list = []
				this.getList()
			},

			toChoice(item) {
				uni.navigateTo({
					url: `/packagePrize/choice/index?id=${ item.ticketId }`
				})
				// let type = item.type && JSON.parse(item.type).value
				// if(type == 'offline') {
				// 	uni.navigateTo({
				// 		url: `/packagePrize/choice/index?id=${ item.ticketId }&type=offline`
				// 	})
				// } else if (type == 'online') {
				// 	uni.navigateTo({
				// 		url: `/packagePrize/rolling/index?ticketId=${ item.ticketId }&isTry=0`
				// 	})
				// } else {
				// 	uni.$u.toast('请联系客服')
				// }
			},

			changeTab(e) {
				if (e.index == 0) {
					this.state = 2
				} else if (e.index == 1) {
					this.state = 3
				}
				this.pageList()
			},


			rewardNum() {
				$http.post(`/api/v1/mp/user/mine/ticket/list?pageNum=${this.pageNum}&pageSize=20`, {
					status: 2
				}).then(res => {
					$http.post(`/api/v1/mp/user/mine/ticket/list?pageNum=${this.pageNum}&pageSize=20`, {
						status: 3
					}).then(data => {
						if (res.code == 0) {
							this.stateArr = [{
									name: ' 待兑奖 (' + res.total + ') '
								},
								{
									name: ' 已兑奖 (' + data.total + ') '
								},
							]
						} else {
							this.stateArr = [{
								name: ' 待兑奖 (0)',
							}, {
								name: ' 已兑奖 (0)',
							}, ]
						}
					})
				})
			}
		},

		onReachBottom() {
			if(this.total < this.pageNum * 20) return ;
			this.status = 'loading';
			++this.pageNum
			if(this.total < this.pageNum * 20) this.status = 'nomore';
				else this.status = 'loading';
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	// 状态
	.state {
		display: flex;
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 10;
		box-shadow: 0 5rpx 5rpx #ececec;
	}
	
	// 列表
	.list {
		padding: 120rpx 0 100rpx;
		margin: 0 20rpx 0;
		
		&-item {
			display: flex;
			background: #FFFFFF;
			border-radius: 11px;
			padding: 34rpx 10rpx;
			margin-bottom: 34rpx;
			
			image {
				width: 200rpx;
				height: 270rpx;
				border-radius: 22rpx;
				margin-right: 15rpx;
			}
			
			&-content {
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 16rpx 0;
				
				
				.top {
					width: 100%;
					display: flex;
					flex-direction: column;
					
					&-title {
						font-size: 36rpx;
						line-height: 36rpx;
						font-weight: bold;
						margin-bottom: 46rpx;
					}
					
					&-num {
						font-size: 26rpx;
						line-height: 26rpx;
					}
					
					&-price {
						margin-top: 30rpx;
						font-size: 26rpx;
						line-height: 26rpx;
					}
				}
				
				.bottom {
					width: 100%;
					justify-content: space-between;
					
					&-price {
						height: 26rpx;
						overflow: hidden;
						font-size: 26rpx;
						line-height: 26rpx;
						
						text {
							color: #F9822C ;
						}
					}
					&-pricetwo {
						view {
							display: inline-block;
							height: 26rpx;
							font-size: 26rpx;
							line-height: 26rpx;
							vertical-align: top;
						}
						text {
							display: inline-block;
							color: #F9822C ;
							width: 350rpx;
							height: 26rpx;
							font-size: 26rpx;
							line-height: 26rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					
					&-btn {
						width: 220rpx;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						background: #F9822C;
						border-radius: 36rpx;
						color: #FFFFFF;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.empty {
		height: 60vh;
		
		.center {
			text-align: center;
		
			&-img {
				width: 228rpx;
				height: 320rpx;
			}
		
			&-font {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 250rpx;
			}
		}
	}
</style>