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>
		</view>
		<view class="nav-panel">
			<view :class="{item: true, sapce: item.topSpace}" v-for="(item,index) in navList" :key="'nav'+index">
				<image class="icon" :src="`../../static/svg/user_nav_${item.value}.svg`"></image>
				<view class="label">
					{{item.label}}
				</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>
	.content {
		height: 100%;
		background: #f3f3f3;
		padding-bottom: 41.21rpx;
		box-sizing: border-box;
	}

	.header-panel {
		height: 274.73rpx;
		background: rgba(0, 210, 195, 1);
		font-size: 27.47rpx;
		display: flex;
		align-items: center;
		color: #fff;

		.avatar {
			width: 123.63rpx;
			height: 123.63rpx;
			margin: 0 39.84rpx 0 53.57rpx;
			border-radius: 50%;
		}

		.btn {
			width: 151.1rpx;
			height: 54.95rpx;
			line-height: 52.2rpx;
			border: 1px solid #fff;
			border-radius: 2.75rpx;
			font-size: 27.47rpx;
			background: transparent;
			color: #fff;
			padding: 0;
			margin: 0;

			&::after {
				display: none;
			}
		}

		.info {
			flex: 1;
			line-height: 1;
			position: relative;
			padding-right: 82.42rpx;

			.name {
				font-size: 38.46rpx;
				margin-bottom: 16.48rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.company {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.arrow {
				width: 23.35rpx;
				height: 43.96rpx;
				position: absolute;
				right: 53.57rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.menu-panel {
		display: flex;
		background: #fff;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			bottom: 0%;
			right: 0;
			height: 1rpx;
			background: #e0e0e0;
			transform: scaleY(.5);
		}

		.item {
			flex: 1;
			height: 151.1rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			&:before {
				content: '';
				width: 1rpx;
				position: absolute;
				left: 0%;
				top: 0;
				bottom: 0%;
				background: #e0e0e0;
				transform: scaleX(.5);
			}

			&:first-child::before {
				display: none;
			}

			.icon {
				width: 54.95rpx;
				height: 54.95rpx;
				margin-bottom: 13.74rpx;
			}
		}
	}

	.nav-panel {
		margin-top: 13.74rpx;

		.item {
			background: #fff;
			display: flex;
			align-items: center;
			height: 96.15rpx;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 0%;
				right: 0%;
				top: 0;
				height: 1rpx;
				background: #e0e0e0;
				transform: scaleY(.5);
			}

			&:first-child::before {
				display: none;
			}

			&.sapce {
				margin-top: 13.74rpx;

				&:before {
					display: none;
				}
			}

			.icon {
				width: 43.96rpx;
				height: 43.96rpx;
				margin: 0 20.6rpx 0 31.59rpx;
			}
			.label{
				flex: 1;
			}
			.arrow{
				width: 27.47rpx;
				height: 27.47rpx;
				margin-right: 27.47rpx;
			}
		}
	}
</style>