更换日期选择器
This commit is contained in:
WindowBird
parent
0a11371dbb
commit
97868a55b2
|
|
@ -190,69 +190,21 @@
|
|||
@close-picker="handleClosePicker"
|
||||
/>
|
||||
|
||||
<!-- 跟进时间选择器弹窗（移动端） -->
|
||||
<view v-if="showFollowTimePicker" class="modal-mask" @click="showFollowTimePicker = false">
|
||||
<view class="modal-content datetime-modal" @click.stop>
|
||||
<view class="modal-title">选择跟进时间</view>
|
||||
<picker-view
|
||||
class="datetime-picker"
|
||||
:value="followTimePickerValue"
|
||||
@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>
|
||||
<!-- 跟进时间选择器 -->
|
||||
<uv-datetime-picker
|
||||
ref="followTimePickerRef"
|
||||
v-model="followTimeValue"
|
||||
mode="datetime"
|
||||
@confirm="onFollowTimeConfirm"
|
||||
></uv-datetime-picker>
|
||||
|
||||
<!-- 下次跟进时间选择器弹窗（移动端） -->
|
||||
<view v-if="showNextFollowTimePicker" class="modal-mask" @click="showNextFollowTimePicker = false">
|
||||
<view class="modal-content datetime-modal" @click.stop>
|
||||
<view class="modal-title">选择下次跟进时间</view>
|
||||
<picker-view
|
||||
class="datetime-picker"
|
||||
:value="nextFollowTimePickerValue"
|
||||
@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>
|
||||
<!-- 下次跟进时间选择器 -->
|
||||
<uv-datetime-picker
|
||||
ref="nextFollowTimePickerRef"
|
||||
v-model="nextFollowTimeValue"
|
||||
mode="datetime"
|
||||
@confirm="onNextFollowTimeConfirm"
|
||||
></uv-datetime-picker>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="button-wrapper">
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user