调整首页代码

pages/index/index - 副本.vue

@@ -4,8 +4,8 @@
 			<!-- Banner -->
 			<view class="banner">
 				<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
-					:interval="swiper.interval" :duration="swiper.duration"
-					indicator-active-color="rgba(0, 179, 139, 1)" :easing-function="swiper.easing">
+					:interval="swiper.interval" :duration="swiper.duration" indicator-active-color="rgba(0, 179, 139, 1)"
+					:easing-function="swiper.easing">
 					<block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
 						<swiper-item class="swiper-item" @click="link(item)">
 							<image :src="fileURLList + item.imgUrl" mode="widthFix"></image>
@@ -14,8 +14,7 @@
 				</swiper>
 
 				<view class="notice">
-					<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false"
-						mode="aspectFill">
+					<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false" mode="aspectFill">
 					</image>
 					<uni-notice-bar style="width: 100%;" scrollable single :text="state.notice">
 					</uni-notice-bar>
@@ -36,8 +35,7 @@
 					</view>
 					<view class="text">卡签信息查询</view>
 				</view>
-				<view class="item-box"
-					@click="$util.navTo('/subpackage/personal-center/install-activation-order',true)">
+				<view class="item-box" @click="$util.navTo('/subpackage/personal-center/install-activation-order',true)">
 					<view class="item item-4">
 						<image :src="fileURL + 'image/index/item-4.png'" mode="aspectFill" />
 					</view>
@@ -93,8 +91,8 @@
 			<view class="flow-path">
 				<scroll-view scroll-x="true" class="scroll-view">
 					<view class="top-menu">
-						<view :class="item == state.tabActive ? 'tab active' : 'tab'"
-							v-for="item in state.flowPathTabList" :key="item" @click="flowPathTabHandle(item)">
+						<view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
+							:key="item" @click="flowPathTabHandle(item)">
 							<view class="border"></view>{{ item }}
 						</view>
 					</view>
@@ -165,7 +163,7 @@
 	} from "vue";
 	import {
 		onPageScroll,
-		onLoad, onReachBottom,onReady
+		onLoad, onReachBottom, onReady
 	} from "@dcloudio/uni-app";
 	import flowPathList from "./components/flow-path-list.vue";
 	import filter from '@/components/filter/filter.vue';
@@ -276,15 +274,15 @@
 		scrollTop.value = e.scrollTop;
 	});
 	onLoad((options) => {
-		console.log("wechatSignNo",options)
-			getInfo();
+		console.log("wechatSignNo", options)
+		getInfo();
 	})
 	// 页面初次渲染完成时触发
-		onReady(()=>{
-			setTimeout(()=>{
-				quanKeyAction()
-			},5000)
-		})
+	onReady(() => {
+		setTimeout(() => {
+			quanKeyAction()
+		}, 5000)
+	})
 
 	onMounted(() => {
 		uni.getSystemInfo({
@@ -343,15 +341,15 @@
 			method: "POST",
 			showLoading: true,
 		};
-		  request(queryKey, options).then((res) => {
+		request(queryKey, options).then((res) => {
 			console.log(stringToJson(res.bizContent));
 			const data = stringToJson(res.bizContent)
 			console.log("轮播图", data)
 			setItem('key', data.dictTypeAndItem)
 		})
-		.catch((err) => {
-			console.log(err);
-		});
+			.catch((err) => {
+				console.log(err);
+			});
 	}
 
 
@@ -387,11 +385,11 @@
 		request(infoQuery, options)
 			.then((res) => {
 				let data = stringToJson(res.bizContent)
-				console.log(data,'公告');
+				console.log(data, '公告');
 				state.notice = data.text
 			})
 			.catch((err) => {
-				console.log(err);
+				console.log(err, '错误');
 			});
 	}
 	// 高速快讯查询接口

pages/index/index.vue

@@ -5,9 +5,10 @@
 		</view>
 		<view class="content">
 			<view class="header">
+				<!-- <navBar :isBack='false' :title='首页'></navBar> -->
 				<view class="title">
 					<view :style="{ height: `${statusBarHeight}px` }"></view>
-					<!-- 自定义导航栏高度  -->
+					<!-- 自定义导航栏高度 -->
 					<view class='title-txt' :style="{
 					          height: `${barHeight}px`,
 					          'line-height': `${barHeight}px`
@@ -22,7 +23,7 @@
 			</view>
 
 			<view class="nav">
-				<view class="item-box" v-for='item in navList' @click="handleNav(item)">
+				<view class="item-box" v-for='(item,index) in navList' :key='index' @click="handleNav(item)">
 					<view class="icon-img">
 						<image :src="item.imgUrl" mode="aspectFit" class='img'></image>
 					</view>
@@ -38,12 +39,22 @@
 					<image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
 				</view>
 				<view class="r-info">
-					如何授权登录小程序？
+					<!-- <u-notice-bar mode="vertical" :list="state.noticeList" type="none" :volume-icon="false" :no-list-hidden='true'></u-notice-bar> -->
+					{{state.notice}}
 				</view>
 			</view>
 
 			<view class="supervision-con">
-				<view class="txt">
+				<!-- <u-swiper :list="state.swiperListArr"></u-swiper> -->
+				<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
+					:interval="swiper.interval" :duration="swiper.duration" :easing-function="swiper.easing">
+					<block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
+						<swiper-item class="swiper-item" @click="link(item)">
+							<image :src="fileURLList + item.imgUrl" mode="widthFix" class='img'></image>
+						</swiper-item>
+					</block>
+				</swiper>
+				<!-- 				<view class="txt">
 					ETC服务监督电话
 				</view>
 				<view class="phone">
@@ -51,7 +62,7 @@
 				</view>
 				<view class="btn">
 					<text>立即拨打 ＞</text>
-				</view>
+				</view> -->
 			</view>
 
 			<view class="title-name">
@@ -59,7 +70,7 @@
 			</view>
 			<view class="express-lane">
 				<view class="item keche">
-					<view class="item-con">
+					<view class="item-con" @click="showMask(1)">
 						<view class="top-txt">
 							客车用户
 						</view>
@@ -69,7 +80,7 @@
 					</view>
 				</view>
 				<view class="item huoche">
-					<view class="item-con">
+					<view class="item-con" @click="showMask(2)">
 						<view class="top-txt">
 							货车用户
 						</view>
@@ -79,57 +90,36 @@
 					</view>
 				</view>
 			</view>
-
-
 			<view class="news-con">
 				<view class="title-con">
 					<text>高速快讯</text>
-					<view class="r-more">
+					<view class="r-more" @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">
 						<text class='txt'>更多</text>
 						<image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
 					</view>
 				</view>
 				<view class="news-box">
-					<view class="news-item">
-						<view class="l-img">
-							<image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
-						</view>
-						<view class="r-txt">
-							<view class="tit">
-								后装ETC与选装ETC的介绍
-							</view>
-							<view class="b-time">
-								2024-09-22
-							</view>
-						</view>
-					</view>
-					<view class="news-item">
-						<view class="l-img">
-							<image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
-						</view>
-						<view class="r-txt">
-							<view class="tit">
-								后装ETC与选装ETC的介绍
-							</view>
-							<view class="b-time">
-								2024-09-22
-							</view>
-						</view>
-					</view>
-					<view class="news-item">
-						<view class="l-img">
-							<image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
-						</view>
-						<view class="r-txt">
-							<view class="tit">
-								后装ETC与选装ETC的介绍
+					<template v-if='state.highMsgData'>
+						<view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
+							<view class="l-img">
+								<image :src="fileURLList + item.imgUrl" mode="aspectFill" class="img"></image>
 							</view>
-							<view class="b-time">
-								2024-09-22
+							<view class="r-txt">
+								<view class="tit">
+									{{item.title}}
+								</view>
+								<view class="b-time">
+									{{item.updateTime}}
+								</view>
 							</view>
 						</view>
+					</template>
+					<view class="empty-news" v-else>
+						<u-empty text="暂无数据" mode="news" :icon-size='90' :font-size='24'></u-empty>
 					</view>
+
 				</view>
+
 			</view>
 
 			<!-- 办理流程 -->
@@ -165,7 +155,7 @@
 				</view>
 				<view v-else-if="state.tabActive === '常见问题'">
 					<view class="flow-list wenti">
-						<view class="item-box" v-for='item in state.commonQuestionArr'>
+						<view class="item-box" v-for='(item,index) in state.commonQuestionArr' :key='index'>
 							<view class="l-icon">
 								<image :src="`${fileURL}image/newHome/wenhao.png`" mode="scaleToFill" class="icon-img"></image>
 							</view>
@@ -177,9 +167,31 @@
 					</view>
 				</view>
 			</view>
-		</view>
 
 
+		</view>
+	</view>
+	<!-- ETC选择弹窗 -->
+	<view class="mask" v-if="isShowMask">
+
+		<view class="mask-content">
+			<filter>
+				<view class="mask-close">
+					<image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
+				</view>
+				<view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
+				<view class="mask-tab">
+					<view class="tab-item active" @click="toCreatOrder('1')">
+						<image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
+						<text class="tab-tit on">个人办理</text>
+					</view>
+					<view class="tab-item" @click="toCreatOrder('2')">
+						<image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
+						<text class="tab-tit on">单位办理</text>
+					</view>
+				</view>
+			</filter>
+		</view>
 	</view>
 </template>
 <script setup lang="ts">
@@ -228,23 +240,49 @@
 		getCodeName
 	} from "@/datas/queryKey.js";
 	// import { jump } from "@/datas/9901Jump.js";
-	import navBar from "@/components/nav-bar/nav-bar2.vue";
+	// import navBar from "@/components/nav-bar/nav-bar2.vue";
+	import { getCurrentInstance } from 'vue';
+	const tools = require("../../static/etcUtil/tools.js");
+	const instance = getCurrentInstance();
+	const swiper = reactive({
+		indicatorDots: false,
+		autoplay: true,
+		interval: 6000,
+		duration: 3000,
+		easing: "easeInOutCubic"
+	})
+
 	onLoad((options) => {
 		console.log("wechatSignNo", options)
 		getInfo();
 	})
 	onMounted(() => {
-		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
+		const query = uni.createSelectorQuery().in(instance.proxy);
+		query
+			.select(".news-con")
+			.boundingClientRect((data) => {
+				console.log("得到布局位置信息", data);
+				console.log("节点离页面顶部的距离为" + data.top);
+				newTop.value = data.top
+			})
+			.exec();
+		let systemInfo = uni.getSystemInfoSync()
+		viewHeight.value = systemInfo.windowHeight
+		statusBarHeight.value = systemInfo.statusBarHeight;
 		const {
 			top,
 			height
 		} = uni.getMenuButtonBoundingClientRect();
 		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
-		console.log(barHeight.value, statusBarHeight.value, '计算的顶部高度');
+		console.log(barHeight.value, statusBarHeight.value, systemInfo, '计算的顶部高度');
+		getSwiper()
 	})
 	const statusBarHeight = ref(0)
+	const viewHeight = ref(0) //可视区高度
 	const barHeight = ref(0)
 	const searchParams = ref('')
+	const newTop = ref(0) //高速快讯距离顶部距离
+	const isShowMask = ref(false);
 	//搜索
 	const onKeyInput = (event) => {
 		searchParams.value = event.target.value;
@@ -315,6 +353,7 @@
 		userType: 1, //1个人 2单位
 		notice: "",
 		swiperList: [],
+		swiperListArr: [],
 		noticeList: [], //公告栏列表
 		flowPathTabList: ["办理流程", "办理条件", "常见问题"],
 		tabActive: "办理流程",
@@ -420,15 +459,18 @@
 		request(infoQuery, options)
 			.then((res) => {
 				let data = stringToJson(res.bizContent)
-				console.log(data, '公告');
 				state.notice = data.text
+				state.noticeList = [data.text || '暂无公告', '平明送客楚山孤',]
+				console.log(data, state.noticeList, '公告');
 			})
 			.catch((err) => {
-				console.log(err);
+				console.log(err, '错误');
 			});
 	}
+	let newLock = false
 	// 高速快讯查询接口
 	const highMsg = () => {
+		newLock = true
 		let options = {
 			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
 			data: {
@@ -445,6 +487,7 @@
 			state.highMsgData = stringToJson(res.bizContent).data
 			for (var i = 0; i < state.highMsgData.length; i++) {
 				state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
+				state.highMsgData[i]["updateTime"] = state.highMsgData[i]["updateTime"].replace('T', ' ')
 				if (state.highMsgData[i]["type"] == 3) {
 					state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
 				}
@@ -456,8 +499,101 @@
 	}
 	//监听页面滚动
 	onPageScroll((e) => {
-		console.log(e.scrollTop,);
+		let h = viewHeight.value + e.scrollTop
+		if (h >= newTop.value - 50 && !newLock) {
+			highMsg()
+		}
 	});
+	const toCreatOrder = (val : number) => {
+		console.log(typeof (val));
+		state.userType = val;
+		navTo(`/subpackage/orders/choice-product?type=${state.type}&&userType=${state.userType}`)
+		closeMask();
+	};
+
+	const showMask = (val : any) => {
+		state.type = val; //1 客车 2货车
+		isShowMask.value = true;
+	};
+
+	const closeMask = () => {
+		isShowMask.value = false;
+	};
+	//全量枚举值查询
+	const quanKeyAction = () => {
+		var data = {};
+		const options = {
+			type: 2,
+			data: data,
+			method: "POST",
+			showLoading: true,
+		};
+		request(queryKey, options).then((res) => {
+			console.log(stringToJson(res.bizContent));
+			const data = stringToJson(res.bizContent)
+			console.log("枚举", data)
+			setItem('key', data.dictTypeAndItem)
+		})
+			.catch((err) => {
+				console.log(err);
+			});
+	}
+	onReady(() => {
+		setTimeout(() => {
+			quanKeyAction()
+		}, 5000)
+	})
+	//获取轮播
+	const getSwiper = () => {
+
+		let options = {
+			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
+			data: {
+			}, //请求参数
+			method: "POST", //提交方式(默认POST)
+			showLoading: true, //是否显示加载中(默认显示)
+		};
+
+		//调用方式
+		request(querySwiper, options).then((res) => {
+			console.log(stringToJson(res.bizContent));
+			const data = stringToJson(res.bizContent)
+			console.log("轮播图", data)
+			state.swiperList = data.swipers ? data.swipers : [],
+				state.swiperListArr = state.swiperList.map(item => fileURLList + item.imgUrl)
+		})
+			.catch((err) => {
+				console.log(err);
+			});
+
+	};
+	const link = (item : any) => {
+		console.log(item);
+		if (item.type == 1) {
+			const params = encodeURIComponent(JSON.stringify(item.hyperLink))
+			tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
+		} else if (item.type == 2) {
+			navTo(item.hyperLink)
+		} else if (item.type == 3) {
+			const param = encodeURIComponent(JSON.stringify(item))
+			tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
+		} else if (item.type == 4) {
+			uni.navigateToMiniProgram({
+				appId: item.hyperLink,
+				path: item.speedUrl,
+				success(res) {
+					console.log(res);
+				},
+				complete(res) {
+					console.log(res);
+				},
+				fail(res) {
+					console.log(res);
+					// 未成功跳转到车主小程序
+				},
+			});
+		}
+	}
 </script>
 <style lang="scss" scoped>
 	.container {
@@ -525,7 +661,7 @@
 				color: #fff;
 				font-weight: 500;
 				font-size: 26rpx;
-
+				background: #1a394d;
 			}
 		}
 
@@ -608,10 +744,25 @@
 		height: 180rpx;
 		width: 690rpx;
 		margin: 24rpx 30rpx 0;
-		background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/phone.png);
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
-		padding: 35rpx 0 0 52rpx;
+		// background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/phone.png);
+		// background-size: 100% 100%;
+		// background-repeat: no-repeat;
+		// padding: 35rpx 0 0 52rpx;
+		// background: #FFFFFF;
+		border-radius: 12rpx;
+		overflow: hidden;
+
+		.swiper {
+			height: 180rpx;
+			width: 690rpx;
+		}
+
+		.swiper-item .img {
+			overflow: hidden;
+			border-radius: 12rpx;
+			height: 180rpx !important;
+			width: 690rpx;
+		}
 
 		.txt {
 			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -727,6 +878,8 @@
 			}
 		}
 
+		.empty-news {}
+
 		.news-box {
 			border-radius: 12rpx;
 			background-color: #fff;
@@ -887,4 +1040,70 @@
 			}
 		}
 	}
+
+	.mask {
+		background: $uni-bg-color-mask;
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.mask-content {
+		background: $uni-bg-color;
+		width: 570rpx;
+		height: 480rpx;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		border-radius: 20rpx;
+	}
+
+	.mask-close {
+		text-align: right;
+	}
+
+	.mask-title {
+		text-align: center;
+		font-size: 32rpx;
+		color: $uni-text-color-black;
+		margin-bottom: 50rpx;
+	}
+
+	.mask-tab {
+		display: flex;
+		justify-content: space-evenly;
+	}
+
+	.icon-closed {
+		width: 48rpx;
+		height: 48rpx;
+		margin: 24rpx 24rpx 0 0;
+	}
+
+	.tab-item {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.tab-tit {
+		font-size: 32rpx;
+		margin-top: 20rpx;
+		color: #666;
+	}
+
+	.tab-item image {
+		width: 160rpx;
+		height: 160rpx;
+	}
+
+	.backlog-notice {
+		margin: 50rpx 30rpx 0rpx;
+	}
 </style>