feiniao-farm-h5/src/views/old_mini/entry_information/components/baInformation.vue

<template>
    <div class="ba-information">
        <div class="ba-information__content">
            <div class="page-header">
                <div class="page-title">完善个人信息</div>
                <div class="page-subtitle">请确保您的个人信息无误</div>
            </div>

            <div class="info-card">
                <div class="section-title">
                    <span class="title-icon"></span>
                    <span>基本信息</span>
                </div>

                <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-position="left"
                    label-width="72px"
                    class="info-form"
                    require-asterisk-position="right"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-input
                            v-model="form.name"
                            placeholder="请输入名字"
                            maxlength="20"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input
                            v-model="form.phone"
                            placeholder="请输入手机号"
                            maxlength="11"
                            clearable
                            type="tel"
                        />
                    </el-form-item>
                </el-form>

                <div class="location-block">
                    <div class="location-label">常驻点位</div>
                    <div class="map-placeholder">
                        <div class="map-placeholder__mask">点击地图选择常驻点位</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn primary-btn" @click="handleNext">下一步 (1/3)</div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const emit = defineEmits(["next"]);

const formRef = ref(null);
const form = reactive({
    name: "",
    phone: "",
});

const rules = {
    name: [
        { required: true, message: "请输入名字", trigger: "blur" },
        { min: 1, max: 20, message: "姓名长度不超过20个字", trigger: "blur" },
    ],
    phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
        },
    ],
};

const handleNext = async () => {
    if (!formRef.value) return;
    try {
        await formRef.value.validate();
        emit("next", { ...form });
    } catch {
        // 校验未通过
    }
};
</script>

<style lang="scss" scoped>
.ba-information {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 80px;

    &__content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 16px 20px;
    }

    .page-header {
        padding: 8px 4px 16px;

        .page-title {
            font-size: 26px;
            color: #005599;
            font-family: "PangMenZhengDao";
            line-height: 36px;
        }

        .page-subtitle {
            margin-top: 4px;
            font-size: 14px;
            color: rgba(46, 46, 46, 0.4);
            line-height: 20px;
        }
    }

    .info-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px 14px 8px;
        box-shadow: 0 2px 12px rgba(33, 153, 248, 0.08);
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;

        .title-icon {
            position: relative;
            width: 14px;
            height: 14px;
            flex-shrink: 0;

            &::before,
            &::after {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }

            &::before {
                left: 0;
                top: 2px;
                background: #2199f8;
                opacity: 0.85;
            }

            &::after {
                right: 0;
                top: 0;
                background: #7ec8ff;
                opacity: 0.9;
            }
        }
    }

    .info-form {
        :deep(.el-form-item) {
            margin-bottom: 0;
            padding: 10px 0;
        }

        :deep(.el-form-item__label) {
            color: #1a1a1a;
            font-size: 15px;
            font-weight: 400;
            padding: 0;
            line-height: 32px;
            height: 32px;
        }

        :deep(.el-form-item__content) {
            justify-content: flex-end;
            line-height: 32px;
        }

        :deep(.el-form-item__error) {
            padding-top: 4px;
            text-align: right;
        }

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: transparent;
            padding: 0;

            .el-input__inner {
                text-align: right;
                color: #1a1a1a;
                font-size: 15px;

                &::placeholder {
                    color: rgba(0, 0, 0, 0.25);
                }
            }
        }
    }

    .location-block {
        padding: 10px 0 8px;

        .location-label {
            font-size: 15px;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .map-placeholder {
            position: relative;
            width: 100%;
            height: 140px;
            border-radius: 8px;
            overflow: hidden;
            background: linear-gradient(135deg, #e8eef3 0%, #d4dde6 100%);

            &__mask {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                padding: 8px 12px;
                background: rgba(0, 0, 0, 0.45);
                color: #fff;
                font-size: 13px;
                text-align: center;
            }
        }
    }

    .custom-bottom-fixed-btns {
        background: #FFF;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);

        .bottom-btn {
            // flex: 1;
            padding: 0 30px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            border-radius: 25px;
        }

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