uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

news2025/1/10 5:44:52

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1ea4y137xf/

投票后 跳转列表页面:

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

新建voteDetail页面 投票详情页面

{
			"path": "pages/voteDetail/voteDetail",
			"style": {
				"navigationBarTitleText": "投票明细"
			}
		}
		goVoteDetailPage:function(){
			uni.navigateTo({
				url:"/pages/voteDetail/voteDetail?id="+this.vote.id
			})
		},
<template>
	<view class="options">
		<view class="option" v-for="item in vote.voteItemList">
			<view class="name_vote_number">
				<text class="name">{{item.name}}</text>
				<view class="number"> [ {{item.number}} ] 票</view>
			</view>
			<view>
				<view class="detail" @click="goVotePeopleDetail(item.id,item.name)">查看明细</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getBaseUrl, requestUtil} from "../../util/requestUtil.js"
	
	export default{
		
		data(){
			return{
				vote:{}
			}
		},
		onLoad(e) {
			console.log(e.id);
			this.getVoteInfo(e.id)
		},
		methods:{
			getVoteInfo:async function(id){
				const result=await requestUtil({url:"/vote/"+id,method:"get"});
				console.log(result)
				this.vote=result.vote;
			},
			goVotePeopleDetail:function(itemId,itemName){
				uni.navigateTo({
					url:"/pages/votePeopleDetail/votePeopleDetail?voteId="+this.vote.id+"&voteItemId="+itemId+"&voteItemName="+itemName
				})
			}
		}
		
	}
</script>

<style lang="scss">
	
	.options{
		margin-top: 0px;
		padding: 10px;
		padding-top: 0px;
		padding-bottom: 70px;
		.option{
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			padding: 15px;
			border-radius: 10px;
			background-color: white;
			.name_vote_number{
				.name{
					padding-left: 2px;
					font-weight: bolder;
				}
				.number{
					padding-top: 5px;
					color: blue;
					font-size: 11px;
				}
			}
			.detail{
				margin-top: 10px;
				padding: 5px;
				padding-top: 8px;
				padding-bottom: 8px;
				border-radius: 10px;
				background-color: #e6eeff;
				font-size: 12px;
				width: 55px;
				
				text-align: center;
			}
		}
	}
	
</style>

新建votePeopleDetail页面 投票人详情页面

		{
			"path": "pages/votePeopleDetail/votePeopleDetail",
			"style": {
				"navigationBarTitleText": "投票人明细"
			}
		}
<template>
	<view class="detail">
		<view class="header">
			<view>
				<text class="option">[选项]</text>&nbsp;&nbsp;<text class="itemName">{{voteItemName}}</text>&nbsp;&nbsp;
			</view>
			<view>
				<text class="total">[共{{voteDetailList.length}}票]</text>
			</view>
		</view>
		<view class="list">
			<block v-for="(value,index) in voteDetailList" :key="index">
				<view class="item">
					<view class="people">
						<view class="user_image">
							<image :src="this.baseUrl+'/image/userAvatar/'+value.wxUserInfo.avatarUrl" ></image>
						</view>
						<view class="user_name_wrap">
							<text class="nick_name">{{value.wxUserInfo.nickName}}</text>
							<text class="vote_date">投票时间:{{value.voteDate}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {getBaseUrl, requestUtil} from "../../util/requestUtil.js"
	
	export default{
		
		data(){
			return{
				voteDetailList:[],
				voteItemName:'',
				baseUrl:''
			}
		},
		onLoad(e) {
			console.log(e.voteId);
			console.log(e.voteItemId);
			console.log(e.voteItemName);
			this.voteItemName=e.voteItemName
			this.getVoteDetailInfo(e.voteId,e.voteItemId);
			this.baseUrl=getBaseUrl();
		},
		methods:{
			getVoteDetailInfo:async function(voteId,voteItemId){
				const result=await requestUtil({url:"/voteDetail/"+voteId+"/"+voteItemId,method:"get"});
				console.log(result)
				this.voteDetailList=result.voteDetailList;
			}
		}
		
	}
	
</script>

<style lang="scss">
	
	.detail{
		.header{
			padding-left: 20px;
			padding-top: 20px;
			padding-bottom: 20px;
			padding-right: 20px;
			display: flex;
			justify-content: space-between;
			.option{
				color: green;
			}
			.total{
				color: green;
				font-size: 13px;
			}
		}
		.list{
			.item{
				background-color: white;
				margin-bottom: 5px;
				padding: 10px;
				.people{
					display: flex;
					flex-direction: row;
					.user_image{
						width: 100rpx;
						height: 100rpx;
						text-align: center;
						padding: 0rpx;
						margin: 0rpx;
						image{
							border-radius: 50%;
							width: 90rpx;
							height: 90rpx;
						}
					}
					.user_name_wrap{
						display: flex;
						flex-direction: column;
						padding-left: 10px;
						.nick_name{
							
						}
						.vote_date{
							padding-top: 10rpx;
							font-size: 25rpx;
						}
						
					}
				}
			}
		}
	}
	
</style>
   /**
     * 根据id查询投票人详情
     * @param voteId
     * @param voteItemId
     * @return
     */
    @GetMapping("/{voteId}/{voteItemId}")
    public R findById(@PathVariable(value = "voteId")Integer voteId,@PathVariable(value = "voteItemId")Integer voteItemId){
        List<VoteDetail> voteDetailList = voteDetailService.list(new QueryWrapper<VoteDetail>().eq("vote_id", voteId).eq("vote_item_id", voteItemId));
        for(VoteDetail voteDetail:voteDetailList){
            WxUserInfo wxUserInfo = wxUserInfoService.getOne(new QueryWrapper<WxUserInfo>().eq("openid", voteDetail.getOpenid()));
            voteDetail.setWxUserInfo(wxUserInfo);
        }
        Map<String,Object> resultMap=new HashMap<>();
        resultMap.put("voteDetailList",voteDetailList);
        return R.ok(resultMap);
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1388563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32CubeMX配置STM32G071UART+DMA收发数据(HAL库开发)

时钟配置HSI主频配置64M 配置好串口&#xff0c;选择异步模式 配置DMA TX,RX,选择循环模式。 NVIC中勾选使能中断 勾选生成独立的.c和h文件 配置好需要的开发环境并获取代码 串口重定向勾选Use Micro LIB main.c文件修改 增加头文件和串口重定向 #include <string.h&g…

微软推出Copilot Pro高级订阅服务;使用大语言模型处理音频数据;AI新工具Summify-用于总结YouTube视频的人工智能工具

&#x1f989; AI新闻 &#x1f680; 微软推出Copilot Pro高级订阅服务&#xff0c;扩展适用范围到更多设备和应用 摘要&#xff1a;微软为其Copilot助手推出了新的高级订阅服务Copilot Pro&#xff0c;该服务每月收费20美元&#xff0c;支持Windows PC、Web、App使用&#x…

Win11提示"由于启动计算机时出现了页面文件配置问题"解决方法

1.右键此电脑&#xff0c;选择属性 2.选择高级系统设置 3.选择性能 ---设置 4.选择高级--更改 5.勾选...&#xff0c;确定 本文章仅供学习交流使用&#xff0c;如有侵权&#xff0c;联系删除

二叉树的四种遍历详解(先序,中序,后序,层次)

目录 引言&#xff1a; 1&#xff1a;先序遍历 2.中序遍历 3.后续遍历 4.层次遍历 先序中序后序例题&#xff1a; 例题1&#xff1a; 例题2&#xff1a; 层次遍历例题&#xff1a; 结语&#xff1a; 引言&#xff1a; 二叉树的遍历的概念&#xff1a;二叉树遍历是指…

GZ075 云计算应用赛题第10套

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷10 某企业根据自身业务需求&#xff0c;实施数字化转型&#xff0c;规划和建设数字化平台&#xff0c;平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”&#xff0c;拟采用开源OpenS…

管理configration Manager 控制台

一、configration manager客户端安装 1.点击管理&#xff0c;扩展站点配置&#xff0c;点击站点 2.右键主站点&#xff0c;选择客户端安装设置 3.出现客户端请求安装属性对话框后&#xff0c;点击常规。点击启用自动站点范围客户端请求安装 4.点击账户 5.点击安装属性&#x…

Windows 10 Microsoft Edge浏览器无法打

早上到公司发现Microsoft Edge浏览器突然间打不开了&#xff0c;怎么点击快捷方式都不行&#xff0c;然后尝试了以下方法都不行&#xff1a; 1、右键使用“管理者身份运行”打开&#xff0c;无效。 2、账户注销&#xff0c;再次点击快捷方式。 3、重启电脑无效。 然后快捷方式右…

轻松制作商业画册的秘籍

对于许多商业人士来说&#xff0c;制作一本精美的商业画册是一个重要的任务&#xff0c;它不仅代表了公司的形象&#xff0c;也是与客户和潜在客户建立联系的重要工具。然而&#xff0c;制作一本商业画册并不像看起来那么简单。有许多因素需要考虑&#xff0c;包括设计、布局、…

当代大学生是怎么被废掉的?

中式教育以应试为核心&#xff0c;强调知识的灌输和学生被动接受。随着社会的发展&#xff0c;中式教育的短板逐渐显现&#xff0c;创新能力的缺乏、对记忆的过度依赖、忽视个体差异等问题日益突出。 建议所有大学生都能去看看《上海交通大学生存手册》&#xff0c;它道出了中…

前任开发在代码里下毒了,支付下单居然没加幂等

分享是最有效的学习方式。 故事 又是一个风和日丽没好的一天&#xff0c;小猫戴着耳机&#xff0c;安逸地听着音乐&#xff0c;撸着代码&#xff0c;这种没有会议的日子真的是巴适得板。 不料祸从天降&#xff0c;组长火急火燎地跑过来找到了小猫。“快排查一下&#xff0c;目…

C++内存管理机制(侯捷)笔记3

C内存管理机制&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youtube: 侯捷-C内存管理机制 Github课程视频、PPT和源代码: https://github.com/ZachL1/Bilibili-plus 第三讲&#xff1a;malloc和…

如何手写一个RPC?

在学习 RPC 框架之前&#xff0c;我们先来手写一个RPC。 我们在学习的过程中&#xff0c;一定要做到知其然&#xff0c;还要知其所以然。 架构演进 单体架构 要知道&#xff0c;在以前单体架构的时候&#xff0c;会将所有的应用功能都集中在一个服务当中。 单体架构初始开发…

学习Java API(三):基础知识点一文通✅

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读Date 类SimpleDateFormatCalendar Date 类 java.util 包提供了 Date 类来封…

UI自动化测试框架

文章目录 UI自动化基础什么是UI自动化测试框架UI自动化测试框架的模式数据驱动测试框架关键字驱动测试框架行为驱动测试框架 UI自动化测试框架的作用UI自动化测试框架的核心思想UI自动化测试框架的步骤UI自动化测试框架的构成UtilsLog.javaReadProperties.Java coreBaseTest.ja…

屏幕录制软件有哪些?强烈推荐5款免费好用录屏软件

录制全屏视频是制作视频教程、评论、游戏等内容的绝佳方式。它可以包括您计算机屏幕上的任何活动以及您的音频和网络摄像头。特别是&#xff0c;屏幕录像机对喜欢创建软件评论的视频博主很有帮助。如果您是其中之一&#xff0c;那么好消息是您可以在网络上找到很多屏幕录制应用…

纯c++简易的迷宫小游戏

一个用c写的黑框框迷宫 适合新手入门学习 也适合大学生小作业 下面附上代码 总体思路 初始化游戏界面&#xff1a;设置迷宫的大小&#xff08;WIDTH和HEIGH&#xff09;&#xff0c;生成迷宫地图&#xff08;map&#xff09;&#xff0c;包括墙壁、空地、起点和终点。显示…

怿星科技测试实验室获CNAS实验室认可,汽车以太网检测能力达国际标准

2023年12月27日&#xff0c;上海怿星电子科技有限公司测试实验室&#xff08;下称&#xff1a;EPT LABS&#xff09;通过CNAS实验室认可批准&#xff0c;并于2024年1月5日正式取得CNAS实验室认可证书&#xff08;注册号CNAS L19826&#xff09;&#xff0c;标志着怿星科技的实验…

SpringBoot3自动配置原理

​​​​​​自动配置 遵循约定大约配置的原则&#xff0c;在boot程序启动后&#xff0c;起步依赖中的一些bean对象会自动注入到ioc容器 看一下我们前面写的代码有没有达到自动配置的效果呢&#xff1f; 没有自动&#xff0c;我们写了配置类&#xff0c;写了Import注解&#…

一台电脑如何通过另一台联网电脑访问网络

电脑A没有连接网络&#xff0c;电脑B已经连接wifi。 电脑A如何通过访问电脑B从而连接网络&#xff1f; 1. 将这2台电脑用网线直连 2. 电脑B打开【网络和Internet设置】 3. 右键点击WLAN&#xff0c;选择属性&#xff0c;进入共享tab页面&#xff0c;勾选【允许其他网络用户通过…

超融合之道:亚信安慧AntDB 8.0版本引领数据库创新

在当今多变的数据应用场景中&#xff0c;AntDB作为行业领先的超融合流式实时数仓&#xff0c;秉承着“融合实时”的研发理念&#xff0c;全面应对企业日益复杂的数据处理需求。通过SQL接口访问多种执行引擎&#xff0c;AntDB在实现交易、分析等多重能力的“超融合”方面取得了显…