yicangzongtai_app_240321/pages/home/module/top - 副本.vue

<template>
	<view class="top-box" :style="{ 'height': swiperHeight + 'rpx'}">
		<view :class="['nav-top', scrollStyle?'scroll-style':'' , pattern === 1 ? 'zw-nav-top' : 'sh-nav-top']"
			:style="navScrollStyle">
			<view class="status-bar" :style="{'height': statusBarHeight + 'px'}" />
			<view class="status-title">
				<view class="title-identity-box">
					<view class="title-identity" @click.stop="toQY()">
						<text class="iconfont_yige identity-icon">&#xe610;</text>
						<text>个人</text>
					</view>
				</view>
				<view class="title-name">
					<text :class="{'active-title-name':pattern === 1}" @click.stop="home.init(1)">政务</text>
					<text :class="{'active-title-name':pattern === 2}" @click.stop="home.init(2)">生活</text>
				</view>
				<view class="title-btn">
					<text class="iconfont_yige title-btn-item" @click.stop="openCustomerCenter()">&#xe60e;</text>
					<text class="iconfont_yige title-btn-item" style="font-size: 48rpx;"
						@click.stop="home.init(3)">&#xe6bd;</text>
				</view>
			</view>
			<view class="status-search">
				<view class="weather-box" @click.stop="openWeather()">
					<template v-if="weatherInfo">
						<image class="weather-img iconfont_yige" :src="weatherInfo.icon" mode="aspectFit"></image>
						<!-- <text class="weather-icon iconfont_yige">&#xe62a;</text> -->
						<text class="weather-num" v-if="weatherInfo.temperature">{{weatherInfo.temperature}}
							<text>°C</text> </text>
					</template>
				</view>
				<view class="search-box" @click.stop="onSearch()">
					<text class="search-icon iconfont_yige">&#xe653;</text>
					<text class="search-text iconfont_yige">请输入检索关键字</text>
				</view>
			</view>
		</view>
		<!-- <view :style=" {'width':'100%','height': statusBarHeight + 'px' }"></view> -->

		<view class="shortcut-box" :style="{ 'paddingTop': statusBarHeight + 'px'}">
			<view class="status-placeholder"></view>
			<view class="shortcut-content">
				<u-row gutter="20">
					<u-col span="3">
						<view class="shortcut-item" @click.stop="openScanCode()">
							<text class="iconfont_yige iconfont-icon">&#xe8b5;</text>
							<text class="zw-one-row iconfont-name">扫一扫</text>
						</view>
					</u-col>
					<block v-if="topKongLimList.length > 0">
						<u-col span="3" v-for="item in topKongLimList" :key="item.id">
							<view class="shortcut-item" @click.stop="$openPage(item)">
								<!-- <text class="iconfont_yige iconfont-icon">&#xf71e;</text> -->
								<image class="icon_img" :src="$getImgPath(item.icon)" mode="aspectFill"></image>
								<text class="zw-one-row iconfont-name">{{item.name}}</text>
							</view>
						</u-col>
					</block>
				</u-row>
			</view>

		</view>
		<!-- 		<view class="swiper-boxs" :style="{ 'height': swiperHeight + 'rpx'}">
					<view class="swiper-box">
						<zw-swiper :height="swiperHeight" :keyword=" pattern === 1 ? $keys.ZW_BANNER : $keys.SH_BANNER" />
					</view>
				</view> -->
		<view class="swiper-content" :style="{ 'height': swiperHeight + 'rpx'}">
			<zw-swiper ref="swiperRef" :height="swiperHeight"
				:keyword="pattern === 1 ? $keys.ZW_BANNER : $keys.SH_BANNER"
				:StorageKey="pattern === 1 ? $keys.sy_zw_BANNER : $keys.sy_sh_BANNER" />
		</view>
	</view>
</template>

<script>
	import Mixin from "./Mixin.js";
	import {
		openSearch
	} from "../../government/conmon.js"
	import {
		getPhotograph
	} from "@/utils/tool.js"
	export default {
		props: {
			pattern: {
				type: Number,
				default: 1
			},
			swiperHeight: {
				type: Number,
				default: 720
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			topKongLimList: {
				type: Array,
				default: () => []
			},
			toQyKongLimList: {
				type: Array,
				default: () => []
			},
			// 天气
			weatherInfo: {
				type: Object,
				default: null
			},
		},
		mixins: [Mixin],
		inject: ["home"],
		data() {
			return {
				scrollStyle: false,
				navScrollStyle: {},
				keyword: '',
			}
		},
		methods: {
			openWeather() {
				this.$skipWeb('https://m.weather.com.cn/mweather/101200901.shtml', '宜昌天气')
			},

			init() {
				this.$refs.swiperRef.init()
			},
			openScanCode() {
				// getPhotograph();
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},

			onSearch() {
				openSearch()
			},
			openCustomerCenter() {
				uni.navigateTo({
					url: '/pages/government/customer-center'
				});
			},

			toQY() {
				this.$openPage(this.toQyKongLimList[0])
			}

		},
		watch: {
			scrollTop: {
				handler: function(newNum, oldNum) {
					const Num = Number(newNum) || 0

					this.scrollStyle = Num > 140 ? true : false;
					if (Num < 15) {
						this.navScrollStyle = {}
					}


					if (Num >= 15 && Num < 70) {
						const op = Num / 70;
						this.navScrollStyle = {
							opacity: 1 - op,
						}
					}
					if (Num >= 70 && Num < 140) {
						const op = (Num - 70) / 70;
						this.navScrollStyle = {
							backgroundColor: `rgba(255, 255, 255, ${op})`,
							opacity: op,
						}
					}
					if (Num >= 140) {
						this.navScrollStyle = {
							backgroundColor: `rgba(255, 255, 255 ,1)`,
						}

					}
				},
				immediate: true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		width: 100%;
		overflow: hidden;
		position: relative;

		.swiper-content {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
		}

		.swiper-boxs {
			overflow: hidden;
			width: 200%;
			position: absolute;
			left: -50%;
			/* （width - 100%）/ 2 */
			top: 0;
			border-radius: 0 0 50% 50%;

			.swiper-box {
				margin: 0 auto;
				width: 750rpx;
				height: 100%;
				overflow: hidden;

			}
		}

		.nav-top {
			position: fixed;
			z-index: 2;
			left: 0;
			top: 0;
			right: 0;
			padding: 0 $zw-padding;

			.status-title {
				width: 100%;
				height: 113rpx;
				padding-top: 27rpx;
				display: flex;
				justify-content: space-between;
				align-items: stretch;

				.title-identity-box,
				.title-btn {
					width: 200rpx;
					display: flex;
					align-items: center;
				}

				// 86rpx
				.title-identity-box {
					.title-identity {
						width: 141rpx;
						height: 57rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 30rpx;

						.identity-icon {
							font-size: 34rpx;
						}

						text+text {
							font-size: 26rpx;
							font-weight: 400;
							padding-left: 14rpx;
						}
					}
				}

				.title-btn {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.title-btn-item {
						font-size: 40rpx;

						&:first-child {
							margin-right: 20rpx;
						}
					}
				}

				.title-name {
					flex: 1;
					display: flex;
					align-items: stretch;
					justify-content: center;

					text {
						display: flex;
						align-items: center;

						&+text {
							margin-left: 60rpx;
						}

						font-size: 36rpx;
						font-family: PingFang SC,
						PingFang SC-Medium;
						font-weight: 500;
					}

					.active-title-name {
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 8rpx;
							border-radius: 4rpx;
						}
					}
				}
			}

			.status-search {
				width: 100%;
				height: 110rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: stretch;

				.weather-box {
					width: 70rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.weather-img {
						width: 70rpx;
						height: 70rpx;
					}

					.weather-icon {}

					.weather-num {
						// padding-top: 5rpx;
						font-size: 22rpx;
						line-height: 1;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						// text-align: left;

						text {
							font-weight: 400;
							transform: scale(0.8);
						}
					}
				}

				.search-box {
					flex: 1;
					height: 100%;
					border-radius: 35rpx;
					overflow: hidden;

					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.search-icon {
						font-size: 30rpx;
					}

					.search-text {
						font-size: 27rpx;
						padding-left: 3px;
					}
				}
			}
		}

		.zw-nav-top,
		.sh-nav-top {

			.title-identity-box,
			.title-btn,
			.weather-icon,
			.weather-num {
				color: #fff;
			}

			.title-identity {
				background-color: rgba(255, 255, 255, 0.3);
				// box-shadow: 0px 4px 6px 0px rgba(3, 148, 180, 0.30);
			}

			.title-name {
				.active-title-name {
					color: #fff;

					&::before {
						background-color: #fff;
					}
				}
			}

			.search-box {

				background: rgba(255, 255, 255, 0.30);
				border: 1rpx solid rgba(255, 255, 255, 0.36);
				color: #fff;

				.search-text {
					color: rgba(255, 255, 255, 0.50);
				}
			}

		}

		.zw-nav-top {
			.title-name {
				text {
					color: #D5F1F6;
				}
			}
		}

		.sh-nav-top {
			.title-name {
				text {
					color: #FFE6D6;
				}


			}
		}

		.scroll-style {
			.weather-icon {
				color: #FABB00;
			}

			.title-identity-box,
			.title-btn,

			.weather-num,
			.title-name>text {
				color: #000 !important;
			}

			.active-title-name::before {
				background-color: #000 !important;
			}

			.title-identity {
				// background-color: rgba(255, 255, 255, 0.3);
				border: 1rpx solid #ccc;
				// box-shadow: 0px 4px 6px 0px rgba(3, 148, 180, 0.30);
			}

			.search-box {
				border: 1rpx solid #ccc;
				color: #c1c1c1;

				.search-text {
					color: #c1c1c1;
				}
			}
		}

		.status-placeholder {
			width: 100%;
			// height: calc(113rpx + 110rpx); 
			height: 223rpx;
			// height: 120px;
		}

		.shortcut-box {
			position: relative;
			left: 0;
			right: 0;
			top: 0;
			z-index: 1;

			.shortcut-content {

				width: 100%;
				padding: 35rpx $zw-padding 0;

				.shortcut-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.iconfont-icon {
						font-size: 50rpx;
						font-weight: bold;
						color: #fff;
					}

					.icon_img {
						width: 50rpx;
						height: 50rpx;
						vertical-align: middle;
					}

					.iconfont-name {
						width: 100%;
						padding-top: 15rpx;
						font-size: 28rpx;
						font-weight: 400;
						text-align: center;
						color: #fafafa;
					}
				}
			}
		}
	}
</style>