[Feature]提交代码

pages/index/index.vue

@@ -27,13 +27,13 @@
 				</view>
 				<view class="text">储值卡充值</view>
 			</view>
-			<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
+			<view class="item-box" @click="$util.navTo('/service/search/select-car',true)">
 				<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-box" @click="$util.navTo('/invoice/Invoice-mannager',true)">
 				<view class="item item-3">
 					<image :src="fileURL + 'image/index/item-3.png'" />
 				</view>
@@ -46,7 +46,7 @@
 				<view class="text">设备激活</view>
 			</view>
 
-			<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
+			<view class="item-box" @click="$util.navTo('/after-sale/card-loss-reporting/select-car',true)">
 				<view class="item item-5">
 					<image :src="fileURL + 'image/index/item-5.png'" />
 				</view>
@@ -218,9 +218,9 @@
 		getItem,
 		StorageKeys
 	} from "../../utils/storage";
-	import {
-		onLoad,
-	} from "@dcloudio/uni-app";
+	// import {
+	// 	onLoad,
+	// } from "@dcloudio/uni-app";
 	import {
 		queryKey
 	} from "@/utils/network/api.js";
@@ -309,9 +309,9 @@
 			isShowBar.value = false;
 		}
 	});
-onLoad(() => {
-		getInfo()
-	})
+	// onLoad(() => {
+	// 		getInfo()
+	// 	})
 
 	onMounted(() => {
 		uni.getSystemInfo({
@@ -423,8 +423,8 @@ onLoad(() => {
 	const closeMask = () => {
 		isShowMask.value = false;
 	};
-	
-	
+
+
 
 	// 获取文本信息----用户协议
 	const getInfo = () => {
@@ -449,7 +449,6 @@ onLoad(() => {
 				console.log(err);
 			});
 	}
-
 </script>
 
 <style>
@@ -875,4 +874,4 @@ onLoad(() => {
 			padding: 55rpx 30rpx 30rpx;
 		}
 	}
-</style>
+</style>

pages/service/service.vue

@@ -1,492 +1,381 @@
-<template>
-  <view class="wrapper">
-    <navBar title="九州ETC"></navBar>
-    <view class="search-box">
-      <image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
-      <input class="search" placeholder="请输入业务名称" />
-    </view>
-    <view class="content">
-      <view class="left">
-        <view
-          :class="activeTab === '业务服务' ? 'menu active' : 'menu'"
-          @click="tabHandle('业务服务')"
-        >
-          <view
-            :class="activeTab === '业务服务' ? 'border on' : 'border'"
-          ></view>
-          <view class="menu-text">业务服务</view>
-        </view>
-        <view
-          :class="activeTab === '资金服务' ? 'menu active' : 'menu'"
-          @click="tabHandle('资金服务')"
-        >
-          <view
-            :class="activeTab === '资金服务' ? 'border on' : 'border'"
-          ></view>
-          <view class="menu-text">资金服务</view>
-        </view>
-        <view
-          :class="activeTab === '查询服务' ? 'menu active' : 'menu'"
-          @click="tabHandle('查询服务')"
-        >
-          <view
-            :class="activeTab === '查询服务' ? 'border on' : 'border'"
-          ></view>
-          <view class="menu-text">查询服务</view>
-        </view>
-        <view
-          :class="activeTab === '信息管理' ? 'menu active' : 'menu'"
-          @click="tabHandle('信息管理')"
-        >
-          <view
-            :class="activeTab === '信息管理' ? 'border on' : 'border'"
-          ></view>
-          <view class="menu-text">信息管理</view>
-        </view>
-        <view
-          :class="activeTab === '其他服务' ? 'menu active' : 'menu'"
-          @click="tabHandle('其他服务')"
-        >
-          <view
-            :class="activeTab === '其他服务' ? 'border on' : 'border'"
-          ></view>
-          <view class="menu-text">其他服务</view>
-        </view>
-      </view>
-      <view class="right">
-        <view class="right-content" v-if="activeTab === '业务服务'">
-          <view
-            class="item-box"
-            @click="
-              toNext('/after-sale/card-deactivation-activation/select-car')
-            "
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/kqty.png`" />
-            </view>
-            <view class="text">卡签停用卡签启用</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/card-loss-reporting/select-car')"
-          >
-            <view class="item bg-orange" :style="{ '--background': bgOrange }">
-              <image :src="`${$imgUrl}service/imgs/gs.png`" />
-            </view>
-            <view class="text text-orange">卡签挂失解除挂失</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/ETC-log-off/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/zx.png`" />
-            </view>
-            <view class="text">卡签注销</view>
-          </view>
-          <view class="item-box" style="display: none">
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/xxcx.png`" />
-            </view>
-            <view class="text">卡签信息重写</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/card-supplement/reissueForm')"
-            style="display: none"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/hkhq.png`" />
-            </view>
-            <view class="text">补卡换卡补签换签</view>
-          </view>
-          <view
-            class="item-box"
-            @click="
-              toNext(
-                '/after-sale/additional-equipment/select-car'
-              )
-            "
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/zbOBUsb.png`" />
-            </view>
-            <view class="text">增补OBU设备</view>
-          </view>
-          <view
-            class="item-box"
-            @click="
-              toNext('/after-sale/transfer-ownership/select-car-transfer')
-            "
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/etcgh.png`" />
-            </view>
-            <view class="text">ETC过户</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/pin-code-deblocking/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
-            </view>
-            <view class="text">卡Pin码解锁</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/equipment-upgrade/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
-            </view>
-            <view class="text">设备升级</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/card-Renewal/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/kxq.png`" />
-            </view>
-            <view class="text">卡签续期</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/replace-equipment/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}huan-icon.png`" />
-            </view>
-            <view class="text">更换设备</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/account-change/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}huan-icon.png`" />
-            </view>
-            <view class="text">扣款账户变更</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/invoice/Invoice-mannager', true)"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}fa-icon.png`" />
-            </view>
-            <view class="text">发票管理</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/rescind-carId/rescind-carId-select')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/jcclzy.png`" />
-            </view>
-            <view class="text">解除车牌占用</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/card-release-pending/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/jcgq.png`" />
-            </view>
-            <view class="text">卡签解除挂起</view>
-          </view>
-          <view
-            class="item-box"
-            @click="toNext('/after-sale/activation-once-again/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/obucxjh.png`" />
-            </view>
-            <view class="text">OBU重新激活</view>
-          </view>
-          <view
-            class="item-box"
-            @click="
-              $util.navTo('/issueActivation/install-activation-order', true)
-            "
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/sbjh.png`" />
-            </view>
-            <view class="text">设备激活</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/issueActivation/old-user', true)"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/gwcfx.png`" />
-            </view>
-            <view class="text">公务车发行</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/after-sale/to-bookkeeping-card/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/czkzjzk.png`" />
-            </view>
-            <view class="text">储值卡转记账卡</view>
-          </view>
-        </view>
-        <view class="right-content" v-if="activeTab === '资金服务'">
-          <view class="item-box">
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/ktf.png`" />
-            </view>
-            <view class="text">卡退费</view>
-          </view>
-          <view class="item-box">
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/qctf.png`" />
-            </view>
-            <view class="text">圈存退费</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo(`/pages/recharge/recharge`)"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/czkqc.png`" />
-            </view>
-            <view class="text">储值卡圈存</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/after-sale/arrears/arrears')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/qfbj.png`" />
-            </view>
-            <view class="text">欠费补缴</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/after-sale/refund-order-balance/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/yebl.png`" />
-            </view>
-            <view class="text">余额补领</view>
-          </view>
-          <view class="item-box" @click="toNext('/orders/flowingWater')">
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/bukae.png`" />
-            </view>
-            <view class="text">补卡额</view>
-          </view>
-        </view>
-        <view class="right-content" v-if="activeTab === '查询服务'">
-          <view
-            class="item-box"
-            @click="toNext('/service/search/select-car')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/etctxls.png`" />
-            </view>
-            <view class="text">ETC通行流水记录</view>
-          </view>
-        </view>
-        <view class="right-content" v-if="activeTab === '信息管理'">
-          <view
-            class="item-box"
-            @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/pj.png`" />
-            </view>
-            <view class="text">卡签信息</view>
-          </view>
-        </view>
-        <view class="right-content" v-if="activeTab === '其他服务'">
-          <view
-            class="item-box"
-            @click="$util.navTo('/service/remind/satisfaction-evaluate', true)"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/pj.png`" />
-            </view>
-            <view class="text">满意度评价</view>
-          </view>
-          <view
-            class="item-box"
-            @click="$util.navTo('/invoice/Invoice-mannager')"
-          >
-            <view class="item bg-blue" :style="{ '--background': bgBlue }">
-              <image :src="`${$imgUrl}service/imgs/etctxls.png`" />
-            </view>
-            <view class="text">发票服务</view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import navBar from "@/components/nav-bar/nav-bar.vue";
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import { fileURL } from "@/datas/fileURL.js";
-import { msg } from "@/utils/utils";
-
-const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
-const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
-const activeTab = ref("业务服务");
-// 切换
-function tabHandle(val) {
-  activeTab.value = val;
-}
-
-function toNext(url) {
-  uni.navigateTo({
-    url: url,
-  });
-  // msg("该功能正在开发中，敬请期待！")
-}
-</script>
-
-<style>
-page {
-  height: 100%;
-}
-
-.wrapper {
-  display: flex;
-  background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
-  flex-direction: column;
-  height: 100%;
-}
-
-.search-box {
-  margin: 50rpx 40rpx;
-  height: 72rpx;
-  border-radius: 36rpx;
-  background: #f7f7f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.search-box .icon {
-  width: 48rpx;
-  height: 48rpx;
-  margin: 0 20rpx;
-}
-
-.search-box .search {
-  flex: 1;
-  margin-right: 20rpx;
-  height: 100%;
-  padding: 0 10rpx;
-  font-size: 28rpx;
-  color: #00b38b;
-}
-
-.content {
-  display: flex;
-  flex: 1;
-  flex-grow: 1;
-  background: #fff;
-  border-radius: 30rpx 30rpx 0 0;
-  padding-top: 40rpx;
-}
-
-.left {
-  width: 180rpx;
-  border-right: 1px solid #dcdcdc;
-  margin-right: 29rpx;
-}
-
-.left .menu-text {
-  font-size: 26rpx;
-  color: #666666;
-  width: 120rpx;
-}
-
-.left .menu {
-  padding-left: 15rpx;
-  display: flex;
-  align-items: center;
-  margin: 20rpx 0 60rpx 0;
-}
-
-.left .active .menu-text {
-  font-weight: bold;
-  color: #00b38b;
-  font-size: 28rpx;
-  line-height: 32rpx;
-}
-
-.left .border {
-  width: 9rpx;
-  height: 26rpx;
-  border-radius: 4rpx;
-  margin-right: 20rpx;
-}
-
-.left .on {
-  background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
-  font-size: 28rpx;
-}
-
-.right {
-  flex: 1;
-}
-
-.right-content {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.right .item-box {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-right: 30rpx;
-  margin-bottom: 39rpx;
-}
-
-.item {
-  width: 105rpx;
-  height: 105rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 20rpx;
-}
-
-.item image {
-  width: 64rpx;
-  height: 64rpx;
-}
-
-.right .text {
-  width: 105rpx;
-  font-size: 22rpx;
-  text-align: center;
-  height: 60rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 19rpx;
-  color: #666666;
-}
-
-.bg-blue {
-  background: var(--background);
-}
-
-.bg-orange {
-  background: var(--background);
-}
-.right .text-orange {
-  color: #fd8362;
-}
+<template>
+	<view class="wrapper">
+		<navBar title="九州ETC"></navBar>
+		<view class="search-box">
+			<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
+			<input class="search" placeholder="请输入业务名称" />
+		</view>
+		<view class="content">
+			<view class="left">
+				<view :class="activeTab === '业务服务' ? 'menu active' : 'menu'" @click="tabHandle('业务服务')">
+					<view :class="activeTab === '业务服务' ? 'border on' : 'border'"></view>
+					<view class="menu-text">业务服务</view>
+				</view>
+				<view :class="activeTab === '资金服务' ? 'menu active' : 'menu'" @click="tabHandle('资金服务')">
+					<view :class="activeTab === '资金服务' ? 'border on' : 'border'"></view>
+					<view class="menu-text">资金服务</view>
+				</view>
+				<view :class="activeTab === '查询服务' ? 'menu active' : 'menu'" @click="tabHandle('查询服务')">
+					<view :class="activeTab === '查询服务' ? 'border on' : 'border'"></view>
+					<view class="menu-text">查询服务</view>
+				</view>
+				<view :class="activeTab === '信息管理' ? 'menu active' : 'menu'" @click="tabHandle('信息管理')">
+					<view :class="activeTab === '信息管理' ? 'border on' : 'border'"></view>
+					<view class="menu-text">信息管理</view>
+				</view>
+				<view :class="activeTab === '其他服务' ? 'menu active' : 'menu'" @click="tabHandle('其他服务')">
+					<view :class="activeTab === '其他服务' ? 'border on' : 'border'"></view>
+					<view class="menu-text">其他服务</view>
+				</view>
+			</view>
+			<view class="right">
+				<view class="right-content" v-if="activeTab === '业务服务'">
+					<view class="item-box" @click="
+              toNext('/after-sale/card-deactivation-activation/select-car')
+            ">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/kqty.png`" />
+						</view>
+						<view class="text">卡签停用卡签启用</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/card-loss-reporting/select-car')">
+						<view class="item bg-orange" :style="{ '--background': bgOrange }">
+							<image :src="`${$imgUrl}service/imgs/gs.png`" />
+						</view>
+						<view class="text text-orange">卡签挂失解除挂失</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/ETC-log-off/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/zx.png`" />
+						</view>
+						<view class="text">卡签注销</view>
+					</view>
+					<view class="item-box" style="display: none">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/xxcx.png`" />
+						</view>
+						<view class="text">卡签信息重写</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/card-supplement/reissueForm')"
+						style="display: none">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/zbOBUsb.png`" />
+						</view>
+						<view class="text">增补OBU设备</view>
+					</view>
+					<view class="item-box" @click="
+              toNext('/after-sale/transfer-ownership/select-car-transfer')
+            ">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/etcgh.png`" />
+						</view>
+						<view class="text">ETC过户</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/pin-code-deblocking/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
+						</view>
+						<view class="text">卡Pin码解锁</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/equipment-upgrade/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
+						</view>
+						<view class="text">设备升级</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/card-Renewal/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/kxq.png`" />
+						</view>
+						<view class="text">卡签续期</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/replace-equipment/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}huan-icon.png`" />
+						</view>
+						<view class="text">更换设备</view>
+					</view>
+
+					<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager', true)">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}fa-icon.png`" />
+						</view>
+						<view class="text">发票管理</view>
+					</view>
+					<view class="item-box" @click="toNext('/after-sale/rescind-carId/rescind-carId-select')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/jcclzy.png`" />
+						</view>
+						<view class="text">解除车牌占用</view>
+					</view>
+
+					<view class="item-box" @click="toNext('/after-sale/activation-once-again/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/obucxjh.png`" />
+						</view>
+						<view class="text">OBU重新激活</view>
+					</view>
+					<view class="item-box" @click="
+              $util.navTo('/issueActivation/install-activation-order', true)
+            ">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/sbjh.png`" />
+						</view>
+						<view class="text">设备激活</view>
+					</view>
+					<view class="item-box" @click="$util.navTo('/issueActivation/old-user', true)">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/gwcfx.png`" />
+						</view>
+						<view class="text">公务车发行</view>
+					</view>
+					<view class="item-box" @click="$util.navTo('/after-sale/to-bookkeeping-card/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/czkzjzk.png`" />
+						</view>
+						<view class="text">储值卡转记账卡</view>
+					</view>
+				</view>
+				<view class="right-content" v-if="activeTab === '资金服务'">
+					<view class="item-box">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/ktf.png`" />
+						</view>
+						<view class="text">卡退费</view>
+					</view>
+					<view class="item-box">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/qctf.png`" />
+						</view>
+						<view class="text">圈存退费</view>
+					</view>
+					<view class="item-box" @click="$util.navTo(`/pages/recharge/recharge`)">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/czkqc.png`" />
+						</view>
+						<view class="text">储值卡圈存</view>
+					</view>
+					<view class="item-box" @click="$util.navTo('/after-sale/arrears/arrears')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/qfbj.png`" />
+						</view>
+						<view class="text">欠费补缴</view>
+					</view>
+					<view class="item-box" @click="$util.navTo('/after-sale/refund-order-balance/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/yebl.png`" />
+						</view>
+						<view class="text">余额补领</view>
+					</view>
+					<view class="item-box" @click="toNext('/orders/flowingWater')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/bukae.png`" />
+						</view>
+						<view class="text">补卡额</view>
+					</view>
+				</view>
+				<view class="right-content" v-if="activeTab === '查询服务'">
+					<view class="item-box" @click="toNext('/service/search/select-car')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
+						</view>
+						<view class="text">ETC通行流水记录</view>
+					</view>
+				</view>
+				<view class="right-content" v-if="activeTab === '信息管理'">
+					<view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/pj.png`" />
+						</view>
+						<view class="text">卡签信息</view>
+					</view>
+				</view>
+				<view class="right-content" v-if="activeTab === '其他服务'">
+					<view class="item-box" @click="$util.navTo('/service/remind/satisfaction-evaluate', true)">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/pj.png`" />
+						</view>
+						<view class="text">满意度评价</view>
+					</view>
+					<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager')">
+						<view class="item bg-blue" :style="{ '--background': bgBlue }">
+							<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
+						</view>
+						<view class="text">发票服务</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script lang="ts" setup>
+	import navBar from "@/components/nav-bar/nav-bar.vue";
+	import {
+		ref
+	} from "vue";
+	import {
+		onLoad
+	} from "@dcloudio/uni-app";
+	import {
+		fileURL
+	} from "@/datas/fileURL.js";
+	import {
+		msg
+	} from "@/utils/utils";
+
+	const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
+	const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
+	const activeTab = ref("业务服务");
+	// 切换
+	function tabHandle(val) {
+		activeTab.value = val;
+	}
+
+	function toNext(url) {
+		uni.navigateTo({
+			url: url,
+		});
+		// msg("该功能正在开发中，敬请期待！")
+	}
+</script>
+
+<style>
+	page {
+		height: 100%;
+	}
+
+	.wrapper {
+		display: flex;
+		background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.search-box {
+		margin: 50rpx 40rpx;
+		height: 72rpx;
+		border-radius: 36rpx;
+		background: #f7f7f7;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.search-box .icon {
+		width: 48rpx;
+		height: 48rpx;
+		margin: 0 20rpx;
+	}
+
+	.search-box .search {
+		flex: 1;
+		margin-right: 20rpx;
+		height: 100%;
+		padding: 0 10rpx;
+		font-size: 28rpx;
+		color: #00b38b;
+	}
+
+	.content {
+		display: flex;
+		flex: 1;
+		flex-grow: 1;
+		background: #fff;
+		border-radius: 30rpx 30rpx 0 0;
+		padding-top: 40rpx;
+	}
+
+	.left {
+		width: 180rpx;
+		border-right: 1px solid #dcdcdc;
+		margin-right: 29rpx;
+	}
+
+	.left .menu-text {
+		font-size: 26rpx;
+		color: #666666;
+		width: 120rpx;
+	}
+
+	.left .menu {
+		padding-left: 15rpx;
+		display: flex;
+		align-items: center;
+		margin: 20rpx 0 60rpx 0;
+	}
+
+	.left .active .menu-text {
+		font-weight: bold;
+		color: #00b38b;
+		font-size: 28rpx;
+		line-height: 32rpx;
+	}
+
+	.left .border {
+		width: 9rpx;
+		height: 26rpx;
+		border-radius: 4rpx;
+		margin-right: 20rpx;
+	}
+
+	.left .on {
+		background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
+		font-size: 28rpx;
+	}
+
+	.right {
+		flex: 1;
+	}
+
+	.right-content {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.right .item-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-right: 30rpx;
+		margin-bottom: 39rpx;
+	}
+
+	.item {
+		width: 105rpx;
+		height: 105rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 20rpx;
+	}
+
+	.item image {
+		width: 64rpx;
+		height: 64rpx;
+	}
+
+	.right .text {
+		width: 105rpx;
+		font-size: 22rpx;
+		text-align: center;
+		height: 60rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 19rpx;
+		color: #666666;
+	}
+
+	.bg-blue {
+		background: var(--background);
+	}
+
+	.bg-orange {
+		background: var(--background);
+	}
+
+	.right .text-orange {
+		color: #fd8362;
+	}
 </style>