PunchSettle-MiniProgram/pages/punchin-edit/punchin-edit.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<template>
			<uni-forms ref="baseForm" :modelValue="punchInData" :label-width="80">
				<uni-section title="基本信息" padding="16px" type="line">
					<uni-forms-item label="任务名称" required>
						<uni-easyinput v-model="punchInData.taskName" placeholder="请输入任务名称" />
					</uni-forms-item>
					<uni-forms-item label="奖励数" required>
						<uni-easyinput v-model="punchInData.rewardNum" placeholder="请输入奖励数" type="number" />
					</uni-forms-item>
					<uni-forms-item label="周末双倍" required>
						<uni-data-checkbox v-model="punchInData.weekendDoubleFlag" :localdata="range"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="全勤双倍" required>
						<uni-data-checkbox v-model="punchInData.fullAttendanceFlag" :localdata="range"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="打卡类型" required>
						<uni-data-select :localdata="punchInTypeRange" v-model="punchInData.category"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="规则描述">
						<uni-easyinput type="textarea" v-model="punchInData.description" placeholder="请输入任务描述" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="计数配置" padding="16px" type="line" v-if="punchInData.category == 1">
					<uni-forms-item label="判断规则" required>
						<uni-data-select :localdata="judgeTypeRange" v-model="punchInData.rule"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="数值" required>
						<uni-easyinput v-model="punchInData.countTrack" placeholder="请输入目标数值" type="digit" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="计时配置" padding="16px" type="line" v-if="punchInData.category == 2">
					<uni-forms-item label="判断规则" required>
						<uni-data-select :localdata="judgeTypeRange" v-model="punchInData.rule"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="时间" required>
						<picker mode="time" :value="punchInData.timeTrack" @change="timeChange">
							<view class="pick-box">{{punchInData.timeTrack}}</view>
						</picker>
					</uni-forms-item>
				</uni-section>
				<view class="button-container">
					<button type="default" style="width:300rpx;" @click="cancel">取消</button>
					<button type="primary" style="color:#ffffff;backgroundColor:#2A82E4;width:300rpx;" @click="savePunchIn">保存</button>
				</view>
			</uni-forms>
		</template>
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { punchInApi } from '@/service/apis';
	
	/**
	 * 表单
	 */
	const baseForm = ref(null);
	
	/**
	 * 表单数据
	 */
	const punchInData = ref({
		"rewardNum": 1,
		"weekendDoubleFlag": 1,
		"fullAttendanceFlag": 1,
		"category": 0,
		"rule": 0,
		"countTrack": 10,
		"timeTrack": "00:00"
	});
	
	/**
	 * 选项
	 */
	const range = [
		{
			"value": 1,
			"text": "启用"
		},
		{
			"value": 2,
			"text": "关闭"
		}
	];
	
	/**
	 * 打卡类型
	 */
	const punchInTypeRange = [
        { value: 0, text: "单次打卡" },
        { value: 1, text: "计数" },
        { value: 2, text: "计时" },
      ];
	  
	const judgeTypeRange = [
		{ value: 0, text: "大于等于" },
		{ value: 1, text: "小于等于" },
		{ value: 2, text: "大于" },
		{ value: 2, text: "小于" },
	];
	
	onLoad(async (e) => {
		if (e.id) {
			const res = await punchInApi.queryPunchInById({"id": e.id});
			punchInData.value = res;
		}
	});

	const weekendDoubleSwitchChange = (e) => {
		punchInData.value.weekendDoubleFlag = e.detail.value;
	}
	
	const fullAttendanceSwitchChange = (e) => {
		punchInData.value.fullAttendanceFlag = e.detail.value;
	}
	
	/**
	 * 保存打卡任务
	 */
	const savePunchIn = () => {
		punchInApi.addPunchIn(punchInData.value).then(() => {
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		});
	}
	
	/**
	 * 后退
	 */
	const cancel = () => {
		uni.navigateBack();
	}
	
	/**
	 * 时间选择监听
	 */
	const timeChange = (e) => {
		punchInData.value.timeTrack = e.detail.value;
	}
</script>

<style lang="scss" scoped>
	.pick-box {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 14px;
		height: 35px;
		padding-left: 10px;
	}
	
	.button-container {
		background-color: #FFFFFF;
		display: flex; /* 使用Flexbox布局 */
		justify-content: space-between; /* 按钮之间的空间分布 */
		padding: 20rpx; /* 容器两侧的空白填充 */
	}
	
	// .button {
	//   flex-grow: 1; /* 按钮占据可用空间 */
	//   margin: 0 10px; /* 按钮两侧的空白填充 */
	// }
</style>