t/pages2/editCms/vote.vue

<template>
	<view class="b_col_ccc body">
		<uni-nav-bar 
		title="投票设置" 
		leftText="取消" 
		left-icon="left" 
		right-text="完成" 
		backgroundColor="#ffffff" 
		color="#000000" 
		@clickRight="toSuccess()" 
		@clickLeft="back()">
		</uni-nav-bar>
		<uni-card>
			<uni-forms-item label="投票描述"
			class="top">
				<uni-easyinput 
				:inputBorder="false" 
				placeholder="请输入投票主题" 
				both 
				v-model="voteTitle">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item 
			class="top"
			v-for="(item, index) in voteLst" 
			:key="index">
				<template #label>
					<view class="label"></view>
				</template>
				<uni-easyinput 
				class="top"
				:inputBorder="false" 
				:placeholder="'选项' + (index + 1)" 
				both 
				suffixIcon="closeempty" 
				clearable="false" 
				v-model="voteLst[index].value"
				@iconClick="del(index)">
				</uni-easyinput>
			</uni-forms-item>
			<view class="btn-add top" @click="add()">
				+ 添加选项
			</view>
		</uni-card>
		<uni-card>
			<uni-forms-item label="截止时间">
				<view @click="openDatetimePicker">
					{{ birthday ? birthday : "请选择截止日期" }}
				</view>
			</uni-forms-item>
			<uni-forms-item label="投票类型">
				<picker @change="bindPickerChange" :range="array" mode="selector">
					<view class="picker">{{array[select]}}</view>
				</picker>
			</uni-forms-item>
			<buuug7-simple-datetime-picker
				ref="myPicker"
				@submit="handleSubmit"
				:start-year="2000"
				:end-year="2099"
				:time-init="1688860800000"
				:time-hide="[true, true, true, true, true, true]"
				:time-label="['年', '月', '日', '时', '分', '秒']"
			/>
		</uni-card>

	</view>
</template>

<script>
	export default {
		async onLoad(e) {
			console.log(e);
			this.pageType = e.type;
			let cms = uni.getStorageSync("cms");
			let index = uni.getStorageSync("selectIndex");
			if (this.pageType === "edit") {
				console.log(cms.cmsLst[index])
				this.voteLst = cms.cmsLst[index].vote.voteLst;
				this.voteTitle = cms.cmsLst[index].text;
				this.birthday = cms.cmsLst[index].vote.datetime;
				for (let i = 0 ; i < this.array.lenght; i ++ ) {
					if (array[i] === cms.cmsLst[index].vote.type) {
						this.select = i;
					}
				}
				
				if (!cms.cmsLst[index].vote.vote_id) {
					let vote_id = this.generateRandomCode();
					
					this.vote_id = vote_id;
					
					cms.cmsLst[index].vote.vote_id = this.vote_id;
					
					uni.setStorageSync("cms", cms);
					
				}
			} else if (this.pageType === "add") {
				let vote_id = this.generateRandomCode();
				this.vote_id = vote_id;
			}
		},
		data() {
			return {
				birthday: "",
				array:[
					"单选（默认)",
					"多选，无限制",
					"多选， 最多两项"
				],
				vote_id:'',
				select: 0,
				voteTitle: "",
				voteLst: [
				{
					value:"",
				},
				{
					value:"",
				},
				{
					value:"",
				},
				],
				pageType:"add",
			}
		},
		methods: {
			generateRandomCode() {
			  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			  let code = '';
			  for (let i = 0; i < 24; i++) {
			    code += chars.charAt(Math.floor(Math.random() * chars.length));
			  }
			  return code;
			},
			openDatetimePicker() {
			  this.$refs.myPicker.show();
			},
			// 关闭picker
			closeDatetimePicker() {
			  this.$refs.myPicker.hide();
			},
			handleSubmit(e) {
			    console.log(e);
			    this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
			},
			bindPickerChange(e) {
				this.select = e.detail.value
			},
			del(index) {
				if (this.voteLst.length >= 3) {
					this.voteLst.splice(index, 1);
				} else {
					uni.showLoading({ title: '投票最少保留两个选项...' });
					setTimeout(() => uni.hideLoading(), 1000);
				}
				
			},
			async toSuccess() {
				if (!this.voteTitle) {
					uni.showLoading({ title: '标题不能为空' });
					setTimeout(() => uni.hideLoading(), 1000);
					return;
				}

				let vote = {
					voteLst: this.voteLst,
					vote_id: this.vote_id,
					voteTitle: this.voteTitle,
					type: this.array[this.select],
					datetime: this.birthday,
				}
				if (!vote.type) {
					uni.showLoading({ title: '投票类型不能为空' });
					setTimeout(() => uni.hideLoading(), 1000);
					return;
				}
				if (!vote.datetime) {
					uni.showLoading({ title: '截止时间不能为空' });
					setTimeout(() => uni.hideLoading(), 1000);
					return;
				}
				if (!vote.datetime) {
					let errIndex = -1;
					for (let i = 0 ; i < vote.voteLst.length ; i ++ ) {
						if (!vote.voteLst[i].value) {
							errIndex = i;
						}
					}
					if (errIndex !== 1) {
						uni.showLoading({ title: `选项${ errIndex + 1 }不能为空` });
						setTimeout(() => uni.hideLoading(), 1000);
						return;
					}
				}

				let index = uni.getStorageSync("selectIndex");
				let cms = uni.getStorageSync("cms");
				if (vote.type === this.array[0]) {
					vote.selectValue = "";
				} else {
					vote.selectValue = [];
				}
				vote.selectValu = false;
				if (this.pageType === "add") {
					cms.cmsLst.splice(index, 0, {
						type: "vote",
						text: this.voteTitle,
						vote: vote
					})
				} else if (this.pageType === "edit"){
					cms.cmsLst.splice(index, 1, {
						type: "vote",
						text: this.voteTitle,
						vote: vote
					})
				}

				uni.setStorageSync("cms", cms);

				await this.back();

			},
			async back() {
				uni.navigateBack({
					delta: 1,
					fail: (err) => {
						console.log(err);
						uni.navigateTo({
							url: "/pages2/editCms/editCms"
						})
					}
				});
			},
			add() {
				this.voteLst.push(
					{
						value:"",
					}
					)
			},
		}
	}
</script>

<style>
	.top {
		border-top: 1px solid #dcdfe6;
	}
	.btn-add {
		border: none;
		color:  #4876FF;
		text-align: center;
		line-height: 2em;
	}
	.label {
		width: 15px;
		height:15px;
		border-radius: 50%;
		border: 2px solid #666;
		margin: 8px;
	}
	.b_col_ccc {
		background-color: #eee;
	}
	.body {
		width: 100vw;
		min-height: 100vh;
	}
</style>