第10讲投票创建页面实现

投票创建页面实现

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

https://ext.dcloud.net.cn/plugin?name=uni-file-picker

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

https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker

iconfont小图标

https://www.iconfont.cn/

@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.mzph.cn/news/682132.shtml

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

相关文章

【数据结构与算法】判断二叉树是否完全二叉树

【数据结构与算法】判断二叉树是否完全二叉树

递归方式判断二叉树是否完全二叉树 bool TreeComplete(TreeNode* root) {if (root ! NULL) {if (root->left NULL && root->right ! NULL) {return false; // 左子树空}else if (root->left NULL && root->right NULL) {return true; // 左右子…
阅读更多...
【力扣每日一题】力扣987二叉树的垂序遍历

【力扣每日一题】力扣987二叉树的垂序遍历

题目来源 力扣987二叉树的垂序遍历 题目概述 给你二叉树的根结点 root &#xff0c;请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言&#xff0c;其左右子结点分别位于 (row 1, col - 1) 和 (row 1, col 1) 。树的根结点位于 (0, 0) 。 二…
阅读更多...
仰暮计划|“​他们艰苦半生，但真的希望祖国安祥，山河无恙”

仰暮计划|“​他们艰苦半生，但真的希望祖国安祥，山河无恙”

自述&#xff0c;自赎 我没有在那个年代生活过&#xff0c;我一出生就是盛世中国&#xff0c;看遍了祖国的大好河山。但我没想到&#xff0c;走了这么远的路&#xff0c;吃了这么多的苦的爷爷会一直跟我说“不是国家不好&#xff0c;只是中国的钱拿去还债了&#xff0c;过了那…
阅读更多...
代码随想录算法训练营Day56|583. 两个字符串的删除操作、72. 编辑距离

代码随想录算法训练营Day56|583. 两个字符串的删除操作、72. 编辑距离

目录 583. 两个字符串的删除操作 前言 思路 算法实现 法二 72. 编辑距离 前言 思路 算法实现 总结 583. 两个字符串的删除操作 题目链接 文章链接 前言 本题与上一题不同的子序列相比&#xff0c;变化就是两个字符串都可以进行删除操作了。 思路 利用动规五部曲进…
阅读更多...
【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Thu, 18 Jan 2024 Totally 43 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers CognitiveDog: Large Multimodal Model Based System to Translate Vision and Language into Action of Quadruped Robot Aut…
阅读更多...
哈希表 ？

哈希表 ？

哈希表 首先什么是 哈希表&#xff0c;哈希表&#xff08;英文名字为Hash table&#xff0c;国内也有一些算法书籍翻译为散列表&#xff0c;大家看到这两个名称知道都是指hash table就可以了&#xff09;。 哈希表是根据关键码的值而直接进行访问的数据结构。 这么这官方的解释…
阅读更多...
【C++初阶：类和对象(下篇)】初始化列表 | static成员 | 友元

【C++初阶：类和对象(下篇)】初始化列表 | static成员 | 友元

目录 一、构造函数构造函数体赋值&#x1f43e;初始化列表&#x1f43e;&#x1f4a6; explicit关键字 二、static成员&#x1f43e;概念**&#x1f4a6; 关于静态的特性** 三、友元&#x1f4a6; **友元函数**&#x1f4a6; **友元类** **四、内部类** 一、构造函数 构造函数…
阅读更多...
Spark的timestamp 数据时间问题

Spark的timestamp 数据时间问题

使用Spark来处理国际业务数据&#xff0c;涉及到数据时区转换&#xff0c;在实际项目中出现时区转换问题。 使用代码&#xff1a; spark.conf.set("spark.sql.session.timeZone", "Asia/Hong_Kong") spark.selectExpr("date_format(eff_dt, yyyyMMdd…
阅读更多...
VM和Linux安装

VM和Linux安装

VM和Linux安装 一、下载VM 1.官网地址&#xff1a;https://www.vmware.com/cn.html 2.其他地址&#xff1a;http://ww7.nocmd.com/windows/740.html 许可证这个&#xff0c;大家可以自己上网搜索&#xff0c;很容易就搜索到就可以使用了 上面内容就是安装VM的步骤 安…
阅读更多...
30. 异常

30. 异常

异常 1. 概述2. Throwable 方法2.1 概述2.2 代码示例 3. 异常分类4. 异常处理方式4.1 JVM默认处理异常4.2 自己处理&#xff08;捕获异常&#xff09;try...catch4.2.1 概述4.2.2 灵魂四问 4.3 抛出处理(throw和throws) 5. 自定义异常5.1 概述5.2 代码示例 6. 异常注意事项 文章…
阅读更多...
代码随想录算法训练营第三十一天 |基础知识，455.分发饼干，376.摆动序列，53.最大子序和（已补充）

代码随想录算法训练营第三十一天 |基础知识，455.分发饼干，376.摆动序列，53.最大子序和（已补充）

基础知识&#xff1a; 题目分类大纲如下&#xff1a; #算法公开课 《代码随想录》算法视频公开课(opens new window)&#xff1a;贪心算法理论基础&#xff01;(opens new window),相信结合视频再看本篇题解&#xff0c;更有助于大家对本题的理解。 #什么是贪心 贪心的本质…
阅读更多...
C语言——oj刷题——回文字符串

C语言——oj刷题——回文字符串

问题&#xff1a; 实现一个函数&#xff0c;判断一个字符串是否为回文字符串。 回文字符串是指正读和反读都相同的字符串。例如&#xff0c;"level"、"radar"和"madam"都是回文字符串。 要解决这个问题&#xff0c;我们可以使用两个指针分别指向…
阅读更多...
c语言简单json库

c语言简单json库

文章目录 写在前面头文件源代码使用示例 写在前面 用c语言实现的一个简单json库&#xff0c;极其轻量 仅1个四百多行源码的源文件&#xff0c;和1个头文件 支持对象、数组、数值、字符串类型 github仓库 头文件 对主要的json API的声明 #ifndef ARCOJSON_ARCOJSON_H #defin…
阅读更多...
python从入门到精通（二十）：python的exe程序打包制作

python从入门到精通（二十）：python的exe程序打包制作

python的exe程序打包制作 python打包的概念python打包的模块导入模块安装验证基本语法命令参数文件夹模式单文件模式资源嵌入exe更改图标启动画面&#xff08;闪屏&#xff09;禁用异常提示 python打包的概念 将普通的*.py程序文件打包成exe文件。exe文件即可执行文件&#xf…
阅读更多...
python分离字符串 2022年12月青少年电子学会等级考试 中小学生python编程等级考试二级真题答案解析

python分离字符串 2022年12月青少年电子学会等级考试 中小学生python编程等级考试二级真题答案解析

目录 python分离字符串 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python分离字符串 2022年12月 python编程等级考试级编程题 一、题目要…
阅读更多...
【数据结构】链表OJ面试题5《链表的深度拷贝》(题库+解析)

【数据结构】链表OJ面试题5《链表的深度拷贝》(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 给定一个链表&#xff0c;判断链表中是否有环。http://t.csdnimg.cn/Rcdyc 给定一个链表&#xff0c;返回链表开始入环的第一个结点。 如果链表无环&#xff0c;则返回 NULLhttp://t.cs…
阅读更多...
类和对象——封装

类和对象——封装

师从黑马程序员 封装 封装的意义一 在设计类的时候&#xff0c;属性和行为写在一起&#xff0c;表现事物 语法&#xff1a; class 类名{ 访问权限&#xff1a;属性/行为 }&#xff1b; 设计一个圆类&#xff0c;求圆的周长 代码&#xff1a; 示例1&#xff1a; #inc…
阅读更多...
1 月 NFT 市场动态：Polygon 增长，Mooar 崛起，TinFun 掀起文化浪潮

1 月 NFT 市场动态：Polygon 增长，Mooar 崛起，TinFun 掀起文化浪潮

作者&#xff1a;stellafootprint.network 数据源&#xff1a;NFT Research - Footprint Analytics 2024 年 1 月&#xff0c;加密货币与 NFT 市场迎来了重要的转折点&#xff0c;其中美国首批现货比特币 ETF 的亮相尤为引人注目&#xff0c;这一金融一体化的里程碑事件吸引了…
阅读更多...
论文阅读-One for All : 动态多租户边缘云平台的统一工作负载预测

论文阅读-One for All : 动态多租户边缘云平台的统一工作负载预测

论文名称&#xff1a;One for All: Unified Workload Prediction for Dynamic Multi-tenant Edge Cloud Platforms 摘要 多租户边缘云平台中的工作负载预测对于高效的应用部署和资源供给至关重要。然而&#xff0c;在多租户边缘云平台中&#xff0c;异构的应用模式、可变的基…
阅读更多...
【C/C++】2024春晚刘谦春晚魔术步骤模拟+暴力破解

【C/C++】2024春晚刘谦春晚魔术步骤模拟+暴力破解

在这个特别的除夕夜&#xff0c;我们不仅享受了与家人的温馨团聚&#xff0c;还被电视机前的春节联欢晚会深深吸引。特别是&#xff0c;魔术师刘谦的精彩表演&#xff0c;为我们带来了一场视觉和心灵的盛宴。在我的博客“【C/C】2024春晚刘谦春晚魔术步骤模拟暴力破解”中&…
阅读更多...
最新文章

Copyright @ 2022~2023