feiniao-farm-h5/src/views/old_mini/mine/pages/register.vue

<template>
    <div class="register-page">
        <custom-header :name="'注册' + pageName" bgColor="#E6F2FF"></custom-header>
        <div class="content">
            <Form @submit="onSubmit" required="auto" label-width="74px" ref="formRef">
                <div class="card">
                    <div class="card-title">
                        <img src="@/assets/img/mine/label-icon.png" alt="" />
                        <span>基本信息</span>
                    </div>
                    <div class="form">
                        <field
                            v-model="formData.name"
                            label="姓名"
                            :rules="[{ required: true, message: '请输入姓名' }]"
                            placeholder="请输入姓名"
                        />
                        <field
                            v-model="formData.tel"
                            type="tel"
                            name="tel"
                            label="联系电话"
                            :rules="[{ required: true, validator: validatorTel, message: '请输入电话号码' }]"
                            placeholder="请输入电话号码"
                        />
                        <field
                            v-show="pageType === 'NZ'"
                            v-model="formData.subjectName"
                            label="主体名称"
                            placeholder="请输入主体名称"
                        />
                        <template v-if="pageType === 'EXPERT'">
                            <field
                                label-width="130px"
                                readonly
                                v-model="number"
                                label="服务过的果园数量"
                                placeholder="点击选择服务数量"
                            >
                                <template #input>
                                    <el-dropdown trigger="click">
                                        <div class="el-dropdown-link-text">
                                            {{ number }}
                                            <el-icon class="el-icon--right">
                                                <CaretBottom />
                                            </el-icon>
                                        </div>
                                        <template #dropdown>
                                            <el-dropdown-menu class="v-dropdown-menu">
                                                <el-dropdown-item
                                                    v-for="(item, index) in numberList"
                                                    :key="index"
                                                    :class="{ active: numberActive === index }"
                                                    @click="handleNumberDropdown(item, index)"
                                                    >{{ item }}</el-dropdown-item
                                                >
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </template>
                            </field>
                            <field
                                label-width="130px"
                                readonly
                                v-model="year"
                                label="从事种植指导年数"
                                placeholder="点击选择指导年数"
                            >
                                <template #input>
                                    <el-dropdown trigger="click">
                                        <div class="el-dropdown-link-text">
                                            {{ year }}
                                            <el-icon class="el-icon--right">
                                                <CaretBottom />
                                            </el-icon>
                                        </div>
                                        <template #dropdown>
                                            <el-dropdown-menu class="v-dropdown-menu">
                                                <el-dropdown-item
                                                    v-for="(item, index) in yearList"
                                                    :key="index"
                                                    :class="{ active: yearActive === index }"
                                                    @click="handleYearDropdown(item, index)"
                                                    >{{ item }}</el-dropdown-item
                                                >
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </template>
                            </field>
                        </template>
                        <div class="flex" v-else>
                            <field v-model="formData.address" label="服务区域" readonly placeholder="默认位置" />
                            <el-dropdown trigger="click">
                                <div class="el-dropdown-link">
                                    {{ dropdownName }}
                                    <el-icon class="el-icon--right">
                                        <CaretBottom />
                                    </el-icon>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu class="v-dropdown-menu">
                                        <el-dropdown-item
                                            v-for="(item, index) in dropdownList"
                                            :key="index"
                                            :class="{ active: active === index }"
                                            @click="handleDropdown(item, index)"
                                            >{{ item }}</el-dropdown-item
                                        >
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        <upload ref="uploadRef" v-show="pageType === 'NZ'" exampleImg :maxCount="1" class="upload-wrap" @handleUpload="handleUploadSuccess">
                            <div class="upload-btn">
                                点击上传营业执照
                            </div>
                        </upload>
                    </div>
                </div>
                <div class="card" v-if="pageType == 'EXPERT'">
                    <div class="card-title">
                        <img src="@/assets/img/mine/label-icon.png" alt="" />
                        <span>个人简介</span>
                    </div>
                    <div class="form">
                        <el-input v-model="input" :rows="5" type="textarea" placeholder="描述：" />
                    </div>
                </div>
                <template v-else>
                    <ServiceInfo 
                        v-model:crops="crops"
                        v-model:serviceTypes="serviceTypes"
                        v-model:machines="machines"
                        v-model:isEdit="isEdit"
                        ref="serviceInfoRef"
                    />
                </template>
                <Button class="button" round block type="primary" native-type="submit"> 提交 </Button>
            </Form>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { Field, Form, Button } from "vant";
import { onActivated, onDeactivated, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import upload from "@/components/upload";
import ServiceInfo from "@/components/pageComponents/ServiceInfo.vue";
const route = useRoute();
const router = useRouter();

const uploadRef = ref(null);
const serviceInfoRef = ref(null);
const formRef = ref(null);
const formData = ref({
    name: "",
    tel: "",
    subjectName: "",
    point: "",
    serviceCropsJson: [],
    agriculturalEquipmentJson: [],
    licenseImg: [],
});

const validatorTel = (val) => {
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(val)) return "请输入正确的电话号码";
};

const onSubmit = () => {
    formData.value.point = "POINT(113.1093017627431 22.574540836684672)";
    if (pageType.value === "NZ" && !formData.value.licenseImg) {
        ElMessage.warning("请上传营业执照");
        return;
    }
    const {serviceCropsJson, serviceTypeJson, agriculturalEquipmentJson} = serviceInfoRef.value.getServiceInfo();
    const params = {
        ...formData.value,
        serviceCropsJson,
        serviceTypeJson,
        agriculturalEquipmentJson,
    }
    VE_API.mine.register(params).then(res =>{
        if(res.code===0){
            ElMessage.success('注册成功，待审核')
            router.push('/mine')
        }else{
            ElMessage.success('注册失败')
        }
    })
};

const resetForm = () => {
    formRef.value.resetValidation();
};

const number = ref("请选择");
const numberList = ["请选择", "10", "20", "30", "40"];
const numberActive = ref(0);
const handleNumberDropdown = (item, index) => {
    number.value = item;
    numberActive.value = index;
};

const year = ref("请选择");
const yearList = ["请选择", "10", "20", "30", "40"];
const yearActive = ref(0);
const handleYearDropdown = (item, index) => {
    year.value = item;
    yearActive.value = index;
};

const dropdownList = ["周边20公里", "周边10公里", "周边5公里"];
const active = ref(0);
const dropdownName = ref("周边20公里");
const handleDropdown = (item, index) => {
    dropdownName.value = item;
    active.value = index;
};

const input = ref("");

const pageName = ref("");
const pageType = ref("");
const identityTyepe = {
    EXPERT: "专家",
    NZ: "农资",
};
// NF: "农服",

// 服务信息数据，转换为 ServiceInfo 组件需要的格式
const isEdit = ref(true); // 默认编辑状态
const crops = ref([
    { name: "荔枝", isSelf: 0 },
    { name: "水稻", isSelf: 0 },
    { name: "菠萝", isSelf: 0 },
    { name: "柚子", isSelf: 0 },
    { name: "蔬菜", isSelf: 0 },
    { name: "小麦", isSelf: 0 },
]);
const serviceTypes = ref([
    { name: "嫁接", isSelf: 0 },
    { name: "施肥打药", isSelf: 0 },
    { name: "修剪", isSelf: 0 },
]);
const machines = ref([
    { name: "植保机", isSelf: 0 },
    { name: "喷药车", isSelf: 0 },
    { name: "收割机", isSelf: 0 }
]);

const handleUploadSuccess = (data) => {
    formData.value.licenseImg = data.imgArr[0];
};


onActivated(() => {
    pageName.value = identityTyepe[route.query.identity];
    pageType.value = route.query.identity;
    formData.value = {};
    resetForm();
});

onDeactivated(() => {
    // 重置 ServiceInfo 组件的选中状态
    crops.value.forEach(item => {
        item.selected = false;
    });
    serviceTypes.value.forEach(item => {
        item.selected = false;
    });
    machines.value.forEach(item => {
        item.selected = false;
    });
    uploadRef.value && uploadRef.value.uploadReset();
});
</script>

<style lang="scss" scoped>
.register-page {
    width: 100%;
    height: 100vh;
    background-color: #f5f7fb;
    ::v-deep{
        .main-content {
            margin: 12px 0;
        }
    }
    .content {
        height: calc(100% - 40px);
        padding: 12px;
        overflow: auto;
        box-sizing: border-box;
        background: linear-gradient(180deg, #e6f2ff 0%, #8fc5fe 100%);
        .card {
            background: #fff;
            border-radius: 12px;
            padding: 15px 12px;
            box-sizing: border-box;
            .card-title {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                font-size: 18px;

                img {
                    width: 14px;
                    height: 8px;
                    margin-right: 6px;
                }
            }
            .form {
                .van-cell {
                    background: #f5f5f5;
                    border-radius: 8px;
                    ::v-deep {
                        .van-field__label {
                            color: #666666;
                            border-right: 1px solid #dddddd;
                        }
                    }
                }
                .van-cell + .van-cell {
                    margin-top: 12px;
                }
                .btn {
                    width: 92%;
                    color: #2199f8;
                    font-size: 16px;
                    border-radius: 8px;
                    text-align: center;
                    padding: 12px;
                    margin-top: 12px;
                    border: 1px solid #2199f8;
                }

                .el-dropdown-link-text {
                    color: #2199f8;
                    display: flex;
                    align-items: center;
                }

                .flex {
                    display: flex;
                    align-items: center;
                    margin-top: 12px;
                    .el-dropdown-link {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #2199f8;
                        width: 100px;
                        font-size: 12px;
                        padding: 14px 0;
                        border-radius: 8px;
                        border: 1px solid rgba(33, 153, 248, 0.2);
                        background: #fff;
                        margin-left: 5px;
                    }
                }
                .el-icon--right {
                    margin-left: 4px;
                }
                .upload-btn {
                    color: #2199f8;
                    font-size: 16px;
                    padding: 12px 0;
                    text-align: center;
                    width: 170px;
                    border-radius: 8px;
                    border: 1px solid #2199f8;
                    background: #fff;
                }
                .upload-wrap{
                    margin-top: 12px;
                }
            }
        }
        .card + .card {
            margin-top: 12px;
        }
        .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            .tips {
                position: relative;
                &::before {
                    content: "*";
                    position: absolute;
                    top: 0;
                    right: -1px;
                    color: #ff0000;
                    font-weight: bold;
                }
            }
            .btn {
                color: #fff;
                background: #2199f8;
                border-radius: 8px;
                padding: 5px 37px;
                text-align: center;
                font-size: 14px;
            }
        }

        .button {
            border-radius: 8px;
            font-size: 18px;
            padding: 10px;
            text-align: center;
            background: #2199f8;
            color: #fff;
            margin-top: 12px;
            border: none;
        }
    }
}
</style>

<style lang="scss">
.v-dropdown-menu {
    .active {
        color: #2199f8;
    }
}

.image-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.image-preview img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
</style>