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="defaultTime"
				:time-hide="[true, true, true, true, true, true]"
				:time-label="['年', '月', '日', '时', '分', '秒']"
			/>
		</uni-card>

	</view>
</template>

<script>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	export default {
		setup() {
			const myPicker = ref(null)
			const birthday = ref("")
			const array = ref(["单选（默认)", "多选，无限制", "多选， 最多两项"])
			const vote_id = ref('')
			const select = ref(0)
			const voteTitle = ref("")
			const pageType = ref("add")
			const defaultTime = ref(Date.now())
			const voteLst = ref([
				{ value: "" },
				{ value: "" },
				{ value: "" },
			])

			onLoad((options) => {
				if (options.type === "edit") {
					pageType.value = "edit"
					let index = uni.getStorageSync("selectIndex")
					let cms = uni.getStorageSync("cms")
					if (cms && cms.cmsLst && cms.cmsLst[index] && cms.cmsLst[index].vote) {
						const vote = cms.cmsLst[index].vote
						voteTitle.value = vote.voteTitle || ""
						vote_id.value = vote.vote_id || ""
						voteLst.value = vote.voteLst && vote.voteLst.length
							? vote.voteLst.map(i => ({ value: i.value || "" }))
							: [{ value: "" }]
						let typeIndex = array.value.indexOf(vote.type)
						select.value = typeIndex >= 0 ? typeIndex : 0
						birthday.value = vote.datetime || ""
						if (vote.datetime) {
							defaultTime.value = new Date(vote.datetime.replace(/-/g, '/')).getTime() || Date.now()
						}
					}
				}
			})

			function openDatetimePicker() {
				myPicker.value.show()
			}

			function handleSubmit(e) {
				birthday.value = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
			}

			function bindPickerChange(e) {
				select.value = e.detail.value
			}

			function del(index) {
				if (voteLst.value.length >= 3) {
					voteLst.value.splice(index, 1)
				} else {
					uni.showLoading({ title: '投票最少保留两个选项...' })
					setTimeout(() => uni.hideLoading(), 1000)
				}
			}

			async function toSuccess() {
				if (!voteTitle.value) {
					uni.showLoading({ title: '标题不能为空' })
					setTimeout(() => uni.hideLoading(), 1000)
					return
				}

				const options = voteLst.value
					.filter(item => item && item.value && item.value.trim())
					.map(item => ({ value: item.value.trim() }))
				if (options.length < 2) {
					uni.showToast({ title: '至少填写两个选项', icon: 'none' })
					return
				}
				let vote = {
					voteLst: options,
					vote_id: vote_id.value || `vote_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`,
					voteTitle: voteTitle.value,
					type: array.value[select.value],
					datetime: birthday.value,
				}

				if (!vote.type) {
					uni.showLoading({ title: '投票类型不能为空' })
					setTimeout(() => uni.hideLoading(), 1000)
					return
				}
				if (!vote.datetime) {
					uni.showLoading({ title: '截止时间不能为空' })
					setTimeout(() => uni.hideLoading(), 1000)
					return
				}

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

				uni.setStorageSync("cms", cms)
				await back()
			}

			async function back() {
				uni.navigateBack({
					delta: 1,
					fail: (err) => {
						uni.navigateTo({ url: "/pages2/editCms/editCms" })
					}
				})
			}

			function add() {
				voteLst.value.push({ value: "" })
			}

			return {
				myPicker,
				birthday,
				array,
				vote_id,
				select,
				voteTitle,
				pageType,
				defaultTime,
				voteLst,
				openDatetimePicker,
				handleSubmit,
				bindPickerChange,
				del,
				toSuccess,
				back,
				add
			}
		}
	}
</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>