uni-zhihuikuangshan/components/t-i-navbar/t-i-navbar.vue

<template>
	<view>
		<view class="content" :style="{backgroundColor:navbar_bg_color}">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>

			<view class="navbar">
				<view v-if="app_mine_code == 'ningdongyunying'">
					<view class="left" @click="switch_kuang()">
						<image v-if="mine_code == 'ningmeijituan'" src="@/static/switch-kuang/ningmeijituan.png" mode=""></image>
						<image v-if="mine_code == 'ningdongyunying'" src="./icon/ningdongyunying.png" mode=""></image>
						<image v-if="mine_code == 'zaoquan'" src="./icon/zaoquan.png" mode=""></image>
						<image v-if="mine_code == 'yangchangwan'" src="@/static/switch-kuang/yangchangwan.png" mode="">
						</image>
						<image v-if="mine_code == 'meihuajing'" src="@/static/switch-kuang/meihuajing.png" mode="">
						</image>
						<image v-if="mine_code == 'jinfeng' || mine_code == 'jinfeng_neiwang'"
							src="@/static/switch-kuang/jinfeng.png" mode=""></image>
						<image v-if="mine_code == 'xixuan'" src="@/static/switch-kuang/xixuan.png" mode=""></image>
						<image v-if="mine_code == 'qingshuiying'" src="@/static/switch-kuang/qingshuiying.png" mode="">
						</image>
						<image v-if="mine_code == 'wuyegongsi'" src="@/static/switch-kuang/wuyegongsi.png" mode="">
						</image>
						<image v-if="mine_code == 'jinjiaqu' || mine_code == 'jinjiaqu_neiwang'"
							src="@/static/switch-kuang/jinjiaqu.png" mode=""></image>
						<image v-if="mine_code == 'shicaocun'" src="@/static/switch-kuang/shicaocun.png" mode="">
						</image>
						<image v-if="mine_code == 'lingxin'" src="@/static/switch-kuang/lingxin.png" mode=""></image>
						<image v-if="mine_code == 'renjiazhuang' || mine_code == 'renjiazhuang_neiwang'" src="@/static/switch-kuang/renjiazhuang.png" mode=""></image>
						<uni-icons type="arrowdown" color="#fff"></uni-icons>
					</view>
				</view>
				<view v-if="app_mine_code != 'ningdongyunying' && app_mine_code != 'ningmeijituan'">
					<view class="left">
						<image v-if="mine_code == 'zaoquan'" src="./icon/zaoquan.png" mode=""></image>
						<image v-if="mine_code == 'yangchangwan'" src="@/static/switch-kuang/yangchangwan.png" mode="">
						</image>
						<image v-if="mine_code == 'meihuajing'" src="@/static/switch-kuang/meihuajing.png" mode="">
						</image>
						<image v-if="mine_code == 'jinfeng' || mine_code == 'jinfeng_neiwang'"
							src="@/static/switch-kuang/jinfeng.png" mode=""></image>
						<image v-if="mine_code == 'xixuan'" src="@/static/switch-kuang/xixuan.png" mode=""></image>
						<image v-if="mine_code == 'qingshuiying'" src="@/static/switch-kuang/qingshuiying.png" mode="">
						</image>
						<image v-if="mine_code == 'wuyegongsi'" src="@/static/switch-kuang/wuyegongsi.png" mode="">
						</image>
						<image v-if="mine_code == 'jinjiaqu' || mine_code == 'jinjiaqu_neiwang'"
							src="@/static/switch-kuang/jinjiaqu.png" mode=""></image>
						<image v-if="mine_code == 'shicaocun'" src="@/static/switch-kuang/shicaocun.png" mode=""></image>
						<image v-if="mine_code == 'lingxin'" src="@/static/switch-kuang/lingxin.png" mode=""></image>
						<image v-if="mine_code == 'renjiazhuang' || mine_code == 'renjiazhuang_neiwang'" src="@/static/switch-kuang/renjiazhuang.png" mode=""></image>
					</view>
				</view>
				<view class="search" v-if="mine_code != 'qingshuiying' && mine_code != 'wuyegongsi'">
					<view class="box">
						<view class="left" @click="go_search()">
							<view class="icon">
								<image src="./icon/search.png" mode=""></image>
							</view>
							<view class="text">搜索</view>
						</view>
						<view class="scan" @click="scan()">
							<image src="./icon/saoma.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					<swiper class="box" autoplay circular vertical :interval="4000" :duration="1000">
						<swiper-item class="item" @click="go_tianqi()">
							<view class="icon">
								<image src="./icon/day.png" mode=""></image>
							</view>
							<view class="num">{{temperature_curr}}</view>
						</swiper-item>
						<swiper-item class="item" @click="go_integral()">
							<view class="icon" style="margin-right: 4rpx;">
								积分
							</view>
							<view class="num">{{total}} 分</view>
						</swiper-item>
					</swiper>

				</view>

			</view>
		</view>

		<view class="status_bar"></view>
		<view style="height: 88rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "t-i-navbar",
		props: [
			"mine_code",
			"navbar_bg_color"
		],
		data() {
			return {
				// 根_mine_code
				app_mine_code: "",
				// 当前温度
				temperature_curr: "",

				// 总积分
				total: 0,

			};
		},
		created() {
			this.app_mine_code = uni.getStorageSync('mine_code')
			// 当前温度
			uni.request({
				url: "http://api.k780.com/?app=weather.today&weaId=286&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json",
				method: "GET",
				success: (res) => {
					// console.log(res.data.result.temperature_curr)
					this.temperature_curr = res.data.result.temperature_curr
				}
			})


			// 登录签到
			this.add_staff_integral_increase()
			//查询员工积分
			this.get_staff_integral_query()

		},
		methods: {
			switch_kuang() {
				uni.navigateTo({
					url: "../../index/switch-kuang/switch-kuang"
				})
			},
			go_search() {
				uni.navigateTo({
					url: "../../index/search/search?mine_code=" + this.mine_code,
					animationType: "fade-in",
					animationDuration: 500
				})
			},
			scan() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: (res)=> {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						let pageId = ""

						function GetQueryString(name) {
							var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
							var r = res.result.match(reg);
							if (r != null) return unescape(r[2]);
							return null;
						}
						console.log(GetQueryString("pageId"))
						if (GetQueryString("pageId")) {
							pageId = GetQueryString("pageId")
						} else {
							pageId = res.result.split('=')[1]
						}
						
						
						uni.navigateTo({
							url: "../../index/record/record?pageId=" + pageId + "&mine_code=" + this.mine_code,
						})
					}
				})
			},

			// 添加员工积分 登录签到
			add_staff_integral_increase() {
				this.$api.staff_integral_increase({
					staff_num: uni.getStorageSync('user').staff_num,
					integral_type: 1,
					integral_num: 1
				}).then((res) => {
					// console.log(res)

					if (res.data.content.is_exists == 0) {
						uni.showToast({
							icon: "none",
							title: "签到成功！"
						})
					}
				})
			},
			//查询员工积分
			get_staff_integral_query() {
				this.$api.staff_integral_query({
					staff_num: uni.getStorageSync('user').staff_num
				}).then((res) => {
					// console.log(res)

					this.total = res.data.content.data.integral_sum
				})
			},
			// 积分详情
			go_integral() {
				uni.navigateTo({
					url: "../../index/integral/integral?total=" + this.total
				})
			},
			// 天气
			go_tianqi() {
				// uni.navigateTo({
				// 	url: "../../index/h5/h5?url=https://xw.tianqi.qq.com/"
				// })
				
				uni.navigateTo({
					url: "../../index/weather/weather"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;

		z-index: 999;


		width: 750rpx;

		// background-image: url(./icon/bg_img.jpg);
		background-size: 750rpx 334rpx;
		background-repeat: no-repeat;
	}

	.navbar {
		box-sizing: border-box;
		padding: 10rpx 25rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;

		height: 88rpx;

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

			width: 170rpx;

			image {
				width: 165rpx;
				height: 48rpx;

				margin-right: 10rpx;
			}
		}

		.search {
			// width: 370rpx;
			width: 550rpx;
			
			.box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				height: 68rpx;

				background-color: rgba(255, 255, 255, .4);
				border-radius: 50rpx;

				box-sizing: border-box;
				padding: 0 20rpx;

				.left {
					display: flex;
					height: 68rpx;
					width: 300rpx;

					.icon {
						image {
							width: 21rpx;
							height: 21rpx;
						}
					}

					.text {
						color: #FFFFFF;
						font-size: 24rpx;
					}

				}

				.scan {
					width: 68rpx;
					text-align: right;
					line-height: 68rpx;

					image {
						width: 27rpx;
						height: 25rpx;
					}
				}
			}
		}

		.right {
			white-space: nowrap;
			color: #FFFFFF;
			font-size: 24rpx;
			width: 124rpx;
			margin-left: 20rpx;
			border-left: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			padding-left: 20rpx;
			height: 40rpx;

			.box {
				width: 124rpx;
				height: 40rpx;

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

					.icon {
						margin-right: 10rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.num {
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>