hotel-tablecloth-uniapp-24-08-29/pages_order/mine/updateUserInfo.vue

<template>
	<view class='updateUserInfo'>
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="修改个人信息" />

		<!--主页面-->
		<view class="frame">
			<view class="headImage">
				<view style="" class="key">头像</view>
				<button style="" class="value" @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
					<image 
					:src="form.headImage" v-if="form.headImage" 
					style="width: 100%;height: 100%" mode="aspectFill">
					</image>
					<image src="/static/image/tabbar/6.png" v-else style="width: 100%;height: 100%" mode="aspectFill">
					</image>
				</button>
			</view>
			<view class="item">
				<view class="label">{{ userShop ? '店铺名称' : '昵称' }}</view>
				<view class="value">
					<input type="nickname" :placeholder="'请输入' + (userShop ? '店铺名称' : '昵称') " style="text-align: right;" id="nickName"
						v-model="form.nickName" />
				</view>
			</view>
			
			
		</view>

		<!-- ActionSheet 操作菜单 -->
		<uv-action-sheet ref="actionSheet" :actions="sexList" title="性别" @select="select" @close="close">
		</uv-action-sheet>

		<!--确认修改个人信息按钮-->
		<button @click="confirmEditUserInfo" class="bottomBtn">
			确认修改
		</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['userShop']),
		},
		data() {
			return {
				form: {
					nickName: '1',
					headImage: '',
				},
				fileList: [],
			}
		},
		onLoad() {
			if(this.userShop){
				this.form.headImage =  this.userInfo.shop.pic
				this.form.nickName =  this.userInfo.shop.name
			}else{
				this.form.headImage = this.userInfo.headImage
				this.form.nickName = this.userInfo.nickName
			}
		},
		methods: {

			onChooseAvatar(res) {
				let self = this
				console.log(res.target.avatarUrl, "res.target.avatarUrl");
				self.$Oss.ossUpload(res.target.avatarUrl)
					.then(url => {
						console.log(url, "url");
						self.form.headImage = url
					})
			},

			// 确认修改个人信息
			confirmEditUserInfo() {
				let self = this
				uni.createSelectorQuery().in(this)
				.select("#nickName")
				.fields({
					properties: ["value"],
				})
				.exec((res) => {
					const nickName = res?.[0]?.value
					self.form.nickName = nickName

					if (self.$utils.verificationAll(self.form, {
							headImage: '请选择头像',
							nickName: '请填写' + (this.userShop ? '店铺名称' : '昵称')
						})) {
						return
					}
					
					
					if(this.userShop){
						self.$api('shopEditInfo', {
							pic : self.form.headImage,
							name : self.form.nickName,
						}, res => {
							if (res.code == 200) {
								uni.reLaunch({
									url: '/pages/index/center'
								})
							}
						})
					}else{
						self.$api('updateInfo', {
							headImg : self.form.headImage,
							nickname : self.form.nickName,
						}, res => {
							if (res.code == 200) {
								uni.reLaunch({
									url: '/pages/index/center'
								})
							}
						})
					}
					
				})

			},

			sexChange() {
				this.$refs.actionSheet.open() //打开ActionSheet 操作菜单
			},

			// ActionSheet 操作菜单选中
			select(e) {
				console.log('选中该项：', e);
				this.form.sex = e.name
				this.$refs.actionSheet.close() //关闭操作菜单
			},

			// ActionSheet 操作菜单关闭
			close() {
				this.$refs.actionSheet.close() //关闭操作菜单

			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.updateUserInfo {
		.frame {
			padding: 28rpx 28rpx 0 28rpx;

			.headImage {
				display: flex;
				// width: 100vw;
				padding: 20rpx;

				.key {
					width: 500rpx;
					display: flex;
					align-items: center;
				}

				.value {
					border-radius: 50rpx;
					border: 1px solid red;
					box-sizing: border-box;
					overflow: hidden;
					width: 100rpx;
					height: 100rpx;
					padding: 0;
				}
			}


			.item {
				display: flex;
				justify-content: space-between;
				// border-bottom: 1px solid #c9c9c9;
				margin-top: 20rpx;
				padding: 20rpx;

				.label {
					width: 50%;
				}

				.value {
					width: 50%;
					text-align: right;
				}
			}
		}
	}

	/deep/ .input__content {
		/deep/.uv-input__content__field-wrapper {
			border: 1px solid red;

			input {
				text-align: right;
			}
		}
	}

	/deep/ .uv-input__content__field-wrapper__field {
		text-align: right;
	}
	.bottomBtn {
	    position: fixed;
	    bottom: 5%;
	    left: 10%;
	    width: 80%;
	    height: 80rpx;
	    text-align: center;
	    color: #ffffff;
	    background: $uni-color;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
	}
</style>