JianjianStreet-H5/pages/my/edit-user.vue

<template>
	<view>
		<view style="margin-bottom: 50rpx;">
			<view class="user-from">
				<view class="user-from-line">
					<view class="line-lable">头像：</view>
					<view class="line-value" @click="upImg">
						<image class="user-img" :src="userData.headImage" mode=""></image>
					</view>
				</view>
				<view class="user-from-line">
					<view class="line-lable">名称：</view>
					<view class="line-value">
						  <u--input
						    placeholder="请输入名称"
						    v-model="userData.nickName"
							border="none"
							inputAlign="right"
						  ></u--input>
					</view>
				</view>
				<view class="user-from-line">
					<view class="line-lable">手机号：</view>
					<view class="line-value">
						  <u--input
						    placeholder="请输入手机号"
						    v-model="userData.phone"
							border="none"
							inputAlign="right"
						  ></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="modify-but">
			<u-button :custom-style="modifyStyle" shape="circle" hover-class="none" @click="submit">保存</u-button>
			<u-button :custom-style="modifyStyleQuxiao" shape="circle" hover-class="none" @click="outLogin">退出登陆</u-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				modifyStyle: {
					width: '670rpx',
					height: '85rpx',
					background: '#00CCCC',
					color: '#fff',
					fontSize: '32rpx'
				},
				modifyStyleQuxiao: {
					width: '670rpx',
					height: '85rpx',
					background: '#f4f4f4',
					color: '#333',
					fontSize: '32rpx',
					marginTop: '40rpx'
				},
				userData:{}
			}
		},
		onLoad() {
			
			
		},
		onShow() {
			this.getMyInfo()
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods: {
			upImg(){
				uni.chooseImage({
					count: 1, // 只选一张，目前 SDK 不支持一次发送多张图片
					success: (res) => {
						uni.uploadFile({
							url: 'https://api.chemu90.com/xcx/oss/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								this.form.pic = JSON.parse(uploadFileRes.data).result
							}
						});
					}
				})
			},
			getMyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.userData = res.result;
					}
				})
			},
			outLogin(){
				uni.clearStorageSync();
				this.$Toast('退出成功！')
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/my/index'
					})
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-from {
		padding: 0 24rpx;
		.user-from-line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid  #f4f4f4;
			height: 100rpx;
			
			.line-lable {
				font-size: 30rpx;
			}
			
			.line-value {
				.user-img {
					width: 70rpx;
					height: 70rpx;
				}
				
				.erweima {
					width: 333rpx;
					height: 333rpx;
				}
			}
			
		}
		
		.heightAuto {
			height: auto;
			border: none;
			align-items: flex-start;
			padding-top: 30rpx;
		}
		
	}
	.modify-but {
	}
</style>