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

<template>
	<view class="content">
		<u-field required labelWidth="180" v-model="state.ocrData.name" input-align='right' label="姓名" disabled
			:fieldStyle="fieldStyle">
		</u-field>
		<!-- 	<u-field required labelWidth="180" v-model="state.ocrData.gender" input-align='right' label="性别"
			:fieldStyle="fieldStyle">
		</u-field> -->
		<u-field required labelWidth="180" v-model="state.ocrData.userCardId" input-align='right' label="身份证号"
			:fieldStyle="fieldStyle" disabled>
		</u-field>
		<!-- 		<u-field required labelWidth="180" v-model="state.ocrData.add" 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.tel" input-align='right'
			label="联系方式" :fieldStyle="fieldStyle" disabled>
		</u-field>
		<view class="tips">* 修改的是etc预留手机号，不能修改登录账号手机号，修改后需要到票根网重新实名</view>
	</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,
		navTo
	} from "@/utils/utils";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		userInfoQuery
	} from "@/utils/network/api.js";
	import {
		getItem
	} from "@/utils/storage.ts"
	import {
		request
	} from "@/utils/network/request.js";
	const fieldStyle = {
		height: '60rpx',
		color: '#333333',
		fontSize: '28rpx'
	};
	import { onLoad } from "@dcloudio/uni-app"
	const state = reactive({
		ocrData: {
			name: '',
			gender: '',
			userCardId: '',
			add: "",
			tel: ''

		},
		customerId: ''
	})

	const getUserinfo = () => {
		const options = {
			type: 2,
			data: { openId: getItem('openId') },
			method: "POST",
			showLoading: true,
		};
		request(userInfoQuery, options).then((res) => {
			const data = stringToJson(res.bizContent);
			console.log(data, "用户信息");
			state.ocrData.name = data.list[0].customerName
			state.ocrData.userCardId = data.list[0].customerIdNum
			state.ocrData.tel = data.list[0].tel
			state.customerId = data.list[0].customerId
		});
	}



	const timeClick = () => {
		msg('证件有效期')
	}

	const formSubmit = () => {
		navTo(`/subpackage/personal-center/setting/personal-information/user-card?customerId=${state.customerId}`)
	};

	onLoad(() => {
		getUserinfo()
	})
</script>

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

<style lang="scss" scoped>
	.content {
		background-color: white;

		:deep(.u-cell) {
			padding: 23rpx 32rpx;
		}

		::v-deep .u-flex-1 {
			width: 100%;
		}
	}

	.subBtn {
		padding: 500rpx 40rpx 60rpx;
	}

	.tips {
		color: red;
		padding: 20rpx 28rpx 20rpx 16rpx;
		font-size: 30rpx;
	}
</style>