移动端V1.0

2025-07-16 15:34:34 +08:00
commit 194b0750fd
1083 changed files with 178295 additions and 0 deletions
--- a/components/DateTimePicker.vue
+++ b/components/DateTimePicker.vue
@@ -0,0 +1,137 @@
+<template>
+	<view>
+		<picker mode="multiSelector" :disabled="disabled" :value="multiIndex" :range="multiRange"
+			@change="onMultiChange" @tap="onPickerTap">
+			<view class="picker">
+				<input type="text" :value="formattedDateTime" readonly />
+				<text v-if="!disabled" class="picker-label">选择时间</text>
+			</view>
+		</picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: {
+				type: String,
+				default: ''
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+
+			defaultTime: {
+				type: String,
+				default: () => {
+					const now = new Date();
+					return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+				}
+			}
+		},
+		data() {
+			const now = new Date();
+			return {
+				multiIndex: [],
+				multiRange: this.getMultiRange()
+			};
+		},
+		computed: {
+			formattedDateTime() {
+				if (this.multiIndex.length === 0) return ''; // 未选择时不显示
+				const year = this.multiRange[0][this.multiIndex[0]];
+				const month = String(this.multiRange[1][this.multiIndex[1]]).padStart(2, '0');
+				const day = String(this.multiRange[2][this.multiIndex[2]]).padStart(2, '0');
+				const hour = String(this.multiRange[3][this.multiIndex[3]]).padStart(2, '0');
+				const minute = String(this.multiRange[4][this.multiIndex[4]]).padStart(2, '0');
+				const second = String(this.multiRange[5][this.multiIndex[5]]).padStart(2, '0');
+
+				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+			}
+		},
+		methods: {
+			getMultiRange() {
+				let yearRange = [];
+				let monthRange = [];
+				let dayRange = [];
+				let hourRange = [];
+				let minuteRange = [];
+				let secondRange = [];
+
+				for (let i = 1900; i <= 2100; i++) yearRange.push(i);
+				for (let i = 1; i <= 12; i++) monthRange.push(i);
+				for (let i = 1; i <= 31; i++) dayRange.push(i);
+				for (let i = 0; i <= 23; i++) hourRange.push(i);
+				for (let i = 0; i <= 59; i++) minuteRange.push(i);
+				for (let i = 0; i <= 59; i++) secondRange.push(i);
+
+				return [yearRange, monthRange, dayRange, hourRange, minuteRange, secondRange];
+			},
+			onMultiChange(e) {
+				this.multiIndex = e.detail.value;
+				this.$emit('input', this.formattedDateTime);
+			},
+			onPickerTap() {
+				// 如果还未选择，则用当前时间作为默认
+				if (this.multiIndex.length === 0) {
+					const now = new Date();
+					this.multiIndex = [
+						now.getFullYear() - 1900,
+						now.getMonth(),
+						now.getDate() - 1,
+						now.getHours(),
+						now.getMinutes(),
+						now.getSeconds()
+					];
+				}
+			}
+		},
+		watch: {
+			value: {
+				immediate: true, // 组件挂载时立即执行
+				handler(newValue) {
+					if (!newValue || typeof newValue !== 'string') return;
+
+					const dateParts = newValue.split(/[- :]/);
+					if (dateParts.length === 6) {
+						this.multiIndex = [
+							parseInt(dateParts[0]) - 1900,
+							parseInt(dateParts[1]) - 1,
+							parseInt(dateParts[2]) - 1,
+							parseInt(dateParts[3]),
+							parseInt(dateParts[4]),
+							parseInt(dateParts[5])
+						];
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style>
+	.picker {
+		display: flex;
+		align-items: center;
+		padding: 10px;
+		background-color: #fff;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+		cursor: pointer;
+		/* 使其看起来像可点击的按钮 */
+	}
+
+	input {
+		flex: 1;
+		border: none;
+		outline: none;
+		padding: 0;
+	}
+
+	.picker-label {
+		margin-left: 10px;
+		color: #007BFF;
+		/* 可选：设置文字颜色 */
+	}
+</style>