leromro-mini/components/cust-form/index.vue

<template>
    <view class="cust-form">
        <up-form labelPosition="left" :model="formData" ref="form_ref">
            <view v-for="item in column" :key="item.key + 'cust-form'" class="cust-form-item">
                <up-form-item v-if="item.type === 'input'" :label="item.label" :prop="item.key" borderBottom
                    labelWidth="94" :required="item.required">
                   <up-input v-model="formData[item.key]" border="none" :placeholder="'请输入' + item.label"></up-input>
                </up-form-item>

                <up-form-item v-if="item.type === 'select'" :label="item.label" :prop="item.key" borderBottom
                    labelWidth="94" :required="item.required">
                    <view @click.self="() => openActionSheet(item)">
                        <up-input v-model="formData[item.key]" disabled disabledColor="#ffffff"
                            :placeholder="'请选择' + item.label" border="none"></up-input>
                    </view>
                    <template #right>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-form-item>

                <view v-if="item.type === 'phone-code'">
                    <up-form-item label="手机号" prop="phonenumber" borderBottom labelWidth="94" :rules="[
                        {
                            type: 'string',
                            required: true,
                            len: 11,
                            message: '请填写11位手机号',
                            trigger: ['blur']
                        }
                    ]" :required="true">
                        <up-input v-model="formData.phonenumber" border="none" placeholder="请输入手机号"></up-input>
                    </up-form-item>

                    <up-form-item label="验证码" prop="code" labelWidth="94" borderBottom :rules="[
                        {
                            type: 'string',
                            required: true,
                            len: 4,
                            message: '请填写4位验证码',
                            trigger: ['blur']
                        }
                    ]" :required="true">
                        <up-input v-model="formData.code" border="none" placeholder="请填写验证码"></up-input>
                        <template #right>
                            <up-button @tap="getCode" :text="code_data.tips" type="success" size="mini"
                                style="flex: 0.5;" :disabled="code_data.disabled"></up-button>
                        </template>

                    </up-form-item>
                </view>
                <up-form-item v-if="item.type === 'textarea'" :label="item.label" :prop="item.key" labelWidth="94" :required="item.required">
                    <up-textarea :placeholder="'请输入' + item.label" v-model="formData[item.key]" count></up-textarea>
                </up-form-item>

                <up-form-item v-if="item.type === 'face'" :label="item.label" :prop="item.key" borderBottom
                    labelWidth="94" :required="item.required">
                    <up-button size="small" type="primary" text="前往人脸识别" @click="startFace"></up-button>
                </up-form-item>
            </view>
        </up-form>
        <!-- <up-button type="primary" text="提交" customStyle="margin-top: 50px" @click="onSubmit"></up-button> -->

        <up-action-sheet :show="showSex" :actions="actions.option" :title="'请选择' + actions.label"
            @close="showSex = false" @select="ActionSheetSelect">
        </up-action-sheet>

        <up-code ref="uCode" @change="codeChange" seconds="20" @start="code_data.disabled = true"
            @end="code_data.disabled = false"></up-code>
    </view>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";

const props = defineProps({
    column: {
        type: Array,
        default: [],
    },
});

const formData = reactive({
    sex: null,
    city: null,

    // address: "永川区",
    // age: "1",
    // city: "重庆",
    // code: "1111",
    // idCard: "5002302000000000001",
    // name: "陈陈",
    // phonenumber: "18696601933",
    // sex: '男',
    // skillDescribe: "测试备注",
});
const form_ref = ref(null);

const showSex = ref(false);
const actions = ref({
    option: []
});

const code_data = reactive({
    disabled: false,
    tips: ''
})
const uCode = ref(null);


function hideKeyboard() {
    uni.hideKeyboard()
}

function openActionSheet(row) {
    console.log(row);
    hideKeyboard();
    showSex.value = true;
    actions.value = row
}

function ActionSheetSelect(e) {
    console.log('e', e);
    Object.assign(formData, {
        [actions.value.key]: e.key || e.name
    })
    console.log('formData.value', formData);

    // form_ref.value.validateField(actions.key)
}


function getCode() {
    if (uCode.value.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码'
        })
        setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            uCode.value.start();
        }, 2000);
    } else {
        uni.$u.toast('倒计时结束后再发送');
    }
}

function codeChange(text) {
    code_data.tips = text;
}

function startFace(){
    console.log('startFace',formData);
    
}


function setData(data) {
    Object.assign(formData, data)
}

function onSubmit() {
    // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
    return new Promise(async(resolve, reject) => {

        const res = await form_ref.value.validate();
        if(!res){
            reject()
            return
        }
        resolve(formData);
    })
}
function onResetField() {
    form_ref.value.resetFields()
    form_ref.value.clearValidate()
}
onMounted(()=>{
    const rules = {};
    for (let i = 0; i < props.column.length; i++) {
        rules[props.column[i].key] = props.column[i].rules 
    }
    form_ref.value && form_ref.value.setRules(rules)


    console.log('uni=====>',uni);
    
})
defineExpose({
    setData,//修改表单数据值
    onSubmit,//提交表单,先校验再提交
    onResetField,//表单重置
})
</script>
<style lang="scss" scoped>
// .cust-form-item{
//     position: relative;
// }
// .required-icon {
//     color: red;
//     position: absolute;
// }

</style>