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>

                <up-form-item v-if="item.type === 'city'" :label="item.label" :prop="item.key" borderBottom
                    labelWidth="94" :required="item.required">
                    <view @click.self="() => openCity(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>
        </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>

        <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
        <CcSelectDity :province="cityData.province" :city="cityData.city" :area="cityData.area" :show="cityShow"
            @sureSelectArea="onsetCity" @cityShow="() => cityShow = false"></CcSelectDity>
    </view>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import CcSelectDity from '@/components/cc-selectDity/cc-selectDity.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 cityData = reactive({
    province: "广东省",
    city: "广州市",
    area: "天河区",
})
const cityShow = ref(false)

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 openCity(row) {
    console.log(row);
    cityShow.value = true
    actions.value = row
}
function onsetCity(e) {
    console.log('onsetCity', e);
    cityShow.value = false
    Object.assign(formData, {
        [actions.value.key]: e.address
    })

    console.log('formData', formData);

}

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()
}

function cityChange(e) {
    console.log('e', e);

}

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>