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

<!--
 * @Author: ch
 * @Date: 2022-03-22 15:09:06
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 22:59:42
 * @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'
export default {
	components: { UiCell, UiButton },
	computed:{
		userInfo (){
			return this.$store.state.userInfo
		}
	},
	methods:{
		logout(){
			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>