leromro-mini/pages_home/pages/serviceManagement/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-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-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-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-input v-model="formData.name" clearable border="none" placeholder="预计单次服务时常" class="form-input"
                    placeholder-class="form-placeholder"></up-input>
            </view>
        </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.name }}</view>
            </view>
            <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.name }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">服务时长</view>
                <view class="form-input">{{ formData.name }}</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';
const formData = inject('formData');


const props = defineProps({
    viewStatus: {
        type: Boolean,
        default: true
    },
    form:{
        type: Object,
        default: () => {
            return {
                name: '',
            }
        }
    }
})

//年龄校验
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 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)
    }
}



</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;

    }

}

.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>