zhywpt-sp/personal-center/setting/personal-information/user-change.vue

<template>
	<view class="content">
			<u-field required labelWidth="180" v-model="state.ocrData.conmpany" input-align='right' label="姓名"
				disabled=true :fieldStyle="fieldStyle">
			</u-field>
			<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="性别" :fieldStyle="fieldStyle">
			</u-field>
			<u-field required labelWidth="180" v-model="state.ocrData.card" input-align='right' label="身份证号" :fieldStyle="fieldStyle">

			</u-field>
			<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="地址" :fieldStyle="fieldStyle">
			</u-field>
		
			<u-cell-item required title="证件有效期" :borderBottom="false" @click="timeClick" 
				:titleStyle="{fontSize:'28rpx',color:'#777777'}" 
				:valueStyle="{fontSize:'28rpx',color:'#333333'}"
				:value="state.ocrData.type"></u-cell-item>
			<u-field required labelWidth="180" :borderTop="true" v-model="state.ocrData.type" input-align='right' label="联系方式" :fieldStyle="fieldStyle">
			</u-field>
	</view>
	
	<view class="subBtn">
		<submit-button title="提交绑定" form-type="submit" @submit="formSubmit">
		</submit-button>
	</view>
</template>
<script setup lang="ts">
	import {reactive} from "vue";
	import { msg } from "@/utils/utils";

	const fieldStyle = {height:'60rpx',color:'#333333',fontSize:'28rpx'};
	const state = reactive({
		ocrData: {
			'conmpany': '贵州市空间加快速度公司',
			'type': '企业营业执照',
			'card': 'GZ2364174132894'

		},
		buchongData: {
			'conmpany': '李某一',
			'type': '居民身份证',
			'card': '23728347626342332',
			'phone': ''
		},
	})
	
	const timeClick = () => {
		msg('证件有效期')
	}
	
	const formSubmit = () => {
		msg('提交绑定')
	};
</script>

<style>
	page{
		background-color: #EEF7F7;
		padding-top: 30rpx;
	}
</style>

<style lang="scss" scoped>
	.content{
		background-color: white;
		:deep(.u-cell){
			padding: 23rpx 32rpx;
		}
	}
	.subBtn {
		padding: 500rpx 40rpx 60rpx;
	}
</style>