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-radio-group v-model="formData.serviceType" class="form-input">
                    <up-radio v-for="(item, index) in serviceOption" :key="index" :label="item.name" :name="item.value"
                        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 v-model="formData.specDescribe" 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.price" clearable border="none" placeholder="单次服务的价格" class="form-input"
                    placeholder-class="form-placeholder" @blur="blurInput('number','price')"></up-input>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">购买单位</view>
                <up-input v-model="formData.unit" 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.minPurchaseQuantity" clearable border="none" placeholder="用户下单最少购买数量"
                    class="form-input" placeholder-class="form-placeholder" @blur="blurInput('number','minPurchaseQuantity')"></up-input>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">服务时长</view>
                <up-input v-model="formData.duration" clearable border="none" placeholder="预计单次服务时常" class="form-input"
                    placeholder-class="form-placeholder" @blur="blurInput('number','duration')"></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">{{ serviceType }}服务</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">规格说明</view>
                <view class="form-input">{{ formData.specDescribe }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">服务价格</view>
                <view class="form-input">{{ formData.price }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">购买单位</view>
                <view class="form-input">{{ formData.unit }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">最少购买</view>
                <view class="form-input">{{ formData.minPurchaseQuantity }}</view>
            </view>
            <view class="flex_c_l form-item hr-solid">
                <view class="form-lable">服务时长</view>
                <view class="form-input">{{ formData.duration }}</view>
            </view>
        </view>
    </view>

</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { provide, inject } from 'vue';

const viewStatus = inject('viewStatus');

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

const serviceOption = [
    {
        name: '周期',
        value: '10'
    },
    {
        name: '单次',
        value: '20'
    },
    {
        name: '非时效',
        value: '30'
    }
]



const formData = computed(() => {
    return props.form;
})
const serviceType = computed(() =>{
    const type = serviceOption.find(item => item.value === formData.value.serviceType)
    return type.name
})
function isNumber(str) {
    return /^[\+\-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/.test(str);
}

//数字校验
const numberVer = (key) => {
    return new Promise((resolve, reject) => {
        if(!formData.value[key]){
            reject('请输入内容');
        }
        const isNum = isNumber(formData.value[key]);
        if (!isNum) {
            formData.value[key] = formData.value[key].replace(/[^0-9.]/g, '');// 移除非数字字符
            formData.value[key] = Number(formData.value[key]);
            reject('请输入正确的数值');
        }
        const value = Number(formData.value[key]);
        if (value < 0) {
            reject('数值过小，请重新输入');
        }
        formData.value[key] = value;
        resolve();
    })
}

// 校验
const blurInput = async (key,objectKey) => {
    try {
        const verFun = {
            number: numberVer,
        }
        const res = await verFun[key](objectKey);
        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>