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

<template>
	<view class="headInfoBox">
		<view class="mask" @click.stop="maskClick">
		</view>
		<view class="headInfo" @click.stop="showInfo">
			<view class="infoLeft">
				<view class="infoLogo">
					<image src="../../static/images/theme/logo.png" mode="widthFix" 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" mode="widthFix" v-if="item.type"></image>
								<image :src="item.imageUrl2" mode="widthFix" v-if="!item.type"></image>
								<text>{{item.name}}</text>
							</view>
						</navigator>
					</template>
				</view>
			</view>
			<view class="infoRight" @click.stop="showInfo">
				<view class="info" @click.stop="showInfoOpen">
					<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
				</view>
				<view class="infoList" v-if="infoType">
					<view class="userInfo">
						<p>{{userInfo.name}}</p>
						<p>{{userInfo.phone}}</p>
					</view>
					<view class="borTop">
						<view class="borHead">
							<image src="../../static/images/gqIcon.png" mode=""></image>
							<p>请选择港区</p>
						</view>
						<view class="borContent">
							<view class="gqContent" v-for="(item,index) in portList" :key="index"
								:class="{activeGq:activeIndex == index}" @click="selectPort(item,index)">
								{{item.pamName}}
							</view>
						</view>
					</view>
					<view class="btnCss" @click="outLogin">
						<text>退出登录</text>
					</view>
					<!-- <view class="borTop" @click="messageSql('center')">
						<uni-icons type="vip" size="16" />
						<text>数据库管理</text>
					</view> -->
				</view>
				<uni-popup ref="popup" background-color="#fff" @maskClick="close">
					<view class="popupBox">
						<view class="popupTitle">
							请选择港区
						</view>
						<view class="ul">
							<view class="li" v-for="(item,index) in portList" :key="index"
								:class="{active:activeIndex == index}" @click="selectPort(item,index)">
								<text>{{item.pamName}}</text>
							</view>
						</view>
						<view class="btnBox">
							<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>
				<uni-popup ref="popup3" type="dialog">
					<view class="message">
						<view class="title">
							管理数据库
						</view>
						<view class="btnList">
							<button class="searchBtn" type="default" @click="open">打开数据库</button>
							<button class="searchBtn" type="default" @click="closeSql">关闭数据库</button>
							<button class="searchBtn" type="default" @click="isOpen">判断数据库是否打开</button>
							<button class="searchBtn" type="default" @click="createTable">创建数据库</button>
							<button class="searchBtn" type="default" @click="dropTable">删除表</button>
							<button class="searchBtn" type="default" @click="dropData">删除数据</button>
						</view>
					</view>
				</uni-popup>
			</view>
			<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	import tableList from "../../common/createDataTable.js"
	import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
	export default {
		data() {
			return {
				loginObj: {},
				infoType: false,
				// 弹框状态
				type: "",
				portList: [],
				portId: "",
				portName: "",
				activeIndex: 0,
				mediaType: "pad",
				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/csIcon1-1.png",
						imageUrl2: "../../static/images/theme/csIcon1-2.png"
					}, {
						url: "/pages/monitor/index",
						name: "场位管控",
						type: false,
						imageUrl: "../../static/images/theme/jcIcon1-1.png",
						imageUrl2: "../../static/images/theme/jcIcon1-2.png"
					},
					{
						url: "/pages/receipt/index",
						name: "进出口货物交接单",
						type: false,
						imageUrl: "../../static/images/theme/jckIcon1-1.png",
						imageUrl2: "../../static/images/theme/jckIcon1-2.png"
					}
				],
				lotusLoadingData: {
					isShow: false //设置显示加载中组件true显示false隐藏
				},
			}
		},
		components: {
			LotusLoading
		},
		props: {
			navIndex: {
				type: Number,
				default: 0,
				required: true,
			},
		},
		mounted() {
			this.loginObj = uni.getStorageSync('loginObj')
			this.initData()
			this.activeIndex = uni.getStorageSync("selectPortIndex")
			this.navList[this.navIndex].type = true
			this.getUser()
		},
		methods: {
			// 获取用户信息
			getUser() {
				uni.request({
					url: `${this.$local}/api/miniapp/user/info`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.userInfo = res.data.data
						uni.setStorageSync('userInfo', this.userInfo)
					},
					fail: function(err) {
						that.lotusLoadingData.isShow = false
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '请求超时，请退出重新进入！'
						})
					}
				})
			},
			maskClick() {
				this.infoType = false
			},
			showInfo() {
				this.infoType = false

			},
			showInfoOpen() {
				if (!this.infoType) {
					this.infoType = true
				} else {
					this.infoType = false
				}
			},
			// 获取所有港区
			initData() {
				uni.request({
					url: `${this.$local}/api/app/user/getMinato?mediaType=pad`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.lotusLoadingData.isShow = false
						if (res.data.status == 200) {
							let newData = res.data.data
							for (let key in newData) {
								if (newData.hasOwnProperty(key)) {
									this.portList.push({
										pamId: key,
										pamName: newData[key]
									})
								}
							}
							// if (this.portList.length > 0) {
							// 	this.$refs.popup.open(this.type)
							// 	this.portId = this.portList[this.activeIndex].pamId
							// 	this.portName = this.portList[this.activeIndex].pamName
							// }
						}
					}
				})
			},
			// 点击管理数据库
			messageSql(type) {
				this.type = type
				this.$refs.popup3.open(type)
			},
			// 打开数据库
			open() {
				plus.sqlite.openDatabase({
					name: 'dianji_chat',
					path: '_doc/dianji_chat.db',
					success: function(e) {
						uni.showToast({
							icon: 'success',
							title: '打开数据库成功'
						});
						return;
					},
					fail: function(e) {
						uni.showToast({
							icon: 'error',
							title: '打开数据库失败'
						});
						return;
					}
				});
			},
			// 关闭数据库
			closeSql() {
				plus.sqlite.closeDatabase({
					name: 'dianji_chat',
					success(e) {
						uni.showToast({
							icon: 'success',
							title: '关闭数据库成功'
						});
						return;
					},
					fail(e) {
						uni.showToast({
							icon: 'error',
							title: '关闭数据库失败'
						});
						return;
					}
				})
			},
			// 判断数据库是否打开
			isOpen() {
				let res = plus.sqlite.isOpenDatabase({
					name: 'dianji_chat',
					path: '_doc/dianji_chat.db',
				});
				if (res) {
					uni.showToast({
						icon: 'success',
						title: '数据库已打开'
					});
					return;
				} else {
					uni.showToast({
						icon: 'error',
						title: '数据库未打开'
					});
					return;
				}
			},
			// 创建所有数据库
			createTable() {
				tableList.createAllTable()
			},
			// 删除指定表
			dropTable() {
				let sql = 'DROP TABLE shipmentQualityConsultationRespList;'
				plus.sqlite.selectSql({
					name: 'dianji_chat',
					sql: sql,
					success: function(e) {
						uni.showToast({
							icon: 'success',
							title: '删除该表成功'
						});
						return;
					},
					fail: function(e) {
						uni.showToast({
							icon: 'error',
							title: '删除该表失败'
						});
						return;
					}
				});
			},
			// 删除指定表中数据
			dropData() {
				let sql = "delete from workSignTable"
				plus.sqlite.selectSql({
					name: 'dianji_chat',
					sql: sql,
					success: function(e) {
						uni.showToast({
							icon: 'success',
							title: '删除该表数据成功'
						});
						return;
					},
					fail: function(e) {
						uni.showToast({
							icon: 'error',
							title: '删除该表数据失败'
						});
						return;
					}
				});
			},
			// 点击切换港区
			tabsPort(type) {
				this.type = type
				this.$refs.popup.open(type)
				this.lotusLoadingData.isShow = true
				this.initData()
			},
			// 选择弹框内容
			selectPort(item, index) {
				this.portName = item.pamName
				this.portId = item.pamId
				this.activeIndex = index
				this.toGo()
			},
			// 确认弹框
			toGo() {
				uni.request({
					url: `${this.$local}/api/app/user/setMinato?mediaType=${this.mediaType}&pamNo=${this.portId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							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.showToast({
								icon: 'success',
								title: `切换到${this.portName}`
							});
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			// 关闭弹框
			close() {
				this.$refs.popup.close()
				this.portList = []
			},
			// 点击退出登录
			outLogin() {
				this.$refs.popup2.open()
			},
			// 确认退出登录
			outConfirm() {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			// 取消退出登录
			close2() {
				this.infoType = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.headInfoBox {
		position: relative;

		.mask {
			width: 100vw;
			height: 100vh;
			background-color: transparent;
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none; // css穿透 
		}

		.headInfo {
			width: 100%;
			background-color: #fff;
			box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
			border-radius: 1px;
			display: flex;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.infoLeft {
				display: flex;

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

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

					.item {
						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;
							padding: 0 8px;
						}

						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;
					background-color: #fff;
					z-index: 999;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: absolute;
					right: 2px;
					top: 60px;
					box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.20);


					.userInfo {
						color: #23262E;
						border-bottom: 1px solid #F0F0F0;
						padding: 16px 0px;
						margin: 0 16px;

						p:first-child {
							font-size: 18px;
							font-weight: bold;
							margin-bottom: 8px;
						}

						p:last-child {
							font-size: 14px;
						}
					}

					.btnCss {
						width: 100%;
						height: 42px;
						line-height: 42px;
						text-align: center;
						font-size: 16px;
						color: #0067CF;
						border-top: 1px solid #F0F0F0;
						border-radius: 0 0 4px 4px;
					}

					.borTop {
						.borHead {
							display: flex;
							margin-left: 16px;
							margin-top: 12px;

							image {
								width: 16px;
								height: 16px;
								margin-right: 8px;
							}

							p {
								font-size: 16px;
								color: #999999;
							}
						}

						.borContent {
							width: 100%;
							height: 120px;
							overflow: scroll;
							display: flex;
							flex-direction: column;
							padding: 0 16px;
							margin-top: 12px;

							.gqContent {
								width: 100%;
								height: 36px;
								line-height: 36px;
								text-align: center;
								background: rgba(0, 103, 207, 0.05);
								border-radius: 8px;
								font-size: 14px;
								color: #23262E;
								margin-bottom: 8px;
							}

							.activeGq {
								background: #0067CF;
								color: #fff;
							}
						}
					}
				}
			}

			.popupBox {
				width: 280px;
				height: 320px;

				.popupTitle {
					width: 100%;
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 16px;
					color: #23262E;
					font-weight: bold;
					border-bottom: 1px solid #eee;
				}

				.ul {
					padding: 30px;
					height: 213px;
					overflow: scroll;

					.li {
						height: 40px;
						line-height: 40px;
						text-align: center;
						border: 1px solid #ccc;
						margin-bottom: 10px;
					}

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

				.btnBox {
					height: 60px;
					display: flex;
					justify-content: center;
					box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
					border-radius: 0 0 16px 16px;

					.btn {
						width: 170px;
						font-size: 16px;
						padding: 10px;
						margin: 10px;
						height: 36px;
						line-height: 18px;
						background-color: #fff;
						border: 1px solid rgba(0, 0, 0, .1);
					}

					.btn:last-child {
						color: #fff;
						background-color: #0067CF;
					}
				}
			}


			.message {
				width: 400px;
				padding: 30px;
				background-color: #fff;

				.title {
					padding: 0 20px 10px;
					font-size: 18px;
					font-weight: bold;
					border-bottom: 1px solid black;
					text-align: left;
					line-height: 18px;
					margin-bottom: 20px;
				}

				.btnList {
					display: flex;
					flex-wrap: wrap;

					.searchBtn {
						height: 35px;
						line-height: 35px;
						margin-left: 0;
						font-size: 16px;
						color: #fff;
						background-color: #0067CF;
						margin-right: 10px;
						margin-bottom: 10px;
					}
				}
			}

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

	}
</style>