鋒哥原創(chuàng)的uniapp微信小程序投票系統(tǒng)實戰(zhàn)：

uniapp微信小程序投票系統(tǒng)實戰(zhàn)課程 (SpringBoot2+vue3.2+element plus ) ( 火爆連載更新中... )_嗶哩嗶哩_bilibiliuniapp微信小程序投票系統(tǒng)實戰(zhàn)課程 (SpringBoot2+vue3.2+element plus ) ( 火爆連載更新中... )共計21條視頻，包括：uniapp微信小程序投票系統(tǒng)實戰(zhàn)課程 (SpringBoot2+vue3.2+element plus ) ( 火爆連載更新中... )、第2講 投票項目后端架構搭建、第3講 小程序端 TabBar搭建等，UP主更多精彩視頻，請關注UP賬號。https://www.bilibili.com/video/BV1ea4y137xf/

新建我創(chuàng)建的投票頁面:

	{
		"path": "pages/createVoteList/createVoteList",
		"style": {
			"navigationBarTitleText": "我創(chuàng)建的投票"
		}
	}

個人中心頁面，加下 點擊 “我創(chuàng)建的投票”跳轉列表頁面:

		goVoteList:function(){
			uni.navigateTo({
				url:"/pages/createVoteList/createVoteList"
			})
		}

后端：

/**
 * 獲取指定用戶創(chuàng)建的投票
 * @param token
 * @return
 */
@RequestMapping("/listOfUser")
public R listOfUser(@RequestHeader String token){
    Claims claims = JwtUtils.validateJWT(token).getClaims();
    System.out.println("openid="+claims.getId());
    List<Vote> voteList = voteService.list(new QueryWrapper<Vote>().eq("openid", claims.getId()).orderByDesc("vote_end_time"));
    Map<String,Object> resultMap=new HashMap<>();
    resultMap.put("voteList",voteList);
    return R.ok(resultMap);
}

前端：文章來源地址http://www.zghlxwxcb.cn/news/detail-812819.html

<template>
	<view class="create_vote_list">
		<view class="vote_list">
			<block v-for="(value,index) in voteList" :key="index">
				<view class="vote_item" >
					<view v-if="value.type==2" class="vote_item_pic"/>
					<view v-if="value.type==1" class="vote_item_word"/>
					<view class="vote_item_body">
						<view class="vote_item_title">{{value.title}}</view>
							<view v-if="judgeDate(value.voteEndTime)>=0" class="vote_item_status_over">
								已結束
							</view>
							<view v-if="judgeDate(value.voteEndTime)<0" class="vote_item_status_progressive">
								進行時
							</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js"
	import {isEmpty} from "../../utils/stringUtil.js"
	import {judgeDate} from "../../utils/dateUtil.js"
	export default{
		
		data(){
			return{
				voteList:[]
			}
		},
		onLoad() {
			this.getVoteList();
		},
		methods:{
			getVoteList:async function(){
				const result=await requestUtil({url:"/vote/listOfUser",method:"get"});
				this.voteList=result.voteList;
			},
			judgeDate:function(toDate){
				return judgeDate(toDate);
			}
		}
		
	}
</script>

<style lang="scss">
	@import "/common/css/iconfont.css";
	.create_vote_list{
		padding: 10px;
		.vote_list{
			.vote_item{
				border-radius: 5px;
				background-color: white;
				display: flex;
				width: 100%;
				flex-direction: row;
				margin-bottom: 15px;
				.vote_item_pic{
					background: url("../../static/image/pic.png") no-repeat center;
					width: 3.0rem;
					height: 3.0rem;
					margin-right: 0.425rem;
					background-size:cover;
					margin: 30rpx;
				}
				.vote_item_word{
					background: url("../../static/image/word.png") no-repeat center;
					width: 3.0rem;
					height: 3.0rem;
					margin-right: 0.425rem;
					background-size:cover;
					margin: 30rpx;
				}
				.vote_item_body{
					height: auto;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					overflow: hidden;
					.vote_item_title{
						font-size: 1.2rem;
						overflow: hidden;
						width: 100%;
						font-weight: bolder;
						padding-top: 10px;
					}
					.vote_item_status_progressive{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 100%;
						line-height: 1.1375rem;
						font-size: 0.9rem;
						padding-bottom: 10px;
						color: blue;
					}
					.vote_item_status_over{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 100%;
						line-height: 1.1375rem;
						font-size: 0.9rem;
						padding-bottom: 10px;
						color: gray;
					}
				}
			}
		}
	}
</style>

到了這里，關于uniapp微信小程序投票系統(tǒng)實戰(zhàn) (SpringBoot2+vue3.2+element plus ) -我創(chuàng)建的投票列表實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！