uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我参与的投票列表实现

news2024/11/17 11:47:05

锋哥原创的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/sql:

SELECT * FROM t_vote WHERE id IN (SELECT vote_id FROM t_vote_detail WHERE openid='o30ur5JpAsAUyGBkR0uW4IxvahR8')

后端代码:

/**
 * 获取指定用户参与的投票
 * @param token
 * @return
 */
@RequestMapping("/listOfJoinUser")
public R listOfJoinUser(@RequestHeader String token){
    Claims claims = JwtUtils.validateJWT(token).getClaims();
    System.out.println("openid="+claims.getId());
    List<Vote> voteList = voteService.list(new QueryWrapper<Vote>().inSql("id","SELECT vote_id FROM t_vote_detail WHERE openid='"+claims.getId()+"'"));
    Map<String,Object> resultMap=new HashMap<>();
    resultMap.put("voteList",voteList);
    return R.ok(resultMap);
}

新建页面

	{
		"path": "pages/joinVoteList/joinVoteList",
		"style": {
			"navigationBarTitleText": "我参与的投票"
		}
	}
<template>
	<view class="create_vote_list">
		<view class="vote_list">
			<block v-for="(value,index) in voteList" :key="index">
				<view class="vote_item" @click="goVotePage(value.id)">
					<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/listOfJoinUser",method:"get"});
				this.voteList=result.voteList;
			},
			judgeDate:function(toDate){
				return judgeDate(toDate);
			},
			goVotePage:function(voteId){
				uni.navigateTo({
					url:"/pages/vote/vote?id="+voteId
				})
			}
		}
		
	}
</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>

my.vue页面

goJoinVoteList:function(){
				uni.navigateTo({
					url:"/pages//joinVoteList/joinVoteList"
				})
			}

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

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

相关文章

LeetCode刷题--- 按摩师

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动…

监督学习 - 支持向量回归(Support Vector Regression,SVR)

什么是机器学习 支持向量回归&#xff08;Support Vector Regression&#xff0c;SVR&#xff09;是一种基于支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;的回归算法&#xff0c;用于解决回归问题。与传统的回归算法不同&#xff0c;SVR的目标是…

微短剧市场暴涨267.65%,用微短剧场景AUI Kit精巧入局

微短剧&#xff0c;不仅上头&#xff0c;更要上心。 微短剧&#xff0c;深度“拿捏”了这个碎片化时代&#xff0c;也是刚过去的2023年绕不开的热词。 与传统影视剧制作精益求精、耗时长相反&#xff0c;门槛与耗时“双低”恰恰成为了微短剧的独特优势&#xff0c;使其走上以量…

使用numpy处理图片——图片拼接

大纲 左右拼接上下拼接 在《使用numpy处理图片——图片切割》一文中&#xff0c;我们介绍了如何使用numpy将一张图片切割成4部分。本文我们将反其道而行之&#xff0c;将4张图片拼接成1张图片。 基本的思路就是先用两张图以左右结构拼接成上部&#xff0c;另外两张图也以左右拼…

台灯实测PK:书客、明基、孩视宝护眼台灯,谁能为你带来舒适的光明体验?

现代生活中&#xff0c;我们频繁面对电子屏幕&#xff0c;对眼睛造成一定压力&#xff0c;长时间后会感到眼睛疲劳。特别是家长留意到&#xff0c;孩子在不适宜的灯光下长时间学习或玩耍时&#xff0c;会揉眼或表现出不适。为了更好地保护视力健康&#xff0c;选择一款护眼台灯…

Java多线程并发篇----第八篇

系列文章目录 文章目录 系列文章目录前言一、简述一下你对线程池的理解二、线程生命周期(状态)三、新建状态(NEW)四、就绪状态(RUNNABLE)五、运行状态(RUNNING)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站…

爬虫到底违法吗?你离违法还有多远?

最近&#xff0c;国家依法查处了部分编写爬虫程序&#xff0c;盗取其他公司数据的不良企业。一时间风声鹤唳&#xff0c;关于爬虫程序是否违法的讨论遍布程序员圈子。那么到底编写爬虫程序是否违法呢&#xff1f; 其爬虫下载数据&#xff0c;一般而言都不违法&#xff0c;因为…

PHP+MySQL开发组合:开源在线课堂知识付费小程序源码系统,附带完整的搭建教程

互联网的快速发展&#xff0c;知识付费已经成为一种新的商业模式。越来越多的人希望通过在线学习来提升自己的知识和技能。为了满足这一市场需求&#xff0c;罗峰给大家分享一款基于PHP和MySQL的在线课堂知识付费小程序源码系统。该系统可帮助用户快速搭建自己的在线课堂平台&a…

亚信安全发布2024年网络安全威胁十大预测

2024年将是迎接网络安全新挑战的一年。随着经济和政治领域数字化发展&#xff0c;企业将越来越多地利用人工智能、机器学习 (AI/ML)、云等新型技术。虽然这些创新为企事业单位发展及运营提供了帮助&#xff0c;提高了效率&#xff0c;但它们同时也为攻击者提供了机会。 2024年&…

四川古力未来科技有限公司:抖音小店的崛起之路

随着互联网的飞速发展&#xff0c;电子商务已经成为人们日常生活中不可或缺的一部分。作为一家以科技为核心的公司&#xff0c;四川古力未来科技有限公司在电子商务领域中崭露头角&#xff0c;特别是其抖音小店的发展引人注目。 四川古力未来科技有限公司的抖音小店自开业以来&…

对象存储MinIO的简介与部署

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 相关文章推荐&#xff1a; 记录一次跨越16个月的minio版本升级与数据迁移 MinIO集群怎么接入Prometheus监控&#xff1f;(上) Mi…

vue3、vue2文件导入事件

一、vue3写法 1、html部分 <el-buttontype"info"plainicon"Upload"click"handleImport"v-hasPermi"[system:user:import]">导入</el-button><!-- 导入对话框 --><el-dialog :title"upload.title" v-…

如何使用网络测试仪构造特殊流量

为什么要仿真特殊流量 在现网中&#xff0c;网络流量时常伴随着突发&#xff0c;突发流量可能会造成网络的拥塞&#xff0c;从而产生丢包、抖动和时延&#xff0c;导致网络服务质量整体下降。面对宏观上的突发&#xff0c;通常采用在网络设备入向限速或者流量整形功能来消除突…

【Vue】引入路径正确,不影响正常运行但文件爆红

现象&#xff1a;引入路径正确但文件爆红&#xff0c;不影响运行但不美观&#xff08;按住Ctrl可以跳转到该文件&#xff0c;关闭后过段时间再打开还是爆红&#xff09; 原因 &#xff08;1&#xff09;相对路径使用了不正确的大小写 &#xff08;2&#xff09;项目不支持force…

PM50-40、PM50-45、PM50-52比例电控柱塞泵控制器

电比例轴向变量柱塞泵控制放大器技术是一种高效的液压动力传动技术。它通过将电液比例控制技术与轴向变量柱塞泵相结合&#xff0c;实现了液压泵的高精度、高效率和低噪声运行。以下是该技术的主要特点和应用&#xff1a;控制原理&#xff1a;基于双向电液比例变排量轴向柱塞泵…

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式 前提docker环境已经安装好 如未安装&#xff0c;请参考博文https://blog.csdn.net/a554521655/article/details/134251763 文章目录 ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式安装emqx查看是否安装并启动成功登录前端查 安…

记录一次数据中包含转义字符\引发的bug

后端返回给前端的数据是: { "bizObj": { "current": 1, "orders": [ ], "pages": 2, "records": [ { "from": "1d85b8a4bd33aaf99adc2e71ef02960e", …

Linux(Centos7)安装 jenkins(jdk11+jenkins2.375),并配置JDK,Maven,Git,GitLab

安装步骤 1. JDK11安装2. Maven安装3. git安装4. Jenkins2.375安装4.1 设置中文显示4.2 端口,用户权限修改4.3 插件下载4.4 全局工具配置4.4.1 Maven配置4.4.2 JDK配置4.4.3 Git配置 4.5 系统配置4.5.1 Gitee配置 4.6 构建测试 1. JDK11安装 #下载 yum -y install fontconfig …

2023 年最值得推荐的11个视频转换器(免费和付费)

拥有一个视频转换器供您使用意味着您可以轻松地在任何设备上播放所有视频。我们展示了适用于 Windows 的最佳视频转换器&#xff0c;这样您就不必浪费时间使用不合格的工具。 录制、编辑和分享视频是人生最大的消遣之一。有如此多的设备能够捕捉视频——而且共享它们的途径也很…

除硼滤料TRAPPSORB

吸附剂产品是Watch Water的 核心业务&#xff0c;Watch Water是最 大的创新水处理公司之一&#xff0c;公司 主营业务包括过滤和吸附剂产品. 每个 球粒直径通常在2-5毫米范围内 的&#xff0c;可用于固定床吸附污染物。不过 球粒尺寸可以根据客户的具体需求生产。 经过我们40年…