更换日期选择器
This commit is contained in:
WindowBird
parent
0a11371dbb
commit
97868a55b2
|
|
@ -190,69 +190,21 @@
|
||||||
@close-picker="handleClosePicker"
|
@close-picker="handleClosePicker"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 跟进时间选择器弹窗（移动端） -->
|
<!-- 跟进时间选择器 -->
|
||||||
<view v-if="showFollowTimePicker" class="modal-mask" @click="showFollowTimePicker = false">
|
<uv-datetime-picker
|
||||||
<view class="modal-content datetime-modal" @click.stop>
|
ref="followTimePickerRef"
|
||||||
<view class="modal-title">选择跟进时间</view>
|
v-model="followTimeValue"
|
||||||
<picker-view
|
mode="datetime"
|
||||||
class="datetime-picker"
|
@confirm="onFollowTimeConfirm"
|
||||||
:value="followTimePickerValue"
|
></uv-datetime-picker>
|
||||||
@change="onFollowTimePickerChange"
|
|
||||||
>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(year, index) in dateTimePickerRange[0]" :key="index" class="picker-item-small">{{ year }}年</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(month, index) in dateTimePickerRange[1]" :key="index" class="picker-item-small">{{ month }}月</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(day, index) in dateTimePickerRange[2]" :key="index" class="picker-item-small">{{ day }}日</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(hour, index) in dateTimePickerRange[3]" :key="index" class="picker-item-small">{{ hour }}时</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(minute, index) in dateTimePickerRange[4]" :key="index" class="picker-item-small">{{ minute }}分</view>
|
|
||||||
</picker-view-column>
|
|
||||||
</picker-view>
|
|
||||||
<view class="modal-actions">
|
|
||||||
<text class="modal-btn cancel-btn" @click="showFollowTimePicker = false">取消</text>
|
|
||||||
<text class="modal-btn confirm-btn" @click="confirmFollowTime">确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 下次跟进时间选择器弹窗（移动端） -->
|
<!-- 下次跟进时间选择器 -->
|
||||||
<view v-if="showNextFollowTimePicker" class="modal-mask" @click="showNextFollowTimePicker = false">
|
<uv-datetime-picker
|
||||||
<view class="modal-content datetime-modal" @click.stop>
|
ref="nextFollowTimePickerRef"
|
||||||
<view class="modal-title">选择下次跟进时间</view>
|
v-model="nextFollowTimeValue"
|
||||||
<picker-view
|
mode="datetime"
|
||||||
class="datetime-picker"
|
@confirm="onNextFollowTimeConfirm"
|
||||||
:value="nextFollowTimePickerValue"
|
></uv-datetime-picker>
|
||||||
@change="onNextFollowTimePickerChange"
|
|
||||||
>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(year, index) in dateTimePickerRange[0]" :key="index" class="picker-item-small">{{ year }}年</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(month, index) in dateTimePickerRange[1]" :key="index" class="picker-item-small">{{ month }}月</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(day, index) in dateTimePickerRange[2]" :key="index" class="picker-item-small">{{ day }}日</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(hour, index) in dateTimePickerRange[3]" :key="index" class="picker-item-small">{{ hour }}时</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(minute, index) in dateTimePickerRange[4]" :key="index" class="picker-item-small">{{ minute }}分</view>
|
|
||||||
</picker-view-column>
|
|
||||||
</picker-view>
|
|
||||||
<view class="modal-actions">
|
|
||||||
<text class="modal-btn cancel-btn" @click="showNextFollowTimePicker = false">取消</text>
|
|
||||||
<text class="modal-btn confirm-btn" @click="confirmNextFollowTime">确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 底部按钮 -->
|
<!-- 底部按钮 -->
|
||||||
<view class="button-wrapper">
|
<view class="button-wrapper">
|
||||||
|
|
@ -296,8 +248,14 @@ const formData = ref({
|
||||||
const showStatusPicker = ref(false);
|
const showStatusPicker = ref(false);
|
||||||
const showIntentLevelPicker = ref(false);
|
const showIntentLevelPicker = ref(false);
|
||||||
const showFollowTypePicker = 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([]);
|
const statusOptions = ref([]);
|
||||||
|
|
@ -345,11 +303,13 @@ onLoad((options) => {
|
||||||
// 设置默认跟进时间为当前时间
|
// 设置默认跟进时间为当前时间
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
formData.value.followTime = formatDateTimeForInput(now);
|
formData.value.followTime = formatDateTimeForInput(now);
|
||||||
|
followTimeValue.value = Number(now);
|
||||||
|
|
||||||
// 设置默认下次跟进时间为7天后
|
// 设置默认下次跟进时间为7天后
|
||||||
const nextWeek = new Date(now);
|
const nextWeek = new Date(now);
|
||||||
nextWeek.setDate(nextWeek.getDate() + 7);
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
||||||
formData.value.nextFollowTime = formatDateTimeForInput(nextWeek);
|
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 onFollowTimeConfirm = (e) => {
|
||||||
const [yearIdx, monthIdx, dayIdx, hourIdx, minuteIdx] = followTimePickerValue.value;
|
// 使用 v-model 绑定的值（已自动更新）
|
||||||
const year = dateTimePickerRange[0][yearIdx];
|
const date = new Date(followTimeValue.value);
|
||||||
const month = dateTimePickerRange[1][monthIdx];
|
formData.value.followTime = formatDateTimeForInput(date);
|
||||||
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 confirmNextFollowTime = () => {
|
const onNextFollowTimeConfirm = (e) => {
|
||||||
const [yearIdx, monthIdx, dayIdx, hourIdx, minuteIdx] = nextFollowTimePickerValue.value;
|
// 使用 v-model 绑定的值（已自动更新）
|
||||||
const year = dateTimePickerRange[0][yearIdx];
|
const date = new Date(nextFollowTimeValue.value);
|
||||||
const month = dateTimePickerRange[1][monthIdx];
|
formData.value.nextFollowTime = formatDateTimeForInput(date);
|
||||||
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 openFollowTimePicker = () => {
|
const openFollowTimePicker = () => {
|
||||||
// #ifdef H5
|
// 更新选择器的值为当前表单值
|
||||||
// H5平台使用input type="datetime-local"
|
if (formData.value.followTime) {
|
||||||
const currentDate = formData.value.followTime || new Date();
|
const date = new Date(formData.value.followTime);
|
||||||
const d = currentDate instanceof Date ? currentDate : new Date(currentDate);
|
followTimeValue.value = Number(date);
|
||||||
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';
|
|
||||||
}
|
}
|
||||||
};
|
followTimePickerRef.value?.open();
|
||||||
input.click();
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef H5
|
|
||||||
// 其他平台使用picker-view组件
|
|
||||||
followTimePickerValue.value = getDateTimePickerValue(formData.value.followTime);
|
|
||||||
showFollowTimePicker.value = true;
|
|
||||||
// #endif
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 打开下次跟进时间选择器
|
// 打开下次跟进时间选择器
|
||||||
const openNextFollowTimePicker = () => {
|
const openNextFollowTimePicker = () => {
|
||||||
// #ifdef H5
|
// 更新选择器的值为当前表单值
|
||||||
// H5平台使用input type="datetime-local"
|
if (formData.value.nextFollowTime) {
|
||||||
const currentDate = formData.value.nextFollowTime || new Date();
|
const date = new Date(formData.value.nextFollowTime);
|
||||||
const d = currentDate instanceof Date ? currentDate : new Date(currentDate);
|
nextFollowTimeValue.value = Number(date);
|
||||||
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';
|
|
||||||
}
|
}
|
||||||
};
|
nextFollowTimePickerRef.value?.open();
|
||||||
input.click();
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef H5
|
|
||||||
// 其他平台使用picker-view组件
|
|
||||||
nextFollowTimePickerValue.value = getDateTimePickerValue(formData.value.nextFollowTime);
|
|
||||||
showNextFollowTimePicker.value = true;
|
|
||||||
// #endif
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 选择图片并自动上传
|
// 选择图片并自动上传
|
||||||
|
|
@ -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 {
|
.button-wrapper {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user