shop-app/pages/account/setting/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 15:09:06
 * @LastEditors: ch
 * @LastEditTime: 2022-05-21 14:18:06
 * @Description: file content
-->
<template>
	<view>
		<UiCell class="userInfo cell" :title="userInfo.nickname" @click="$Router.push('/setUserInfo')">
			<image slot="icon" class="userInfo--head"  :src="userInfo.avatar || require('@/static/account/tx.png')" ></image>
		</UiCell>
		<UiCell class="cell" title="我的收货地址" @click="$Router.push('/addressList')"></UiCell>
		<UiCell class="cell" title="关于我们" ></UiCell>
		<UiCell class="cell cell--last" title="版本号" value="1.0.0" valueClass="cell--value" :rightIcon="false"></UiCell>
		<view class="logout" @click="logout">退出登录</view>
	</view>
</template>
<script>
import UiButton from '@/components/UiButton.vue'
import UiCell from '@/components/UiCell.vue';
import {Im} from '@/common/utils';
import {ApiGetLogout} from '@/common/api/index';
export default {
	components: { UiCell, UiButton },
	computed:{
		userInfo (){
			return this.$store.state.userInfo
		}
	},
	methods:{
		logout(){
			uni.showModal({
				content : '是否退出登录？',
				cancelText : '再看看',
				cancelColor : '#999',
				confirmColor : '#3A83FB',
				success:async ({confirm})=>{
					if(confirm){
						await ApiGetLogout();
						this.$store.commit('SET_TOKEN');
						Im.logout();
						console.log(Im, this.$store.state);
						this.$Router.replace('/login');
					}
				}
			})
			// this.$msb.confirm({
			// 	content : '是否退出登录？',
			// 	cancelText : '再看看',
			// 	confirm : ()=>{
			// 		this.$store.commit('SET_TOKEN');
			// 		this.$Router.replace('/login');
			// 	}
			// })
		}
	}
	
}
</script>
<style lang="scss">
page {
	background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.userInfo{
	margin: 20rpx 0;
	border: 0;
	height: 200rpx;
	&--head{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}
}
.cell{
	padding: 0 40rpx;
	&--last{
		border: 0;
	}
}
.logout{
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: $color-grey4;
	background: $color-grey0;
	margin: 20rpx 0;
	font-size: $font-size-lg;
}

/deep/{
	.userInfo .uiCell--title{
		font-size: $font-size-lg;
	}
	.uiCell--value{
		color: $color-grey4;
	}
}
</style>