vist_go_uniApp/pages/user/userInfo-change.vue

<template>
	<view class="container">
		<view>
			<!-- 头部标题和副标题 -->
			<view class="header">
				<view class="mar-b-16">
					<text class="title">请补全个人资料</text>
				</view>

			</view>




		</view>
		<!-- 头像与昵称 -->
		<view>
			<!-- <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"> -->
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatarButton">
				<image class="avatar" :src="user.avatar||'../../static/images/avatar-upload.png'" mode="aspectFill">
				</image>
				<view class="font28">
					点击授权头像
				</view>
			</button>

			<!-- </u-upload> -->
		</view>
		<view class=" inputBg ">
			<input class="" v-model="user.name" type="nickname" placeholder="请填写名称(建议用真实名字)" />

		</view>
		<view class=" inputBg ">
			<input class="" v-model="user.phone" placeholder="请填写手机号" />
		</view>
		<view class=" inputBg ">
			<view class="flex-items flex-sp-between" @click="change">
				<view>

					<text class="font30" v-if="user.deptName">
						{{user.deptName}}
					</text>
					<text class="font30 font-gray2" v-else>
						请选择部门
					</text>
				</view>
				<view>
					<uni-icons @click="change" color="#8f9499" type="right" size="20"></uni-icons>
				</view>
			</view>
			<u-picker :show="show" :columns="deptList" @cancel="cancel" @confirm="confirm"
				keyName="deptName"></u-picker>

		</view>
		<button class="saveBtn" :class="user.name&&user.phone!=''&&user.deptId!=''?'btnColorSelect':'btnColor'"
			type="primary" @click="next">保存</button>

	</view>
</template>

<script>
	import {
		memberDetail
	} from '../../config/api';
	import store from "@/store";
	import {
		UPLOAD_URL
	} from '../../common/config.js'
	export default {

		data() {
			return {
				show: false,

				deptList: [

				],
				user: {
					name: "",
					phone: "",
					avatar: "",
				},
				fileList: [],
				token: "",
			};
		},
		created() {
			this.token = store.state.vuex_user.access_token
			this.user = store.state.vuex_user
			this.user.deptId = ""
			console.log(this.user)


		},
		onLoad() {
			// this.getList()
		},
		methods: {
			confirm(item) {
				console.log(item)
				this.user.deptId = item.value[0].id
				this.user.deptName = item.value[0].deptName
				this.show = false
			},
			cancel() {
				this.show = false
			},
			change() {
				this.show = true
			},
			onChooseAvatar(e) {
				console.log(e)
				this.uploadFilePromise(e.detail.avatarUrl).then((res) => {
					console.log(res)
					this.user.avatar = res.data.link
				})
				this.$forceUpdate()
			},

			getUserDetail() {
				this.bladeUserGetUserDetail().then((res) => {
					this.user = res.data
				})
			},
			getList() {
				getDeptList().then((res) => {
					let list = []
					list = res.data
					this.deptList.push(list)
					console.log(this.deptList)
				})
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					this.user.avatar = result.data.link
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: UPLOAD_URL,
						filePath: url,
						header: {
							"Blade-Auth": this.token
						},
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data))
						}
					});
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			next() {
				console.log(this.user)
				if (this.user.name == "") {
					return uni.$u.toast('请填写名称');
				}
				if (this.user.phone == "") {
					return uni.$u.toast('请填写手机号码');
				}
				if (this.user.deptId == "") {
					return uni.$u.toast('请选择部门');
				}
				updateUser(this.user).then((res) => {
					this.$Router.replaceAll({
						name: 'my'
					});
				})

			},

		}
	};
</script>

<style scoped>
	.saveBtn {
		margin-top: 50rpx;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 10rpx;
		background-color: #659bf2;
	}

	button::after {
		border: none;
	}

	.btnColorSelect {
		background-color: #659bf2;
	}

	.btnColor {
		background-color: #e5e5e5;
	}

	.inputBg {
		background-color: #f3f3f3;
		width: 700rpx;
		margin-left: 25rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		border: none;
		font-size: 30rpx;
		padding: 20rpx;
		position: relative;
	}

	.container {
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	.header {
		text-align: center;
		margin-bottom: 20px;
		padding-top: 30rpx;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.subtitle {
		font-size: 16px;
		color: #666;
	}


	.avatarButton {
		background: transparent;
		border: none;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;

		/* border: 1px solid #ababab; */
	}

	button::after {
		border: none;
	}
</style>