AiSkinMeasurementMp/pages/user/info.vue

<template>
  <view class="info">
    <view class="main">
        <u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="姓名"
					prop="userInfo.name"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="性别"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				description="如果选择保密会报错"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
    </view>
    <view class="actions safe-area-bottom">
        <u-button @click="onSubmit">确认提交</u-button>
    </view>

  </view>
</template>

<script>
export default {
    data(){
        return {
            showSex: false,
            model1: {
                userInfo: {
					name: 'uView UI',
					sex: '',
				},
            },
            rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
            radio: '',
			switchVal: false
        }
    },
    onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
        onSubmit() {

        }
    }
}
</script>

<style lang="scss" scoped>
    .info {
        position: relative;
        height: 100vh;
        .main {
            height: calc(100vh - 88px);
            padding: 40rpx;
            overflow: scroll;
        }
        .actions {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    }
</style>