zhywpt-sp/pages/index/index.vue

<template>
	<view class="statusBar" :style="{height:statusBarHeight+'px'}" v-show="isShowBar"></view>
	<view class="wrapper">
		<!-- Banner -->
		<view class="banner">
			<swiper class="swiper" circular>
				<swiper-item class="swiper-item">
					<image :src="fileURL + 'image/index/banner-1.png'" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<view class="notice">
				<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false">
				</image>
				<text class="notice-text">贵州高速最新施工，请注意昆明西...</text>
			</view>
		</view>

		<!-- 按钮导航 -->
		<view class="nav">
			<view class="item-box" @click="$util.navTo('/pages/recharge/recharge',true)">
				<view class="item item-1">
					<image :src="fileURL + 'image/index/item-1.png'" />
				</view>
				<view class="text">储值卡充值</view>
			</view>
			<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="item item-2">
					<image :src="fileURL + 'image/index/item-2.png'" />
				</view>
				<view class="text">账单查询</view>
			</view>
			<view class="item-box"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="item item-3">
					<image :src="fileURL + 'image/index/item-3.png'" />
				</view>
				<view class="text">通行发票</view>
			</view>
			<view class="item-box" @click="$util.navTo('/issueActivation/install-activation-order',true)">
				<view class="item item-4">
					<image :src="fileURL + 'image/index/item-4.png'" />
				</view>
				<view class="text">设备激活</view>
			</view>

			<view class="item-box"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="item item-5">
					<image :src="fileURL + 'image/index/item-5.png'" />
				</view>
				<view class="text">设备遗失</view>
			</view>
			<!-- <view class="item-box" @click="$util.navTo('/after-sale/rescind-carId/rescind-carId-select',true)"> -->
			<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="item item-6">
					<image :src="fileURL + 'image/index/item-6.png'" />
				</view>
				<view class="text">解除车牌占用</view>
			</view>
			<view class="item-box" @click="$util.navTo(`/personal-center/setting/personal-information/corrections`,true)">
				<view class="item item-7">
					<image :src="fileURL + 'image/index/item-7.png'" />
				</view>
				<view class="text">基础信息变更</view>
			</view>
			<view class="item-box" @click="$util.navTo(`/pages/service/service`,true)">
				<view class="item item-8">
					<image :src="fileURL + 'image/index/item-more.png'" />
				</view>
				<view class="text">更多</view>
			</view>
		</view>

		<!-- 消息滚动显示 -->
		<view class="backlog-notice">
			<notice-bar :noticeList="state.noticeList" @noticeClick="$util.msg('该功能正在开发中，敬请期待！')"></notice-bar>
		</view>

		<!--快速办理通道  -->
		<view class="express-lane">
			<view class="title">快速办理通道</view>
			<view class="lane">
				<view class="lane-item lane-1" :style="{ '--background': bgOrange }" @click="showMask(0)">
					<image :src="fileURL + 'image/index/icon-car.png'"></image>
					<view class="text">
						<text class="head">客车通道</text>
						<text class="decribe">业务内容简介</text>
					</view>
				</view>
				<view class="lane-item lane-2" :style="{ '--background': bgBlue }" @click="showMask(1)">
					<image :src="fileURL + 'image/index/icon-truck.png'"></image>
					<view class="text">
						<text class="head">货车通道</text>
						<text class="decribe">业务内容简介</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 办理流程 -->
		<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="border"></view>{{ item }}
					</view>
				</view>
			</scroll-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 as-gravity-center"> 办理条件 </view>
			</view>
			<view v-else-if="state.tabActive === '常见问题'">
				<view class="flow-list as-gravity-center"> 常见问题 </view>
			</view>
		</view>
	</view>

	<!--  高速快讯 -->
	<view class="news">
		<view class="title">高速快讯</view>
		<view class="news-box">
			<view class="news-item"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="left-text">
					<view class="tit">贵州高速最新施工通告，请注意贵州高速最新通告，请注意...</view>
					<view class="span">施工通告</view>
				</view>
				<view class="image-box">
					<image :src="fileURL + 'image/index/news-1.png'"></image>
				</view>
			</view>
			<view class="news-item"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<view class="left-text">
					<view class="tit">贵州新建服务区，请注意贵州高速最新通告，请留意...</view>
					<view class="span">新建</view>
				</view>
				<view class="image-box">
					<image :src="fileURL + 'image/index/news-2.png'"></image>
				</view>
			</view>
			<view class="more">查看更多</view>
		</view>
	</view>

	<!-- 专区服务 -->
	<view class="service">
		<view class="title">专区服务</view>
		<view class="service-box">
			<view class="service-item border"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<image :src="fileURL + 'image/index/truck-point.png'"></image>
				<view class="text">
					<view class="tit">货车积分返利</view>
					<view class="sub">海量商品任你选择</view>
				</view>
			</view>
			<view class="service-item"  @click="$util.msg('该功能正在开发中，敬请期待！')">
				<image :src="fileURL + 'image/index/parking-bill.png'"></image>
				<view class="text">
					<view class="tit">停车场账单查询</view>
					<view class="sub">消费明细一目了然{{ title }}</view>
				</view>
			</view>
		</view>
	</view>



	<!-- ETC选择弹窗 -->
	<view class="mask" v-if="isShowMask">
		<view class="mask-content">
			<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'"></image>
					<text class="tab-tit on">个人办理</text>
				</view>
				<view class="tab-item" @click="toCreatOrder('2')">
					<image :src="fileURL + 'image/index/icon-unit.png'"></image>
					<text class="tab-tit on">单位办理</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		ref
	} from "vue";
	import { onPageScroll } from "@dcloudio/uni-app";
	import flowPathList from "./components/flow-path-list.vue";
	import {
		request
	} from "../../utils/network/request.js";
	import {
		stringToJson
	} from "../../utils/network/encryption.js";
	import {
		useUserStore
	} from "@/stores/user";
	import {
		getItem,
		StorageKeys
	} from "../../utils/storage";
	import {
		reactive
	} from "vue";
	import {
		fileURL
	} from "@/datas/fileURL.js";
import { navTo,confirm } from "../../utils/utils";

	const bgOrange = `url(${fileURL}image/index/bg-orange.png) center center no-repeat`;
	const bgBlue = `url(${fileURL}image/index/bg-blue.png) center center no-repeat`;

	const state = reactive({
		type: 0,
		userType: 0,
		noticeList: [
			//公告栏列表
			{
				title: "您有一条待办事项，还未办理完成",
				id: 1,
			},
			{
				title: "XXX刚刚申请了公交车发行",
				id: 2,
			},
			{
				title: "您还有一条订单已经发货了",
				id: 3,
			},
			{
				title: "订单等您确认收货",
				id: 4,
			},
			{
				title: "最新的新闻资讯请点击哈哈哈哈哈哈哈假的假的假的假的基督教",
				id: 5,
			},
		],
		flowPathTabList: ["办理流程", "办理条件", "常见问题"],
		tabActive: "办理流程",
		flowList: [
			//办理流程数据
			{
				title: "第一步：信息校验：",
				desc: "提交车牌号、车牌颜色、收货地址相关信息",
			},
			{
				title: "第二步：证件上传：",
				desc: "上传身份证、行驶证等相关信息",
			},
			{
				title: "第三步：签约代扣：",
				desc: "选择签约账户并关联",
			},
			{
				title: "第四步：产品选择：",
				desc: "选择购买的发行产品",
			},
			{
				title: "第五步：订单完成：",
				desc: "支付完成订单",
			},
		],
	});
	const isShowMask = ref(false);
	const isShowBar =ref(false)
	const userStore = useUserStore();
	const type = 0;
	const title = ref("我是测试");
	const statusBarHeight = ref(0)
	
	//监听页面滚动
	onPageScroll((e)=>{
		if(e.scrollTop > statusBarHeight.value){
			isShowBar.value = true;
		}else{
			isShowBar.value = false;
		}
	});

	//办理流程tab选择
	const flowPathTabHandle = (tab) => {
		state.tabActive = tab;
	};

	//安装激活
	const goActivation = () => {
		uni.navigateTo({
			url: "/pages/order/order",
		});
	};

	const goToRecharge = () => {
		console.log("执行点击事件");
		uni.navigateTo({
			url: "/pages/recharge/recharge",
		});
	};

	const toCreatOrder = (val: any) => {
		state.userType = val;
		if (val === "1") {
			navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,true)
			// uni.navigateTo({
			// 	url: `/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,
			// });
		} else {
			// uni.navigateTo({
			// 	url: `/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,
			// });
			navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,true)
		}
		closeMask();
	};

	const showMask = (val: any) => {
		console.log(88888888888888);
		console.log(getItem("token"));
		if(getItem("token")!=''|| getItem("openId")!=''){
			state.type = val;
			isShowMask.value = true;
		}else{
			confirm('您需要登录过后才能使用此功能',()=>{
				uni.navigateTo({
					url:'/login/login',
				});
			},'温馨提示',true,'去登录');
		}		
	};

	const closeMask = () => {
		isShowMask.value = false;
	};

	onMounted(() => {
		uni.getSystemInfo({
			    success: (e: any) => {
					console.log(e.statusBarHeight);
					statusBarHeight.value = e.statusBarHeight;
				}
		})
		// console.log(credentialType);

		//参数说明
		// let code = "30" //请求编码
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				opId: getItem("openId"),
				source: "WECHAT",
				tabIndex: "0",
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		// request(searchOrder, options)
		//   .then((res) => {
		//     console.log(stringToJson(res.bizContent));
		//     // stringToJson(res.bizContent)
		//   })
		//   .catch((err) => {
		//     console.log(err);
		//   });
	});
</script>

<style>
	page{
		background: #eef7f7;
	}
</style>
<style lang="scss" scoped>
	// .wrapper {
	// 	background: #eef7f7;
	// }
.statusBar{
	width: 100%;
	position: sticky;
	background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
	top: 0;
	left: 0;
	z-index: 999;
}
	.banner {
		position: relative;
	}

	.banner swiper {
		height: 470rpx;
		width: 750rpx;
	}

	.banner .notice {
		position: absolute;
		background: rgba(0, 0, 0, 0.28);
		border-radius: 30rpx;
		width: 500rpx;
		height: 60rpx;
		bottom: 34rpx;
		left: 125rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.banner .notice .icon {
		width: 40rpx;
		height: 40rpx;
		margin: 10rpx;
	}

	.banner .notice .notice-text {
		font-size: 24rpx;
		color: #ffffff;
		flex: 1;
	}

	.swiper-item image {
		width: 100%;
		height: auto;
	}

	.nav {
		display: flex;
		flex-wrap: wrap;
		padding: 0 35rpx;
		font-size: 28rpx;
	}

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

	.nav .item {
		width: 80rpx;
		height: 80rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 45rpx 20rpx 45rpx;
	}

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

	.item-1 {
		background: linear-gradient(133deg, #5fff9b 0%, #00b38b 100%);
	}

	.item-2 {
		background: linear-gradient(-50deg, #018ffd 0%, #27fcff 100%);
	}

	.item-3 {
		background: linear-gradient(-47deg, #f88721 0%, #fecd61 100%);
	}

	.item-4 {
		background: linear-gradient(-47deg, #018ffd 0%, #27fcff 100%);
	}

	.item-5 {
		background: linear-gradient(-44deg, #018ffd 0%, #27fcff 100%);
	}

	.item-6 {
		background: linear-gradient(-50deg, #f88721 0%, #fecd61 100%);
	}

	.item-7 {
		background: linear-gradient(129deg, #5fff9b 0%, #00b38b 100%);
	}

	.item-8 {
		background: linear-gradient(124deg, #b8f0f2 0%, #62aeb1 100%);
	}

	.item image {
		width: 56rpx;
		height: 56rpx;
	}

	.express-lane {
		font-size: 36rpx;
		font-weight: 400;
		color: #000000;
		padding-top: 30rpx;
		// line-height: 58rpx;
	}

	.express-lane .title {
		padding-left: 30rpx;
		margin: 0rpx 0 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.lane {
		display: flex;
		justify-content: space-evenly;
	}

	.lane-item {
		width: 330rpx;
		height: 150rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lane-item image {
		width: 120rpx;
		height: 100rpx;
		margin: 0 18rpx;
	}

	.lane-item .text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		// align-items: center;
		color: #ffffff;
		flex: 1;
	}

	.lane-item .head {
		font-size: 30rpx;
		font-weight: bold;
	}

	.lane-item .decribe {
		font-size: 24rpx;
	}

	.lane-1 {
		background: var(--background);
	}

	.lane-2 {
		background: var(--background);
	}

	.news {
		padding:30rpx 30rpx 0 30rpx;
	}

	.news .title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.news .left-text {
		flex: 1;
		margin-right: 100rpx;
	}

	.news-box {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 0 32rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		margin: 20rpx 0 50rpx;
	}

	.news .tit {
		font-size: 26rpx;
		color: #172843;
	}

	.news .news-item {
		display: flex;
		border-bottom: 1px solid #dcdcdc;
		padding: 32rpx 0 15rpx;
	}

	.news .image-box image {
		width: 100rpx;
		height: 100rpx;
	}

	.news .span {
		font-size: 22rpx;
		display: inline-block;
		text-align: center;
		background: #bae0f1;
		border-radius: 6rpx;
		color: #0a8f8a;
		padding: 4rpx 8rpx;
	}

	.news .more {
		font-size: 24rpx;
		text-align: center;
		color: #0a8f8a;
		padding: 22rpx 0;
	}

	.service {
		padding: 0 30rpx 50rpx 30rpx;
	}

	.service .title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.service-box {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 0 32rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.service-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 22rpx 0;
	}

	.service-item .text {
		flex: 1;
	}

	.service image {
		width: 170rpx;
		height: 116rpx;
		margin-right: 26rpx;
	}

	.service .tit {
		font-size: 28rpx;
		font-weight: bold;
		color: #0d0f26;
	}

	.service .sub {
		font-size: 24rpx;
		color: #666666;
		padding-top: 10rpx;
	}

	.service .border {
		border-bottom: 1px solid #dcdcdc;
	}

	.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;
	}

	.flow-path {
		padding: 20rpx 0rpx 20rpx;

		.scroll-view {
			white-space: nowrap;
			// position: sticky;
			top: 0;
		}

		.top-menu {
			display: flex;
		}

		.top-menu .tab {
			font-size: 28rpx;
			padding: 38rpx 30rpx;
			color: #666666;
			position: relative;
		}

		.top-menu .active .border {
			position: absolute;
			width: 70%;
			height: 16rpx;
			background: #00b38b;
			opacity: 0.3;
			bottom: 40rpx;
			z-index: -99;
			left: 15%;
			border-radius: 6rpx;
		}

		.top-menu .active {
			font-weight: bold;
			font-size: 32rpx;
			color: #0d0f26;
		}

		.top-menu .active::before {
			width: 100%;
			height: 16rpx;
			background: #00b38b;
			opacity: 0.3;
		}

		.flow-list {
			margin: 0rpx 30rpx;
			min-height: 700rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 55rpx 30rpx 30rpx;
		}
	}
</style>