mp-ui-user/src/packageOperate/store/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<!-- <u-navbar :title="siteName" :border="true" :placeholder="true" bgColor="#fff" leftIconSize="0" /> -->
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :title="siteName">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="home" size="20" color="#333"></u-icon>
					<view class="nav-left__code">首页</view>
				</view>
			</u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<!-- <u-navbar :title="siteName" :border="true" :placeholder="true" leftIconSize="0" bgColor="#fff" /> -->
		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :title="siteName">
			<view class="nav-left flex" slot="left" @click="$toIndex()">
				<u-icon name="home" size="20" color="#333"></u-icon>
				<view class="nav-left__code">首页</view>
			</view>
		</u-navbar>
		<!-- #endif -->
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<image :src="item.picUrl" mode="aspectFit" @click="toTicketBox(item)"></image>
				<view class="list-item-content flex" @click="toTicketBox(item)">
					<view class="top">{{ item.title }}</view>
					<view class="bottom flex">
						<view class="bottom-price">价格：<view style="font-size: 12px; display: inline-block;">￥</view>{{ $numberFormat(item.salePrice) }}<view class="view1" v-if="item.originPrice"><text style="font-size: 10px; display: inline-block;">￥</text>{{ $numberFormat(item.originPrice) }}</view></view>
					</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>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				status: 'nomore',//上拉刷新状态
				pageNum: 1,
				total: 0,
				list: [],
				pagesNum: '',
				
				sceneArr: [],
				channelId: '',
				userId: '',
				siteName: '门店',
			}
		},

		onLoad(options) {
			// 测试用
			if(options.channelId){
				this.channelId = options.channelId
			}
			
			/**
			 * 票赢天下小程序分享门店二维码跳转接收的参数
			 * channelId: 门店ID
			 * userId: 分享类型
			 * siteName: 门店名称
			 * */
			if (options.scene) {
				let sceneStr = decodeURIComponent(options.scene)
				this.sceneArr = sceneStr.split('&')
				this.channelId = this.sceneArr[0]
				this.userId = this.sceneArr[1]
			}
		},
		onShow() {
			// 获取页面数据
			this.pageList()
			this.getSiteName()
		},
		methods: {
			//获取门店名称
			getSiteName() {
				$http.post(`/api/v1/mp/channel/saleSite/info/${this.channelId}`,{}).then(res => {
					if (res.code == 0) {
						this.siteName = res.data ? res.data : ('门店' + this.channelId)
					}
				}).catch(() => {
				})
			},
			
			// 获取页面数据
			pageList() {
				this.pageNum = 1
				this.list = []
				this.getList()
			},
			getList() {
				$http.post(`/api/v1/mp/user/ticket/list/underChannel?pageNum=${this.pageNum}&pageSize=20`,{
					channelId: this.channelId
				}).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(() => {
				})
			},
			
			// 点击盲票，跳转盲票详情
			toTicketBox(item) {
				uni.navigateTo({
					url: `/pages/ticketBox/detail?boxId=${ item.boxId }&share=1&siteId=${ this.channelId }`
				})
			},
		},
		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>
	.nav-left {
		&__code {
			margin-left: 10rpx;
		}
	}
	// 状态
	.state {
		display: flex;
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 10;
		box-shadow: 0 5rpx 5rpx #ececec;
	}
	// 列表
	.list {
		padding: 20rpx 0 100rpx;
		margin: 0 20rpx 0;
		
		&-item {
			display: flex;
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			border-radius: 1px;
			box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.12);
			margin-bottom: 28rpx;
			
			image {
				width: 140rpx;
				height: 189rpx;
				border-radius: 22rpx;
				margin-right: 60rpx;
			}
			
			&-content {
				width: 70%;
				// flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 26rpx 0;
				
				
				.top {
					width: 100%;
					display: inline-block;
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
					margin-bottom: 46rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					
				}
				
				.bottom {
					width: 100%;
					justify-content: space-between;
					
					&-price {
						height: 30rpx;
						overflow: hidden;
						font-size: 30rpx;
						line-height: 30rpx;
						
						.view1 {
							color: #999;
							display: inline-block;
							text-decoration: line-through;
							margin-left: 10rpx;
							font-size: 24rpx;
							text {
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}
	
	.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>