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

<template>
	<view class="activity">
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar title="拼团抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" leftIconSize="0" />
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="拼团抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<!-- #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="status">
			<u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="34" lineHeight="3"
				lineColor="#8E51F7" :activeStyle="{
									color: '#8E51F7',
									transform: 'scale(1)',
									width: '150rpx',

								}" :inactiveStyle="{
									color: '#666',
									transform: 'scale(1)',
									width: '150rpx'
								}" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center;  ">
			</u-tabs>
		</view>
		<view class="list">
			<view v-for="(item,index) in list1" :key="index" class="list-view">
				<view class="lottery-inner" @click='toGroup()'>
					<view class="lottery-img">
						<image src="../../static/public/111.jpg" mode=""></image>
					</view>
					<view class="lottery-msg">
						<view class="lottery-title">轩妈蛋黄酥40g*4枚2袋装随心装</view>
						<view class="lottery-time">2023-12-31 12:00:00 截止</view>
						<view class="lottery-person">已拼4人</view>
						<view class="lottery-price"><text>¥</text>0.01</view>
						<button class="toGroup" >去拼团</button>
					</view>
				</view>
			</view>
			<view class="flex empty" v-if="!list.length && !loading && triggerStatus == 0">
				<view class="center">
					<image class="center-img"
						src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/lucky_empty_list.png" mode="scaleToFill"></image>
					<view class="center-font">新的活动正在准备中...</view>
				</view>
			</view>
			<view class="flex empty" v-if="!list.length && !loading && triggerStatus != 0">
				<view class="center">
					<image class="center-img"
						src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/lucky_empty_list.png" mode="scaleToFill"></image>
					<view class="center-font">还没有已开奖活动</view>
				</view>
			</view>
		</view>
		<u-loadmore :line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
		<!-- <custom-tab-bar :activeValue="'activity'" /> -->
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import appId from '@/config/appId.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	export default {
		components: {
			CustomTabBar,
		},
		data() {
			return {
				status: 'nomore',//上拉刷新状态
				list: [],
				list1: [1,2,3,4],
				statusArr: [{
					name: '进行中'
				}, {
					name: '预热中',
				}, {
					disabled: true
				}, {
					disabled: true
				}, {
					disabled: true
				}],
				triggerStatus: 0,
				userInfo: '',
				pageNum: 1,
				total: 0,
			}
		},
		onLoad(opthios) {
			if (opthios.triggerStatus) {
				this.triggerStatus = opthios.triggerStatus
			}
			if (opthios.userId) {
				uni.setStorageSync('shareUid', opthios.userId != 'undefined'?opthios.userId:null)
				if (opthios.userId === undefined || opthios.userId === 'undefined') {
					uni.getSystemInfo({
						success(res) {
							log.error(
								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/activity/index.vue.`
							)
						}
					})
				}
			}
			if (opthios.type) {
				uni.setStorageSync('shareType', opthios.type)
			}
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.getBaseInfo()
			}
			this.pageList()
		},
		methods: {
			toRecord(item) {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
					return
				}
				uni.navigateTo({
					url: item.status.value == 4 ? `/packageOperate/lottery/record?id=${ item.id }` :
						`/packageOperate/lottery/details?id=${ item.id }`
				})
			},
			toGroup(){
				uni.navigateTo({
				  url: "/packageOperate/lottery/details"
				})
			},
			changeTab(e) {
				if (e.index == 0) {
					this.triggerStatus = 0
					this.status = 'nomore'
				} else if (e.index == 1) {
					this.triggerStatus = 1
					this.status = 'nomore'
				}
				this.pageList()
			},
			pageList() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			getList() {
				this.loading = true
				$http.post(`/api/v1/mp/user/marketing/list?pageNum=${this.pageNum}&pageSize=5`, {
					triggerStatus: this.triggerStatus,
				}).then(res => {
					this.loading = false
					if (res.code == 0) {
						res.rows.forEach(item => {
							let picUrlArr = item.picUrl.split(',')
							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/750'
							item.status = JSON.parse(item.status)
						})
						this.total = res.total
						this.list = this.list.concat(res.rows)
					}
				}).catch(() => {
					this.loading = false
				})
			},
			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.userInfo = res.data
					}
				})
			},

		},
		//分享好友
		onShareAppMessage(res) {
			return {
				title: '共富券，玩的就是有趣',
				path: '/pages/index/index'
			}
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '共富券，玩的就是有趣',
				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
			}
		},
		onReachBottom() {
			if(this.total < this.pageNum * 5) return ;
			this.status = 'loading';
			++this.pageNum
			if(this.total < this.pageNum * 5) this.status = 'nomore';
				else this.status = 'loading';
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.activity {
		width: 100%;
		height: 100%;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
    .lottery-inner{
		    width: 700rpx;
			margin: auto;
			background: #fff;
		    overflow: hidden;
		    margin-bottom: 20rpx;
		    border-radius: 10rpx;
		.lottery-img{
			width: 200rpx;
			    float: left;
			    padding: 5rpx;
			image{
				width: 100%;
				height: 220rpx;
			}
		}
		.lottery-msg{
		   margin-left: 220rpx;
		   padding: 15rpx 0rpx;
		   position: relative;
		   .lottery-title{
			   font-size: 30rpx;
			       color: #000000;
			       font-weight: 500;
				   margin-bottom: 10rpx;
		   }
		   .lottery-time{
			   font-size: 28rpx;
			       color: #666666;
			   margin-bottom: 5rpx;
		   }
		   .lottery-person{
			   font-size: 28rpx;
			   color: #666666;
			   margin-bottom: 20rpx;
		   }
		   .lottery-price{
			   color: red;
			   font-size: 34rpx;
			   text{
				  font-size: 24rpx;
				  margin-right: 5rpx;
			   }
		   }
		   .toGroup{
			   width: 142rpx;
			       height: 58rpx;
			       line-height: 58rpx;
			       background-color: #8E51F7;
			       color: #fff;
			       margin-top: 34rpx;
			       font-size: 28rpx;
			       border-radius: 8rpx;
			       display: block;
			       text-align: center;
				   position: absolute;
				       right: 20rpx;
				       bottom: 20rpx;
		   }
		}
	}
	.status {
		width: 100%;
		position: fixed;
		z-index: 100;
		background-color: #FFFFFF;
		box-shadow: 0 5rpx 5rpx #ececec;
	}

	.list {
		padding: 120rpx 20rpx 0;
	}

	.empty {
		height: 60vh;

		.center {
			text-align: center;

			&-img {
				width: 228rpx;
				height: 320rpx;
			}

			&-font {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 250rpx;
			}
		}
	}
	.price{
		float: right;
		    color: red;
		    font-size: 40rpx;
	}
</style>