pad-app/components/head-info/head-info.vue

<template>
	<view class="headInfo">
		<view class="infoLeft">
			<view class="infoLogo">
				<image src="../../static/images/theme/logo.png" mode="" class="logo"></image>
			</view>
			<view class="navList">
				<template v-for="(item,index) in navList">
					<navigator :key="index" :url="item.url" open-type="redirect" class="item">
						<view class="itemInfo" :class="item.type?'navActive':''">
							<image :src="item.imageUrl" v-if="item.type"></image>
							<image :src="item.imageUrl2" v-if="!item.type"></image>
							<text>{{item.name}}</text>
						</view>
					</navigator>
				</template>
			</view>
		</view>
		<view class="infoRight">
			<view class="info" @click="showInfo">
				<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
			</view>
			<view class="infoList" v-if="infoType">
				<view class="userInfo">
					<p>张星星 - 堆场计划员</p>
					<p>12341234567</p>
				</view>
				<view class="borTop" @click="tabsPort('center')">
					<uni-icons type="loop" size="16" />
					<text>切换港区</text>
				</view>
				<view class="borTop" @click="outLogin">
					<uni-icons type="undo" size="16" />
					<text>退出登录</text>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popupBox">
					<view class="ul">
						<view class="li" v-for="(item,index) in portList" :key="index"
							:class="{active:activeIndex == index}" @click="selectPort(item,index)">
							<text>{{item.title}}</text>
						</view>
					</view>
					<view class="btnBox">
						<button class="btn" type="default" @click="close">取 消</button>
						<button class="btn" type="primary" @click="toGo">确 定</button>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup2" type="dialog">
				<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
					@confirm="outConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoType: false,
				// 弹框状态
				type: "",
				portList: [{
						value: "1",
						title: "港区1"
					},
					{
						value: "2",
						title: "港区2"
					},
					{
						value: "3",
						title: "港区3"
					},
				],
				portId: "",
				portName: "",
				activeIndex: 0,
				navList: [{
						url: "/pages/index/index",
						name: "装船指令",
						type: false,
						imageUrl: "../../static/images/theme/zcIcon1-1.png",
						imageUrl2: "../../static/images/theme/zcIcon1-2.png"
					},
					{
						url: "/pages/discharge/index",
						name: "卸船指令",
						type: false,
						imageUrl: "../../static/images/theme/xcIcon1-1.png",
						imageUrl2: "../../static/images/theme/xcIcon1-2.png"
					}, {
						url: "/pages/shipWork/index",
						name: "船舶作业",
						type: false,
						imageUrl: "../../static/images/theme/cbIcon1-1.png",
						imageUrl2: "../../static/images/theme/cbIcon1-2.png"
					}, {
						url: "/pages/quality/index",
						name: "货物质量",
						type: false,
						imageUrl: "../../static/images/theme/cbIcon1-1.png",
						imageUrl2: "../../static/images/theme/cbIcon1-2.png"
					}, {
						url: "/pages/monitor/index",
						name: "场位监控",
						type: false,
						imageUrl: "../../static/images/theme/cbIcon1-1.png",
						imageUrl2: "../../static/images/theme/cbIcon1-2.png"
					}
				],
			}
		},
		props: {
			navIndex: {
				type: Number,
				default: 0,
				required: true
			},
		},
		mounted() {
			this.activeIndex = uni.getStorageSync("selectPortIndex")
			this.portId = this.portList[this.activeIndex].value
			this.portName = this.portList[this.activeIndex].title
			this.navList[this.navIndex].type = true
		},
		methods: {
			showInfo() {
				this.infoType = !this.infoType
			},
			// 点击切换港区
			tabsPort(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			// 弹框
			change(e) {},
			// 选择弹框内容
			selectPort(item, index) {
				this.portName = item.title
				this.portId = item.value
				this.activeIndex = index
			},
			// 确认弹框
			toGo() {
				let portObj = {
					portName: this.portName,
					portId: this.portId
				}
				uni.setStorageSync('portObj', portObj);
				uni.setStorageSync('selectPortIndex', this.activeIndex)
				this.$refs.popup.close()
				this.infoType = false
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 关闭弹框
			close() {
				this.infoType = false
				this.$refs.popup.close()
			},
			// 点击退出登录
			outLogin() {
				this.$refs.popup2.open()
			},
			// 确认退出登录
			outConfirm() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 取消退出登录
			close2() {
				this.infoType = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.headInfo {
		width: 100%;
		height: 66px;
		line-height: 66px;
		background-color: #fff;
		border-bottom: 1px solid #999999;
		display: flex;
		justify-content: space-between;
		position: relative;

		.infoLeft {
			display: flex;

			.logo {
				width: 175px;
				height: 32px;
				margin: 16px;
				margin-left: 24px;
			}

			.navList {
				display: flex;
				margin-top: 12px;

				.item {
					width: 124px;
					height: 42px;
					line-height: 42px;
					border-radius: 8px;
					background: #F2F7FC;
					margin-right: 16px;

					.itemInfo {
						width: 100%;
						height: 100%;
						color: #445173;
						font-size: 16px;
						font-weight: 500;
						display: flex;
						justify-content: center;
					}

					image {
						width: 20px;
						height: 20px;
						margin-top: 9px;
						margin-right: 6px;
					}

				}

				.navActive {
					background: #0067CF;
					color: #fff !important;
					border-radius: 8px;
				}
			}
		}

		.infoRight {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info {
				margin-right: 20px;

				.toux {
					margin-top: 10rpx;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}

			.infoList {
				width: 200px;
				padding: 10px 20px;
				border-radius: 8px;
				background-color: #fff;
				z-index: 999;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: absolute;
				right: 0;
				top: 60px;

				.borTop {
					border-top: 1px #ccc solid;

					/deep/.uni-icons {
						margin-right: 10px;
					}
				}
			}
		}

		.popupBox {
			width: 500px;
			height: 400px;
			overflow: scroll;
			padding: 30px;

			.ul {
				display: felx;
				flex-direction: column;
				justify-content: space-between;

				.li {
					padding: 15px 0px;
					border: 1px solid #ccc;
					border-radius: 4px;
					margin-bottom: 10px;
				}

				.active {
					color: #0079fe;
					border-color: #0079fe;
				}
			}

			.btnBox {
				display: flex;
				justify-content: space-between;

				.btn {
					flex: 1;
					padding: 10px 0;
					margin: 10px 20px;
				}
			}
		}

		/deep/.uni-dialog-title {
			display: none;
		}
	}
</style>