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/

后端,根据id查询投票帖子信息:

/*** 根据id查询* @param id* @return*/
@GetMapping("/{id}")
public R findById(@PathVariable(value = "id")Integer id){Vote vote = voteService.getById(id);WxUserInfo wxUserInfo = wxUserInfoService.getOne(new QueryWrapper<WxUserInfo>().eq("openid", vote.getOpenid()));vote.setWxUserInfo(wxUserInfo);List<VoteItem> voteItemList = voteItemService.list(new QueryWrapper<VoteItem>().eq("vote_id", id));vote.setVoteItemList(voteItemList);Map<String,Object> map=new HashMap<>();map.put("vote",vote);return R.ok(map);
}

映射加下:

registry.addResourceHandler("/image/coverImgs/**").addResourceLocations("file:D:\\uniapp\\coverImgs\\");
registry.addResourceHandler("/image/voteItemImgs/**").addResourceLocations("file:D:\\uniapp\\voteItemImgs\\");

新建帖子页面

	{"path": "pages/vote/vote","style": {"navigationBarTitleText": ""}},

投票列表页面投票项 加下onclick点击跳转帖子页面

		goVotePage:function(voteId){uni.navigateTo({url:"/pages/vote/vote?id="+voteId})}

vote.vue

<template><view class="promoter_info"><view class="promoter"><view class="user_image"><image :src="this.baseUrl+'/image/userAvatar/'+vote.wxUserInfo.avatarUrl" ></image></view><view class="user_name_wrap"><text class="nick_name">{{vote.wxUserInfo.nickName}}</text><text class="info">投票发起人</text></view></view><view class="share"><button open-type="share" size="mini">&#xe739;&nbsp;分享&nbsp;</button></view></view><view class="vote"><view class="cover_title"><view class="cover" v-if="vote.coverImage!=''"><image :src="this.baseUrl+'/image/coverImgs/'+vote.coverImage" ></image></view><view class="title_wrap"><view class="title">{{vote.title}}</view><view class="explanation" v-if="vote.explanation!=''">{{vote.explanation}}</view></view><view class="explain"><view class="item">1, 本次投票为单选投票,实名投票</view><br/><view class="item">2, 本次投票&nbsp;{{vote.voteEndTime}}&nbsp;后截止</view></view></view></view><view class="action"><view class="item" @click="goHomePage()"><view class="voteManageItem">&#xe64f;</view><text class="text" >首页</text></view><view class="item" @click="goCustomerPage()"><view class="voteManageItem">&#xec2e;</view><text class="text">客服</text></view><view class="item" v-if="vote.openid==currentUserOpenId" @click="actionSet()"><view class="voteManageItem">&#xeb61;</view><text class="text">管理</text></view><view class="item" @click="goVoteDetailPage()"><view class="voteManageItem">&#xe643;</view><text class="text" >明细</text></view><view class="item" @click="goRankPage(vote.id)"><view class="voteManageItem">&#xe613;</view><text class="text">排行</text></view></view><view class="options" v-if="vote.type==1"><radio-group @change="radioChange"><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><radio :value="item.id"></radio></view></view></radio-group></view><view class="options" v-if="vote.type==2"><radio-group @change="radioChange"><view class="option" v-for="item in vote.voteItemList"><view class="name_vote_number"><text class="name">{{item.name}}</text><view class="img"><image :src="this.baseUrl+'/image/voteItemImgs/'+item.image" ></image></view><view class="number">共 {{item.number}} 票</view></view><view><radio :value="item.id"></radio></view></view></radio-group></view><view class="vote_btn" ><view class="btn1"><button type="primary" @click="submitVote" v-if="judgeDate(vote.voteEndTime)<0 && sItem>0">立即提交投票</button><button type="default" disabled="true" v-if="judgeDate(vote.voteEndTime)<0 && sItem==-1">请选择投票项</button><button type="default" disabled="true" v-if="judgeDate(vote.voteEndTime)>=0">该投票已截止</button></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{vote:{},baseUrl:'',currentUserOpenId:'',sItem:-1}},onLoad(e) {console.log(e.id);this.baseUrl=getBaseUrl();// 通过id获取实体信息,渲染页面this.getVoteInfo(e.id)this.currentUserOpenId=uni.getStorageSync("openid");console.log("currentUserOpenId="+this.currentUserOpenId)},methods:{getVoteInfo:async function(id){const result=await requestUtil({url:"/vote/"+id,method:"get"});console.log(result)this.vote=result.vote;},judgeDate:function(toDate){return judgeDate(toDate);},radioChange: function(evt) {console.log(evt.detail.value)this.sItem=evt.detail.value;}}}
</script><style lang="scss">@import "/common/css/iconfont.css";.promoter_info{padding: 15px;display: flex;justify-content: space-between;background-color: white;.promoter{display: flex;flex-direction: row;.user_image{width: 100rpx;height: 100rpx;text-align: center;padding: 0rpx;margin: 0rpx;image{width: 90rpx;height: 90rpx;}}.user_name_wrap{display: flex;flex-direction: column;padding-left: 10px;.nick_name{}.info{padding-top: 10rpx;font-size: 25rpx;}}}button{border-radius: 15px;background-color: lightblue;}}.vote{padding: 10px;margin-bottom: 0px;.cover_title{background-color: white;border-radius: 10px;padding-bottom: 10px;.cover{padding: 10px;padding-bottom: 0px;text-align: center;image{width: 650rpx;height: 300rpx;border-radius: 10px;}}.title_wrap{padding-top: 10px;margin-left: 15px;margin-right: 15px;padding-bottom: 15px;border-bottom: 1px solid #e4e4e4;.title{font-size: 20px;font-weight: bolder;}.explanation{padding-top: 10px;}}.explain{padding: 15px;padding-bottom: 5px;.item{font-size: 13px;height: 20px;}}}}.action{margin: 10px;margin-top: 0px;padding: 10px;border-radius: 10px;background-color: white;display: flex;text-align: center;.item{flex:1;text-align: center;font-size: 12px;}}.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{margin-top: 10px;padding: 5px;border-radius: 10px;background-color: #e6eeff;font-size: 12px;width: 55px;text-align: center;}.img{padding: 5px;padding-left: 0px;image{border-radius: 10px;width: 450rpx;height: 300rpx;}}}}}.vote_btn{height: 120rpx;width: 100%;background-color: white;position: fixed;bottom: 0;border-top: 1px solid #e4e4e4;display: flex;button{margin: 10px;}.btn1{flex: 1;}}
</style>

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

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

相关文章

【排序算法】三、选择排序(C/C++)

「前言」文章内容是排序算法之选择排序的讲解。&#xff08;所有文章已经分类好&#xff0c;放心食用&#xff09; 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 选择排序1.1 原理1.2 代码实现&#xff08;C/C&#xff09;1.3 优化1.3 特性总结 选择排…

Unity Meta Quest 一体机开发(十三):【手势追踪】自定义交互事件 EventWrapper

文章目录 &#x1f4d5;教程说明&#x1f4d5;交互事件概述&#x1f4d5;自定义交互逻辑⭐方法一&#xff1a;Inspector 面板赋值⭐方法二&#xff1a;纯代码处理 此教程相关的详细教案&#xff0c;文档&#xff0c;思维导图和工程文件会放入 Spatial XR 社区。这是一个高质量…

cuda12.0 安装 pytorch

前两天买的y7000p到了&#xff0c;然后就要重新配下环境。 流程如下 首先下载miniconda &#xff0c;我下的是python3.8的创建自己的自定义环境检查自己的cuda版本&#xff0c;我的是cuda:12.0然后再pytorch上找到对应cuda版本的进行下载&#xff0c;pip install或者conda in…

工作每天都在用的 DNS 协议,你真的了解么?

我们经常访问一些网址的时候&#xff0c;浏览器里输入类似于 www.baidu.com 这样的地址&#xff0c;那么在浏览器里输入这个地址---> 百度服务器给我们返回这个百度的页面&#xff0c;中间的过程是什么样的呢&#xff1f; 带着这个问题&#xff0c;我们一起来解析一下其中的…

肺癌文献阅读2

第四篇 Neoadjuvant therapy in non-small cell lung cancer IF:6.2 中科院分区:2区 医学WOS 分区:Q1 之前有了解到新辅助治疗与辅助治疗都是在术前为增加疗效而进行的&#xff0c;这篇文章讲到I-III期的NSCLC更倾向于切除&#xff0c;这个时间点可分为早期与晚期。这个III期应…

Qt获取字符串大小

可以用成员函数size、length和count来获取字节数组的大小。除了名字不同&#xff0c;这3个函数是等同的&#xff0c;函数的原型声明如下&#xff1a; int size(); int length(); int count(); 这3个函数返回字节数组中的字节数。Size()函数的用法如下&#xff1a; QByteAr…

代码随想录day2:数组part02(有序数组的平方 ,长度最小的子数组 ,螺旋矩阵II,数组章节总结)

数组part02 一、有序数组的平方 法一&#xff1a;暴力&#xff0c;先把每个元素平方再排序&#xff0c;时间复杂度O(n nlogn) class Solution { public:vector<int> sortedSquares(vector<int>& nums) {for(int i0;i<nums.size();i) nums[i]*nums[i];so…

Domino自带应用免费开源,免费共享

大家好&#xff0c;才是真的好。 作为一个强大的、综合性的、高安全的企业级应用平台&#xff0c;Domino同时也拥有业界首屈一指的应用程序开发能力。不过&#xff0c;让Domino有强大竞争力的&#xff0c;也应该包含它自带的数十个开箱即用的Notes应用程序。 我在前面很多篇幅…

JavaScript-BOM-笔记

1.页面加载 一般情况:先写标签,再写js 页面加载:可以实现先写js代码 再写标签 window.onload = function(){ js代码 } 只能写一次,如果多次以最后一次为准 window.addEventListener(load,function(){ 代码 }) 使用多次 window.onload = function () { console.log(doc…

c++的this指针

this指针是c类中的概念&#xff0c;this英文翻译是这&#xff0c;这个&#xff0c;其实在类中就是这个意思。 this指针的使用 this指针主要用于类中的非静态成员方法&#xff0c;在这些方法中&#xff0c;this指针就指向当前调用此方法的这个对象。 1. this的使用场景一: 当…

2024年人工智能有哪些证书可以报考呢?

由国家工信部权威认证的人工智能证书是跨入人工智能行业的敲门砖&#xff0c;随着人工智能技术的发展越来越成熟&#xff0c;相关的从业人员也会剧增&#xff0c;证书的考取难度也会变高。如果已经从事或者准备从事人工智能行业的人员&#xff0c;对于考证宜早不宜迟&#xff0…

数据库软件详解一

MySQL 的安装 MySQL 的安装可去参考下这篇文章&#xff0c;比较详细&#xff0c;在此就不多啰嗦了&#xff01; MySQL 的卸载 如果你并不是第一次安装 MySQL &#xff0c;或者安装 MySQL 不对&#xff0c;需要将 MySQL 卸载干净才能将下一个版本的 MySQL 安装成功 卸载步骤 …

Javaweb之SpringBootWeb案例开发规范的详细解析

1.2 开发规范 了解完需求也完成了环境搭建了&#xff0c;我们下面开始学习开发的一些规范。 开发规范我们主要从以下几方面介绍&#xff1a; 1、开发规范-REST 我们的案例是基于当前最为主流的前后端分离模式进行开发。 在前后端分离的开发模式中&#xff0c;前后端开发人员…

uniapp 设置底部导航栏

uniapp 设置原生 tabBar 底部导航栏。 设置底部导航栏 一、创建页面&#xff0c;一定要在 pages.json 文件中注册。 二、在 pages.json 文件中&#xff0c;设置 tabBar 配置项。 pages.json 页面 {"pages": [...],"globalStyle": {...},"uniIdRout…

Flex布局--常用好用

1.什么是Flex布局&#xff1f; flex 是 flexible Box 的缩写&#xff0c;意为"弹性布局"&#xff0c;用来为盒状模型提供最大的灵活性&#xff0c;任何一个容器都可以 指定为 flex 布局。 当我们为父盒子设为 flex 布局以后&#xff0c;子元素的 float、clear 和 ve…

地推拉新任务管理助手程序开发

拉新地推任务管理分销助手程序开发&#xff0c;旨在为企业提供一套专业、高效的管理工具&#xff0c;以优化地推任务分配、提高销售业绩。 以下是该程序的核心功能说明&#xff1a; 任务管理模块&#xff1a;允许管理员创建、分配和管理地推任务。管理员能够精确地指派任务给…

java返回文件时为图片或pdf等设置在线预览或下载

设置Content-Disposition响应头类型 "inline"查看预览 &#xff1b; "attachment"下载&#xff1b; inline&#xff1a;表示回复中的消息体会以页面的一部分或者整个页面的形式展示 attchment&#xff1a;以附件形式被下载到本地&#xff1b;/*** 文件或图…

[Android自定义View]实现一个环形进度条控件

[Android View]实现一个环形进度条 导言 之前的文章里我们已经介绍了自定义View相关的知识了&#xff0c;本篇文章我们就来实战一下&#xff0c;从零到一&#xff0c;实现一个环形进度条的控件。 具体实现 大体框架 我们说过&#xff0c;如果要实现一个自定义控件的话一般有…

JavaScript系列——Promise

文章目录 概要Promise三种状态状态改变Promise链式调用Promise处理并发promise.all()promise.allSettled&#xff08;&#xff09;Promise.any()promise.race() 小结 概要 Promise中文翻译过来就是承诺、预示、有可能的意思。 在JavaScript里面&#xff0c;Promise 是一个对象…

是什么因素让 PLC 比单片机更可靠?单片机为何不能做到这些?

PLC&#xff08;可编程逻辑控制器&#xff09;和单片机&#xff08;微控制器&#xff09;在工业控制和自动化领域中都扮演着重要的角色&#xff0c;但它们在设计、性能和应用方面有显著的不同&#xff0c;这些差异导致PLC在某些方面比单片机更可靠&#xff1a; 环境适应性和耐用…