mp_exhibitor_miniprog/pages/user/info.vue

<template>
  <page-layout 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>
  </page-layout>
</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'
  import PageLayout from "@/components/layout/page-layout";

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      PageLayout,
			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>