第13讲我创建的投票列表实现

在这里插入图片描述

新建我创建的投票页面

	{
		"path": "pages/createVoteList/createVoteList",
		"style": {
			"navigationBarTitleText": "我创建的投票"
		}
	}

个人中心页面,加下 点击 “我创建的投票”跳转列表页面

在这里插入图片描述

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

后端:

/**
 * 获取指定用户创建的投票
 * @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);
}

前端:

<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>

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

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

相关文章

linux 09 软件安装,YUM

下载软件时候&#xff0c;windows会从网上下载exe文件。 windows中的exe文件linux中的rpm文件 简介部分&#xff1a; 其中的认识RPM包&#xff1a; YUM&#xff08;软件包管理工具&#xff09; 01.YUM工具简介 02.使用YUM 第一 安装YUM 全新安装&#xff1a; 01.先pin…

统计图饼图绘制方法(C语言)

统计图饼图绘制方法&#xff08;C语言&#xff09; 常用的统计图有条形图、柱形图、折线图、曲线图、饼图、环形图、扇形图。 前几类图比较容易绘制&#xff0c;饼图绘制较难。今值此介绍饼图的绘制方法。 本方法采用C语言的最基本功能&#xff1a; &#xff08; 1.&#xff09…

嵌入式STM32 单片机 GPIO 的工作原理详解

STM32的 GPIO 介绍 GPIO 是通用输入/输出端口的简称&#xff0c;是 STM32 可控制的引脚。GPIO 的引脚与外部硬件设备连接&#xff0c;可实现与外部通讯、控制外部硬件或者采集外部硬件数据的功能。 以 STM32F103ZET6 芯片为例子&#xff0c;该芯片共有 144 脚芯片&#xff0c…

(15)Hive调优——数据倾斜的解决指南

目录 前言 一、什么是数据倾斜 二、发生数据倾斜的表现 2.1 MapReduce任务 2.2 Spark任务 三、如何定位发生数据倾斜的代码 四、发生数据倾斜的原因 3.1 key分布不均匀 3.1.1 某些key存在大量相同值 3.1.2 存在大量异常值或空值 3.2 业务数据本身的特性 3.3 SQL语句…

关于npmlink的问题

深入浅出关于Npm linl的问题 关键词&#xff1a; vue3报错 Uncaught TypeError: Cannot read properties of null (reading ‘isCE‘) at renderSlot npm link 无法实现热更新 我的开发环境是 “vue”: “^3.2.13” 今天在使用 rollup搭建组件库的时候我发现我的组件库不能…

C语言:指针的基础详解

目录 1. 内存 2. 取地址& 3. 指针变量 4. 解引用 4.1 *解引用 4.2 []解引用 4.3 ->解引用 5. 指针变量的大小 5.1 结论 6. 指针运算 7. void* 指针 8. const修饰指针 8.1 const修饰变量 8.2 const修饰指针变量 8.3 结论 9. 野指针 9.1 为什么会出现野指…

计网体系结构

计算机网络的概述 概念 网络&#xff1a;网状类的东西或系统。 计算机网络&#xff1a;是一个将分散的、具有独立性功能的计算机系统&#xff0c;通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统。即计算机网络是互连(通过通信链路互连…

Go语言的100个错误使用场景(40-47)|字符串函数方法

前言 大家好&#xff0c;这里是白泽。 《Go语言的100个错误以及如何避免》 是最近朋友推荐我阅读的书籍&#xff0c;我初步浏览之后&#xff0c;大为惊喜。就像这书中第一章的标题说到的&#xff1a;“Go: Simple to learn but hard to master”&#xff0c;整本书通过分析100…

ClickHouse--03--数据类型

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 数据类型1. Int2.FloattoFloat32(...) 用来将字符串转换成 Float32 类型的函数toFloat64(...) 用来将字符串转换成 Float64 类型的函数 3.DecimaltoDecimal32(value…

微服务中台架构的设计与实现

本文将探讨微服务中台架构的设计与实现&#xff0c;介绍如何通过微服务的方式进行系统拆分和组合&#xff0c;构建灵活、可扩展且易于维护的中台架构&#xff0c;以加速企业的数字化转型和提升竞争力。 ## 1. 引言 随着企业规模的不断扩大和业务的日益复杂化&#xff0c;传统…

RabbitMQ配置消息转换器

1. 默认转换器 Test public void testSendMap() throws InterruptedException {// 准备消息Map<String, Object> msg new HashMap<>();msg.put("name", "harry");msg.put("age", 21);// 发送消息rabbitTemplate.convertAndSend(&q…

问题:规范化过程主要为克服数据库逻辑结构中的插入异常、删除异常以及(??)的缺陷. #职场发展#职场发展#知识分享

问题&#xff1a;规范化过程主要为克服数据库逻辑结构中的插入异常、删除异常以及(??)的缺陷. 参考答案如图所示

JVM内存模型深度剖析与优化

JDK体系结构 Java语言的跨平台特性 JVM整体结构及内存模型 补充一个问题&#xff1a; 在minor gc过程中对象挪动后&#xff0c;引用如何修改&#xff1f; 对象在堆内部挪动的过程其实是复制&#xff0c;原有区域对象还在&#xff0c;一般不直接清理&#xff0c;JVM内部清理过程…

中国电子学会2023年12月份青少年软件编程Scratch图形化等级考试试卷四级真题(含答案)

2023-12 Scratch四级真题 分数&#xff1a;100 题数&#xff1a;24 分数&#xff1a;60min 一、单选题(共10题&#xff0c;共30分) 1.运行下列程序&#xff0c;输入“abcdef”&#xff0c;程序结束后&#xff0c;变量“字符串”是&#xff1f;&#xff08;B&#xff09;(3…

Vue 全组件 局部组件

一、组件定义和使用 1、全局组件 定义 <template> <div> <h1>This is a global component</h1> </div> </template> <script lang"ts"> </script> <style></style> 导入 全局组件在main.ts&#xff…

前端可能需要的一些安装

Node.js Node.js 官网 Node.js 中文网 Node.js is an open-source, cross-platform JavaScript runtime environment. Node.js是一个开源、跨平台的JavaScript运行时环境。Recommended for most users 推荐大多数用户使用哔哩哔哩安装视频 安装 node.js 的时候&#xff0c;会…

Write operation failed: computed value is readonly问题解决

源代码&#xff1a; // 封装倒计时逻辑函数 import { computed, ref } from vue import dayjs from dayjs export const useCountDown () > {// 1.响应式数据const time ref(0)// 格式化时间const formatTime computed(()>dayjs.unix(time.value).format(mm分ss秒))/…

Python·turtle库编程之:怎么画一个五角星?

文章目录 前言源码附&#xff1a; 前言 大家好&#xff0c;我是BoBo仔&#xff0c;这节课我要带来一期turtle库的使用教程——画五角星。话不多说&#xff0c;我们直接上代码。 源码 import turtle as t t.pencolor(yellow) t.fillcolor("yellow") t.penup() t.go…

算法刷题:和为s的两个数

和为s的两个数 .题目链接题目详情算法原理我的答案 . 题目链接 和为s的两个数 题目详情 算法原理 这里我们是利用单调性来使用双指针的对撞指针来解决问题 因为数组给的是有序递增的,因此我们设置两个指针left和right来解决问题,当nums[left]与nums[right]相加会有三种情况:…

电脑监控屏幕软件有哪些(监控电脑屏幕的软件)

随着信息技术的迅猛发展&#xff0c;电脑屏幕监控软件已成为企业、家庭以及教育机构保护数据安全、提升工作效率以及进行行为分析的重要工具。本文将详细介绍几款主流的电脑屏幕监控软件&#xff0c;包括它们的功能、特点以及适用场景&#xff0c;帮助读者更好地了解并选择合适…
最新文章