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.phone }}</view>
				<view class="company">{{ userInfo.phone }}</view>
				<image class="arrow" src="../../static/icon_arrow.png"></image>
			</view>
			<button type="primary" class="btn" v-show="!userInfo.sessionKey" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button>
		</view>
		<view class="menu-panel">
			<view class="item" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item.value)">
				<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 userService from '@/api/user.js';
import avatar from '@/static/taxation/poster.jpg';
export default {
	components: {},
	data() {
		return {
			userInfo: '',
			menuList: [
				{
					label: '我的订单',
					value: 1
				},
				{
					label: '我的账单',
					value: 2
				},
				{
					label: '我的发票',
					value: 3
				},
				{
					label: '企业钱包',
					value: 4
				}
			],
			navList: [
				{
					label: '我的企业',
					value: 1
				},
				{
					label: '我的合同',
					value: 2
				},
				// {
				// 	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() {
		this.getUserInfo();
	},
	methods: {
		getPhoneNumber(e) {
			let res = getApp().getPhoneNumber(e);
			if (res) this.getUserInfo();
		},
		async getUserInfo() {
			const { data } = await userService.getUserInfo();
			this.userInfo = data;
		},
		handleOpenLogin() {
			// this.userInfo = {
			// 	name: 'Caocao',
			// 	company: '天津超易达胜科技',
			// 	avatar: avatar
			// };
			uni.navigateTo({
				url: 'login'
			});
		},
		handleOpenInfo() {
			if (!this.userInfo) return;
			uni.navigateTo({
				url: 'info'
			});
		},
		handleMenu(val) {
			let url = '';
			switch (val) {
				case 1:
					url = 'order/index';
					break;
				case 2:
					url = 'bill/index';
					break;
				case 3:
					url = 'invoice/index';
					break;
				case 4:
					url = 'wallet/index';
					break;
			}
			uni.navigateTo({
				url
			});
		},
		handleNav(val) {
			let url = '';
			switch (val) {
				case 1:
					url = 'enterprise/index';
					break;
				case 2:
					url = 'contract';
					break;
				// case 1:
				// 	url = 'enterpriseInfo';
				// 	break;
				// case 2:
				// 	url = 'enterpriseTeam';
				// 	break;
				// case 3:
				// 	url = 'auth';
				// 	break;
				case 5:
					url = 'coupon/index';
					break;
				case 6:
					url = 'commonQuestion';
					break;
				case 7:
					url = 'about';
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

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