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

<template>
	<view class="headInfo">
		<view class="info" @click="showInfo">
			<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
			<text>wchenp</text>
			<uni-icons type="gear" size="21" />
		</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>
</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,
			}
		},
		mounted() {
			this.activeIndex = uni.getStorageSync("selectPortIndex")
			this.portId = this.portList[this.activeIndex].value
			this.portName = this.portList[this.activeIndex].title
		},
		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: 40px;
		line-height: 40px;
		background-color: #fff;
		border-bottom: 1px solid #999999;
		display: flex;
		justify-content: flex-end;
		position: relative;

		.info {
			width: 120px;
			display: flex;
			justify-content: space-around;

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

		.infoList {
			width: 200px;
			height: 190px;
			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: 40px;

			.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>