warst/warst-h5/pages/my/personalData.vue

<template>
	<!-- 个人资料 -->
	<view class="personal-data">
		<c-cell height="60" title="头像">
			<template #value>
				<u-avatar :src="userInfo.avatar" :text="text"></u-avatar>
			</template>
		</c-cell>
		<c-cell height="60" title="性别" :value="sex"> </c-cell>
		<c-cell height="60" title="年龄" :value="userInfo.age"></c-cell>
		<c-cell height="60" title="手机号码" :value="newTel"></c-cell>
		<c-cell
			height="60"
			title="科室"
			:value="userInfo.company"
		></c-cell>
		<c-cell height="60" title="职位" :value="userInfo.post"></c-cell>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'personalData',
	data() {
		return {
			sexKey: {
				0: '男',
				1: '女',
				2: '未知',
			},
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		sex() {
			const { sex: gender } = this.userInfo;
			return this.sexKey[gender];
		},
		newTel() {
			const { phonenumber } = this.userInfo;
			return this.$c.middleTel(phonenumber, true);
		},
		text() {
			const { avatar, userName = '' } = this.userInfo;
			return avatar ? undefined : userName.charAt(0);
		},
	},
};
</script>

<style scoped lang="scss">
.personal-data {
	padding: $pg-pd;
}
</style>