md-h5/pages/bookingService/index.vue

<template>
    <My-shade />
    <view class="content">
        <view class="title">
            服务信息
        </view>
        <up-form :model="form" labelWidth="70" ref="uFormRef">
            <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" @change="class1Change">
                    <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 class="serial-number-guide" @click="showSerialNumberGuide">
                    <span>如何查看产品编号</span>
                    <up-icon name="question-circle" color="#2979ff" size="24rpx" />
                </view>
            </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;">
                            <view v-if="form.servicetype && form.servicetype != '安装' && WuserRecord.myProducts >= 2"
                                class="my-but" hover-class="navigator-hover" @click="toSelectMyProduct">
                                选择其他产品
                            </view>
                            <up-icon name="scan" color="#2979ff" size="28" @click="openScan" />
                        </view>
                    </template>
                </up-input>
            </up-form-item>

            <up-form-item label="产品名称" prop="itemname" :required="rules.itemname[0].required">
                <up-input v-model="form.itemname" disabled placeholder="请输入产品编号或选择产品">
                </up-input>
            </up-form-item>

            <up-form-item label="产品型号" prop="model">
                <up-input v-model="form.model" disabled placeholder="请输入产品编号或选择产品" />
            </up-form-item>

            <view class="title">
                联系人信息
            </view>

            <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 />
            </up-form-item>


            <up-form-item label="省市县" :required="rules.province[0].required" prop="province">
                <My_region @select="changeRegion">
                    <view class="region">
                        {{ form.province ? [form.province, form.city, form.county].join("-")
                            : '选择省市县' }}
                    </view>
                </My_region>
            </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" :required="rules.remarks[0].required">
                <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="onselectSku(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="myProducts.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 myProducts" :key="item.itemid" hover-class="navigator-hover"
                @click="onSelectedProduct(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="showGuidePopup" @close="showGuidePopup = false"  zIndex="1"  mode="center"
        :customStyle="{ width: '85%', borderRadius: '16rpx' }">
        <view class="popup-content">
            <view class="popup-title">如何查看产品编号</view>
            <view class="popup-subtitle">请选择查看方式</view>
            <view class="option-list">
                <view v-for="option in imageOptions" :key="option.value" class="option-item"
                    @click="selectSerialNumberOption(option)">
                    <span>{{ option.label }}</span>
                    <view class="option-icon">
                        <up-icon name="arrow-right" color="#2979ff" size="24rpx" />
                    </view>
                </view>
            </view>
            <view class="popup-footer">
                <view class="close-button" @click="showGuidePopup = false">关闭</view>
            </view>
        </view>
    </up-popup>


</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onShow } from '@dcloudio/uni-app';
const WuserRecord = ref(uni.getStorageSync('WuserRecord') || {
    name: '',
    phonenumber: '',
    address: "",
    province: '',
    city: '',
    county: '',
    sys_enterpriseid: 0,
    sa_customersid: 0
}),
    WuserMsg = wx.getStorageSync('WuserMsg');

const uFormRef = ref(null);
const showGuidePopup = ref(false);
const imageOptions = [
    { value: 'product', label: '产品机身-产品台面右上角', image: '/static/image/产品台面右上角.jpg' },
    { value: 'manual', label: '说明书-最后一页', image: '/static/image/说明书最后一页.jpg' },
    { value: 'package', label: '外包装-侧面白色标贴', image: '/static/image/外包装侧面白色标贴.png' }
];
const form = reactive({
    sa_serviceorderid: 0,
    sa_orderid: 0,
    servicetype: '', // 服务类型
    class1: '', // 产品品类
    class2: '', // 故障类型
    sku: '', // 产品编号
    itemid: '', // 产品ID
    itemname: '', // 产品名称
    itemno: '', // 产品编号
    model: '', // 产品型号
    cardno: '', // 保修卡号
    scenecontact: '', // 现场联系人
    scenecontactphonenumber: WuserRecord.value.phonenumber || WuserMsg.phonenumber || '', // 联系人电话
    customername: WuserRecord.value.name || "", // 客户名称
    customerphonenumber: WuserRecord.value.phonenumber || "", // 客户电话
    province: '', // 省
    city: '', // 市
    county: '', // 县
    address: '', // 详细地址
    remarks: '',
    sa_customersid: WuserRecord.value.sa_customersid || 0,
    sys_enterpriseid: 0,
});

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: false, 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' }],
    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: '请输入正确的手机号码' }],
    remarks: [{ required: true, message: '产品问题描述及服务需求', trigger: 'blur' }],
});

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

// 设置产品编号必填规则
function setItemnoRequired() {
    // 产品品类选择集成灶的情况下，产品编号必填
    if (form.class1 == '集成灶') {
        rules.sku[0].required = true;
    } else {
        // 其他品类仅服务类型为安装时必填
        rules.sku[0].required = form.servicetype == '安装';
    }
    uFormRef.value.setRules(rules);
}

// 切换服务类型
function servicetypeChange(type) {
    rules.class2[0].required = type == '维修';
    rules.sku[0].required = type == '安装';
    rules.remarks[0].required = type == '维修';
    // 更新产品编号必填规则
    setItemnoRequired();
}

// 切换产品品类
function class1Change() {
    // 更新产品编号必填规则
    setItemnoRequired();
}

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

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

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

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

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

function save() {
    if (querySku.value === false) 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 = form.sys_enterpriseid || WuserRecord.value.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 {
                            uni.showModal({
                                showCancel: false,
                                content: "预约申请已提交，请保持电话畅通，以便后续服务人员联系您！",
                                success: (success) => {
                                    uni.navigateBack();
                                },
                            })
                            $Http.basic({
                                id: 20230206101403,
                                content: {
                                    sa_serviceorderid: res.data.sa_serviceorderid,
                                    backreason: "",
                                    issumbit: 1
                                }
                            }).then(res1 => {
                                console.log("提交工单", res1);
                            })
                        }
                    }).catch(err => {
                        loading.value = false;
                        console.error("保存工单失败", err);
                        uni.showToast({ title: '保存失败，请稍后重试', icon: 'none' });
                    });
                }
            },
        })
    })

}

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

let querySku = ref(true); // SKU是否正确

function skuConfirm() {
    if (form.sku) {
        ['contact', 'serviceenterprisename', 'cardno', 'itemid', 'itemname', 'itemno', 'model', 'phonenumber', 'unitname', 'spec'].forEach(key => {
            form[key] = '';
        });
        if (form.sku == '') return;
        uni.showLoading({
            title: '查询中...',
            mask: true,
        });
        $Http.basic({
            "id": 2025080813465203,
            "content": {
                "pageNumber": 1,
                "pageSize": 1,
                "where": {
                    sku: form.sku,
                }
            }
        }).then(res => {
            console.log("查询sku", res)
            uni.hideLoading();
            if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
            if (res.data.length === 0 || res.data[0].sku !== form.sku) {
                uni.showToast({ title: '未找到对应的产品信息', icon: 'none' });
                querySku.value = false;
                return;
            }
            querySku.value = true;
            onselectSku(res.data[0])
        })
    } else {
        form.sku = '';
    }
}

function onselectSku(item) {
    item.contact = item.name;
    item.serviceenterprisename = item.serviceenterprisename || item.enterprisename;
    ['customername', 'customerphonenumber', 'cardno', 'itemid', 'model', 'itemname', 'itemno', 'sa_customersid', 'sys_enterpriseid'].forEach(key => {
        form[key] = item[key] || '';
    });
    uni.showToast({ title: '成功带入产品信息', icon: 'none' });
    querySku.value = true;
    closePopup();
    if (item.sa_agentsid) {
        $Http.basic({
            "classname": "webmanage.sale.agents.agents",
            "method": "query_agentMain",
            "content": { "nocache": true, "sa_agentsid": item.sa_agentsid },
        }).then(res => {
            console.log("经销商档案id", res)
            if (res.code !== 1) return;
            if (res.data.type == '网销') {
                form.isonlinesales = 1;
            } else {
                form.isonlinesales = 0;
            }
        })
    } else {
        form.isonlinesales = 0;
    }
}
let products = ref([]); // 产品列表
function closePopup() {
    products.value = [];
    myProducts.value = [];
}

function openScan() {
    uni.navigateTo({
        url: '/pages/bookingService/getCode'
    });
    $Http.getCode = (code) => {
        form.sku = code || '';
        skuConfirm();
        uni.navigateBack()
        delete $Http.getCode;
    }
}

function validatePhoneNumber(value) {
    // 空值/非字符串直接返回false
    if (!value || typeof value !== 'string') return false;
    const trimmedValue = value.trim();

    // 1. 精准手机号校验（使用你提供的规则）
    const mobileReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    if (mobileReg.test(trimmedValue)) {
        return true;
    }

    // 2. 手机号不通过，校验座机号（0开头区号+3-4位区号+7-8位号码）
    const cleanedTel = trimmedValue.replace(/[- ]/g, ''); // 去除分隔符
    const telReg = /^0\d{2,3}\d{7,8}$/; // 座机号规则：0开头区号（3-4位）+ 7-8位号码
    return telReg.test(cleanedTel);
}

let myProducts = ref([]); // 我的产品列表
if (WuserRecord.value.sa_customersid) $Http.basic({
    id: 2025082115363003,
    content: {
        sa_customersid: WuserRecord.value.sa_customersid,
        "pageNumber": 1,
        "pageSize": 20,
        "where": {
            "status": '',
            "condition": ""
        }
    }
}).then(res => {
    console.log("我的产品", res)
    myProducts.value = res.data;
    if (res.code == 1) {
        if (res.data.length == 1) {
            onSelectedProduct(res.data[0]);
        } else {
            myProducts.value = res.data;
            WuserRecord.value.myProducts = res.data.length;
        }
    }
})

function toSelectMyProduct() {
    uni.navigateTo({
        url: '/pages/select/myProduct'
    });
    $Http.onSelected = (item) => {
        onSelectedProduct(item)
        uni.navigateBack()
        delete $Http.onSelected
    }
}
function onSelectedProduct(item) {
    console.log("选择我的产品", item);
    ['contact', 'phonenumber', 'sku', 'serviceenterprisename', 'cardno', 'itemid', 'itemname', 'itemno', 'model', 'unitname', 'spec', 'sys_enterpriseid'].forEach(key => {
        form[key] = item[key] || '';
    });
    closePopup();
}
// 显示如何查看产品编号的选项
function showSerialNumberGuide() {
    showGuidePopup.value = true;
}

// 选择查看方式并显示对应图片
function selectSerialNumberOption(option) {
    uni.previewImage({
        urls: [option.image],
        current: 0,
        success: function (res) {
            console.log('预览图片成功');
        },
        fail: function (res) {
            console.log('预览图片失败', res);
        },
        complete: function (e) {
            console.log(e)
        }
    });
}

</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;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .serial-number-guide {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #2979ff;
        cursor: pointer;
        gap: 5rpx;
    }

    .serial-number-guide span {
        text-decoration: underline;
    }

    .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;
}

.popup-content {
    padding: 30rpx;
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin: 0;
}

.popup-subtitle {
    font-size: 24rpx;
    text-align: center;
    color: #666;
    margin: 0;
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 15rpx;
}

.option-item {
    padding: 25rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.option-item:hover {
    background: #f5f5f5;
    border-color: #2979ff;
    color: #2979ff;
}

.option-icon {
    display: flex;
    align-items: center;
}

.popup-footer {
    display: flex;
    justify-content: center;
    margin-top: 5rpx;
}

.close-button {
    padding: 12rpx 60rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.close-button:hover {
    background: #e5e5e5;
}
</style>