JiangningUrbanManageApp/pages/company-mine/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-02-17 14:35:18
 * @LastEditors: 张涛
 * @LastEditTime: 2023-03-03 17:12:18
 * @FilePath: \liaoning-uniapp\pages\company-mine\index.vue
-->
<template>
	<view class="container-main">
		<view class="nav-title">
			<text>我的</text>
		</view>
		<view class="header-bg">
			<view class="header-logo"></view>
			<view class="user-data">
				<text class="user-company">{{userName}}</text>
			</view>
		</view>
		<view class="main">
			<view class="list">
				<view class="items" v-for="(item, index) in list" :key="index" @click="clickMineCell(item)">
					<view class="item">
						<view class="item-left">
							<image class="item-icon" :src="baseImgUrl + item.icon" alt="" />
							<text class="item-title">{{ item.title }}</text>
						</view>
						<uni-icons type="right" size="20" color="#D5D5D5"></uni-icons>
					</view>

					<view :style="
              index != list.length - 1
                ? 'width:86%; height:0.5px; background:#dce3ec;margin: 0 auto;'
                : ''
            " />
				</view>
			</view>
		</view>
		<!-- <view class="change-role" @click="handleLogout">
			<text>退出登录</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
				list: [{
						id: 1,
						title: "企业信息",
						icon: "liao-ning/icon_xxsz.png",
						path: '/selfInfo/selfInfo'
					},
					{
						id: 2,
						title: "关于系统",
						icon: "liao-ning/icon_sysc.png",
						path: '/system/system'
					},
				],
			};
		},
		onShow() {
			// // 还原所有tabbar
			// this.$iftabbar.reTabbar();
			// // 隐藏对应的底部导航
			// this.$iftabbar.ifTabbar();
			uni.getStorage({
				key: 'USER_DATA',
				success: (res) => {
					this.userName = res.data.userDto.enterpriseName
				}
			})

		},
		methods: {
			clickMineCell(item) {
				uni.navigateTo({
					url: `/sub-interaction${item.path}?code=true`
				})
			},

			handleLogout() {
				this.$modal.confirm("确定注销并退出系统吗？").then(() => {
					this.$store.dispatch("LogOut").then(() => {
						uni.removeStorageSync("USER_DATA");
						uni.removeStorageSync("App-Token");
						uni.removeStorageSync("roleId");
						this.$tab.reLaunch("/pages/index");
					});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container-main {
		position: relative;
		height: 100%;
	}

	.nav-title {
		position: absolute;
		z-index: 11;
		top: 116rpx;
		width: 100%;
		text-align: center;

		text {
			color: #ffffff;
			font-size: 40rpx;
			font-family: "PingFang SC-中粗体, PingFang SC";
		}
	}

	.header-bg {
		position: relative;
		z-index: 10;
		width: 100vw;
		height: 416rpx;
		background: url("https://www.jichuanglanhai.com/demo/liaoning-app-file/liao-ning/home-header.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.header-logo {
			position: absolute;
			left: 25rpx;
			top: 114rpx;
			width: 370rpx;
			height: 63rpx;
			// background: url("static/images/liao-ning/home-bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.user-data {
			position: absolute;
			left: 25rpx;
			top: 200rpx;

			.user-company {
				letter-spacing: 2rpx;
				font-size: 34rpx;
				font-family: "PingFang SC-中黑体, PingFang SC";
				font-weight: 500;
				color: #ffffff;
			}

			.user-name {
				font-size: 28rpx;
				font-family: "PingFang SC-常规体, PingFang SC";
				color: #ffffff;
			}

			.user-tag {
				margin-left: 17rpx;
				padding: 3rpx 17rpx;
				background-color: #ffffff;
				font-size: 20rpx;
				font-family: "PingFang SC-常规体, PingFang SC";
				color: #3976f1;
				border-radius: 90rpx 90rpx 90rpx 90rpx;
			}
		}
	}

	.main {
		position: absolute;
		left: 0;
		z-index: 20;
		top: 326rpx;
		min-height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;

		.list {
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(57, 118, 241, 0.102);
			background: #ffffff;
			border: 2px solid #dce3ec;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 46rpx;

				.item-left {
					display: flex;
					align-items: center;

					.item-icon {
						width: 36rpx;
						height: 36rpx;
					}

					.item-title {
						margin-left: 15rpx;
						font-size: 34rpx;
						font-family: "PingFang SC-常规体, PingFang SC";
						font-weight: 400;
						color: #34373b;
					}
				}
			}
		}


	}

	.change-role {
		position: absolute;
		left: 50%;
		bottom: 15%;
		transform: translateX(-50%);
		width: 90%;
		background: #ffffff;
		box-shadow: 0 0 20rpx 0 rgba(57, 118, 241, 0.102);
		border-radius: 10rpx;
		border: 2rpx solid #dce3ec;
		padding: 39rpx 0;
		text-align: center;

		text {
			font-size: 30rpx;
			font-family: "PingFang SC-中黑体, PingFang SC";
			font-weight: 500;
			color: #eb5b47;
		}
	}
</style>