jc-task-mini/pages/task-edit/task-edit.js

// pages/task-edit/task-edit.js
import {
    saveTask,
    getTaskById
} from '../../api/api'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        mode: '',
        datetimeVisible: false,
        datetime: new Date().getTime(),
        datetimeText: '',
        jtTaskName: '',
        jtTaskIntroduction: '',
        completionMethod: 0,
        fileList: [],
        gridConfig: {
            column: 4,
            width: 160,
            height: 160,
        },
        id: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        if (options.id) {
            this.data.id = options.id
            getTaskById({
                id: options.id
            }).then(res => {
                const fileList = res.data.jtTaskAttachment ? res.data.jtTaskAttachment.split(',') : []
                const arr = []
                for (let i = 0; i < fileList.length; i++) {
                    const element = fileList[i];
                    arr.push({
                        url: element,
                        name: `uploaded${i}.png`,
                        type: 'image',
                    })
                }
                this.setData({
                    id: options.id,
                    jtTaskName: res.data.jtTaskName,
                    jtTaskIntroduction: res.data.jtTaskIntroduction,
                    completionMethod: res.data.completionMethod || 0,
                    datetime: new Date(res.data.jtTaskDeadline).getTime(),
                    datetimeText: res.data.jtTaskDeadline.slice(0, -3),
                    fileList: arr,
                })
            })
        }
    },

    handleAdd(e) {
        const {
            fileList
        } = this.data;
        const {
            files
        } = e.detail;

        // 方法2：每次选择图片都上传，展示每次上传图片的进度
        files.forEach(file => this.onUpload(file))
    },
    onUpload(file) {
        const {
            fileList
        } = this.data;

        this.setData({
            fileList: [...fileList, {
                ...file,
                status: 'loading'
            }],
        });
        const {
            length
        } = fileList;

        const task = wx.uploadFile({
            url: 'https://task.51jingcheng.com/oss/imgUpload', // 仅为示例，非真实的接口地址
            filePath: file.url,
            name: 'file',
            formData: {
                user: 'test'
            },
            success: (res) => {
                console.log(res.data)
                const result = res.data ? JSON.parse(res.data) : {
                    url: ''
                }
                this.setData({
                    [`fileList[${length}].status`]: 'done',
                    [`fileList[${length}].url`]: result.url,
                });
            },
        });
        task.onProgressUpdate((res) => {
            this.setData({
                [`fileList[${length}].percent`]: res.progress,
            });
        });
    },

    onChange(event) {
        const {
            value
        } = event.detail;

        this.setData({
            completionMethod: value
        });
    },

    handleRemove(e) {
        const {
            index
        } = e.detail;
        const {
            fileList
        } = this.data;
        fileList.splice(index, 1);
        this.setData({
            fileList,
        });
    },

    showPicker(e) {
        const {
            mode
        } = e?.currentTarget?.dataset;
        this.setData({
            mode,
            [`${mode}Visible`]: true,
        });
    },
    hidePicker() {
        const {
            mode
        } = this.data;
        this.setData({
            [`${mode}Visible`]: false,
        });
    },
    onConfirm(e) {
        const {
            value
        } = e?.detail;
        const {
            mode
        } = this.data;

        this.setData({
            [mode]: value,
            [`${mode}Text`]: value,
        });

        this.hidePicker();
    },

    formSubmit(e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
        const values = {
            ...e.detail.value
        }

        for (const key in values) {
            if (Object.hasOwnProperty.call(values, key)) {
                const element = values[key];
                if (!element) {
                    wx.showToast({
                        icon: 'none',
                        title: '任务名称/任务说明不能为空',
                    })
                    return
                }
            }
        }
        if (!this.data.datetimeText) {
            wx.showToast({
                icon: 'none',
                title: '请选择要求完成时间',
            })
            return
        }

        const param = {
            id: this.data.id,
            jtTaskName: values.name,
            jtTaskIntroduction: values.tips,
            completionMethod: this.data.completionMethod,
            jtTaskDeadline: this.data.datetimeText + ':00',
            jtTaskAttachment: this.data.fileList.map(e => e.url).join(','),
            jtTaskState: 1
        }

        saveTask(param).then(res => {
            wx.showToast({
                icon: 'none',
                title: '保存成功',
            }).then(res => {
                wx.navigateBack()
            })
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})