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:config.baseUrl + item
              })
            })
          }
          if (this.valiFormData.trecipientImage != null && this.valiFormData.trecipientImage != ''){
            this.recipientImageUrl = this.valiFormData.trecipientImage.split(',')
            this.recipientImageUrl.map((item)=>{
              this.recipientImageList.push({
                url:config.baseUrl + 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.fileName)
						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.fileName)
					})
				}
			},
			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>