zhengxinApplets/pages/user/personal.vue

<template>
	<view class="site">
		<view class="site-bd">
			<form @submit="sureSubmit">
			<view class="item">
				<view class="a">用户头像</view>
				<view class="b">
					<view class="pic">
						<image v-if="userInfo.avatar" class="img" :src="baseUrl + userInfo.avatar"></image>
						<image v-else class="img" src="https://www.lijkj.cn/static/default.png"></image>
						<button open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
					</view>
					<text>编辑</text>
				</view>
			</view>
			<view class="item">
				<view class="a">用户昵称</view>
				<view class="b">
					<input :value="userInfo.nickname" name='nickname' type="nickname" placeholder="请输入用户名" />
					<button class="btn" v-if="isShow1 == true" formType="submit">完成</button>
					<text @click="openPage(2)" v-else>编辑</text>
				</view>
			</view>
		<!-- 	<view class="item">
				<view class="a">密码</view>
				<view class="b" @click="openPage(3)">
					<text>设置</text>
				</view>
			</view> -->
			<view class="item">
				<view class="a">实名认证</view>
				<view class="b" @click="openPage(4)">
					<text>{{userInfos.is_shiming == 0?'审核中':userInfos.is_shiming == 1?'已通过':userInfos.is_shiming == -1?'已驳回':'去认证'}}</text>
				</view>
			</view>
			<view class="item">
				<view class="a">手机号</view>
				<view class="b" @click="openPage(5)">
					<input disabled :value="userInfo.mobile" type="number"/>
					<text>编辑</text>
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.wechat">
				<view class="a">微信号</view>
				<view class="b">
					<input :disabled="isShow2 == false" v-model="userInfo.wechat_num" type="text" placeholder="请输入微信号" />
					<text v-if="isShow2 == false" @click="openPage(1)">编辑</text>
					<text v-else @click="openPage(7)">完成</text>
				</view>
			</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systembasicInfoopen: {},
				userInfo: {},
				isShow1: false,
				isShow2: false,
				baseUrl: "",
				userInfos: {}
			};
		},
		onShow() {
			this.systembasicInfoopen = uni.getStorageSync("systembasicInfoopen")
			this.getUserInfo();
			this.baseUrl=this.$baseUrl
			this.getUsershenhe();
		},
		methods: {
			//查询当前实名认证情况
			async getUsershenhe() {
				const { code, data, msg } = await this.$api.getUsershenhe({token: uni.getStorageSync("token")});
				if(code == 1){
					this.userInfos = data
				}
			},
			openPage(index){
				if(index == 1){
					this.isShow2 = !this.isShow2
				}else if(index == 2){
					this.isShow1 = !this.isShow1
				}else if(index == 3){
					uni.navigateTo({
						url: "/pages/user/password"
					})
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/user/verification"
					})
				}else if(index == 5){
					uni.navigateTo({
						url: "/pages/user/phone"
					})
				}else if(index == 6){
					uni.navigateTo({
						url: "/pages/user/verification"
					})
				}else if(index == 7){
					if(!this.userInfo.wechat_num){
						uni.showToast({
							icon: "none",
							title: "请输入微信号"
						})
						return ;
					}
					this.toSubmit();
				}
			},
			sureSubmit(e) {
				this.userInfo.nickname = e.detail.value.nickname
				
				if(!this.userInfo.nickname){
					uni.showToast({
						icon: "none",
						title: "请输入用户昵称"
					})
					return ;
				}
				this.toSubmit();
			},
			async toSubmit() {
				const { code, data, msg} = await this.$api.editMember({
					avatar: this.userInfo.avatar?this.userInfo.avatar:'',
					nickname: this.userInfo.nickname?this.userInfo.nickname:"",
					wechat_num: this.userInfo.wechat_num?this.userInfo.wechat_num:"",
					token: uni.getStorageSync("token")
				})
				if(code == 1){
					uni.showToast({
						title: "修改成功"
					})
					this.getUserInfo();
				}else{
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//获取用户信息
			async getUserInfo() {
				const { code, data , msg } = await this.$api.getMemberInfo({token: uni.getStorageSync("token")});
				if(code == 1){
					uni.setStorageSync('userInfo', data.user);
					this.userInfo = data.user;
					this.isShow1 = false;
					this.isShow2 = false;
				}else{
					uni.showToast({
						title: msg,
						icon: "none",
					})
				}
			},
			chooseavatar(e){
				let tempFiles = e.detail.avatarUrl;
				const that = this;
				uni.uploadFile({
					name: 'file',
					url: this.$baseUrl+'/api/Common/upload',
					filePath: tempFiles,
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (upRes) => {
						const {code, data, msg } = JSON.parse(upRes.data);
						if(code == 1){
							that.userInfo.avatar = data.url
							that.toSubmit();
						}else{
							uni.showToast({
								icon: "error",
								title: "上传失败"
							})
						}
					},
					fail: (err) => {
						console.log("toUpload err",err)
						console.log(err)
					}
				});		
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.site{
	padding: 25rpx;
	overflow: hidden;
	&-bd{
		width: 700rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #EAEAEA;
			padding: 35rpx 0;
			overflow: hidden;
			position: relative;
			&:first-child{
				border-color: #FFFFFF;
			}
			.a{
				width: 160rpx;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
			}
			.b{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				input{
					flex: 1;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				text{
					font-weight: 500;
					font-size: 28rpx;
					color: #00C6A9;
					margin-left: 15rpx;
				}
				button{
					font-weight: 500;
					font-size: 28rpx;
					color: #00C6A9;
					background-color: transparent;
					display: inline-block;
					line-height: 30rpx;
					padding: 0;
					margin: 0;
					&::after{
						border-color: transparent;
					}
				}
				.pic{
					width: 60rpx;
					height: 60rpx;
					position: relative;
					overflow: hidden;
					button{
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 2;
						opacity: 0;
					}
				}
				image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	}
}
</style>