修改下单流程跳转模式和顶部导航栏滚动显示背景

applyCard/addAddress.vue

@@ -148,7 +148,7 @@ const queryAddOrEditAddress = (code, data) => {
 			};
 			request(addressToOrder, options2).then((res) => {
 				console.log(res);
-				  uni.navigateTo({
+				  uni.redirectTo({
 				  	url: `/applyCard/release-products?orderId=${state.formData.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`,
 				  });
 			  })

applyCard/car-release.vue

@@ -1,5 +1,5 @@
 <template>
-	<navBar title="行驶证信息上传"></navBar>
+	<navBar title="行驶证信息上传" :scrollTop="scrollTop"></navBar>
 	<navBgCar></navBgCar>
 	<view class="content">
 		<view class="item-tips">
@@ -153,7 +153,7 @@
 
 <script setup lang="ts">
 	import {
-		reactive
+		reactive,ref,
 	} from "vue";
 	import navBgCar from "./components/nav-bg-car4";
 	import navBar from "../components/nav-bar/nav-bar2.vue";
@@ -176,7 +176,7 @@
 	} from "@/utils/network/encryption";
 	import {
 		onLoad,
-		onShow
+		onPageScroll
 	} from "@dcloudio/uni-app";
 	import {
 		getObuStatus
@@ -188,6 +188,13 @@
 	import {
 		getItem
 	} from "@/utils/storage";
+	
+	const scrollTop = ref(0)
+	
+	//监听页面滚动
+	onPageScroll((e) => {
+		scrollTop.value = e.scrollTop;
+	});
 	const savaHandle = () => {
 
 		state.form.vehicleId =
@@ -207,11 +214,11 @@
 						state.show = true;
 					} else {
 						if(state.type  == 1|| state.type  == '1'){
-							uni.navigateTo({
+							uni.redirectTo({
 								url:`/applyCard/addAddress?orderId=${state.form.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`
 							})
 						}else{
-							uni.navigateTo({
+							uni.redirectTo({
 								// url: `/applyCard/choice-product?orderId=${state.form.orderId}`,
 								url: `/applyCard/release-products?orderId=${state.form.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`,
 							});

applyCard/choice-product.vue

@@ -1,5 +1,5 @@
 <template>
-	<navBar title="选择产品"></navBar>
+	<navBar title="选择产品" :scrollTop="scrollTop"></navBar>
 	<navBgCar></navBgCar>
 	<view class="content-value">
 		<view @click="savaHandle(item)" class="ul-item" v-for="(item, index) in state.dataArray" :key="index">
@@ -24,10 +24,11 @@
 <script setup lang="ts">
 	import {
 		onLoad,
-		onShow
+		onPageScroll,
 	} from "@dcloudio/uni-app";
 	import {
-		reactive
+		reactive,
+		ref,
 	} from "vue";
 	import {
 		etcQueryProduct,
@@ -57,6 +58,9 @@
 	import {
 		setItem
 	} from "@/utils/storage";
+	
+	const scrollTop =ref(0);//滚动距离
+	
 	const savaHandle = (val) => {
 		productReCodeAction(val.id).then(value => {
 			
@@ -113,6 +117,11 @@
 			state.dataArray = data??[];
 		});
 	});
+	
+	//监听页面滚动
+	onPageScroll((e) => {
+		scrollTop.value = e.scrollTop;
+	});
 
 	const productReCodeAction = (id) => {
 		var data = {

applyCard/essential-information.vue

@@ -1,5 +1,5 @@
 <template>
-	<navBar title="九州ETC"></navBar>
+	<navBar title="九州ETC" :scrollTop="scrollTop"></navBar>
 	<navBgCar></navBgCar>
 	<view class="content-wrap">
 		<!-- 车牌输入 -->
@@ -113,7 +113,7 @@
 	import { getItem, StorageKeys } from "@/utils/storage";
 	import { stringToJson } from "@/utils/network/encryption";
 	import navBar from "../components/nav-bar/nav-bar2.vue";
-	import { onLoad, onShow } from "@dcloudio/uni-app";
+	import { onLoad, onShow,onPageScroll } from "@dcloudio/uni-app";
 	import {
 		addressQuery,
 		etcCreatOrder,
@@ -121,9 +121,10 @@
 		searchOrder,
 	} from "@/utils/network/api.js";
 	import { request } from "@/utils/network/request.js";
-	import { reactive } from "vue";
+	import { reactive, ref } from "vue";
 	import { msg } from "@/utils/utils";
-
+	
+	const scrollTop =ref(0);
 	const state = reactive({
 		data: {
 			vehiclePlate: undefined, //车牌号
@@ -214,7 +215,10 @@
 					orderGoAction();
 				} else {
 					const data = stringToJson(res.bizContent);
-					uni.navigateTo({
+					// uni.navigateTo({
+					// 	url: `/applyCard/choice-product?orderId=${data.orderId}&userType=${state.data.userType}&vehiclePlateColor=${state.data.vehiclePlateColor}`,
+					// })
+					uni.redirectTo({
 						url: `/applyCard/choice-product?orderId=${data.orderId}&userType=${state.data.userType}&vehiclePlateColor=${state.data.vehiclePlateColor}`,
 					})
 
@@ -256,24 +260,24 @@
 		//完成填写基本信息
 		if (val.orderStep === 1) {
 			if (state.data.userType === "1") {
-				uni.navigateTo({
+				uni.redirectTo({
 					url: `/applyCard/opening-account-people?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
 				});
 			} else {
-				uni.navigateTo({
+				uni.redirectTo({
 					url: `/applyCard/opening-account-unit?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
 				});
 			}
 		} else if (val.orderStep === 2) {
-			uni.navigateTo({
+			uni.redirectTo({
 				url: `/applyCard/car-release?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
 			});
 		} else if (val.orderStep === 3) {
-			uni.navigateTo({
+			uni.redirectTo({
 				url: `/applyCard/choice-product?orderId=${val.orderId}`,
 			});
 		} else if (val.orderStep === 4) {
-			uni.navigateTo({
+			uni.redirectTo({
 				url: `/applyCard/product-detail?orderId=${val.orderId}&&clientFee=${val.product.clientFee}&&id=${val.productId}`,
 			});
 		}
@@ -283,6 +287,12 @@
 		state.data.type = option.type; //客车
 		state.data.userType = option.userType;
 	});
+	
+	//监听页面滚动
+	onPageScroll((e) => {
+		scrollTop.value = e.scrollTop;
+	});
+	
 	onShow(() => {
 		var data = {
 			openId: getItem(StorageKeys.OpenId),

applyCard/opening-account-people.vue

@@ -1,5 +1,5 @@
 <template>
-	<navBar title="ETC开户新办申请-个人"></navBar>
+	<navBar title="ETC开户新办申请-个人" :scrollTop="scrollTop"></navBar>
 	<navBgCar></navBgCar>
 	<view class="content-wrap">
 		<view @click="tabChange(true)">
@@ -228,7 +228,8 @@
 		pathToBase64
 	} from "@/utils/image-tools/index.js";
 	import {
-		reactive
+		reactive,
+		ref,
 	} from "vue";
 	import {
 		msg,
@@ -236,7 +237,7 @@
 	} from "@/utils/utils";
 	import {
 		onLoad,
-		onShow
+		onPageScroll,
 	} from "@dcloudio/uni-app";
 	import {
 		etcOcrCard,
@@ -257,6 +258,7 @@
 		getItem,
 	} from "@/utils/storage";
 	import navBar from "../components/nav-bar/nav-bar2.vue";
+	const scrollTop = ref(0)
 	const state = reactive({
 		genderList: [{
 			value: '男',
@@ -300,6 +302,7 @@
 		vehiclePlateColor: undefined,
 		isMyPeopple: true,
 	});
+	
 	const userGenderAction = () => {
 		state.genderShow = true;
 	};
@@ -362,7 +365,7 @@
 					request(etcUserCardInfoSubmit, options).then((res) => {
 						// let result = stringToJson(res.bizContent);
 						console.log(res);
-						uni.navigateTo({
+						uni.redirectTo({
 							url: `/applyCard/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&type=1`,
 						});
 					});
@@ -381,7 +384,7 @@
 			request(etcUserCardInfoSubmit, options).then((res) => {
 				// let result = stringToJson(res.bizContent);
 				console.log(res);
-				uni.navigateTo({
+				uni.redirectTo({
 					url: `/applyCard/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}`,
 				});
 			});
@@ -458,6 +461,11 @@
 		state.vehiclePlateColor = option.vehiclePlateColor;
 		//state.fromOrder = option.fromOrder //是否来自订单-修改资料
 	});
+	
+	//监听页面滚动
+	onPageScroll((e) => {
+		scrollTop.value = e.scrollTop;
+	});
 
 	const cardDbImageOcr = (val : any) => {
 		var imageType = val;

applyCard/opening-account-unit.vue

@@ -1,5 +1,5 @@
 <template>
-	<navBar title="ETC开户新办申请-单位"></navBar>
+	<navBar title="ETC开户新办申请-单位" :scrollTop="scrollTop"></navBar>
 	<navBgCar></navBgCar>
 	<view class="content-wrap">
 		<view class="item-tips">
@@ -96,7 +96,7 @@
 
 <script setup lang="ts">
 	import {
-		reactive
+		reactive, ref
 	} from "vue";
 	import navBgCar from "./components/nav-bg-car3";
 	import navBar from "../components/nav-bar/nav-bar2.vue";
@@ -119,7 +119,8 @@
 		stringToJson
 	} from "@/utils/network/encryption";
 	import {
-		onLoad
+		onLoad,
+		onPageScroll,
 	} from "@dcloudio/uni-app";
 import {
 		setItem,
@@ -129,6 +130,9 @@ import {
 		msg,
 		checkStr
 	} from "@/utils/utils";
+	
+	const scrollTop =ref(0);//滚动距离
+	
 	const state = reactive({
 		form: {
 			orderId: "", //订单ID
@@ -217,7 +221,7 @@ import {
 					request(etcCompanyCardInfoSubmit, options).then((res) => {
 						// let result = stringToJson(res.bizContent);
 						console.log(res);
-						uni.navigateTo({
+						uni.redirectTo({
 							url: `/applyCard/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&type=1`,
 						});
 					});
@@ -234,17 +238,25 @@ import {
 			};
 			request(etcCompanyCardInfoSubmit, options).then((res) => {
 				const data = stringToJson(res.bizContent);
-				uni.navigateTo({
+				uni.redirectTo({
 					url: `/applyCard/car-release?orderId=${state.orderId}&&vehiclePlateColor=${state.vehiclePlateColor}`,
 				});
 			});
 		}
 	};
+	
+	
 	onLoad((option: any) => {
 		state.form.orderId = option.orderId;
 		state.orderId = option.orderId;
 		state.vehiclePlateColor = option.vehiclePlateColor;
 	});
+	
+	//监听页面滚动
+	onPageScroll((e) => {
+		scrollTop.value = e.scrollTop;
+	});
+	
 	//营业执照Orc接口调用
 	const cardImageOcrYY = () => {
 		uni.chooseImage({

components/nav-bar/nav-bar2.vue

@@ -1,7 +1,6 @@
 <template>
-	<view class="nav-bar" :style="{height:navHeight+'px'}">
-		<view class="title"
-			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
+	<view class="nav-bar" :class="scrollTop>navHeight?'nav-bg':''" :style="{height:navHeight+'px'}">
+		<view class="title"	:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
 			<block v-if="isBack">
 				<image :src="`/static/image/icon-back.png`"
 					:style="{height:searchHeight+'px',width:searchHeight+'px'}" class="back" @click="back"></image>
@@ -17,10 +16,10 @@
 		onMounted,
 		ref
 	} from "vue";
-	const navHeight = ref(null)
-	const searchMarginTop = ref(null)
-	const searchHeight = ref(null)
-	const searchWidth = ref(null)
+	const navHeight = ref(0)
+	const searchMarginTop = ref(0)
+	const searchHeight = ref(0)
+	const searchWidth = ref(0)
 	onMounted(() => {
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 		const {
@@ -51,6 +50,10 @@
 		isBack: {
 			type: Boolean,
 			default: true
+		},
+		scrollTop:{
+			type:Number,
+			default:0
 		}
 	})
 	const back = () => {
@@ -61,6 +64,9 @@
 </script>
 
 <style scoped>
+	.nav-bg{
+		background: linear-gradient(to right,#13E7C1,#43A1E0);
+	}
 	.blank {
 		width: 100%;
 		display: none;