XEH-miniProgram/pages/self/index.vue

<template>
	<view class="content">
		<view class="header-panel">
			<image v-if="userInfo && userInfo.avatar" class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
			<image v-else class="avatar" src="../../static/img_avatar.png" mode="aspectFill"></image>
			<view v-if="userInfo" class="info">
				<view class="name">{{ userInfo.name }}</view>
				<view class="company">{{ userInfo.company }}</view>
				<image class="arrow" src="../../static/icon_arrow.png"></image>
			</view>
			<button v-else class="btn" @click="handleOpenLogin">登录</button>
		</view>
		<view class="menu-panel">
			<view class="item" v-for="(item, index) in manuList" :key="index">
				<image class="icon" :src="`../../static/svg/user_menu_${item.value}.svg`"></image>
				{{ item.label }}
				<view class="badge" v-if="item.value === 2">
					4
				</view>
			</view>
		</view>
		<view class="nav-panel">
			<view :class="{ item: true, sapce: item.topSpace }" v-for="(item, index) in navList" :key="index">
				<view class="icon">
					<image :class="'icon-img icon-img-'+item.value" :src="`../../static/svg/user_nav_${item.value}.svg`"></image>
				</view>
				<view class="label">
					{{ item.label }}
				</view>
				<!-- 我的分销 -->
				<view class="tag" v-if="item.value === 4">
					累计收益 0.00
				</view>
				<!-- 我的优惠券 -->
				<view class="sub active" v-if="item.value === 5">
					3张可用
				</view>
				<image class="arrow" src="../../static/svg/arrow.svg"></image>
			</view>
		</view>
	</view>
</template>

<script>
import md5 from '@/common/md5.js';
import avatar from '@/static/taxation/poster.jpg';
export default {
	components: {},
	data() {
		return {
			userInfo: '',
			manuList: [
				{
					label: '我的订单',
					value: 1
				},
				{
					label: '我的账单',
					value: 2
				},
				{
					label: '我的发票',
					value: 3
				},
				{
					label: '企业钱包',
					value: 4
				}
			],
			navList: [
				{
					label: '企业资料',
					value: 1
				},
				{
					label: '企业团队',
					value: 2
				},
				{
					label: '认证信息',
					value: 3
				},
				{
					label: '我的分销',
					value: 4,
					topSpace: true
				},
				{
					label: '我的优惠券',
					value: 5
				},
				{
					label: '常见问题',
					value: 6,
					topSpace: true
				},
				{
					label: '关于我们',
					value: 7
				}
			],
			list: [
				{
					icon: '/static/scan.png',
					name: '企业资料',
					// url: "/pages/index/scanCode/index",
					isShow: true
				},
				{
					icon: '/static/self-icon.png',
					name: '企业团队',
					url: '/pages/index/self_info',
					isShow: true
				},
				{
					icon: '/static/org-icon.png',
					name: '认证信息',
					url: '/pages/index/org_member',
					isShow: true
				},
				{
					icon: '/static/explain-icon.png',
					name: '我的分销',
					url: '/pages/index/back_login',
					isShow: true
				},
				{
					icon: '/static/back.png',
					name: '我的优惠券',
					// url: "/pages/index/scanCode/index",
					isShow: true
				},
				{
					icon: '/static/explain-icon.png',
					name: '常见问题',
					url: '/pages/index/back_login',
					isShow: true
				},
				{
					icon: '/static/back.png',
					name: '关于我们',
					// url: "/pages/index/scanCode/index",
					isShow: true
				}
			]
		};
	},
	onLoad() {},
	onShow() {},
	methods: {
		handleOpenLogin() {
			this.userInfo = {
				name: 'Caocao',
				company: '天津超易达胜科技',
				avatar: avatar
			};
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>