第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.hqwc.cn/news/470577.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java程序员面试专栏 分布式中间件】ElasticSearch 核心面试指引

关于ElasticSearch 部分的核心知识进行一网打尽,包括ElasticSearch 的基本概念,基本架构,工作流程,存储机制等,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 基础概念 从数据分类入手,考察全文索引的基本概念 现实世界中数据有哪…

【网络攻防实验】【北京航空航天大学】【实验四、防火墙配置(Firewall Configuration)实验】

实验四、防火墙配置(Firewall Configuration)实验 一、 实验环境搭建 1. Kali Linux网络配置 将Kali Linux虚拟机网卡1设置为NAT网络模式,ip地址为10.0.2.5,如下图所示: 配置NAT网络端口转发: 将Kali Linux网卡2设置为内部网络模式: 配置Kali Linux网卡1: 类似地,配…

(四十)大数据实战——Zabbix监控平台的部署搭建

前言 Zabbix是一款能够监控各种网络参数以及服务器健康性和完整性的软件。Zabbix使用灵活的通知机制&#xff0c;允许用户为几乎任何事件配置基于邮件的告警&#xff0c;这样可以快速反馈服务器的问题。基于已存储的数据&#xff0c;Zabbix提供了出色的报告和数据可视化功能。…

K8S集群实践之十:虚拟机部署阶段性总结

目录 1. 说明&#xff1a; 2. 安装准备 2.1 每个节点设置双网卡&#xff0c;一卡做网桥&#xff08;外部访问&#xff09;&#xff0c;一卡做NAT&#xff08;集群内网访问&#xff09; 2.2 准备一个可用的代理服务器 3. 由于虚拟机崩溃&#xff08;停电&#xff0c;宿主机…

linux(阿里云)安装pytorch

目录 环境 安装步骤 1 检查python3和pip3是否已经安装 2 安装pytorch 3 安装完毕&#xff0c;检查pytorch版本 环境 阿里云 ubuntu 22.04 UEFI版 64位 安装步骤 1 检查python3和pip3是否已经安装 输入下面两条指令&#xff1a; python3 --version pip --version 检…

(17)Hive ——MR任务的map与reduce个数由什么决定?

一、MapTask的数量由什么决定&#xff1f; MapTask的数量由以下参数决定 文件个数文件大小blocksize 一般而言&#xff0c;对于每一个输入的文件会有一个map split&#xff0c;每一个分片会开启一个map任务&#xff0c;很容易导致小文件问题&#xff08;如果不进行小文件合并&…

干货 | 实战演练基于加密接口测试测试用例设计

如果接口测试仅仅只是掌握一些requests或者其他一些功能强大的库的用法&#xff0c;是远远不够的&#xff0c;还需要具有根据公司的业务以及需求去定制化一个接口自动化测试框架能力。所以在这个部分&#xff0c;会主要介绍接口测试用例分析以及通用的流程封装是如何完成的。 首…

蓝桥杯嵌入式学习记录——按键的使用

目录 一、按键原理简介 二、cubeMX的配置 三、按键的短按代码 四、按键的长按代码 一、按键原理简介 在STM32中&#xff0c;按键连接通常使用GPIO&#xff08;通用输入/输出&#xff09;端口来实现。当按键未被按下时&#xff0c;GPIO端口处于高电平状态&#xff08;即1&am…

应急响应实战笔记02日志分析篇(3)

第3篇:Web日志分析 ox01 Web日志 Web访问日志记录了Web服务器接收处理请求及运行时错误等各种原始信息。通过对WEB日志进行的安全分析&#xff0c;不仅可以帮助我们定位攻击者&#xff0c;还可以帮助我们还原攻击路径&#xff0c;找到网站存在的安全漏洞并进行修复。 我们来…

MySQL 基础知识(一)之数据库和 SQL 概述

目录 1 数据库相关概念 2 数据库的结构 ​3 SQL 概要 4 SQL 的基本书写规则 1 数据库相关概念 数据库是将大量的数据保存起来&#xff0c;通过计算机加工而成的可以进行高效访问的数据集合数据库管理系统&#xff08;DBMS&#xff09;是用来管理数据库的计算机系统&#xf…

ELAdmin 隐藏添加编辑按钮

使用场景 做了一个监控模块&#xff0c;数据都是定时生成的&#xff0c;所以不需要手动添加和编辑功能。 顶部不显示 可以使用 true 或者 false 控制现实隐藏 created() {this.crud.optShow {add: false,edit: false,del: true,download: true,reset: true}},如果没有 crea…

如何手机搜学法减分答案? #媒体#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式&#xff0c;可以快速查找问题解析&#xff0c;加深对题目答案的理解。 1.证件照全能管家&#xff08;APP&#xff09; 一个非常好用的证件照APP 常用的证件照尺寸和底色都有、日常的证件照编辑完全够用&#…