XEH-miniProgram/pages/self/index.vue

<template>
	<view class="page-wrap">
		<view class="header-panel" @click="handleOpenInfo">
			<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.stop="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"
				@click="handleNav(item.value)">
				<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 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,

				};
			},
			handleOpenInfo() {
				if (!this.userInfo) return
				uni.navigateTo({
					url: 'info'
				});
			},
			handleNav(val) {
				let url = '';
				switch (val) {
					case 1:
						url = 'enterpriseInfo'
						break
					case 2:
						url = 'enterpriseTeam'
						break
					case 3:
						url = 'auth'
						break
					case 5:
						url = 'coupon'
						break
					case 6:
						url = 'commonQuestion'
						break
					case 7:
						url = 'about'
						break
				}
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

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