From 97868a55b2decf64d0e5524f40cb1de07b7783cb Mon Sep 17 00:00:00 2001 From: WindowBird <13870814+windows-bird@user.noreply.gitee.com> Date: Mon, 10 Nov 2025 11:52:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E6=97=A5=E6=9C=9F=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/customer/follow/add/index.vue | 270 +++++----------------------- 1 file changed, 44 insertions(+), 226 deletions(-) diff --git a/pages/customer/follow/add/index.vue b/pages/customer/follow/add/index.vue index b78bbd6..dc5619c 100644 --- a/pages/customer/follow/add/index.vue +++ b/pages/customer/follow/add/index.vue @@ -190,69 +190,21 @@ @close-picker="handleClosePicker" /> - - - - 选择跟进时间 - - - {{ year }}年 - - - {{ month }}月 - - - {{ day }}日 - - - {{ hour }}时 - - - {{ minute }}分 - - - - 取消 - 确定 - - - + + - - - - 选择下次跟进时间 - - - {{ year }}年 - - - {{ month }}月 - - - {{ day }}日 - - - {{ hour }}时 - - - {{ minute }}分 - - - - 取消 - 确定 - - - + + @@ -296,8 +248,14 @@ const formData = ref({ const showStatusPicker = ref(false); const showIntentLevelPicker = ref(false); const showFollowTypePicker = ref(false); -const showFollowTimePicker = ref(false); -const showNextFollowTimePicker = ref(false); + +// 日期选择器 ref +const followTimePickerRef = ref(null); +const nextFollowTimePickerRef = ref(null); + +// 日期选择器值（时间戳） +const followTimeValue = ref(Number(new Date())); +const nextFollowTimeValue = ref(Number(new Date())); // 选项数据 const statusOptions = ref([]); @@ -345,11 +303,13 @@ onLoad((options) => { // 设置默认跟进时间为当前时间 const now = new Date(); formData.value.followTime = formatDateTimeForInput(now); + followTimeValue.value = Number(now); // 设置默认下次跟进时间为7天后 const nextWeek = new Date(now); nextWeek.setDate(nextWeek.getDate() + 7); formData.value.nextFollowTime = formatDateTimeForInput(nextWeek); + nextFollowTimeValue.value = Number(nextWeek); }); // 加载字典数据 @@ -411,163 +371,38 @@ const handleClosePicker = (pickerType) => { } }; -// 生成日期时间选择器的范围数据 -const generateDateTimePickerRange = () => { - const years = []; - const months = []; - const days = []; - const hours = []; - const minutes = []; - - const currentYear = new Date().getFullYear(); - for (let i = currentYear - 1; i <= currentYear + 1; i++) { - years.push(i.toString()); - } - - for (let i = 1; i <= 12; i++) { - months.push(String(i).padStart(2, '0')); - } - - for (let i = 1; i <= 31; i++) { - days.push(String(i).padStart(2, '0')); - } - - for (let i = 0; i < 24; i++) { - hours.push(String(i).padStart(2, '0')); - } - - for (let i = 0; i < 60; i += 1) { - minutes.push(String(i).padStart(2, '0')); - } - - return [years, months, days, hours, minutes]; -}; - -// 日期时间选择器范围数据（需要在模板中使用） -const dateTimePickerRange = generateDateTimePickerRange(); - -// 获取当前日期时间在picker中的索引 -const getDateTimePickerValue = (dateTime) => { - if (!dateTime) { - const now = new Date(); - return [ - dateTimePickerRange[0].indexOf(now.getFullYear().toString()), - now.getMonth(), - now.getDate() - 1, - now.getHours(), - now.getMinutes() - ]; - } - - const d = new Date(dateTime); - return [ - dateTimePickerRange[0].indexOf(d.getFullYear().toString()), - d.getMonth(), - d.getDate() - 1, - d.getHours(), - d.getMinutes() - ]; -}; - -const followTimePickerValue = ref(getDateTimePickerValue(formData.value.followTime)); -const nextFollowTimePickerValue = ref(getDateTimePickerValue(formData.value.nextFollowTime)); - -// 跟进时间选择器变化（picker-view） -const onFollowTimePickerChange = (e) => { - followTimePickerValue.value = e.detail.value; -}; - // 确认跟进时间 -const confirmFollowTime = () => { - const [yearIdx, monthIdx, dayIdx, hourIdx, minuteIdx] = followTimePickerValue.value; - const year = dateTimePickerRange[0][yearIdx]; - const month = dateTimePickerRange[1][monthIdx]; - const day = dateTimePickerRange[2][dayIdx]; - const hour = dateTimePickerRange[3][hourIdx]; - const minute = dateTimePickerRange[4][minuteIdx]; - - formData.value.followTime = `${year}-${month}-${day} ${hour}:${minute}:00`; - showFollowTimePicker.value = false; -}; - -// 下次跟进时间选择器变化（picker-view） -const onNextFollowTimePickerChange = (e) => { - nextFollowTimePickerValue.value = e.detail.value; +const onFollowTimeConfirm = (e) => { + // 使用 v-model 绑定的值（已自动更新） + const date = new Date(followTimeValue.value); + formData.value.followTime = formatDateTimeForInput(date); }; // 确认下次跟进时间 -const confirmNextFollowTime = () => { - const [yearIdx, monthIdx, dayIdx, hourIdx, minuteIdx] = nextFollowTimePickerValue.value; - const year = dateTimePickerRange[0][yearIdx]; - const month = dateTimePickerRange[1][monthIdx]; - const day = dateTimePickerRange[2][dayIdx]; - const hour = dateTimePickerRange[3][hourIdx]; - const minute = dateTimePickerRange[4][minuteIdx]; - - formData.value.nextFollowTime = `${year}-${month}-${day} ${hour}:${minute}:00`; - showNextFollowTimePicker.value = false; +const onNextFollowTimeConfirm = (e) => { + // 使用 v-model 绑定的值（已自动更新） + const date = new Date(nextFollowTimeValue.value); + formData.value.nextFollowTime = formatDateTimeForInput(date); }; // 打开跟进时间选择器 const openFollowTimePicker = () => { - // #ifdef H5 - // H5平台使用input type="datetime-local" - const currentDate = formData.value.followTime || new Date(); - const d = currentDate instanceof Date ? currentDate : new Date(currentDate); - const year = d.getFullYear(); - const month = String(d.getMonth() + 1).padStart(2, '0'); - const day = String(d.getDate()).padStart(2, '0'); - const hours = String(d.getHours()).padStart(2, '0'); - const minutes = String(d.getMinutes()).padStart(2, '0'); - const dateStr = `${year}-${month}-${day}T${hours}:${minutes}`; - - const input = document.createElement('input'); - input.type = 'datetime-local'; - input.value = dateStr; - input.onchange = (e) => { - if (e.target.value) { - formData.value.followTime = e.target.value.replace('T', ' ') + ':00'; - } - }; - input.click(); - // #endif - - // #ifndef H5 - // 其他平台使用picker-view组件 - followTimePickerValue.value = getDateTimePickerValue(formData.value.followTime); - showFollowTimePicker.value = true; - // #endif + // 更新选择器的值为当前表单值 + if (formData.value.followTime) { + const date = new Date(formData.value.followTime); + followTimeValue.value = Number(date); + } + followTimePickerRef.value?.open(); }; // 打开下次跟进时间选择器 const openNextFollowTimePicker = () => { - // #ifdef H5 - // H5平台使用input type="datetime-local" - const currentDate = formData.value.nextFollowTime || new Date(); - const d = currentDate instanceof Date ? currentDate : new Date(currentDate); - const year = d.getFullYear(); - const month = String(d.getMonth() + 1).padStart(2, '0'); - const day = String(d.getDate()).padStart(2, '0'); - const hours = String(d.getHours()).padStart(2, '0'); - const minutes = String(d.getMinutes()).padStart(2, '0'); - const dateStr = `${year}-${month}-${day}T${hours}:${minutes}`; - - const input = document.createElement('input'); - input.type = 'datetime-local'; - input.value = dateStr; - input.onchange = (e) => { - if (e.target.value) { - formData.value.nextFollowTime = e.target.value.replace('T', ' ') + ':00'; - } - }; - input.click(); - // #endif - - // #ifndef H5 - // 其他平台使用picker-view组件 - nextFollowTimePickerValue.value = getDateTimePickerValue(formData.value.nextFollowTime); - showNextFollowTimePicker.value = true; - // #endif + // 更新选择器的值为当前表单值 + if (formData.value.nextFollowTime) { + const date = new Date(formData.value.nextFollowTime); + nextFollowTimeValue.value = Number(date); + } + nextFollowTimePickerRef.value?.open(); }; // 选择图片并自动上传 @@ -1370,23 +1205,6 @@ const handleCancel = () => { } } -.datetime-modal { - max-height: 60vh; -} - -.datetime-picker { - height: 200px; - margin: 16px 0; -} - -.picker-item-small { - display: flex; - align-items: center; - justify-content: center; - height: 40px; - font-size: 14px; - color: #333; -} .button-wrapper { padding: 16px;