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

<template>
    <div class="user-info-page">
        <custom-header name="个人信息填写" :isClose="true"></custom-header>
        <div class="form-content">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-position="top"
                class="user-form"
                size="large"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input
                        v-model="formData.phone"
                        placeholder="请输入手机号"
                        clearable
                        maxlength="11"
                    />
                </el-form-item>
                <el-form-item label="角色类型" prop="roleType">
                    <div class="role-type-grid">
                        <div
                            v-for="role in roleList"
                            :key="role.code"
                            class="role-btn"
                            :class="{ active: formData.roleType.includes(role.code) }"
                            @click="selectRole(role.code)"
                        >
                            {{ role.name }}
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn primary-btn" @click="handleConfirm">确认加入</div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const formRef = ref(null);

// 表单数据
const formData = reactive({
    name: "",
    phone: "",
    roleType: [],
});

// 角色列表
const roleList = ref([]);
//获取角色列表
const getRoleList = async () => {
    const { data } = await VE_API.mine.listDutyList();
    if (data && data.length > 0) {
        roleList.value = data;
        // 默认选中第一个角色
        formData.roleType = [data[0].code];
    }
};

// 表单验证规则
const rules = reactive({
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: ["blur", "change"],
        },
    ],
    roleType: [
        {
            validator: (_, value, callback) => {
                if (Array.isArray(value) && value.length > 0) {
                    callback();
                } else {
                    callback(new Error("请选择角色类型"));
                }
            },
            trigger: "change",
        },
    ],
});

// 选择角色（多选）
const selectRole = (value) => {
    const idx = formData.roleType.indexOf(value);
    if (idx > -1) {
        // 已选中则取消选择
        formData.roleType.splice(idx, 1);
    } else {
        formData.roleType.push(value);
    }
};

const storeId = ref(null);
// 确认加入
const handleConfirm = () => {
    if (!formRef.value) return;
    formRef.value.validate(async (valid) => {
        if (valid) {
            const { code, msg } = await VE_API.mine.inviteManager({ ...formData, role: 3, storeId: storeId.value,miniUserId: localStorage.getItem("MINI_USER_ID")});
            if (code === 0) {
                ElMessage.success("加入成功");
                setTimeout(() => {
                    router.replace('/home');
                }, 2000);
            } else {
                ElMessage.error(msg);
            }
        } else {
            // 校验失败，Element Plus 会自动显示错误信息
            return false;
        }
    });
};

onMounted(() => {
    getRoleList();
    if (route.query.miniJson) {
        const data = JSON.parse(route.query.miniJson);
        storeId.value = JSON.parse(data.paramsPage).storeId;
    }
});
</script>

<style lang="scss" scoped>
.user-info-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 80px;

    .form-content {
        padding: 20px 12px;
        background: #fff;
        margin: 12px;
        border-radius: 12px;

        .user-form {
            ::v-deep {
                .el-form-item {
                    margin-bottom: 24px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .el-form-item__label {
                        font-size: 14px;
                        color: #1d2129;
                        font-weight: 500;
                        padding-bottom: 8px;
                    }

                    .el-input__wrapper {
                        border-radius: 8px;
                        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
                        background: #fff;

                        &:hover {
                            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.5) inset;
                        }

                        &.is-focus {
                            box-shadow: 0 0 0 1px #2199f8 inset;
                        }

                        .el-input__inner {
                            color: #1d2129;
                            font-size: 14px;

                            &::placeholder {
                                color: #86909c;
                            }
                        }
                    }
                }
            }
        }

        .role-type-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            width: 100%;
            .role-btn {
                width: calc(50% - 10px);
                text-align: center;
                border-radius: 8px;
                font-size: 14px;
                color: #86909c;
                background: #fff;
                border: 1px solid rgba(153, 153, 153, 0.3);
                padding: 4px 0;
                &.active {
                    background: #2199f8;
                    color: #fff;
                    border-color: #2199f8;
                }
            }
        }
    }
}

.custom-bottom-fixed-btns {
    .bottom-btn {
        width: 100%;
        padding: 13px 0;
        font-size: 16px;

        &.primary-btn {
            background: #2199f8;
            color: #fff;
        }
    }
}
</style>