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/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.mfbz.cn/a/313195.html

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

相关文章

欧洲高性能计算联合企业豪掷2000万欧元采购量子计算机

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨琳梦 深度好文&#xff1a;945字丨8分钟阅读 近日&#xff0c;欧洲高性能计算联合企业&#xff08;EuroHPC JU&#xff09;启动了一项重要计划&#xff0c;旨在显著提…

MOOSE相关滤波跟踪算法(个人学习笔记)

MOOSE 论文标题 “Visual Object Tracking using Adaptive Correlation Filters” 原文地址 用滤波器对目标外观进行建模&#xff0c;并通过卷积操作来执行跟踪。 参考阅读&#xff1a; 目标跟踪经典算法——MOSSE&#xff08;Minimum Output Sum Square Error&#xff09…

电容的基础知识

一、电容单位 电容亦称作“电容量”&#xff0c;是指在给定电位差下的电荷储藏量&#xff0c;记为C&#xff0c;国际单位是法拉&#xff08;F&#xff09;。在国际单位制里&#xff0c;电容的单位是法拉&#xff0c;简称法&#xff0c;符号是F&#xff0c;由于法拉这个单位太大…

Zynq 电源

ZYNQ芯片的电源分PS系统部分和PL逻辑部分&#xff0c;两部分的电源分别是独立工作。PS系统部分的电源和PL逻辑部分的电源都有上电顺序&#xff0c;不正常的上电顺序可能会导致ARM系统和FPGA系统无法正常工作。 PS部分的电源有VCCPINT、VCCPAUX、VCCPLL和PS VCCO。 VCCPINT为PS内…

canvas绘制流动的蚂蚁线(图文示例)

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

提高iOS App开发效率的方法

引言 随着智能手机的普及&#xff0c;iOS App开发成为越来越受欢迎的技术领域之一。许多人选择开发iOS应用程序来满足市场需求&#xff0c;但是iOS App开发需要掌握一些关键技术和工具&#xff0c;以提高开发效率和质量。本文将介绍一些关键点&#xff0c;可以帮助你进行高效的…

自动化测试框架pytest系列之8个常用的装饰器函数

自动化测试框架pytest系列之基础概念介绍(一)-CSDN博客 自动化测试框架pytest系列之21个命令行参数介绍(二)-CSDN博客 自动化测试框架pytest系列之强大的fixture功能&#xff0c;为什么fixture强大&#xff1f;一文拆解它的功能参数。(三)-CSDN博客 接上文 3.5 pytest的8…

Agisoft Metashape 基于影像的外部点云着色

Agisoft Metashape 基于影像的外部点云着色 文章目录 Agisoft Metashape 基于影像的外部点云着色前言一、添加照片二、对齐照片三、导入外部点云四、为点云着色五、导出彩色点云前言 本教程介绍了在Agisoft Metashape Professional中,将照片中的真实颜色应用于从不同源获取的…

监督学习 - 逻辑回归(Logistic Regression)

什么是机器学习 逻辑回归&#xff08;Logistic Regression&#xff09;虽然名字中包含"回归"一词&#xff0c;但实际上是一种用于解决分类问题的统计学习方法&#xff0c;而不是回归问题。它是一种线性模型&#xff0c;常用于二分类问题&#xff0c;也可以扩展到多分…

【EI会议征稿通知】2024年图像处理与人工智能国际学术会议(ICIPAI2024)

2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09; 2024 International Conference on Image Processing and Artificial Intelligence&#xff08;ICIPAI2024&#xff09; 2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09;将…

python 爬虫 生成markdown文档

本文介绍的案例为使用python爬取网页内容并生成markdown文档&#xff0c;首先需要确定你所需要爬取的框架结构&#xff0c;根据网页写出对应的爬取代码 1.分析总网页的结构 我选用的是redis.net.com/order/xxx.html (如:Redis Setnx 命令_只有在 key 不存在时设置 key 的值。…

文件重命名:文件命名错了怎么办,新旧文件名互换的方法

在日常生活和工作中&#xff0c;经常要处理各种文件&#xff0c;会因为疏忽或者误解&#xff0c;给文件起错名字。文件名一旦错误&#xff0c;就可能造成后续的困扰&#xff0c;比如找不到需求的文件、混淆不同的文件等。如果文件命名错了如何更正呢&#xff1f;下面来看云炫文…

【Electron】 Vite项目 初始配置 scss

pnpm add -D sasssrc下面创建 styles/main.scss 文件 mian.ts 内引入 ./styles.scss 文件 import ./styles/main.scss 测试scss是否生效&#xff1a; styles/mian.scss :root{--mian:red; } App.vue <template><div>你好</div> </template><s…

上架苹果APP的时候在哪里填写APP的隐私政策信息

在如今高度重视数据隐私的时代&#xff0c;开发并上架一个iOS APP时提供透明的隐私政策是非常重要的。苹果公司对此有严格的规定&#xff0c;任何上架至App Store的应用都必须包含一个隐私政策。以下是您在上架苹果APP时填写隐私政策信息的详细步骤和必须注意的事项。 准备隐私…

阿里巴巴国际站商品采集API商品列表API商品详情数据API

阿里巴巴国际站&#xff08;Alibaba.com&#xff09;是阿里巴巴集团旗下的一个全球贸易平台&#xff0c;旨在连接全球买家和供应商&#xff0c;并促进国际贸易。它是目前世界上最大的B2B&#xff08;企业对企业&#xff09;在线交易市场之一。 阿里巴巴国际站提供了广泛的产品类…

使用知行之桥EDI系统的HTTP签名身份验证

本文简要概述了如何在知行之桥EDI系统中使用 HTTP 签名身份验证&#xff0c;并将使用 CyberSource 作为该集成的示例。 API 概述 API 是”应用编程接口”的缩写。这听起来可能很复杂&#xff0c;但它的真正含义是一种允许两个不同实体相互通信的软件。自开发以来&#xff0c;…

采集小红书笔记详情页的方法,大部分人都想得复杂了

一般来说&#xff0c;社交媒体都有列表页和详情页、个人主页三大页面&#xff0c;列表页一般包含搜索结果页、话题聚合页等等&#xff0c;详情页就是点开某一条笔记或者动态的具体页面&#xff1b; 小红书当然也不例外&#xff0c;比如下面这个话题聚合页&#xff1a; https:/…

高工微报告|智驾前视一体机趋势

传统智驾前视一体机赛道上&#xff0c;1V3R、1V5R产品如何升级备受关注。 根据日前调研获取的信息&#xff0c;1V3R、1V5R向轻量级行泊一体&#xff08;典型为5V5R12U方案&#xff0c;算力平台5-20TOPS&#xff09;迈进的具体市场空间&#xff0c;仍在验证阶段。 其中&#x…

java基于ssm框架的少儿编程在线培训系统论文

目 录 目 录 I 1 课题背景及研究内容 4 1.1 课题背景 4 1.2 开发目的和意义 4 2 相关技术和应用 4 2.1 VUE技术 4 2.2 Mysql数据库简介 5 2.3 SSM框架简介 6 2.4 Eclipse简介 6 2.5 B/S系统架构 6 3 系统分析 8 3.1可行性分析 8 3.1.1技术可行性 8 3.1.2经济可行性 8 3.1.3操作…

经验分享:智能知识库才是数字时代的企业必备选择

随着全球化和竞争的加剧&#xff0c;企业必须通过将知识作为战略资产进行管理&#xff0c;才能保持竞争优势。因此&#xff0c;建设有效的知识库系统&#xff0c;成为了数字时代企业必备的选择。决定企业成功或失败的不再仅仅是产品或服务的质量&#xff0c;而是如何有效利用知…