zhywpt-sp/pages/index/index.vue

<template>
	<view class='container'>
		<view class="bg-img">
			<image :src="`${fileURL}image/newHome/header.png`" mode="scaleToFill" class="icon"></image>
		</view>
		<view class="content">
			<view class="header">
				<view class="title">
					<view :style="{ height: `${statusBarHeight}px` }"></view>
					<!-- 自定义导航栏高度  -->
					<view class='title-txt' :style="{
					          height: `${barHeight}px`,
					          'line-height': `${barHeight}px`
					        }">
						<text>首页</text>
					</view>
				</view>
				<view class="search-box">
					<image :src="`${fileURL}image/newHome/search.png`" class="icon" mode="aspectFill"></image>
					<input class="search" placeholder="办业务·搜一搜" @input="onKeyInput" />
				</view>
			</view>

			<view class="nav">
				<view class="item-box" v-for='item in navList' @click="handleNav(item)">
					<view class="icon-img">
						<image :src="item.imgUrl" mode="aspectFit" class='img'></image>
					</view>
					<view class="b-txt">
						{{item.title}}
					</view>
				</view>
			</view>


			<view class="notice">
				<view class="l-img">
					<image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
				</view>
				<view class="r-info">
					如何授权登录小程序？
				</view>
			</view>

			<view class="supervision-con">
				<view class="txt">
					ETC服务监督电话
				</view>
				<view class="phone">
					0851-883065555
				</view>
				<view class="btn">
					<text>立即拨打 ＞</text>
				</view>
			</view>

			<view class="title-name">
				快速办理
			</view>
			<view class="express-lane">
				<view class="item keche">
					<view class="item-con">
						<view class="top-txt">
							客车用户
						</view>
						<view class="btn">
							进入
						</view>
					</view>
				</view>
				<view class="item huoche">
					<view class="item-con">
						<view class="top-txt">
							货车用户
						</view>
						<view class="btn">
							进入
						</view>
					</view>
				</view>
			</view>


			<view class="news-con">
				<view class="title-con">
					<text>高速快讯</text>
					<view class="r-more">
						<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的介绍
							</view>
							<view class="b-time">
								2024-09-22
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 办理流程 -->
			<view class="flow-path">
				<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="txt">
							{{ item }}
						</view>
						<view class="border">
						</view>
					</view>
				</view>

				<view v-if="state.tabActive === '办理流程'">
					<view class="flow-list">
						<flow-path-list :options="state.flowList"></flow-path-list>
					</view>
				</view>

				<view v-else-if="state.tabActive === '办理条件'">
					<view class="flow-list tiaojian">
						<view class="title-top">
							<image :src="`${fileURL}image/newHome/tiaojian.png`" mode="scaleToFill" class="icon-img"></image>
							<view class="txt">
								基本条件
							</view>
							<image :src="`${fileURL}image/newHome/tiaojianr.png`" mode="scaleToFill" class="icon-img"></image>
						</view>
						<view class="list-info"> {{state.processeConditionText}} </view>
					</view>
				</view>
				<view v-else-if="state.tabActive === '常见问题'">
					<view class="flow-list wenti">
						<view class="item-box" v-for='item in state.commonQuestionArr'>
							<view class="l-icon">
								<image :src="`${fileURL}image/newHome/wenhao.png`" mode="scaleToFill" class="icon-img"></image>
							</view>
							<view class="txt">
								{{item}}
							</view>
						</view>
						<!-- <view class="list-info"> {{state.commonQuestionText}} </view> -->
					</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script setup lang="ts">
	import {
		onMounted,
		ref, reactive
	} from "vue";
	import {
		onPageScroll,
		onLoad, onReachBottom, onReady
	} from "@dcloudio/uni-app";
	import flowPathList from "./components/flow-path-list.vue";
	import filter from '@/components/filter/filter.vue';
	import {
		request
	} from "@/utils/network/request.js";
	import {
		stringToJson
	} from "@/utils/network/encryption.js";
	import {
		useUserStore
	} from "@/stores/user";
	import {
		getItem,
		setItem,
		StorageKeys
	} from "@/utils/storage";
	import {
		queryKey,
		querySwiper,
		envs,
		infoQuery,
		queryHighMsg,
		orderList
	} from "@/utils/network/api.js";

	import {
		fileURL, fileURLList
	} from "@/datas/fileURL.js";
	import {
		navTo,
		msg,
		noticeUser
	} from "@/utils/utils";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	// import { jump } from "@/datas/9901Jump.js";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	onLoad((options) => {
		console.log("wechatSignNo", options)
		getInfo();
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		const {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
		console.log(barHeight.value, statusBarHeight.value, '计算的顶部高度');
	})
	const statusBarHeight = ref(0)
	const barHeight = ref(0)
	const searchParams = ref('')
	//搜索
	const onKeyInput = (event) => {
		searchParams.value = event.target.value;
		console.log('搜索内容', searchParams.value);
	}
	const navList = [{
		imgUrl: `${fileURL}image/newHome/kaqian.png`,
		title: "卡签信息查询",
		path: '/pages/bluetooth/bluetooth?routeType=4'
	}, {
		imgUrl: `${fileURL}image/newHome/jihuo.png`,
		title: "激活服务",
		path: '/subpackage/personal-center/install-activation-order'
	}, {
		imgUrl: `${fileURL}image/newHome/zhuxiao.png`,
		title: "设备注销",
		path: "",
		handlePath: () => {
			cardRecharge(3)
		}
	}, {
		imgUrl: `${fileURL}image/newHome/shenji.png`,
		title: "设备升级",
		path: `/subpackage/after-sale/equipment-upgrade/select-car`
	}, {
		imgUrl: `${fileURL}image/newHome/kefu.png`,
		title: "在线客服",
		path: `/subpackage/after-sale/onlineService`
	}, {
		imgUrl: `${fileURL}image/newHome/wangdian.png`,
		title: "网点查询",
		path: ""
	}, {
		imgUrl: `${fileURL}image/newHome/yewu.png`,
		title: "业务指引",
		path: ""
	}, {
		imgUrl: `${fileURL}image/newHome/more.png`,
		title: "更多",
		path: `/pages/service/service`
	}]
	const handleNav = (item) => {
		if (item.path) {
			navTo(item.path, true)
		} else if (item.handlePath) {
			item.handlePath()
		}
	}
	const cardRecharge = (val) => {
		// #ifdef MP-ALIPAY
		if (val == 1 || val == 2 || val == 3) {
			msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
		}
		// #endif

		// #ifdef MP-WEIXIN
		if (val == 1) {
			navTo('/pages/recharge/recharge-pay', true)
		} else if (val == 2) {
			navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
		} else if (val == 3) {
			navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true)
		}
		// #endif
	}
	const state = reactive({
		type: 0, //1客车 2货车
		userType: 1, //1个人 2单位
		notice: "",
		swiperList: [],
		noticeList: [], //公告栏列表
		flowPathTabList: ["办理流程", "办理条件", "常见问题"],
		tabActive: "办理流程",
		flowList: [
			//办理流程数据
			{
				title: "01 产品选择",
				desc: "选择购买的发行产品",
				imgUrl: `${fileURL}image/newHome/1.png`,
			},
			{
				title: "02 信息校验",
				desc: "提交车牌号、车牌颜色、收货地址相关信息",
				imgUrl: `${fileURL}image/newHome/2.png`,
			},
			{
				title: "03 证件上传",
				desc: "上传身份证、行驶证等相关信息",
				imgUrl: `${fileURL}image/newHome/3.png`,
			},
			{
				title: "04 订单支付",
				desc: "支付完成订单",
				imgUrl: `${fileURL}image/newHome/4.png`,
			},
			{
				title: "05 签约代扣",
				desc: "选择签约账户并关联",
				imgUrl: `${fileURL}image/newHome/5.png`,
			},
		],
		highMsgData: '',//高速快讯内容
		processeConditionText: "", //办理条件文本
		commonQuestionText: "", //常见问题文本
		commonQuestionArr: [], //常见问题数组
		isEnableSetGray: false
	});
	//办理流程tab选择
	const flowPathTabHandle = (tab) => {
		state.tabActive = tab;
		if (tab == "办理条件") {
			processeCondition();//办理条件
		} else if (tab == "常见问题") {
			commonQuestion();
		}
	};
	const processeCondition = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				businessType: 'PROCESSING_CONDITIONS' //办理条件
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(infoQuery, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log("办理条件", data)
				state.processeConditionText = data.text
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const commonQuestion = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				businessType: 'COMMON_PROBLEM' //常见问题
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(infoQuery, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log("常见问题", data)
				state.commonQuestionText = data.text
				state.commonQuestionArr = data.text.split('。').filter(item => item)
			})
			.catch((err) => {
				console.log(err);
			});
	}
	// 获取公告
	const getInfo = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				businessType: 'BROADCAST' //广播栏信息
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(infoQuery, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log(data, '公告');
				state.notice = data.text
			})
			.catch((err) => {
				console.log(err);
			});
	}
	// 高速快讯查询接口
	const highMsg = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				pageNo: 1,
				pageSize: 2
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(queryHighMsg, options).then((res) => {
			console.log("高速快讯查询接口", stringToJson(res.bizContent));
			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"])
				if (state.highMsgData[i]["type"] == 3) {
					state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
				}
			}
			state.highMsgData.sort(function (a, b) {
				return a.sequence - b.sequence//正序
			})
		}).catch((err) => { console.log(err) });
	}
	//监听页面滚动
	onPageScroll((e) => {
		console.log(e.scrollTop,);
	});
</script>
<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #f2f5f7;
		position: relative;
	}

	.bg-img {
		width: 100%;
		position: absolute;
		z-index: 0;

		.icon {
			width: 100%;
			height: 750rpx;
		}
	}

	.content {
		position: relative;
		padding-bottom: 30rpx;
	}

	.header {
		height: 590rpx;



		.title {

			.title-txt {
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.search-box {
			margin: 10rpx 30rpx 0;
			position: relative;
			height: 80rpx;
			background: #1a394d;
			// border: 1px solid #DCDCDC;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			flex: 1;

			.icon {
				width: 27rpx;
				height: 27rpx;
				margin-left: 26rpx;
			}

			.search {
				flex: 1;
				margin-right: 20rpx;
				height: 100%;
				padding: 0 10rpx;
				color: #fff;
				font-weight: 500;
				font-size: 26rpx;

			}
		}



	}

	.nav {
		background-color: #fff;
		margin: 0 30rpx;
		width: 100%;
		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: repeat(2, 50%);
		// grid-gap: 10px;

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

			.icon-img {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				padding: 25rpx;
				background: #ECF1F4;
				box-sizing: border-box;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.b-txt {
				margin-top: 16rpx;
				font-size: 26rpx;
				color: #111111;
			}
		}
	}

	.notice {
		background: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/tongzhi.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 80rpx;
		width: 690rpx;
		margin: 24rpx 30rpx 0;
		display: flex;
		align-items: center;

		.l-img {
			width: 136rpx;
			height: 80rpx;
			margin-left: 20rpx;

			.img {
				height: 100%;
				width: 100%;
			}
		}

		.r-info {
			margin-left: 16rpx;
			font-size: 28rpx;
			color: #000;
			font-weight: 500;
		}
	}

	.supervision-con {
		box-sizing: border-box;
		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;

		.txt {
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
		}

		.phone {
			margin: 10rpx 0 10rpx;
			font-family: Arial, Arial;
			font-weight: normal;
			font-size: 38rpx;
			color: #B99A46;
		}

		.btn {
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #01243A;
		}
	}

	.title-name {
		margin: 24rpx 30rpx 0;

	}

	.express-lane {
		margin: 22rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 334rpx;
			height: 168rpx;
			text-align: right;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			flex-direction: column;

			.item-con {
				margin-right: 53rpx;
			}

			.top-txt {
				font-family: PingFangSC, PingFang SC;
				font-size: 30rpx;
				color: #FFFFFF;
			}

			.btn {
				margin-top: 30rpx;
				background: #03385D;
				border-radius: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 24rpx;
				color: #FFFFFF;
				height: 40rpx;
				width: 80rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.keche {
			background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/keche.png);
		}

		.huoche {
			margin-left: 22rpx;
			background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/huoche.png);
		}
	}

	.news-con {
		margin: 39rpx 30rpx 0;

		.title-con {
			font-family: PingFangSC, PingFang SC;
			font-size: 34rpx;
			color: #01243A;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.r-more {
				width: 100rpx;
				height: 44rpx;
				border-radius: 22rpx;
				border: 1rpx solid #01243A;
				display: flex;
				align-items: center;
				justify-content: center;

				.txt {
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #01243A;
				}

				.icon {
					width: 10rpx;
					height: 100%;
					margin-left: 5rpx;
				}
			}
		}

		.news-box {
			border-radius: 12rpx;
			background-color: #fff;
			margin-top: 22rpx;
			padding: 0 20rpx;

			.news-item {
				padding: 20rpx 0;
				display: flex;

				&:nth-child(n+2) {
					border-top: 1rpx solid #eee;
				}

				.l-img {
					width: 180rpx;
					height: 135rpx;

					.img {
						height: 100%;
						width: 100%;
					}
				}

				.r-txt {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.tit {
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #111111;
					}

					.b-time {
						font-family: PingFangSC, PingFang SC;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.flow-path {
		margin: 31rpx 30rpx 0;

		.top-menu {
			display: flex;

			.tab {
				font-family: MicrosoftYaHeiUI;
				font-size: 28rpx;
				color: #5A5E61;
				margin-right: 39rpx;
				position: relative;

				&.active {
					font-size: 34rpx;
					color: #01243A;

					.border {
						position: relative;
					}

					.border::after {
						content: "";
						background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/bottom-select.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 16rpx;
					}
				}

				.txt {
					position: relative;
					z-index: 2;
				}
			}

		}

		.flow-list {
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;

		}

		.tiaojian {
			.title-top {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 20rpx;

				.txt {
					margin: 0 24rpx;
					font-family: MicrosoftYaHei;
					font-size: 30rpx;
					color: #01243A;
				}

				.icon-img {
					width: 16rpx;
					height: 20rpx;
				}
			}

		}

		.list-info {
			font-family: MicrosoftYaHeiUI;
			font-size: 26rpx;
			color: #222222;
		}

		.wenti {
			.item-box:nth-child(n+2) {
				border-top: 1rpx solid #E8E8E8;

			}

			.item-box {
				display: flex;
				padding: 15rpx 0;
			}

			.l-icon {
				flex-shrink: 0;
				width: 38rpx;
				height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #c2a75f;
				border-radius: 50%;

				.icon-img {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.txt {
				margin-left: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				color: #222222;
			}
		}
	}
</style>