dl_uniapp/pages/mine/set/my-info.vue

<template>
	<view class="my-info-box">
		<navigation-bar-vue title="个人信息" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="form-data-box">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item labelWidth="280rpx" label="头像" required name="avatar">
					<uni-file-picker small="true" :value="fileList" :sizeType="sizeType" @select="afterRead"
						@delete="deleteFile" limit="1"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="昵称" required name="nickName">
					<uni-easyinput v-model="valiFormData.nickName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="联系方式" required name="phonenumber">
					<uni-easyinput v-model="valiFormData.phonenumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="绑定手机号" required name="userName">
					<uni-easyinput disabled v-model="valiFormData.userName" />
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="收款码" required name="tRecipientImage">
					<uni-file-picker small="true" :value="recipientImageList" :sizeType="sizeType"
						@select="afterReadRecipient" @delete="deleteFileRecipient" limit="1"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="收款码真实姓名" required name="tRecipientName">
					<uni-easyinput v-model="valiFormData.tRecipientName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="280rpx" label="通告报名免打扰" required name="tOpenDisturb">
					<uni-data-checkbox v-model="valiFormData.tOpenDisturb" :localdata="ranges" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" style="background-color: #FC2B49;" @click="submit('valiForm')">提交</button>
			<view class="my-black-list" @click="goMyBlackList()">我的黑名单<uni-icons type="right" color="#623109"
					size="12"></uni-icons></view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				sizeType: ['compressed'],
				//头像数组
				fileList: [],
				//收款码数组
				recipientImageList: [],
				ranges: [{
					text: '开启',
					value: "1"
				}, {
					text: '关闭',
					value: "0"
				}],
				// 校验表单数据
				valiFormData: {
					avatar: "",
					nickName: "",
					phonenumber: "",
					userName: "",
					tRecipientImage: "",
					tRecipientName: "",
					tOpenDisturb: "0"
				},
				// 校验规则
				rules: {
					avatar: {
						rules: [{
							required: true,
							errorMessage: '头像不能为空'
						}]
					},
					nickName: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '联系方式不能为空'
						}]
					},
					tRecipientImage: {
						rules: [{
							required: true,
							errorMessage: '收款码不能为空'
						}]
					},
					tRecipientName: {
						rules: [{
							required: true,
							errorMessage: '收款码真实姓名不能为空'
						}]
					},
				},
			}
		},
		methods: {
			goMyBlackList() {
				this.$tab.navigateTo('/pages/mine/set/black-list')
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			afterRead(file) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log(res, '215')
						this.fileList.push({
							url: config.baseUrl + res.data
						})
						console.log(this.fileList, 'fileList')
					})
				}
			},
			deleteFile(file, index) {
				console.log('删除文件');
				this.fileList.splice(index, 1);
			},
			afterReadRecipient(file) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log(res, '215')
						this.recipientImageList.push({
							url: config.baseUrl + res.data
						})
					})
				}
			},
			deleteFileRecipient(file, index) {
				console.log('删除文件');
				this.recipientImageList.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss">
	.my-info-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.form-data-box {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
			overflow-y: scroll;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: white;

			.my-black-list {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}


	}
</style>