Files
toutoukan_front/miniprogram/pages/publish/publish.ts

265 lines
7.0 KiB
TypeScript
Raw Normal View History

2025-09-27 17:24:52 +08:00
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 });
},
});