WenWuGuanJia/answer_pages/user/mine.vue

<template>
	<view class="wrap">
		<view class="user-view">
			<view class="b-avatar">
				<image :src="userInfo.avatar_url || '/static/imgs/user.png'" mode="aspectFill"></image>
			</view>
			<view class="b-info">
				<!-- #ifdef  MP-WEIXIN -->
				<button class="s-edit iconfont icon-edit open-data-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
				<!-- #endif -->
				<!-- #ifdef  H5 -->
				<view class="s-edit iconfont icon-edit" @click="onUploadAvatar"></view>
				<!-- #endif -->
			</view>
		</view>
		<view class="user-info">
			<view class="b-item">
				<text class="s-tit">成员姓名</text>
				<text class="s-tip">{{ userInfo.name }}</text>
			</view>
			<view class="b-item">
				<text class="s-tit">成员编号</text>
				<text class="s-tip">{{ userInfo.number }}</text>
			</view>
			<view class="b-item">
				<text class="s-tit">手机号</text>
				<text class="s-tip">{{ userInfo.phone }}</text>
			</view>
			<view class="b-item">
				<text class="s-tit">所在分组</text>
				<text class="s-tip">{{ userInfo.group_name }}</text>
			</view>
			<!-- #ifdef  MP-WEIXIN -->
			<view class="b-item" v-if="loginMethods.indexOf('phone_captcha') !== -1 || loginMethods.indexOf('wechat_phone') !== -1" @click="onChangePhone">
				<text class="s-tit">修改手机号</text>
				<text class="s-tip"></text>
				<text class="s-more iconfont icon-more"></text>
			</view>
			<!-- #endif -->
			<!-- #ifdef  H5 -->
			<view class="b-item" v-if="loginMethods.indexOf('phone_captcha') !== -1" @click="onChangePhone">
				<text class="s-tit">修改手机号</text>
				<text class="s-tip"></text>
				<text class="s-more iconfont icon-more"></text>
			</view>
			<!-- #endif -->
			<view class="b-item" v-if="loginMethods.indexOf('name_code') !== -1 || loginMethods.indexOf('number_code') !== -1" @click="onChangeCode">
				<text class="s-tit">修改登录码</text>
				<text class="s-tip"></text>
				<text class="s-more iconfont icon-more"></text>
			</view>
		</view>
		<view class="btn-logout" @click="onLogout">退出登录</view>
	</view>
</template>

<script>
import { getUserInfo, updateUserInfo, logout } from '@/service/api/user.js';
import { uploadImage } from '@/service/api/common.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '@/mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			userInfo: {}
		};
	},
	onLoad() {
		getUserInfo().then(([err, res]) => {
			console.log('getUserInfo', err, res);
			if (!err) {
				this.userInfo = res;
			}
		});
	},
	computed: {
		loginMethods() {
			return this.$store.getters.globalConfig.login_methods || [];
		}
	},
	methods: {
		onChangePhone() {
			uni.navigateTo({
				url: '/answer_pages/user/changePhone'
			});
		},
		onChangeCode() {
			uni.navigateTo({
				url: '/answer_pages/user/changeCode'
			});
		},
		onLogout() {
			logout().then(([err, res]) => {
				console.log('logout', err, res);
				this.$store.commit('delAccessToken');
				uni.reLaunch({
					url: '/answer_pages/user/login'
				});
			});
		},
		onChooseAvatar(e) {
			console.log('onChooseAvatar', e);
			let imageUrl = e.detail.avatarUrl;
			uploadImage(imageUrl).then(([err, res]) => {
				console.log('uploadImage', err, res);
				if (!err) {
					updateUserInfo(res.path).then(([err, res]) => {
						console.log('updateUserInfo', err, res);
						if (!err) {
							this.userInfo.avatar_url = imageUrl;
							this.$logic.showToast('修改成功');
						}
					});
				}
			});
		},
		onUploadAvatar(e) {
			console.log('onUploadAvatar', e);
			uni.chooseImage({
				count: 1, // 1张
				sizeType: ['compressed'] // 压缩图
			}).then(([err, res]) => {
				console.log('chooseImage', err, res);
				if (!err) {
					let imageUrl = res.tempFilePaths[0];
					uploadImage(imageUrl).then(([err, res]) => {
						console.log('uploadImage', err, res);
						if (!err) {
							updateUserInfo(res.path).then(([err, res]) => {
								console.log('updateUserInfo', err, res);
								if (!err) {
									this.userInfo.avatar_url = imageUrl;
									this.$logic.showToast('修改成功');
								}
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: env(safe-area-inset-bottom);
	background: $pq-bg-color;
}

.wrap {
	padding: 0 40upx 100upx 40upx;
}

.user-view {
	margin-top: 50upx;
	display: flex;
	align-items: center;
	flex-direction: column;
	z-index: 1;

	.b-avatar {
		width: 180upx;
		height: 180upx;

		image {
			width: 180upx;
			height: 180upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}
	}

	.b-info {
		margin-top: 10upx;

		.s-nickname {
			font-weight: bold;
		}

		.s-edit {
			margin-top: 20upx;
			font-size: 32upx;
			color: #bbb;
		}
	}
}

.user-info {
	margin-top: 50upx;
	background: #fff;
	border-radius: 20upx;

	.b-item {
		padding: 0 40upx;
		border-bottom: 1upx solid $pq-bg-color;
		height: 100upx;
		display: flex;
		align-items: center;
		position: relative;
		font-size: 26upx;

		.s-tit {
			color: #000;
		}

		.s-tip {
			flex: 1;
			color: #808080;
			text-align: right;
		}

		.s-more {
			margin-left: 10upx;
			color: #808080;
		}
	}
}

.btn-logout {
	margin-top: 60upx;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	color: #da5650;
	background: #ffffff;
	font-size: 32upx;
	border: 1px solid #da5650;
	border-radius: 40upx;
	letter-spacing: 10upx;
}
</style>