shuhi-app/pages/order/recycle/created.vue

<template>
    <view class="common-page" style="padding: 0;">
        <view class="form-page">
            <u-form ref="formRef" :model="form" :rules="rules" labelPosition="left" label-width="85px">
                <u-form-item label="快递单号：" prop="waybillCode" required>
                    <u-input v-model="form.waybillCode" placeholder="请输入快递单号" clearable></u-input>
                </u-form-item>
                <u-form-item label="订单编号：" prop="orderId" required>
                    <u-input v-model="form.orderId" placeholder="请输入订单编号" clearable></u-input>
                </u-form-item>
                <u-form-item label="任务类型：" prop="taskType" required>
                    <u-input :value="taskTypeText" readonly suffixIcon="arrow-down" placeholder="请选择"
                        @click="showTaskTypePicker = true"></u-input>
                </u-form-item>
                <u-form-item label="任务详情：" prop="taskDetail" required>
                    <u-textarea v-model="form.taskDetail" placeholder="请输入" :height="120"
                        :autoHeight="true"></u-textarea>
                </u-form-item>
                <u-form-item label="上传图片：" prop="images" required>
                    <cy-upload :filename="form.images" @update:filename="form.images = $event" />
                </u-form-item>
            </u-form>
        </view>

        <u-picker :show="showTaskTypePicker" :columns="[taskTypeOptions]" title="选择任务类型" @confirm="onPickTaskType"
            @cancel="showTaskTypePicker = false" @close="showTaskTypePicker = false"></u-picker>

        <view class="fixed-bottom">
            <u-button type="warning" size="large"  @click="onCancel">取消</u-button>
            <u-button type="primary" size="large" :loading="submitting" @click="onSubmit">提交</u-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CyUpload from '@/components/cy-upload/index.vue'

const formRef = ref(null)
const submitting = ref(false)

const form = ref({
    waybillCode: '',
    orderId: '',
    taskType: '',
    taskDetail: '',
    images: []
})

const rules = {
    waybillCode: [{ required: true, message: '请输入快递单号' }],
    orderId: [{ required: true, message: '请输入订单编号' }],
    taskType: [{ required: true, message: '请选择任务类型' }],
    taskDetail: [{ required: true, message: '请输入任务详情' }],
    images: [{ type: 'array', required: true, min: 1, message: '请上传图片' }]
}

const taskTypeOptions = [
    { text: '书单不符', value: 'MISMATCH' },
    { text: '破损', value: 'BROKEN' },
    { text: '缺件', value: 'LACK' },
    { text: '其他', value: 'OTHER' }
]

const showTaskTypePicker = ref(false)
const taskTypeText = ref('')
const onPickTaskType = (e) => {
    const cell = e.value?.[0]
    form.value.taskType = cell?.value || ''
    taskTypeText.value = cell?.text || ''
    showTaskTypePicker.value = false
}

const onCancel = () => {
    uni.navigateBack()
}

const onSubmit = async () => {
    if (submitting.value) return
    try {
        await formRef.value?.validate?.()
    } catch (e) {
        return
    }
    submitting.value = true
    const payload = { ...form.value, type: 'recycle' }
    try {
        const res = await uni.$u.http.post('/app/workorder/create', payload)
        if (res?.code === 200) {
            uni.$u.toast('提交成功')
            uni.navigateBack()
        } else {
            uni.$u.toast(res?.msg || '提交失败')
        }
    } catch (err) {
        uni.$u.toast('网络错误，已本地保存')
    } finally {
        submitting.value = false
    }
}

onLoad((options) => {
    form.value.waybillCode = options?.waybillCode || ''
    form.value.orderId = options?.orderId || ''
    uni.setNavigationBarTitle({ title: '提交工单' })
})
</script>

<style lang="scss" scoped>
.form-page {
    padding: 24rpx 24rpx 140rpx;
    background: #ffffff;
}

.divider {
    height: 16rpx;
    background: #f4f5f5;
    margin: 20rpx 0;
}
</style>