uniapp-ZHSQ/packages/user/index/index.vue

<template>
	<view class="container">
		<view class="header">
			<u-upload  @afterRead="afterReadImg" :deletable="false" :maxCount="1">
				<!-- <u-upload :fileList="avatarInfo"  @afterRead="afterReadImg" :deletable="false" :maxCount="1"> -->
				<!-- <view class="imgCon">
					<image class="avatar_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_422.png" mode="widthFix"></image>
				</view> -->
			<image class="avatar_pic" :src="avatarInfo.url" alt="" />
			</u-upload>
			<view>点击更换头像</view>
		</view>

		<view class="item" data-url="/packages/user/uploadAvatar/index" data-title="上传头像" @click="handleSelectClick">
			<view class="item-left">
				<image class="item-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_422.png" />
				<view class="item-title">上传头像</view>
			</view>
			<van-icon name="arrow" color="#D5AC66" />
		</view>

		<view class="item">
			<view class="item-left">
				<image class="item-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Classroom.png" />
				<view class="item-title">当前账户</view>
			</view>
			<view class="item-right">{{userInfo.user_name}}</view>
		</view>

		<view class="item" data-url="/packages/user/resetPwd/index" data-title="修改登录密码" data-type="login"
			@click="handleSelectClick">
			<view class="item-left">
				<image class="item-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_423.png" />
				<view class="item-title">修改登录密码</view>
			</view>
			<van-icon name="arrow" color="#D5AC66" />
		</view>

		<view class="item not-border" data-url="/packages/user/resetPwd/index" data-title="修改支付密码" data-type="pay"
			@click="handleSelectClick">
			<view class="item-left">
				<image class="item-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_424.png" />
				<view class="item-title">修改支付密码</view>
			</view>
			<van-icon name="arrow" color="#D5AC66" />
		</view>


		<!-- 灰色分割线 -->
		<view class="line"></view>
		<view class="item not-border">
			<view class="item-left">
				<image class="item-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_425.png" />
				<view class="item-title">绑定手机</view>
			</view>
			<view class="item-right desc">{{phoneNum}}</view>
		</view>
		<button class="quit_login" @click="handleQuitLoginClick">退出登录</button>
		
		<nav-footer />
	</view>
</template>

<script>
	import { NavgateTo, request, picUrl, upload } from '../../../utils/index';
	import { apiArr } from '../../../api/login';
	export default {
		data() {
			return {
				avatarInfo: {},
				userInfoList: [{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_422.png',
						desc: '上传头像',
						url: "/packages/user/uploadAvatar/index",
						isShowPic: true,
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Classroom.png',
						desc: '当前账户',
						url: "",
						text: "微信用户"
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_423.png',
						desc: '修改登录密码',
						type: 'login',
						url: "/packages/user/resetPwd/index",
						isShowPic: true,
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_424.png',
						desc: '修改支付密码',
						type: 'pay',
						url: "/packages/user/resetPwd/index",
						isShowPic: true,
						isLast: true,
					},
				],
				userInfo: {},
				phoneNum: uni.getStorageSync('phone'),
			}
		},
		methods: {
			// 上传图片
			async afterReadImg(e){
				console.log('eeee', e);
				const { file} = e;
				upload(file.url, res => {
					console.log('1111', res);
					this.avatarInfo = {
						url: picUrl + res.data.path,
						picUrl: res.data.path,
					}
				})
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				});
			},
			async init() {
				const res = await request(apiArr.loginInfo, 'POST', {});
				console.log('111211', res);
				this.avatarInfo = {
					url: res.img ? picUrl + res.img : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/person/Group_309.png',
					picUrl: res.img
				}
				this.userInfo = res;
			},
			
			// uni.openSetting({
			// 	success(res) {
			// 		console.log(res.authSetting)
			// 	}
			// });

			// 跳转指定页面url
			handleSelectClick(event) {
				const { url, title, type } = event.currentTarget.dataset
				if (!url) return;
				NavgateTo(`${url}?title=${title}&type=${type}`)
			},
			
			/**
			 * 退出登录
			 */
			handleQuitLoginClick() {
				console.log('退出登录');
				uni.removeStorageSync('ctoken');
				uni.removeStorageSync('userId');
				uni.removeStorageSync('phone');
				uni.removeStorageSync('device_id');
				uni.removeStorageSync('dealerId');
				uni.removeStorageSync('is_deal');
				uni.removeStorageSync('is_dev');
				uni.removeStorageSync('is_shop');
				uni.removeStorageSync('openId');
				uni.removeStorageSync('shopArea');
				uni.removeStorageSync('shopId');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
		},

		onLoad() {
			this.init();
		}
	}
</script>

<style>
@import url("./index.css");
</style>