uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现

这篇具有很好参考价值的文章主要介绍了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账号。https://www.bilibili.com/video/BV1ea4y137xf/

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现,uni-app,uni-app,微信小程序,小程序,小程序投票,投票

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现,uni-app,uni-app,微信小程序,小程序,小程序投票,投票

后端,根据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点击跳转帖子页面

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现,uni-app,uni-app,微信小程序,小程序,小程序投票,投票

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

vote.vue文章来源地址https://www.toymoban.com/news/detail-792519.html

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

到了这里,关于uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -全局异常统一处理实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年02月03日
    浏览(37)
  • 我写了一套uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) 实战课程,免费分享给CSDN的朋友们

    大家好,我是锋哥,最近写了一套前后端分离的uniapp微信小程序投票系统,逼格略高,专门为Java初学者提升技术层次和方便就业而精心打造。希望你们喜欢! (文末领取) 本课程采用主流的技术栈实现,小程序端采用用Uni-app技术,Mysql数据库,SpringBoot2+Mybatis Plus后端,red

    2024年02月08日
    浏览(36)
  • 基于SpringBoot+Vue+uniapp微信小程序的投票评选系统的详细设计和实现

    💗 博主介绍 :✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅 👇🏻 2023-2024年最值得选的微信小程序毕业设

    2024年04月10日
    浏览(55)
  • 基于微信小程序投票系统(微信小程序毕业设计)

    项目获取请看文章最底下官网 投票系统用户端是基于微信小程序,管理员端是基于web网页端,本系统采用java编程语言,mysql数据库,ssm框架,idea工具进行开发,本系统分为用户和管理员两个角色,用户可以注册登陆微信小程序,查看投票系统公告,查看投票作品,在线投票

    2024年02月11日
    浏览(55)
  • 微信小程序投票管理系统:打造智能、便捷的投票体验

    随着社交网络的兴起和移动互联网的普及,人们对于参与和表达意见的需求越来越强烈。在这个背景下,微信小程序投票管理系统应运而生。它为用户提供了一个智能、便捷的投票平台,使用户可以轻松创建和参与各种类型的投票活动。本文将详细介绍微信小程序投票管理系

    2024年02月08日
    浏览(48)
  • 基于微信小程序的投票系统源码

    开发环境及工具: 大等于jdk1.8,大于mysql5.5,idea(eclipse),微信开发者工具 技术说明: springboot mybatis 微信小程序 代码注释齐全,没有多余代码,适合学习(毕设),二次开发,包含论文技术相关文档。 功能介绍: 用户端: 登录注册(含授权登录) 首页显示轮播图,投票列

    2024年02月09日
    浏览(82)
  • 微信小程序评选投票系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(45)
  • 基于微信小程序的投票评选系统小程序

    文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 社会发展日新月异

    2024年02月08日
    浏览(50)
  • 微信小程序毕业设计作品成品(03)在线投票小程序投票评选小程序系统设计与实现

    博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(44)
  • 基于php微信小程序评选投票系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包