leromro-mini/pages_home/pages/certification/Form.vue

<template>
    <view>
        <view class="form-card" v-if="viewStatus">
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">姓名</view>
                <up-input v-model="formData.name" clearable border="none" placeholder="请填写姓名" class="form-input"
                    placeholder-class="form-placeholder"></up-input>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">性别</view>
                <up-radio-group v-model="formData.sex">
                    <up-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in sexOption" :key="index"
                        :label="item.name" :name="item.name" activeColor="#07C160" inactiveColor="#C4C4C4">
                    </up-radio>
                </up-radio-group>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">年龄</view>
                <up-input placeholder="请填写年龄" border="none" type="number" v-model="formData.age" clearable
                    class="form-input" placeholder-class="form-placeholder" @blur="blurInput('age')"></up-input>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">手机号</view>
                <up-input placeholder="请填写手机号" border="none" type="number" v-model="formData.phonenumber"
                    class="form-input" placeholder-class="form-placeholder" maxlength="11"> </up-input>
                <view class="code-btn" @click="getCode">{{ code_data.tips }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">验证码</view>
                <up-input placeholder="请填验证码" border="none" type="number" v-model="formData.code" clearable
                    class="form-input" placeholder-class="form-placeholder" maxlength="4"></up-input>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">地区</view>
                <!-- <input type="text" v-model="formData.districtName" placeholder="请选择地区" class="form-input"
                    placeholder-class="form-placeholder" /> -->
                   <view  class="form-input">
                    <Address />
                   </view>

            </view>
            <view class="flex_c_l form-item">
                <view class="form-lable">详细地址</view>
                <input type="text" v-model="formData.address" placeholder="请填写详细地址" class="form-input"
                    placeholder-class="form-placeholder" />
              
            </view>
            <up-code ref="uCode" @change="codeChange" seconds="60" @start="code_data.disabled = true"
                @end="code_data.disabled = false"></up-code>
        </view>

        <view class="form-card" v-else>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">姓名</view>
                <view class="form-input">{{ formData.name }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">性别</view>
                <view class="form-input">{{ formData.sex === '1' ? '女' : '男' }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">年龄</view>
                <view class="form-input">{{ formData.age }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">手机号</view>
                <view class="form-input">{{ formData.phonenumber }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">地区</view>
                <view class="form-input">{{ formData.districtName }}</view>
            </view>
            <view class="flex_c_l form-item">
                <view class="form-lable">详细地址</view>
                <view class="form-input">{{ formData.address }}</view>
            </view>
        </view>
    </view>

</template>

<script setup>
import { computed, ref, reactive } from 'vue';
const status = ref(false);
import { provide, inject } from 'vue'
import { sendCode } from '@/api/sm.js';
import Address from './Address.vue';
const formData = inject('formData');
const uCode = ref(null);
const sexOption = [
    {
        name: '男',
    },
    {
        name: '女',
    },
]
const code_data = reactive({
    disabled: false,
    tips: ''
})
const props = defineProps({
    viewStatus: {
        type: Boolean,
        default: true
    },
})

//年龄校验
const ageVer = () => {
    return new Promise((resolve, reject) => {
        const isNum = uni.$u.test.digits(formData.age)
        if (!isNum) {
            formData.age = formData.age.replace(/[^0-9.]/g, '');// 移除非数字字符
            reject('请输入数字');
        }
        const value = Number(formData.age);
        if (value < 12) {
            reject('年龄过小');
        }
        resolve();
    })
}
//手机号校验
const phonenumberVer = () => {
    return new Promise((resolve, reject) => {
        const isPhonenumber = uni.$u.test.mobile(formData.phonenumber)
        if (!isPhonenumber) {
            reject('请输入正确的手机号');
        }
        resolve();
    })
}
// 校验
const blurInput = async (key) => {
    try {
        const verFun = {
            age: ageVer,
        }
        const res = await verFun[key]();
        console.log("TCL: numberInput -> res", res)
    } catch (error) {
        uni.showToast({
            title: error,
            icon: 'none',
            duration: 1000
        });
        console.log("TCL: numberInput -> error", error)
    }
}

const getCode = async () => {
    try {
        if (uCode.value.canGetCode) {
            // 模拟向后端请求验证码
            if (formData.phonenumber) {
                await phonenumberVer();
                uni.showLoading({
                    title: '正在获取验证码'
                })
                const res = await sendCode(formData.phonenumber);
                console.log(res);
                if (res.code == 200) {
                    uni.hideLoading();
                    uCode.value.start();
                    // uni.$u.toast('验证码已发送');
                    throw '验证码已发送'
                }
            } else {
                // uni.$u.toast('请输入手机号');
                throw '请输入手机号'
            }
        } else {
            // uni.$u.toast('倒计时结束后再发送');
            throw '倒计时结束后再发送'
        }
    } catch (error) {
        uni.$u.toast(error);
    }
}
function codeChange(text) {
    code_data.tips = text;
}


</script>
<style lang="scss" scoped>
.form-card {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .form-item {
        padding: 32rpx 0;
        margin-left: 32rpx;
        padding-right: 32rpx;


        .form-lable {
            font-size: 32rpx;
            line-height: 44rpx;
            color: #1D2129;
            margin-right: 48rpx;
        }
    }

    .form-input {
        flex: 1;
        font-family: PingFang SC;
        font-size: 32rpx;
        line-height: 44rpx;
        color: #130F26;

    }

}

// .icon-address {
//     width: 36rpx;
//     height: 36rpx;
//     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAMBSURBVFiF7ZcxaBNRGMd/33k1FURQHDpUUKRYoUMHhYIK6eBSCpqWomMdrUmtFBFBMIOCQ4ulqXVwcXEQsdUqLg5mcCjo0EFowYJCHTKIBXVI7OU+h6QQc+/ukrs4CP63d9/3/t8v79597wX+6x+TRJmkE0MncHUQ1T6QboSOSoAC6Boiy6g8l9zC8l8F0vHUGSAL9DY4ZQXIyuzi85YC6dhAB3biATDYqHGdXtLmXJDpF19jA2l6uBvLfQ10RoTZ1hdc67TMPV2LDFSFeQPVPRJfBZzyKZlfWvdLsHxhRpPtWO6TFsIAdGDveKKjyfamgdiz9ybQ00KYbfVWvY0yvrLqJt4A7BDzIpAHPlTHPUAS8F2BSgGKlEuHZP5VoT5kLmgnJkNhVB9T/jVRb6pjAx3s2DmDyDnfuUI7duIycN0bMtUaT20Q/FXdk9nFdCDveGoOuBSQ8kVmFw+EAlW/rNUAoxX2bR6XbN4B0MxQJxaV1dgqPtpeMc0mbb7tfUdQE3Wto/VtwLupRYM3suh0DUwfoquoTqE6hZ34qJmhPgDJ5h1Ep0O8PLVMQEeCTXhbk3sf2F0T3Q1uzphrlB4OB0LbAnlmnn2uGXpfh8gxn1yDme5qAEiKQR46cfZgzXDFUOS9T66JyFPLC6Ti29YBcDhZk3sR+FkT/YlrZYy5JhlqmYA+eJ79MUMmNZu0ASS3sIxT6gKuAldxSl3bdyDNJm0smQwB8tSK1odU5iS3kPGNA5oZyiEa1KuMfcjcjVUfIwG/TjSt46n9OKUrxk5tJ+6Cng8CRnhkfmziqZh+opEzSerOMiWJhMyDIo75LPO9D2kmdQfhWohxVN2W2cUbpoD/9ePHZhYxfNZxJazwffOWX9gXSB7mi2yVRwDPssZQga3yiDzM+/Y6/xUCZH5pHdfqbxFUAdfqD7q+QqP/OuLfrSswIRf8hoFiQjUM0xRQRKimYJoGahKqaZhIQA1CRYKJDBQCFRkmFpAPVCyY2EB1UMSFaZk0Pdyt6eHuVnj9BiyJPmU/kRUQAAAAAElFTkSuQmCC);
//     background-position: center;
//     background-size: 36rpx auto;
//     background-repeat: no-repeat;
//     // margin-right: 32rpx;
// }

.code-btn {
    border-radius: 14rpx;
    background: linear-gradient(180deg, #FD8F7C -75%, #FE534B 140%);
    // margin-right: 32rpx;
    font-family: PingFang SC;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 42rpx;
    letter-spacing: normal;
    color: #FFFFFF;
    padding: 13rpx 20rpx;
}
</style>

<style>
.form-placeholder {
    color: #C9CDD4;
}
</style>