book-hi/pages-mine/pages/partner/partner-apply.vue

<template>
    <view class="partner-apply">
        <!-- 手机号和验证码区域 -->
        <u-form :model="form" ref="uForm" :rules="rules" :error-type="['toast']" :label-width="160">
            <view class="form-section">
                <u-form-item label="新手机号" prop="mobile">
                    <u-input v-model="form.mobile" placeholder="获取手机号码" />
                    <u-button slot="right" type="success" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"plain>获取手机号</u-button>
                </u-form-item>

                <u-form-item label="验证码" prop="verifyCode">
                    <u-input v-model="form.verifyCode" placeholder="请输入验证码" />
                    <u-button slot="right" type="success" size="mini" @click="getCode" :disabled="counting" plain>
                        {{ counting ? `${countdown}s后获取` : "获取验证码" }}
                    </u-button>
                </u-form-item>
            </view>

            <!-- 基本信息区域 -->
            <view class="form-section">
                <u-form-item label="姓名" prop="name" required>
                    <u-input v-model="form.name" placeholder="请输入真实姓名" />
                </u-form-item>

                <u-form-item label="地址选择" prop="address" required>
                    <uni-data-picker
                        v-model="selAddressCodes"
                        :localdata="dataList"
                        placeholder="请选择所在区县"
                        popup-title="请选择所在区县"
                        @change="cityChange"
                    ></uni-data-picker>
                </u-form-item>

                <u-form-item label="学校" prop="school" required>
                    <u-input v-model="form.school" placeholder="请输入学校" />
                </u-form-item>

                <u-form-item label="院系" prop="faculties" required>
                    <u-input v-model="form.faculties" placeholder="请输入院系" />
                </u-form-item>

                <u-form-item label="专业" prop="specialty" required>
                    <u-input v-model="form.specialty" placeholder="请输入专业" />
                </u-form-item>

                <u-form-item label="年级" prop="grade" required>
                    <u-input v-model="form.grade" placeholder="请输入年级" />
                </u-form-item>
            </view>
        </u-form>

        <view class="agreement">
            <u-checkbox v-model="agreement" shape="circle">
                <text>我已阅读并同意</text>
                <text class="agreement-link" @click="goToAgreement">《书嗨用户协议》</text>
            </u-checkbox>
        </view>

        <view class="fixed-bottom">
            <u-button type="primary" color="#38C148" @click="submit">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                provinceId: "",
                cityId: "",
                districtId: "",
                name: "",
                school: "",
                faculties: "",
                specialty: "",
                grade: "",
                mobile: "",
                verifyCode: "",
            },
            agreement: false,
            counting: false,
            countdown: 60,
            rules: {
                name: [{ required: true, message: "请输入真实姓名" }],
                school: [{ required: true, message: "请输入学校" }],
                faculties: [{ required: true, message: "请输入院系" }],
                specialty: [{ required: true, message: "请输入专业" }],
                provinceId: [{ required: true, message: "请选择所在区县" }],
                grade: [{ required: true, message: "请输入年级" }],
            },
            // 省市区相关数据
            selAddressCodes: [],
            dataList: [],
        };
    },
    onLoad() {
        // 获取省市区数据
        this.getDistrictData();
    },
    methods: {
        // 获取省市区数据
        async getDistrictData() {
            try {
                const res = await uni.$u.http.get("/token/getAllDistrict");
                if (res.code == 200) {
                    this.dataList = res.data;
                }
            } catch (error) {
                uni.$u.toast("获取地区数据失败");
            }
        },

        // 省市区选择回调
        cityChange(e) {
            let { value } = e.detail;
            if (!value.length) return;
            this.form.provinceId = value[0].value;
            this.form.cityId = value[1].value;
            this.form.districtId = value[2].value || "";
        },

        // 获取手机号
        async getPhoneNumber(e) {
            if (e.detail.errMsg !== "getPhoneNumber:ok") {
                return uni.$u.toast("获取手机号失败");
            }

            try {
                uni.showLoading({
                    title: "手机号获取中",
                });

                // 调用后端接口解密手机号
                uni.$u.http
                    .post("/token/user/wxMobileUpdate", {
                        code: e.detail.code,
                    })
                    .then((res) => {
                        if (res.code === 200) {
                            // 更新手机号
                            this.form.mobile = res.data.mobile;

                            uni.showToast({
                                title: "绑定成功",
                                icon: "success",
                            });
                        } else {
                            uni.$u.toast("手机号获取失败");
                        }
                    });
            } catch (error) {
                uni.$u.toast("手机号获取失败");
            } finally {
                uni.hideLoading();
            }
        },

        async getCode() {
            if (!this.form.mobile) {
                uni.$u.toast("请先获取手机号");
                return;
            }

            try {
                const res = await uni.$u.http.post("/token/applyPartner/getMobileCode", {
                    mobile: this.form.mobile,
                });

                if (res.code === 200) {
                    this.startCountdown();
                    uni.$u.toast("验证码已发送");
                } else {
                    uni.$u.toast(res.msg);
                }
            } catch (error) {
                uni.$u.toast("获取验证码失败");
            }
        },

        startCountdown() {
            this.counting = true;
            this.countdown = 60;
            const timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(timer);
                    this.counting = false;
                }
            }, 1000);
        },

        goToAgreement() {
            uni.navigateTo({
                url: "/pages-home/pages/user-agreement",
            });
        },

        async submit() {
            if (!this.agreement) {
                uni.$u.toast("请先阅读并同意用户协议");
                return;
            }
            try {
                this.$refs.uForm.validate(async (valid) => {
                    if (valid) {
                        const res = await uni.$u.http.post("/token/applyPartner", this.form);
                        if (res.code === 200) {
                            uni.navigateTo({
                                url: "/pages-mine/pages/partner/partner-status?status=pending",
                            });
                        } else {
                            uni.$u.toast(res.msg);
                        }
                    }
                });
            } catch (error) {
                uni.$u.toast("提交失败");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.partner-apply {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    padding-bottom: 120rpx;

    .form-section {
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        border-radius: 10rpx;

        :deep(.u-form-item) {
            .u-form-item--left {
                white-space: nowrap;
            }

            .u-button {
                margin-left: 20rpx;
            }
        }
    }

    .agreement {
        margin: 30rpx;
        display: flex;

        .agreement-link {
            color: #38c148;
        }
    }

    .fixed-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 20rpx 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
        padding-bottom: 60rpx;

        .u-button {
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>