zhywpt-sp/pages/index/index.vue

<template>
	<filter>
		<view class="wrapper">
			<!-- 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">
					<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>
						</swiper-item>
					</block>
				</swiper>

				<view class="notice">
					<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" @click="tip()">
					</uni-notice-bar>
				</view>
			</view>

			<!-- 按钮导航 -->
			<view class="nav">
				<!-- <view class="item-box" @click="cardRecharge(1)">
					<view class="item item-1">
						<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill" />
					</view>
					<view class="text">储值卡充值</view>
				</view> -->
				<view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)">
					<view class="item item-2">
						<image :src="fileURL + 'image/index/item-2.png'" mode="aspectFill" />
					</view>
					<view class="text">卡签信息查询</view>
				</view>
				<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>
					<view class="text">激活服务</view>
				</view>

				<view class="item-box" @click="cardRecharge(3)">
					<view class="item item-5">
						<image :src="fileURL + 'image/index/item-5.png'" mode="aspectFill" />
					</view>
					<view class="text">设备注销</view>
				</view>
				<view class="item-box" @click="$util.navTo(`/subpackage/after-sale/equipment-upgrade/select-car`,true)">
					<view class="item item-6">
						<image :src="fileURL + 'image/index/item-6.png'" mode="aspectFill" />
					</view>
					<view class="text">设备升级</view>
				</view>
				<view class="item-box" @click="$util.navTo(`/subpackage/after-sale/onlineService`,true)">
					<view class="item item-7">
						<image :src="fileURL + 'image/index/item-7.png'" mode="aspectFill" />
					</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'" mode="aspectFill" />
					</view>
					<view class="text">更多</view>
				</view>
			</view>

			<!--快速办理通道  -->
			<view class="express-lane">
				<view class="title">快速办理</view>
				<view class="lane">
					<view class="lane-item lane-1" :style="{ '--background': bgOrange }" @click="showMask(1)">
						<image :src="fileURL + 'image/index/icon-car.png'" mode="aspectFill"></image>
						<view class="text">
							<text class="head">客车用户</text>
						</view>
					</view>
					<view class="lane-item lane-2" :style="{ '--background': bgBlue }" @click="showMask(2)">
						<image :src="fileURL + 'image/index/icon-truck.png'" mode="aspectFill"></image>
						<view class="text">
							<text class="head">货车用户</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"> {{state.processeConditionText}} </view>
				</view>
				<view v-else-if="state.tabActive === '常见问题'">
					<view class="flow-list as-gravity-center"> {{state.commonQuestionText}} </view>
				</view>
			</view>
		</view>

		<!--  高速快讯 -->
		<view class="news" v-if="state.highMsgData.length!=0">
			<view class="title">高速快讯</view>
			<view class="news-box">
				<view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
					<view class="left-text">
						<view class="tit description">{{item.title}}</view>
						<view class="span">{{item.copywriting}}</view>
					</view>
					<view class="image-box">
						<image :src="fileURLList + item.imgUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view v-if="state.highMsgData.length!=0" class="more"
					@click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">查看更多</view>
			</view>
		</view>
	</filter>


	<!-- 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">
	import {
		onMounted,
		ref
	} from "vue";
	import {
		onPageScroll,
		onLoad, onReachBottom
	} 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 {
		reactive
	} from "vue";
	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";
	const tools = require("../../static/etcUtil/tools.js");
	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 list = reactive(["您有一条待办事项，还未办理完成"])
	const scrollTop = ref(0);
	const isBack = ref(false);
	const swiper = reactive({
		indicatorDots: true,
		autoplay: true,
		interval: 3000,
		duration: 3000,
		easing: "easeInOutCubic"
	})
	console.log('输出内容==============', getItem(StorageKeys.OpenId), '==============')

	const state = reactive({
		type: 0, //1客车 2货车
		userType: 1, //1个人 2单位
		notice: "",
		swiperList: [],
		noticeList: [], //公告栏列表
		flowPathTabList: ["办理流程", "办理条件", "常见问题"],
		tabActive: "办理流程",
		flowList: [
			//办理流程数据
			{
				title: "第一步：产品选择",
				desc: "选择购买的发行产品",
			},
			{
				title: "第二步：信息校验",
				desc: "提交车牌号、车牌颜色、收货地址相关信息",
			},
			{
				title: "第三步：证件上传",
				desc: "上传身份证、行驶证等相关信息",
			},
			{
				title: "第四步：订单支付",
				desc: "支付完成订单",
			},
			{
				title: "第五步：签约代扣",
				desc: "选择签约账户并关联",
			},
		],
		highMsgData: '',//高速快讯内容
		processeConditionText: "", //办理条件文本
		commonQuestionText: "", //常见问题文本
		isEnableSetGray: false
	});
	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;
		}
		scrollTop.value = e.scrollTop;
	});
	onLoad((options) => {
		console.log("wechatSignNo",options)
			getInfo();
			quanKeyAction().then((val : any) => {
				setItem('key', val.dictTypeAndItem)
			})
	})
	onMounted(() => {
		uni.getSystemInfo({
			success: (e : any) => {
				statusBarHeight.value = e.statusBarHeight;
			}
		})
		getSwiper()
	});
	onReachBottom(() => {
		highMsg(); //高速快讯
	})
	const tip = () => {
		const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
		tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
	}
	//获取轮播
	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 : []
		})
			.catch((err) => {
				console.log(err);
			});

	};

	//办理流程tab选择
	const flowPathTabHandle = (tab) => {
		state.tabActive = tab;
		if (tab == "办理条件") {
			processeCondition();//办理条件
		} else if (tab == "常见问题") {
			commonQuestion();
		}
	};
	//全量枚举值查询
	const quanKeyAction = () => {
		var data = {};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryKey, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});

	}


	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 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) });
	}
	const link = (item : any) => {
		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);
					// 未成功跳转到车主小程序
				},
			});
		}
	}
	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
			})
			.catch((err) => {
				console.log(err);
			});
	}
	// 代办事项
	const doSomething = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				"opId": getItem(StorageKeys.OpenId),
				"source": "WECHAT",
				"vehiclePlate": "",
				"tabIndex": 3 + '',
				"pageNo": 1,
				"pageSize": 100,
				"promotionModes": 1
			},
			method: "POST", //提交方式(默认POST)
		};

		//调用方式
		request(orderList, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				let obj = {};
				obj["id"] = 1;
				obj['title'] = "您有" + data.data.length + "条未完成订单，前往处理"
				state.noticeList.push(obj)
				console.log("代办事项", data.data)
			})
			.catch((err) => {
				console.log(err);
			});

	}
	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
	}
</script>

<style>
	page {
		background: #eef7f7;
	}
</style>
<style lang="scss" scoped>
	.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: 46rpx;
		left: 125rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;

		::v-deep .uni-noticebar {
			background: none !important;
			margin-bottom: 0;

			text {
				font-size: 24rpx !important;
				color: #ffffff !important;
			}
		}
	}

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

	.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;
		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;
		border-radius: 10rpx;
	}

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

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

	.description {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>