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="头像" 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="收款码" 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="收款码真实姓名" name="trecipientName">
					<uni-easyinput v-model="valiFormData.trecipientName" placeholder="请输入" />
				</uni-forms-item>
				<!--        <uni-forms-item labelWidth="280rpx" label="通告报名免打扰" 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';
	import config from '@/config'
	import {
		queryDetail,
		uniSaveMember
	} from '@/api/business/member.js'
	import upload from '@/utils/upload'

	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				userType: '',
				sizeType: ['compressed'],
				//头像数组
				fileList: [],
				fileImageUrl: [],
				//收款码数组
				recipientImageList: [],
				recipientImageUrl: [],
				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: '收款码真实姓名不能为空'
					// 	}]
					// },
				},
			}
		},
		onLoad(options) {
			this.userType = options.userType
			this.userId = options.userId
			this.initData(options.userType, options.userId)
		},
		methods: {
			goMyBlackList() {
				this.$tab.navigateTo('/pages/mine/set/black-list?userId=' + this.userId)
			},
			submit(ref) {
				this.valiFormData.avatar = this.fileImageUrl.join(',');
				this.valiFormData.trecipientImage = this.recipientImageUrl.join(',');
				let that = this
				this.$refs[ref].validate().then(res => {
					uniSaveMember(that.valiFormData).then(res => {
						uni.showToast({
							icon: 'success',
							duration: 2000,
							title: '保存成功'
						});
						uni.navigateBack()
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

			/**初始化数据*/
			initData(userType, userId) {
				this.fileList = []
				this.fileImageUrl = []
				this.recipientImageList = []
				this.recipientImageUrl = []
				queryDetail({
					userType: userType,
					userId: userId
				}).then(res => {
					console.log(res, 131)
					this.valiFormData = res.data
					if (this.valiFormData.avatar != null && this.valiFormData.avatar != '') {
						this.fileImageUrl = this.valiFormData.avatar.split(',')
						this.fileImageUrl.map((item) => {
							this.fileList.push({
								url: item
							})
						})
					}
					if (this.valiFormData.trecipientImage != null && this.valiFormData.trecipientImage != '') {
						this.recipientImageUrl = this.valiFormData.trecipientImage.split(',')
						this.recipientImageUrl.map((item) => {
							this.recipientImageList.push({
								url: item
							})
						})
					}
				})
			},

			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: res.url
						})
						this.fileImageUrl.push(res.url)
						console.log(this.fileList, 'fileList')
					})
				}
			},
			deleteFile(file, index) {
				console.log('删除文件');
				this.fileList.splice(index, 1);
				this.fileImageUrl.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: res.url
						})
						this.recipientImageUrl.push(res.url)
					})
				}
			},
			deleteFileRecipient(file, index) {
				console.log('删除文件');
				this.recipientImageList.splice(index, 1);
				this.recipientImageUrl.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>