mp_exhibitor_miniprog/pages/user/info.vue

<template>
	<view class="user-info">
		<nav-bar title="个人信息" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<van-cell-group>
				<van-cell title="头像" class="van-cell--clickable" @click="navigateTo('/pages/user/info-edit')">
					<view class="right-icon" slot="right-icon">
						<view class="user-avator">
							<image v-if="user.avatar" :src="user.avatar" mode="aspectFill" />
							<image v-else src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" mode="aspectFill" />
						</view>
						<van-icon
						  name="arrow"
						  class="van-cell__right-icon-wrap right-icon-class"
						  custom-class="van-cell__right-icon"
						/>
					</view>
				</van-cell>	
				<van-cell title="呢称" is-link :value="user.nick_name || '微信呢称'" @click="navigateTo('/pages/user/info-edit')">
				</van-cell>
				<van-cell title="公司" is-link :value="user.company_name || '点击设置'" @click="navigateTo('/pages/user/info-edit')">
				</van-cell>
				<van-cell title="职业" is-link :value="user.title || '点击设置'" @click="navigateTo('/pages/user/info-edit')">
				</van-cell>
			</van-cell-group>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import VanCellGroup from '@/wxcomponents/vant/cell-group/index'
	import VanCell from '@/wxcomponents/vant/cell/index'
	import VanActionSheet from '@/wxcomponents/vant/action-sheet/index'
	import { updateInfo } from '../../api/user'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			VanCell,
			VanCellGroup,
			VanActionSheet
		},
		computed: {
			user() {
				return this.$store.getters.user || {}
			}
		},
		data() {
			return {}
		},
		created() {
			this.checkAuth('/pages/user/info')
		},
		onShow() {
		}, 
		methods: {
			onChooseAvatar(e) {
				this.navigateTo('/pages/user/info-edit?avatar=' + e.detail.avatarUrl)
			},
			onCellClick() {
				this.navigateTo('/pages/user/setting-edit')
			}
		}
	}
</script>

<style lang="scss">
	.user-info{
		.user-avator{
			@include display-flex-center;
			width: 111rpx;
			height: 111rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 13rpx;
			.icon{
				color: #ffffff;
				opacity: 0.67;
				font-size: 70rpx;
			}
		}
	}
</style>