MD_worker/pages/launchApplication/index.vue

<template>
    <view class="content">
        <view class="title">
            服务信息
        </view>
        <up-form :model="form" labelWidth="70" ref="uFormRef">
            <up-form-item v-if="form.isonlinesales || userType == 1" label="是否补贴" prop="isallowance">
                <up-radio-group v-model="form.isallowance">
                    <up-radio :customStyle="{ marginLeft: '12px' }"
                        v-for="(item) in [{ label: '补贴', value: 1 }, { label: '不补贴', value: 0 }]" :key="item.value"
                        :label="item.label" :name="item.value">
                    </up-radio>
                </up-radio-group>
            </up-form-item>

            <up-form-item v-if="userType == 1" label="网销工单" prop="isonlinesales">
                <up-radio-group v-model="form.isonlinesales">
                    <up-radio :customStyle="{ marginLeft: '12px' }"
                        v-for="(item) in [{ label: '是', value: 1 }, { label: '否', value: 0 }]" :key="item.value"
                        :label="item.label" :name="item.value">
                    </up-radio>
                </up-radio-group>
            </up-form-item>

            <up-form-item v-if="form.isonlinesales || userType == 1" label="指定服务商">
                <view class="picker" hover-class="navigator-hover" @click="selectServiceProvider">
                    {{ serviceProviders.name || '选择指定的服务商进行服务' }}
                </view>
            </up-form-item>

            <up-form-item label="服务类型" :required="rules.servicetype[0].required" prop="servicetype">
                <up-radio-group v-model="form.servicetype" @change="servicetypeChange">
                    <up-radio :customStyle="{ marginLeft: '12px' }" v-for="(item) in servertypes" :key="item"
                        :label="item" :name="item">
                    </up-radio>
                </up-radio-group>
            </up-form-item>

            <up-form-item label="产品品类" :required="rules.class1[0].required" prop="class1">
                <up-radio-group v-model="form.class1">
                    <up-radio :customStyle="{ marginLeft: '12px' }" v-for="(item) in class1" :key="item.value"
                        :label="item.value" :name="item.value">
                    </up-radio>
                </up-radio-group>
            </up-form-item>

            <up-form-item v-if="rules.class2[0].required" label="故障类型" :required="rules.class2[0].required"
                prop="class2">
                <picker class="picker" mode="selector" :range="class2" range-key="value" @change="changeClass2">
                    {{ form.class2 || '请选择故障类型' }}
                </picker>
            </up-form-item>

            <view class="title">
                基础信息
            </view>

            <up-form-item label="序列号" :required="rules.sku[0].required" prop="sku">
                <up-input v-model="form.sku" placeholder="序列号" clearable @blur="skuConfirm">
                    <template #suffix>
                        <view style="display: flex;align-items: center;">
                            <up-icon name="scan" color="#2979ff" size="28" @click="openScan" />
                        </view>
                    </template>
                </up-input>
            </up-form-item>

            <up-form-item label="保修状态" v-if="userType == 1" prop="warrantystatus">
                <up-radio-group v-model="form.warrantystatus">
                    <up-radio :customStyle="{ marginLeft: '12px' }" v-for="(item) in [{ label: '保内' }, { label: '保外' }]"
                        :key="item.label" :label="item.label" :name="item.label">
                    </up-radio>
                </up-radio-group>
            </up-form-item>

            <up-form-item label="客户名称" :required="rules.scenecontact[0].required" prop="scenecontact">
                <up-input v-model="form.scenecontact" placeholder="客户名称" clearable />
            </up-form-item>

            <up-form-item label="手机号" :required="rules.scenecontactphonenumber[0].required"
                prop="scenecontactphonenumber">
                <up-input type="number" v-model="form.scenecontactphonenumber" placeholder="联系人电话" clearable>
                    <template #suffix>
                        <up-button type="success" :disabled="!form.scenecontactphonenumber" size="mini" text="查询带入客户信息"
                            @click="phonenumberConfirm" />
                    </template>
                </up-input>
            </up-form-item>

            <up-form-item label="省市县" :required="rules.province[0].required" prop="province">
                <picker class="picker" mode="region" :value="[form.province, form.city, form.county]"
                    @change="changeRegion">
                    {{ form.province ? [form.province, form.city, form.county].join("-") : '选择省市县' }}
                </picker>
            </up-form-item>

            <up-form-item label="详细地址" prop="address" :required="rules.address[0].required">
                <up-textarea maxlength="499" v-model="form.address" placeholder="详细地址" autoHeight height="20" />
            </up-form-item>

            <up-form-item label="" prop="remarks">
                <up-textarea v-model="form.remarks" placeholder="如有特殊需求，您可在此处留言" count></up-textarea>
            </up-form-item>

        </up-form>
        <view style="padding-bottom: 50px;width: 350rpx;margin: 40rpx auto 0;" @click="save">
            <My-button text="保存" :loading="loading" />
        </view>
    </view>

    <up-popup :show="products.length" @close="closePopup" :customStyle="{
        width: '80vw',
    }" mode="right">
        <scroll-view :safeAreaInsetBottom="false" scroll-y style="width: 100%;height: 100vh;">
            <view class="product" v-for="item in products" :key="item.itemid" hover-class="navigator-hover"
                @click="changeItem(item)">
                <view class="itemname">
                    {{ item.itemname }}
                </view>
                <view class="row">
                    序列号: {{ item.sku || '--' }}
                </view>
                <view class="row">
                    产品型号: {{ item.model || '--' }}
                </view>
                <view class="row">
                    经销商: {{ item.enterprisename || '--' }}
                </view>
                <view class="row">
                    用户信息: {{ item.name || '--' }} {{ item.phonenumber || '--' }}
                </view>
            </view>
            <view style="height: 30px;" />
        </scroll-view>
    </up-popup>

    <up-popup :show="customers.length" @close="closeCustomers" :customStyle="{
        width: '80vw',
    }" mode="right">
        <scroll-view :safeAreaInsetBottom="false" scroll-y style="width: 100%;height: 100vh;">
            <view class="product" v-for="item in customers" :key="item.sa_customersid" hover-class="navigator-hover"
                @click="selectCustomer(item)">
                <view class="itemname">
                    {{ item.name }}
                </view>
                <view class="row">
                    手机号: {{ item.phonenumber || '--' }}
                </view>
                <view class="row">
                    搜索项: {{ item.province + item.city + item.county || '--' }}
                </view>
                <view class="row">
                    详细地址: {{ item.address || '--' }}
                </view>
            </view>
            <view style="height: 30px;" />
        </scroll-view>
    </up-popup>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onShow, onLoad } from '@dcloudio/uni-app';

const userType = ref(uni.getStorageSync('userMsg').usertype || 0);

const uFormRef = ref(null);
const form = reactive({
    sa_serviceorderid: 0,
    sa_orderid: 0,
    servicetype: '安装', // 服务类型
    class1: '', // 产品品类
    class2: '', // 故障类型
    sku: '', // 序列号
    itemid: '', // 产品ID
    itemname: '', // 产品名称
    itemno: '', // 产品编号
    model: '', // 产品型号
    cardno: '', // 保修卡号
    scenecontact: '', // 联系人
    scenecontactphonenumber: '', // 联系人电话
    province: '', // 省
    city: '', // 市
    county: '', // 县
    address: '', // 详细地址
    remarks: '',
    sys_enterpriseid: '',
    customername: "", // 客户名称
    customerphonenumber: "", // 客户电话
    sa_customersid: 0,
    isonlinesales: 0, // 是否网销客户
    isallowance: 0, // 是否补贴
    warrantystatus: "", // 保修状态
});

//服务商
const serviceProviders = ref({
    name: '',
    id: ''
});

function selectServiceProvider() {
    uni.navigateTo({
        url: '/pages/launchApplication/selectServiceProvider'
    });
    $Http.onSelectServiceProvider = (provider) => {
        serviceProviders.value.name = provider.enterprisename;
        serviceProviders.value.id = provider.sys_enterpriseid;
        console.log("选择服务商", serviceProviders.value);
        uni.navigateBack();
        $Http.onSelectServiceProvider = null;
    }
}

$Http.basic({
    "classname": "common.usercenter.usercenter",
    "method": "queryUserMsg",
    "content": {}
}).then(res => {
    console.log("用户信息", res);
    if (res.code === 1) {
        form.sys_enterpriseid = res.data.hr.sys_enterpriseid;
        if (res.data.agent.type == '网销') {
            form.isonlinesales = 1;
        }
        // 在enterprise中取省市县
        form.province = res.data.enterprise.province;
        form.city = res.data.enterprise.city;
        form.county = res.data.enterprise.county;
    }
})

let customers = ref([]); // 客户列表

function phonenumberConfirm() {
    $Http.basic({
        "id": 2025121118401503,
        "content": {
            "nocache": true,
            "pageNumber": 1,
            "pageSize": 10, "where": { "phonenumber": form.scenecontactphonenumber }
        }
    }).then(res => {
        console.log("根据电话查询客户信息", res)
        if (res.code !== 1) {
            return uni.showToast({ title: res.msg, icon: 'none' });
        }
        if (res.data.length === 0) {
            return uni.showToast({ title: '未查询到对应的客户信息', icon: 'none' });
        } else if (res.data.length === 1) {
            selectCustomer(res.data[0]);
        } else {
            customers.value = res.data;
        }
    })
}

function closeCustomers() {
    customers.value = [];
}

function selectCustomer(item) {
    let list = ['name', 'phonenumber', 'province', 'city', 'county', 'sa_customersid', 'address'];
    list.forEach(key => {
        if (key == 'name') {
            form['customername'] = item[key] || form['customername'] || '';
            form['scenecontact'] = item[key] || form['scenecontact'] || '';
        } else if (key == 'phonenumber') {
            form['customerphonenumber'] = item[key] || form['customerphonenumber'] || '';
            form['scenecontactphonenumber'] = item[key] || form['scenecontactphonenumber'] || '';
        } else if (['province', 'city', 'county'].includes(key)) {
            form[key] = item[key] || form[key] || '';
        } else {
            form[key] = item[key] || '';
        }
    });
    uni.showToast({ title: '客户信息已带入', icon: 'none' });
    closeCustomers();
}

const rules = reactive({
    servicetype: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
    class1: [{ required: true, message: '请选择产品品类', trigger: 'change' }],
    class2: [{ required: false, message: "请选择故障类型", trigger: 'change' }],
    sku: [{ required: false, message: '请输入序列号', trigger: 'blur' }],
    itemno: [{ required: false, message: '请输入产品编号', trigger: 'blur' }],
    itemname: [{ required: true, message: '请选择产品', trigger: 'blur' }],
    model: [{ required: false, message: '请输入产品型号', trigger: 'blur' }],
    cardno: [{ required: false, message: '请选择保修卡号', trigger: 'blur' }],
    province: [{ required: true, message: '请选择省市县', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    customername: [{ required: false, disabled: true, message: '请输客户名称', trigger: 'blur' }],
    customerphonenumber: [{ required: false, message: '请输入客户电话', trigger: 'blur', pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的手机号码' }],
    scenecontact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    scenecontactphonenumber: [{ required: true, message: '请输入联系人电话', trigger: 'blur', pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的手机号码' }],
});

// 切换故障类型
function changeClass2(e) {
    let index = e.detail.value - 0;
    form.class2 = class2.value[index].value;
}

// 切换服务类型
function servicetypeChange(type) {
    rules.class2[0].required = type == '维修';
    uFormRef.value.setRules(rules);
}

const class1 = ref(''),
    servertypes = ref(['安装', '维修', '清洗']),
    class2 = ref('');

onLoad((options) => {
    console.log(options)
    if (options.sku) {
        form.sku = options.sku;
        skuConfirm();
    }
})

onShow(() => {
    $Http.getClass('servertype').then(res => {
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
        servertypes.value = res.data.map(v => v.value);
    });

    $Http.getClass('prodclass1').then(res => {
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
        class1.value = res.data;
    });

    $Http.getClass('faulttype').then(res => {
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
        class2.value = res.data;
        uFormRef.value.setRules(rules);
    });
});

function changeRegion(e) {
    form.province = e.detail.value[0];
    form.city = e.detail.value[1];
    form.county = e.detail.value[2];
}

// 保存
let loading = ref(false);
let querySkuing = false;

function save() {
    if (querySkuing) {
        return uni.showToast({ title: '正在查询产品信息，请稍后再试', icon: 'none' });
    }
    if (loading.value) return;
    uFormRef.value.validate().then(valid => {
        if (valid) wx.showModal({
            content: '请确认预约信息正确以便后续服务，是否确认提交？',
            title: '提示',
            success: ({ confirm }) => {
                if (confirm) {
                    form.customername = form.scenecontact;
                    form.customerphonenumber = form.scenecontactphonenumber;
                    form.name = form.customername;
                    form.phonenumber = form.scenecontactphonenumber;
                    form.sa_customersid = form.sa_customersid || 0;
                    form.sys_enterpriseid_service = serviceProviders.value.id || 0;
                    form.sys_enterpriseid = form.sys_enterpriseid || 0;
                    let content = {
                        ...form,
                    };
                    loading.value = true;
                    $Http.basic({
                        "id": "20230206091403",
                        content
                    }).then(res => {
                        loading.value = false;
                        console.log("提交申请单", res);
                        if (res.code !== 1) {
                            uni.showToast({ title: res.code !== 1 ? res.msg : "保存成功", icon: 'none', mask: res.code == 1 });
                        } else {
                            $Http.basic({
                                id: 20230206101403,
                                content: {
                                    sa_serviceorderid: res.data.sa_serviceorderid,
                                    backreason: "",
                                    issumbit: 1
                                }
                            }).then(res1 => {
                                console.log("提交工单", res1);
                            })
                            if (form.isonlinesales) {
                                uni.showModal({
                                    content: "预约申请已提交, 继续创建新的预约申请？",
                                    confirmText: '继续创建',
                                    cancelText: '返回',
                                    success: (success) => {
                                        if (success.confirm) {
                                            uni.redirectTo({
                                                url: '/pages/launchApplication/index',
                                            });
                                        } else {
                                            uni.navigateBack();
                                        }
                                    },
                                })
                            } else {
                                uni.showModal({
                                    content: "预约申请已提交，立即前往还是继续创建？",
                                    confirmText: '立即前往',
                                    cancelText: '继续创建',
                                    success: (success) => {
                                        if (success.confirm) {
                                            uni.redirectTo({
                                                url: `/pages/generalServices/detail?id=${res.data.sa_serviceorderid}`,
                                            });
                                        } else {
                                            uni.redirectTo({
                                                url: '/pages/launchApplication/index',
                                            });
                                        }
                                    },
                                })
                            }
                        }
                    }).catch(err => {
                        loading.value = false;
                        console.error("保存工单失败", err);
                        uni.showToast({ title: '保存失败，请稍后重试', icon: 'none' });
                    });
                }
            },
        })
    })
}


function skuConfirm() {
    if (form.sku) {
        if (form.sku == '') return;
        querySkuing = true;

        $Http.basic({
            "id": 2025121515015903,
            "content": {
                "sku": form.sku
            }
        }).then(s => {
            console.log("预查询sku", s)
            if (s.code !== 1) {
                uni.showToast({ title: s.msg, icon: 'none' })
                form.sku = '';
                querySkuing = false;
                return
            };
            $Http.basic({
                "id": 20221215101003,
                "content": {
                    "where": {
                        "sku": form.sku
                    }
                }
            }).then(res => {
                console.log("查询sku", res)
                uni.hideLoading();
                if (res.code !== 1) {
                    uni.showToast({ title: res.msg, icon: 'none' })
                    form.sku = '';
                    querySkuing = false;
                    return
                };
                if (res.data.length === 0 || res.data[0].sku !== form.sku) {
                    uni.showToast({ title: '未查询到对应的产品信息，请确认序列号是否正确', icon: 'none' });
                    form.sku = '';
                    querySkuing = false;
                    return;
                }
                changeItem(res.data[0]);
            })
        })
    } else {
        form.sku = '';
    }
}

let products = ref([]); // 产品列表
function closePopup() {
    products.value = [];
}
function changeItem(item) {
    let list = ['sku', 'cardno', 'itemid', 'name', 'phonenumber', 'itemname', 'province', 'city', 'county', 'itemno', 'sa_customersid', 'address', 'warrantystatus'];
    list.forEach(key => {
        if (key == 'name') {
            form['customername'] = item[key] || form['customername'] || '';
            form['scenecontact'] = item[key] || form['scenecontact'] || '';
        } else if (key == 'phonenumber') {
            form['customerphonenumber'] = item[key] || form['customerphonenumber'] || '';
            form['scenecontactphonenumber'] = item[key] || form['scenecontactphonenumber'] || '';
        } else if (['province', 'city', 'county'].includes(key)) {
            form[key] = item[key] || form[key] || '';
        } else {
            form[key] = item[key] || '';
        }
    });
    querySkuing = false;
    console.log("选择产品", form);
    closePopup();
}

function openScan() {
    uni.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode', 'barCode'],
        success: (res) => {
            console.log("扫码结果", res);
            if (res.result) {
                form.sku = res.result;
                skuConfirm();
            } else {
                uni.showToast({ title: '扫码失败，请重试', icon: 'none' });
            }
        },
        fail: (err) => {
            console.error("扫码失败", err);
            uni.showToast({ title: '扫码失败，请重试', icon: 'none' });
        }
    });
}
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh;
    background: #fff;


    .picker {
        font-size: 28rpx;
        color: #606266;
        padding: 9px;
        border-radius: 8rpx;
        border: 1rpx solid #2979FF;
        color: #2979FF;
    }

    .title {
        font-size: 34rpx;
        color: #4773EE;
        margin: 20rpx 0;
        font-weight: bold;
    }

    .region {
        font-size: 28rpx;
        color: #606266;
        padding: 10px 9px;
        width: 280px;
        box-sizing: border-box;
        border-radius: 8rpx;
        border: 1rpx solid #dadbde !important;
    }
}

.product {
    padding: 20rpx;
    background: #fff;
    margin: 10rpx 0;
    border-radius: 8rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .itemname {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .row {
        font-size: 28rpx;
        color: #666;
        margin-top: 8rpx;
    }
}

.my-but {
    line-height: 44rpx;
    padding: 0 20rpx;
    background: #2979ff;
    color: #fff;
    border-radius: 8rpx;
    margin-right: 10rpx;
    font-size: 24rpx;
}
</style>