houyi-uniapp/pages/me/setting.vue

<template>
	<view class="xkl-com-bg">
		<view style="padding-top: 30rpx;">
			<view class="means-a">
				<view class="means-a-list" style="justify-content: center;padding-top: 30rpx;">
					<!-- <view class="tit">头像</view> -->
					<image :src="userInfo.avatar_url" v-if="userInfo.avatar_url" class="header" @click="infoHeader"></image>
					<image src="/static/mr.png" v-else class="header" @click="infoHeader"></image>
				</view>
				<view class="means-a-list" style="justify-content: center;">
					<!-- <view class="tit">昵称</view> -->
					<view class="nickname" @click="infoHeader">{{userInfo.nickname}}</view>
					<u-icon name="edit-pen" size="24" @click="infoHeader"></u-icon>
				</view>
				<!-- @click="toUser" -->
				<view class="means-a-list">
					<view class="tit">用户名</view>
					<view class="means-zhuomi">
						<view class="means-zhuomi-tit" v-if="userInfo.username">{{userInfo.username}}</view>
						<!-- <view class="means-zhuomi-tit" v-else>请输入</view> -->
						<!-- <image src="/static/icon/youdao.png"></image> -->
					</view>
				</view>
				<!-- @click="mobileUp" -->
				<view class="means-a-list">
					<view class="tit">手机号</view>
					<view class="means-zhuomi">
						<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
						<!-- <image src="/static/icon/youdao.png"></image> -->
					</view>
				</view>
<!-- 				<view class="means-a-list">
					<view class="tit">退出登录</view>
					<image src="/static/icon/youdao.png" style="width: 11rpx;height: 21rpx;"></image>
				</view> -->
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		<u-button text="退出登录" size="normal" type="error"  @click="logout()"></u-button>
		<wx-user-info-modal v-model="showAuthorizationModal" :header="userInfo.avatar_url" :nickname="userInfo.nickname"
			@updated="updatedUserInfoEvent"></wx-user-info-modal>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" :inputType="'text'" mode="input" title="请输入用户名" placeholder="请输入用户名"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	export default {
		components: {
			WxUserInfoModal
		},
		data() {
			return {
				showAuthorizationModal: false,
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.auth.user
			}
		},
		onLoad() {
			console.log(this.userInfo);
		},
		methods: {
			toUser(){
				// $refs.inputDialog.open()
				uni.navigateTo({
					url:'/pages/me/userName?phone=' + this.userInfo.mobile
				})
			},
			mobileUp(){
				uni.navigateTo({
					url:'/pages/me/mobile?phone=' + this.userInfo.mobile
				})
			},
			logout() {
				this.$http.get('/shop/v10/auth/logout').then(({
					data
				}) => {
					this.$store.commit('auth/resetUser');
					this.$store.commit('auth/resetToken');
			
					uni.redirectTo({
						url: '/pages/me/login'
					});
				})
			},
			dialogInputConfirm(e) {
				console.log(e);
			},
			infoHeader() {
				console.log(123456);
				this.showAuthorizationModal = true
			},
			updatedUserInfoEvent(e) {
				this.$http.post('/shop/v10/user/update', {
					avatar_url: e.avatar,
					nickname: e.nickname
				}).then(({
					data,
					success,
					msg
				}) => {
					if (success) {
						this.$store.commit('auth/setUser', data);
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						// this.sendshow();
					}
				})
				this.showAuthorizationModal = false
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.means-a {
		width: 100%;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 25rpx;

		.means-a-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			min-height: 100rpx;
			background-color: #FFFFFF;
			padding: 0;
			border: 0;



			.tit {
				font-size: 30rpx;
				color: #999999;
			}

			.header {
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 20rpx;
				border-radius: 50%;
			}

			.nickname {
				font-size: 30rpx;
				color: #222222;
			}

			.means-zhuomi {
				display: flex;
				align-items: center;

				.zuomi {
					width: 189rpx;
					height: 36rpx;
					border: 1rpx solid #4D4590;
					border-radius: 5rpx;
					text-align: center;
					line-height: 36rpx;
					color: #4D4590;
					font-size: 22rpx;
				}

				.means-zhuomi-tit {
					margin: 0 30rpx;
					font-size: 28rpx;
					color: #999999;
				}

				image {
					width: 11rpx;
					height: 21rpx;
				}
			}
		}
	}
</style>