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

锋哥原创的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);
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

应急管理蓝皮书 |《应急预案数字化建设现状和发展建议》下篇

导读 《应急预案数字化建设现状和发展建议》&#xff1a;297-313页 《中国应急管理发展报告》系列蓝皮书由中央党校&#xff08;国家行政学院&#xff09;应急管理培训中心&#xff08;中欧应急管理学院&#xff09;联合社会科学文献出版社研创出版&#xff0c;本着“权威前沿…

RT-Thread I/O设备模型

I/O设备模型 绝大部分的嵌入式系统都包括一些I/O&#xff08;Input/Output&#xff0c;输入/输出&#xff09;设备&#xff0c;例如仪器上的数据显示屏、工业设备上的串口通信、数据采集设备上用于保存数据的Flash或SD卡&#xff0c;以及网络设备的以太网接口等&#xff0c;都…

Linux 内核学习 3a - 如何查看虚拟内存和物理内存,以及虚拟内存和物理内存之间转换

/proc/iomem, ioremap(), mmap() The kernel manages device resources like registers as physical addresses(物理地址). These are the addresses in /proc/iomem. The physical address is not directly useful to a driver; it must use ioremap() to map the space and …

linux安装MySQL5.7(安装、开机自启、定时备份)

一、安装步骤 我喜欢安装在/usr/local/mysql目录下 #切换目录 cd /usr/local/ #下载文件 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.38-linux-glibc2.12-x86_64.tar.gz #解压文件 tar -zxvf mysql-5.7.38-linux-glibc2.12-x86_64.tar.gz -C /usr/local …

【电路电子学】7天速通攻略+笔记

7天是 看视频记笔记刷题的总时长&#xff0c;时间紧迫的同学可以看情况进行缩减。个人认为做题&#xff0c;尤其是解析齐全的题最重要&#xff01; 我校所用教材 《电路与电子学基础》唐胜安 复习总流程 所用材料&#xff08;都可自行找到免费资源&#xff09; 视频知识点讲…

机器人持续学习基准LIBERO系列5——获取显示深度图

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo 1.更改环境设置 LIBERO-master/l…

【降龙算法】基于QT插件机制实现一个机器视觉算法小框架

机器视觉行业有各种各样的拖拉拽框架&#xff0c;也叫做低代码平台&#xff0c;例如国内海康的VisionMaster&#xff1a; 一个机器视觉框架需要包含各种算法模块&#xff0c;日志窗口&#xff0c;图像显示窗口等等&#xff0c;【降龙算法】就是做了一个入门级的机器视觉算法框…

Java入门IDEA基础语法

1&#xff1a;Java入门 1.1 Java简介 Java是什么&#xff1a; Java是一门非常优秀的计算机语言 语言&#xff1a;人与人交流沟通的表达方式 计算机语言&#xff1a;人与计算机之间进行信息交流沟通的一种特殊语言 Java之父&#xff1a;詹姆斯高斯林&#xff08;James Gosli…

如何利用RPA做UI自动化测试对传统自动化的降维打击

写在前面 RPA软件一开始的目的并不是自动化测试&#xff0c;而是要把电脑上面几十个、上百个常用的软件&#xff0c;通过机器人流程自动化来打通&#xff0c;通过一个软件来控制几十个、上百个软件。而这个过程&#xff0c;其实覆盖了软件自动化测试。 所谓降维打击&#xff0c…

伴鱼离线数仓建设案例

伴鱼数仓建设案例 伴鱼离线数仓建立&#xff0c;与伴鱼的业务一起快速发展&#xff0c;从一条业务线&#xff0c;到多条业务线。在演进的过程中&#xff0c;有很多总结和沉淀的内容。本篇文章主要介绍伴鱼离线数据仓库的发展历史&#xff0c;在发展过程中遇到的各种问题&#…

pytorch学习笔记(十)

一、损失函数 举个例子 比如说根据Loss提供的信息知道&#xff0c;解答题太弱了&#xff0c;需要多训练训练这个模块。 Loss作用&#xff1a;1.算实际输出和目标之间的差距 2.为我们更新输出提供一定的依据&#xff08;反向传播&#xff09; 看官方文档 每个输入输出相减取…

如何用ChatGPT写教案设计?以“沁园春雪”为例

1. 引言 随着人工智能技术的飞速发展&#xff0c;ChatGPT已成为教育领域的一大创新工具。ChatGPT不仅能够模拟人类对话&#xff0c;还可以帮助设计互动丰富、内容丰富的教案。本文将探索如何利用ChatGPT进行教案教学设计&#xff0c;特别是通过“沁园春雪”这一案例&#xff0…

智能路由器 端口映射 (UPnP) Padavan内网端口映射配置方法

新版本Padavan 4.4内核的端口映射配置和老版本的不太一样,因为新版本默认是启用的 UPnP端口映射, 同时默认使用的是 IGD UPnP自动端口映射, UPnP名词解释: UPnP通用即插即用&#xff0c;是一组协议的统称&#xff0c;是一种基于TCP/IP、UDP和HTTP的分布式、开放体系&#xff…

【C++】- 类和对象

类和对象③ 介绍运算符重载赋值运算符重载运算符重载 在学习C语言时&#xff0c;我们首先接触的就是变量&#xff0c;再深入学习&#xff0c;我们可以利用运算符对变量进行操作&#xff0c;当我们使用C编写程序时&#xff0c;经常会遇到一些需要对特殊的例如自定义数据类型进行…

Linux中PyTorch的安装教程

在安装PyTorch之前&#xff0c;我们需要确保已经安装了Python和pip。可以使用以下命令检查是否已经安装&#xff1a; python --version pip --version如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-get update sudo apt-get install python3 sudo apt-…

NetApp E系列(E-Series)OEM产品介绍以及如何收集日志和保存配置信息

NetApp E系列是NetApp收购LSI存储后建立的一条新的产品线&#xff0c;由于LSI存储的历史悠久&#xff0c;所以这条产品线给NetApp带来了很多的OEM产品&#xff0c;可以说E系列是世界上OEM给最多公司的存储产品线也不为过&#xff0c;因为最早LSI的产品销售测率就是OEM&#xff…

手把手教你学会接口自动化系列九-封装调用之后的代码展示

接上篇: 手把手教你学会接口自动化系列八-将url写在配置文件中,封装调用-CSDN博客 下来把之前写的demo开始改造,将所有的url = http://192.168.0.134:8081的部分,替代了 如下: demo的改造 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2023/05# @Author …

OpenCV-Python的版本介绍及区别

OpenCV-Python版本介绍 OpenCV-Python有多个版本&#xff0c;每个版本都有其特定的功能和改进。以下是一些常见OpenCV-Python版本及其介绍和区别&#xff1a; OpenCV-Python 2.x版本 这是OpenCV-Python的旧版本&#xff0c;支持Python 2.x。它包含了许多传统的计算机视觉功能&…

Springboot + vue 停车管理系统

Springboot vue 停车管理系统 项目描述 系统包含用户和管理员两个角色 用户&#xff1a;登录、注册、个人中心、预定停车位、缴费信息 管理员&#xff1a;登录、用户信息管理、车位信息管理、车位费用管理、停泊车辆管理、车辆进出管理、登录日志查询 运行环境 jdk1.8 idea …

强化学习应用(五):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…