xinjiangMiniProgram/pages/subPage/ballots/ballotsList/ballotsList.vue

<template>
	<view class="content padding">
		<view class="banner">
			<image :src="imgUrl+'ballots.png'" mode=""></image>
		</view>
		
		<view class="tabs">
			<up-tabs :list="tabArr" @click="tabClick" :current="currentTab" lineColor="#DE3A26"> </up-tabs>
		</view>
		
		<view class="tags">
			<view class="tag"  v-for="(item,index) in tagArr" :key="index" :class="{active: currentTag==item.id}" @click="tagClick(item)">{{ item.name }}</view>
		</view>
		
		<view class="ul">
			<view class="li" v-for="(item,index) in voteList" :key="index" @click="goVote(item)">
				<view class="flex-b">
					<view class="name towRowText">{{ item.title }}</view>
					<view class="btn boder"  v-if="currentTab==1||item.voted==1" >查看结果</view>
					<view class="btn"  v-else-if="item.voteStatus==0" style="opacity: 0.4;">未开始</view>
					<view class="btn"  v-else-if="item.voteStatus==1">我要投票</view>
					<view class="btn" v-else-if="item.voteStatus==2" style="opacity: 0.4;">已结束</view>
				</view>
				<view class="text">
					<text>发起人：{{ item.makerName }}</text>
					<text>截止时间：{{ item.endTime }}</text>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 20rpx;" v-if="voteList.length>30">
			<u-loadmore :status="status" />
		</view>
		<nodata v-if="!voteList.length&&status=='nomore'">暂无投票信息~</nodata>
	</view>
</template>

<script  setup>
	import siteObj from '@/config/site.config.js'
	const {imgUrl} = siteObj
	import {
			onShow,
			onPullDownRefresh,
			onReachBottom
		} from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';  
	import { votePage, mineVotePage } from '@/config/api.js'
	let  status = ref('loading')
	const tabArr = reactive([  
	    { name: '投票列表', id: 0 },  
	    { name: '我的投票', id: 1 },
	]);  
	const tagArr = reactive([
	    { name: '全部', id: -1 },  
	    { name: '未开始', id: 0 },  
	    { name: '进行中', id: 1 },
	    { name: '已结束', id: 2 },
	]);
let style = {
		// p: 'font-size:32rpx',
		// span: 'font-size: 30rpx',
		img: 'max-width: 100%'
	}
	// tab切换
	const currentTab = ref(0)
	function tabClick(item) {  
		currentTab.value = item.id
		initList()
	}
	// 类型筛选
	let currentTag = ref(-1)
	function tagClick(item) {
		if(currentTag.value==item.id) return
		currentTag.value = item.id
		params.value.voteState = item.id
		initList()
	}
	
	function goVote(item) {
		let url = ''
		if(currentTab.value==1||item.voted==1) {
			url = '/pages/subPage/ballots/vote/voteReslut?voteId='+item.voteId
		}else if(item.voteStatus==0) {
			return false
		}else if(item.voteStatus==1) {
			url = '/pages/subPage/ballots/vote/vote?voteId='+item.voteId
		}else if(item.voteStatus==2) {
			url = '/pages/subPage/ballots/vote/voteReslut?voteId='+item.voteId
		}
		// console.log(url)
		// console.log(item)
		uni.navigateTo({
			url
		})
	}
	
	let voteList = ref([])
	let total = ref(0)
	let params = ref({
		"pageNo": 1,
		  "pageSize": 30,
		  "voteState": -1
	})
	async function votePageFn() {
		if(params.value.voteState==-1) delete params.value.voteState
		console.log(params.value)
		let res
		if(currentTab.value==0) {
			const data = await votePage(params.value)
			res = data.data
		}else {
			const data = await mineVotePage(params.value)
			res = data.data
		}
		voteList.value.push(...res.list)
		total.value = res.total
		if(voteList.value.length>=total.value) status.value = 'nomore'
		console.log(voteList.value)
	}
	
	async function initList() {
		params.value.pageNo = 1
		voteList.value = []
		total.value = 0
		votePageFn()
	}
	
	onPullDownRefresh(async()=>{
	   await initList()
	   uni.stopPullDownRefresh()
	})
	onShow(()=>{
		initList()
	})
	onReachBottom(()=>{
		if(total.value > voteList.value.length) {
			votePageFn()
		}
	})
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.content {
	  .banner {
	    width: 100%;
		height: 174rpx;
	  }
	
	  .tabs {
	    padding: 30rpx 0 10rpx 0;
		border-bottom: 1px solid #EFEFEF;
	  }
	
	  .tags {
		  width: 100%;
		  height: 110rpx;
		  display: flex;
		  align-items: center;
		  border-bottom: 1px solid #EFEFEF;
	    .tag {
			height: 50rpx;
			background: #EFEFEF;
			border-radius: 25rpx;
			border: 1px solid #F4F4F4;
			line-height: 50rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			&.active {
				color: $themC;
				background: rgba(222,58,38,0.1);
				border-radius: 25rpx;
				border: 1px solid #DE3A26;
			}
	    }
	  }
	
	  .ul {
		  width: 100%;
	    .li {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 1px solid #EFEFEF;
			&:last-child {
				border: none;
			}
	      .flex-b {
	        .name {
				font-size: 32rpx;
				color: #333333;
				flex: 1;
				width: 0;
				padding-right: 30rpx;
	        }
	
	        .btn {
				width: 132rpx;
				height: 44rpx;
				background: #DE3A26;
				border-radius: 22rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 44rpx;
				&.boder {
					border: 1px solid #DE3A26;
					color: $themC;
					background-color: #fff;
				}
				&.hui {
					opacity: 0.4;
				}
	        }
	      }
	
	      .text {
			  padding-top: 14rpx;
	        text {
				font-size: 24rpx;
				color: #9C9C9C;
				margin-right: 40rpx;
	        }
	      }
	    }
	  }
	}
</style>