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

<template>
    <view class="common-page" style="padding: 0;">
        <view class="form-page">
            <u-form ref="formRef" :model="form" :rules="rules" labelPosition="left" labelWidth="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="carrier" required>
                    <u-input :value="carrierText" readonly suffixIcon="arrow-down" placeholder="请选择"
                        @click="showCarrierPicker = true"></u-input>
                </u-form-item>
                <u-form-item label="验货状态：" prop="verifyStatus" required>
                    <u-input :value="verifyText" readonly suffixIcon="arrow-down" placeholder="请选择"
                        @click="showVerifyPicker = true"></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>
                <view class="divider"></view>
                <u-form-item label="指派给：" prop="assignTo" required>
                    <u-input :value="assignText" readonly suffixIcon="arrow-down" placeholder="请选择"
                        @click="showAssignPicker = true"></u-input>
                </u-form-item>
            </u-form>
        </view>

        <u-picker :show="showCarrierPicker" :columns="[carrierOptions]" title="选择承运商" @confirm="onPickCarrier"
            @cancel="showCarrierPicker = false" @close="showCarrierPicker = false"></u-picker>
        <u-picker :show="showVerifyPicker" :columns="[verifyOptions]" title="选择验货状态" @confirm="onPickVerify"
            @cancel="showVerifyPicker = false" @close="showVerifyPicker = false"></u-picker>
        <u-picker :show="showTaskTypePicker" :columns="[taskTypeOptions]" title="选择任务类型" @confirm="onPickTaskType"
            @cancel="showTaskTypePicker = false" @close="showTaskTypePicker = false"></u-picker>
        <u-picker :show="showAssignPicker" :columns="[assignOptions]" title="指派给" @confirm="onPickAssign"
            @cancel="showAssignPicker = false" @close="showAssignPicker = 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: '',
    carrier: '',
    verifyStatus: '',
    taskType: '',
    taskDetail: '',
    images: [],
    assignTo: ''
})

const rules = {
    waybillCode: [{ required: true, message: '请输入快递单号' }],
    carrier: [{ required: true, message: '请选择承运商' }],
    verifyStatus: [{ required: true, message: '请选择验货状态' }],
    taskType: [{ required: true, message: '请选择任务类型' }],
    taskDetail: [{ required: true, message: '请输入任务详情' }],
    images: [{ type: 'array', required: true, min: 1, message: '请上传图片' }],
    assignTo: [{ required: true, message: '请选择指派对象' }]
}

const carrierOptions = [
    { text: '圆通', value: 'YTO' },
    { text: '中通', value: 'ZTO' },
    { text: '申通', value: 'STO' },
    { text: '韵达', value: 'YUNDA' },
    { text: '京东', value: 'JD' }
]
const verifyOptions = [
    { text: '已验货', value: 'VERIFIED' },
    { text: '未验货', value: 'UNVERIFIED' }
]
const taskTypeOptions = [
    { text: '部分发货', value: 'PART_SHIP' },
    { text: '少发', value: 'LESS_SHIP' },
    { text: '破损', value: 'BROKEN' },
    { text: '其他', value: 'OTHER' }
]
const assignOptions = [
    { text: 'Agoni', value: 'Agoni' },
    { text: '张三', value: 'ZhangSan' },
    { text: '李四', value: 'LiSi' }
]

const showCarrierPicker = ref(false)
const showVerifyPicker = ref(false)
const showTaskTypePicker = ref(false)
const showAssignPicker = ref(false)

const carrierText = ref('')
const verifyText = ref('')
const taskTypeText = ref('')
const assignText = ref('')

const onPickCarrier = (e) => {
    const cell = e.value?.[0]
    form.value.carrier = cell?.value || ''
    carrierText.value = cell?.text || ''
    showCarrierPicker.value = false
}
const onPickVerify = (e) => {
    const cell = e.value?.[0]
    form.value.verifyStatus = cell?.value || ''
    verifyText.value = cell?.text || ''
    showVerifyPicker.value = false
}
const onPickTaskType = (e) => {
    const cell = e.value?.[0]
    form.value.taskType = cell?.value || ''
    taskTypeText.value = cell?.text || ''
    showTaskTypePicker.value = false
}
const onPickAssign = (e) => {
    const cell = e.value?.[0]
    form.value.assignTo = cell?.value || ''
    assignText.value = cell?.text || ''
    showAssignPicker.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: 'mall' }
    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 || ''
    uni.setNavigationBarTitle({ title: '提交工单' })
})
</script>

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

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