265 lines
7.0 KiB
TypeScript
265 lines
7.0 KiB
TypeScript
Page({
|
||
data: {
|
||
// 表单数据(与需求字段对应)
|
||
form: {
|
||
title: "", // 文章标题
|
||
vote_type: "single", // 投票类型:single-单选,multiple-多选
|
||
end_time: "", // 结束时间(ISO格式,如:2025-10-22T00:59:59+08:00)
|
||
end_time_format: "", // 结束时间(展示用,如:2025-10-22 00:59)
|
||
options: [
|
||
{ content: "", sort_order: 1 }, // 默认1个选项,sort_order自动生成
|
||
],
|
||
},
|
||
showTimePicker: false, // 时间选择器弹窗显隐
|
||
currentTime: new Date().getTime(), // 当前选择的时间
|
||
minDate: new Date().getTime(), // 最小可选时间(当前时间)
|
||
isSubmitting: false, // 提交状态
|
||
style: 'border: 2rpx solid var(--td-component-border);border-radius: 12rpx;',
|
||
value: 0,
|
||
value1: 0,
|
||
|
||
mode: '',
|
||
datetimeVisible: false,
|
||
datetime: new Date().getTime(),
|
||
datetimeText: '',
|
||
cityText: '',
|
||
cityValue: [],
|
||
citys: [
|
||
{ label: '用户邀请码', value: '用户邀请码' },
|
||
],
|
||
|
||
},
|
||
|
||
// 1. 输入框通用处理(标题)
|
||
handleInput(e) {
|
||
const { key } = e.currentTarget.dataset;
|
||
this.setData({
|
||
[`form.${key}`]: e.detail.value,
|
||
});
|
||
},
|
||
|
||
// 2. 投票类型切换(单选/多选)
|
||
handleVoteTypeChange(e) {
|
||
this.setData({
|
||
"form.vote_type": e.detail,
|
||
});
|
||
},
|
||
|
||
showPicker(e) {
|
||
console.log("截止")
|
||
const { mode } = e?.currentTarget?.dataset;
|
||
this.setData({
|
||
mode,
|
||
[`${mode}Visible`]: true,
|
||
});
|
||
console.log("截止2",mo)
|
||
},
|
||
hidePicker() {
|
||
const { mode } = this.data;
|
||
this.setData({
|
||
[`${mode}Visible`]: false,
|
||
});
|
||
},
|
||
onConfirm(e) {
|
||
const { value } = e?.detail;
|
||
const { mode } = this.data;
|
||
|
||
console.log('confirm', value);
|
||
|
||
this.setData({
|
||
[mode]: value,
|
||
[`${mode}Text`]: value,
|
||
});
|
||
|
||
this.hidePicker();
|
||
},
|
||
|
||
onColumnChange(e) {
|
||
console.log('pick', e?.detail?.value);
|
||
},
|
||
|
||
|
||
|
||
// 6. 投票选项输入
|
||
handleOptionInput(e) {
|
||
const { index, key } = e.currentTarget.dataset;
|
||
this.setData({
|
||
[`form.options[${index}].${key}`]: e.detail.value,
|
||
});
|
||
},
|
||
|
||
|
||
// 8. 删除投票选项(至少保留1个)
|
||
deleteOption(e) {
|
||
const { index } = e.currentTarget.dataset;
|
||
const { options } = this.data.form;
|
||
if (options.length <= 1) return;
|
||
|
||
// 删除后重新排序sort_order
|
||
const newOptions = options.filter((_, i) => i !== index);
|
||
newOptions.forEach((item, i) => {
|
||
item.sort_order = i + 1;
|
||
});
|
||
|
||
this.setData({
|
||
"form.options": newOptions,
|
||
});
|
||
},
|
||
|
||
// 9. 表单校验
|
||
validateForm() {
|
||
const { title, end_time, options } = this.data.form;
|
||
|
||
// 校验标题
|
||
if (!title.trim()) {
|
||
wx.showToast({ title: "请输入文章标题", icon: "none" });
|
||
return false;
|
||
}
|
||
|
||
// 校验结束时间
|
||
if (!end_time) {
|
||
wx.showToast({ title: "请选择投票结束时间", icon: "none" });
|
||
return false;
|
||
}
|
||
|
||
// 校验选项(至少1个,且内容不为空)
|
||
const hasEmptyOption = options.some(
|
||
(item) => !item.content.trim()
|
||
);
|
||
if (hasEmptyOption) {
|
||
wx.showToast({ title: "请完善所有选项内容", icon: "none" });
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
// 10. 提交发布
|
||
handleSubmit() {
|
||
// 1. 表单校验
|
||
if (!this.validateForm()) return;
|
||
|
||
// 2. 整理提交数据(过滤空值,只保留需求字段)
|
||
const { title, vote_type, end_time, options } = this.data.form;
|
||
const submitData = {
|
||
title: title.trim(),
|
||
vote_type,
|
||
end_time,
|
||
options: options.map((item) => ({
|
||
content: item.content.trim(),
|
||
sort_order: item.sort_order,
|
||
})),
|
||
};
|
||
|
||
// 3. 模拟提交(替换为实际接口请求)
|
||
this.setData({ isSubmitting: true });
|
||
console.log("发布投票文章数据:", submitData);
|
||
|
||
// 模拟接口请求(2秒后返回成功)
|
||
setTimeout(() => {
|
||
wx.showToast({ title: "发布成功" });
|
||
this.setData({ isSubmitting: false });
|
||
// 发布成功后返回上一页
|
||
wx.navigateBack({ delta: 1 });
|
||
}, 2000);
|
||
},
|
||
onChange(e) {
|
||
this.setData({ value: e.detail.value });
|
||
},
|
||
onChange1(e) {
|
||
this.setData({ value1: e.detail.value });
|
||
},
|
||
|
||
addOption1() {
|
||
const { form } = this.data;
|
||
// 最多3个选项
|
||
if (form.options.length < 5) {
|
||
// 创建新数组并添加新选项(保持原有选项数据)
|
||
const newOptions = [...form.options];
|
||
newOptions.push({
|
||
content: "",
|
||
sort_order: newOptions.length + 1
|
||
});
|
||
this.setData({
|
||
'form.options': newOptions
|
||
});
|
||
}
|
||
},
|
||
|
||
// 删除选项
|
||
removeOption(e) {
|
||
const { index } = e.currentTarget.dataset;
|
||
const { form } = this.data;
|
||
|
||
if (form.options.length > 1) {
|
||
// 过滤掉要删除的选项,保留其他选项数据
|
||
let newOptions = form.options.filter((_, i) => i !== index);
|
||
|
||
// 重新排序(不影响内容,只更新序号)
|
||
newOptions = newOptions.map((item, i) => ({
|
||
...item, // 保留原有内容
|
||
sort_order: i + 1
|
||
}));
|
||
|
||
this.setData({
|
||
'form.options': newOptions
|
||
});
|
||
}
|
||
},
|
||
|
||
// 选项内容输入
|
||
onOptionInput(e) {
|
||
const { index } = e.currentTarget.dataset;
|
||
const { form } = this.data;
|
||
|
||
|
||
// 创建新数组避免直接修改原数据
|
||
const newOptions = [...form.options];
|
||
// 只更新当前输入的选项内容
|
||
newOptions[index].content = e.detail.value;
|
||
console.log("输入:",newOptions[index].content)
|
||
this.setData({
|
||
'form.options': newOptions
|
||
});
|
||
},
|
||
onColumnChange(e) {
|
||
console.log('picker pick:', e);
|
||
},
|
||
|
||
onPickerChange(e) {
|
||
const { key } = e.currentTarget.dataset;
|
||
const { value } = e.detail;
|
||
|
||
console.log('picker change:', e.detail);
|
||
this.setData({
|
||
[`${key}Visible`]: false,
|
||
[`${key}Value`]: value,
|
||
[`${key}Text`]: value.join(' '),
|
||
});
|
||
},
|
||
|
||
onPickerCancel(e) {
|
||
const { key } = e.currentTarget.dataset;
|
||
console.log(e, '取消');
|
||
console.log('picker1 cancel:');
|
||
this.setData({
|
||
[`${key}Visible`]: false,
|
||
});
|
||
},
|
||
|
||
onCityPicker() {
|
||
this.setData({ cityVisible: true });
|
||
},
|
||
|
||
onSeasonPicker() {
|
||
this.setData({ dateVisible: true });
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}); |