uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票创建页面实现

news2024/11/17 7:37:27

锋哥原创的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/

文件选择上传组件 uni-file-picker 扩展组件 安装

uni-file-picker 文件选择上传 - DCloud 插件市场

日期选择器uni-datetime-picker组件 安装

uni-datetime-picker 日期选择器 - DCloud 插件市场

iconfont小图标

iconfont-阿里巴巴矢量图标库

iconfont.css

@font-face {
  font-family: 'iconfont';  /* Project id 3888696 */
  src: url('//at.alicdn.com/t/c/font_3888696_rjermxmgmb.woff2?t=1680049466852') format('woff2'),
       url('//at.alicdn.com/t/c/font_3888696_rjermxmgmb.woff?t=1680049466852') format('woff'),
       url('//at.alicdn.com/t/c/font_3888696_rjermxmgmb.ttf?t=1680049466852') format('truetype');
}

.share {
	font-family: iconfont;
	margin-left: 20rpx;
	font-size: 26rpx;
	color: blue;
}

.uploadImg{
	font-family: iconfont;
	font-size: 56rpx;
	color: #acacac;
}

.smallUploadImg{
	font-family: iconfont;
	font-size: 36rpx;
	color: #acacac;
}

.removeOption{
	font-family: iconfont;
	font-size: 38rpx;
	color: red;
	padding-right: 10px;
}

.addOption{
	font-family: iconfont;
	font-size: 38rpx;
	padding-right: 10px;
}

.chooseOption{
	font-family: iconfont;
	font-size: 26rpx;
}

.voteListItem{
	font-family: iconfont;
	font-size: 26rpx;
}

.voteManageItem{
	font-family: iconfont;
	font-size: 46rpx;
	color: blue;
	padding-bottom: 8px;
}

前端代码：

<template>
	<view class="word_vote">
		<view class="cover_img">
			<view class="title_tip">
				<view class="cover">
					封面图（可以不上传）
				</view>
				<view class="tip">
					（ 宽高比：650 × 300 ）
				</view>
			</view>
			<view class="upload_img">
				<uni-file-picker 
				@select="selectCoverFileFunc($event)"
				:auto-upload="false" 
				limit="1"
				:del-icon="false" 
				disable-preview 
				file-mediatype="image" 
				:imageStyles="coverImageStyles">
					<view class="upload">
						<text class="uploadImg">&#xe727;</text>
					</view>
				</uni-file-picker>
			</view>
		</view>
		
		<view class="basic_settings">
			<view class="title_tip">
				<view class="title">
					基础设置
				</view>
			</view>
			<view class="settings">
				<view class="title">
					<input type="text"  v-model="title" placeholder="填写投票标题"  placeholder-style="color:#bababa;font-size:16px"/>
				</view>
				<view class="explanation">
					<textarea v-model="explanation" placeholder="投票说明 (非必填)" placeholder-style="color:#bababa;font-size:14px"></textarea>
				</view>
			</view>
		</view>
		
		<view class="vote_options_settings">
			<view class="title_tip">
				<view class="title">
					投票选项设置
				</view>
			</view>
			<view class="option_list">
				<view class="option_item" v-for="(item,index) in options" :key="item.id">
					<text class="removeOption" @click="removeOption(item.id)">&#xe618;</text><input type="text" v-model="item.name" placeholder="输入选项名称" placeholder-style="color:#bababa;font-size:14px">
				</view>
			</view>
			<view class="option_add" @click="addOption()">
				<text class="addOption">&#xe660;</text><text>添加选项</text>
			</view>
		</view>
		
		<view class="vote_rules_settings">
			<view class="title_tip">
				<view class="title">
					投票规则设置
				</view>
			</view>	
			<view class="rule_list">
				<view class="rule_item">
					<text>投票截止时间</text>
					<view >
						<uni-datetime-picker 
							:border="false" 
							:clear-icon="false" 
							v-model="voteEndTime"
							:start="startDate"
							:end="endDate"
							></uni-datetime-picker>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="vote_btn" >
		<button type="primary" @click="submitVote">发起投票</button>
	</view>
</template>

<script>
	import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js"
	import {isEmpty} from "../../utils/stringUtil.js"
	import {timeFormat} from "../../utils/dateUtil.js"
	export default{
		data(){
			const curDate=new Date();
			const vv=new Date(curDate.getTime()+24*60*60*1000);
			return{
				title:'',
				explanation:'',
				coverImageFileName:'',
				coverImageStyles: {
					width:"700rpx",
					height:"400rpx",
					border:false
				},
				voteEndTime:timeFormat(vv),
				options:[
					{
						id:1,
						name:''
					},
					{
						id:2,
						name:''
					}
				]
			}
		},
		computed:{
			startDate(){
				return new Date();
			},
			endDate(){
				const curDate=new Date();
				const vv=new Date(curDate.getTime()+24*60*60*1000*365);
				return vv;
			}
		},
		methods:{
			addOption:function(){
				var option={
					id:this.options[this.options.length-1].id+1,
					name:''
				}
				this.options.push(option);
			},
			removeOption:function(id){
				const index=this.options.findIndex(v=>v.id===id)
				this.options.splice(index,1);
			},
			selectCoverFileFunc:function(e){
				console.log(e.tempFilePaths[0])
				uni.uploadFile({
					header:{token:uni.getStorageSync("token")},
					url:getBaseUrl()+"/vote/uploadCoverImage",
					filePath:e.tempFilePaths[0],
					name:"coverImage",
					success: (res) => {
						let result=JSON.parse(res.data);
						if(result.code==0){
							this.coverImageFileName=result.coverImageFileName;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "/common/css/iconfont.css";
	.word_vote{
		padding: 20px;
		padding-bottom: 70px;
		.cover_img{
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				display: flex;
				justify-content: space-between;
			}
			.upload_img{
				border-radius: 5px;
				margin-top: 20rpx;
				width:100%;
				height: 360rpx;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				.upload{
					margin: 10rpx;
					background-color: #f4f5f7;
					width:90%;
					height: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.basic_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.settings{
				
				border-radius: 5px;
				background-color: white;
				.title{
					padding: 10px;
					input{
						font-size: 1.3rem;
						border-bottom: 1px solid #e4e4e4;
						padding-bottom: 15px;
					}
				}
				.explanation{
					padding: 10px;
					textarea{
						height: 100px;
					}
				}
			}
			
		}
		
		.vote_options_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.option_list{
				.option_item{
					margin-top: 10px;
					border-radius: 5px;
					background-color: white;
					padding: 10px;
					display: flex;
					
				}
			}
			.option_add{
				margin-top: 10px;
				border-radius: 5px;
				background-color: white;
				padding: 10px;
				display: flex;
				color:blue;
				font-size:14px
			}
		}
		
		.vote_rules_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.rule_list{
				border-radius: 5px;
				background-color: white;
				.rule_item{
					display: flex;
					justify-content: space-between;
					padding: 12px;
					border-bottom: 1px solid #e4e4e4;
					font-size: 28rpx;
					align-items: center;
					height: 45rpx;
				}
			}
		}
		
	}
	
	.vote_btn{
		height: 120rpx;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #e4e4e4;
		button{
			margin: 10px;
		}
	}
</style>

后端：

coverImagesFilePath: D://uniapp/coverImgs/

封面上传：

/**
 * 上传封面图片
 * @param coverImage
 * @return
 * @throws Exception
 */
@RequestMapping("/uploadCoverImage")
public Map<String,Object> uploadCoverImage(MultipartFile coverImage)throws Exception{
    System.out.println("filename:"+coverImage.getName());
    Map<String,Object> resultMap=new HashMap<>();
    if(!coverImage.isEmpty()){
        // 获取文件名
        String originalFilename = coverImage.getOriginalFilename();
        String suffixName=originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName= DateUtil.getCurrentDateStr()+suffixName;
        FileUtils.copyInputStreamToFile(coverImage.getInputStream(),new File(coverImagesFilePath+newFileName));
        resultMap.put("code",0);
        resultMap.put("msg","上传成功");
        resultMap.put("coverImageFileName",newFileName);
    }
    return resultMap;
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-6 线性控制器设计Linear Controller Design

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-6 线性控制器设计Linear Controller Design

本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-6 线性控制器设计Linear Controller Design
阅读更多...
C++核心编程——类和对象（一）

C++核心编程——类和对象（一）

本专栏记录C学习过程包括C基础以及数据结构和算法&#xff0c;其中第一部分计划时间一个月&#xff0c;主要跟着黑马视频教程&#xff0c;学习路线如下&#xff0c;不定时更新&#xff0c;欢迎关注。 当前章节处于&#xff1a; ---------第1阶段-C基础入门 ---------第2阶段实战…
阅读更多...
运动耳机哪个最好？2024年无线运动耳机品牌排行榜

运动耳机哪个最好？2024年无线运动耳机品牌排行榜

​挑选一款适合运动的耳机是每位运动爱好者必备的决策。这些耳机不仅为你提供优质音乐&#xff0c;更在设计上考虑了运动场景&#xff0c;确保在高强度运动中稳固又舒适的佩戴感。今天&#xff0c;我将向你介绍几款在运动时表现卓越的运动耳机&#xff0c;助你全情投入每一次锻…
阅读更多...
Unity组件开发--长连接webSocket

Unity组件开发--长连接webSocket

1.下载安装UnityWebSocket 插件 https://gitee.com/cambright/UnityWebSocket/ 引入unity项目&#xff1a; 2.定义消息体结构&#xff1a;ExternalMessage和包结构Package&#xff1a; using ProtoBuf; using System; using System.Collections; using System.Collections.Ge…
阅读更多...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我参与的投票列表实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我参与的投票列表实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
LeetCode刷题--- 按摩师

LeetCode刷题--- 按摩师

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动…
阅读更多...
监督学习 - 支持向量回归（Support Vector Regression，SVR）

监督学习 - 支持向量回归（Support Vector Regression，SVR）

什么是机器学习 支持向量回归&#xff08;Support Vector Regression&#xff0c;SVR&#xff09;是一种基于支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;的回归算法&#xff0c;用于解决回归问题。与传统的回归算法不同&#xff0c;SVR的目标是…
阅读更多...
微短剧市场暴涨267.65%，用微短剧场景AUI Kit精巧入局

微短剧市场暴涨267.65%，用微短剧场景AUI Kit精巧入局

微短剧&#xff0c;不仅上头&#xff0c;更要上心。 微短剧&#xff0c;深度“拿捏”了这个碎片化时代&#xff0c;也是刚过去的2023年绕不开的热词。 与传统影视剧制作精益求精、耗时长相反&#xff0c;门槛与耗时“双低”恰恰成为了微短剧的独特优势&#xff0c;使其走上以量…
阅读更多...
使用numpy处理图片——图片拼接

使用numpy处理图片——图片拼接

大纲 左右拼接上下拼接 在《使用numpy处理图片——图片切割》一文中&#xff0c;我们介绍了如何使用numpy将一张图片切割成4部分。本文我们将反其道而行之&#xff0c;将4张图片拼接成1张图片。 基本的思路就是先用两张图以左右结构拼接成上部&#xff0c;另外两张图也以左右拼…
阅读更多...
台灯实测PK：书客、明基、孩视宝护眼台灯，谁能为你带来舒适的光明体验？

台灯实测PK：书客、明基、孩视宝护眼台灯，谁能为你带来舒适的光明体验？

现代生活中&#xff0c;我们频繁面对电子屏幕&#xff0c;对眼睛造成一定压力&#xff0c;长时间后会感到眼睛疲劳。特别是家长留意到&#xff0c;孩子在不适宜的灯光下长时间学习或玩耍时&#xff0c;会揉眼或表现出不适。为了更好地保护视力健康&#xff0c;选择一款护眼台灯…
阅读更多...
Java多线程并发篇----第八篇

Java多线程并发篇----第八篇

系列文章目录 文章目录 系列文章目录前言一、简述一下你对线程池的理解二、线程生命周期(状态)三、新建状态（NEW）四、就绪状态（RUNNABLE）五、运行状态（RUNNING）前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站…
阅读更多...
爬虫到底违法吗？你离违法还有多远？

爬虫到底违法吗？你离违法还有多远？

最近&#xff0c;国家依法查处了部分编写爬虫程序&#xff0c;盗取其他公司数据的不良企业。一时间风声鹤唳&#xff0c;关于爬虫程序是否违法的讨论遍布程序员圈子。那么到底编写爬虫程序是否违法呢&#xff1f; 其爬虫下载数据&#xff0c;一般而言都不违法&#xff0c;因为…
阅读更多...
PHP+MySQL开发组合：开源在线课堂知识付费小程序源码系统，附带完整的搭建教程

PHP+MySQL开发组合：开源在线课堂知识付费小程序源码系统，附带完整的搭建教程

互联网的快速发展&#xff0c;知识付费已经成为一种新的商业模式。越来越多的人希望通过在线学习来提升自己的知识和技能。为了满足这一市场需求&#xff0c;罗峰给大家分享一款基于PHP和MySQL的在线课堂知识付费小程序源码系统。该系统可帮助用户快速搭建自己的在线课堂平台&a…
阅读更多...
亚信安全发布2024年网络安全威胁十大预测

亚信安全发布2024年网络安全威胁十大预测

2024年将是迎接网络安全新挑战的一年。随着经济和政治领域数字化发展&#xff0c;企业将越来越多地利用人工智能、机器学习 (AI/ML)、云等新型技术。虽然这些创新为企事业单位发展及运营提供了帮助&#xff0c;提高了效率&#xff0c;但它们同时也为攻击者提供了机会。 2024年&…
阅读更多...
四川古力未来科技有限公司：抖音小店的崛起之路

四川古力未来科技有限公司：抖音小店的崛起之路

随着互联网的飞速发展&#xff0c;电子商务已经成为人们日常生活中不可或缺的一部分。作为一家以科技为核心的公司&#xff0c;四川古力未来科技有限公司在电子商务领域中崭露头角&#xff0c;特别是其抖音小店的发展引人注目。 四川古力未来科技有限公司的抖音小店自开业以来&…
阅读更多...
对象存储MinIO的简介与部署

对象存储MinIO的简介与部署

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 相关文章推荐&#xff1a; 记录一次跨越16个月的minio版本升级与数据迁移 MinIO集群怎么接入Prometheus监控&#xff1f;(上) Mi…
阅读更多...
vue3、vue2文件导入事件

vue3、vue2文件导入事件

一、vue3写法 1、html部分 <el-buttontype"info"plainicon"Upload"click"handleImport"v-hasPermi"[system:user:import]">导入</el-button><!-- 导入对话框 --><el-dialog :title"upload.title" v-…
阅读更多...
如何使用网络测试仪构造特殊流量

如何使用网络测试仪构造特殊流量

为什么要仿真特殊流量 在现网中&#xff0c;网络流量时常伴随着突发&#xff0c;突发流量可能会造成网络的拥塞&#xff0c;从而产生丢包、抖动和时延&#xff0c;导致网络服务质量整体下降。面对宏观上的突发&#xff0c;通常采用在网络设备入向限速或者流量整形功能来消除突…
阅读更多...
【Vue】引入路径正确，不影响正常运行但文件爆红

【Vue】引入路径正确，不影响正常运行但文件爆红

现象&#xff1a;引入路径正确但文件爆红&#xff0c;不影响运行但不美观&#xff08;按住Ctrl可以跳转到该文件&#xff0c;关闭后过段时间再打开还是爆红&#xff09; 原因 &#xff08;1&#xff09;相对路径使用了不正确的大小写 &#xff08;2&#xff09;项目不支持force…
阅读更多...
PM50-40、PM50-45、PM50-52比例电控柱塞泵控制器

PM50-40、PM50-45、PM50-52比例电控柱塞泵控制器

电比例轴向变量柱塞泵控制放大器技术是一种高效的液压动力传动技术。它通过将电液比例控制技术与轴向变量柱塞泵相结合&#xff0c;实现了液压泵的高精度、高效率和低噪声运行。以下是该技术的主要特点和应用&#xff1a;控制原理&#xff1a;基于双向电液比例变排量轴向柱塞泵…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023