From 45c0f1e05b216b38bbf941efc4bf8bd407f375ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=96=84=E7=BE=8E?= <192406826@qq.com>
Date: Thu, 28 Aug 2025 18:55:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E6=85=A7=E5=85=B3=E7=A8=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/customsService/index.vue            | 464 ++++++++++--------
 1 file changed, 248 insertions(+), 216 deletions(-)

diff --git a/src/pagesCustomer/pages/customsService/index.vue b/src/pagesCustomer/pages/customsService/index.vue
index 69b4244..83e07dc 100644
--- a/src/pagesCustomer/pages/customsService/index.vue
+++ b/src/pagesCustomer/pages/customsService/index.vue
@@ -1,226 +1,258 @@
 <template>
-	<view class="smart_body_box" v-if="dataConfig">
-		<view class="header_card_box">
-			<view class="item_num_box flex-col" v-for="(item,index) in dataConfig.board" :key="index">
-				<text class="num_ti">{{item.value}}</text>
-				<view class="lab_ti">{{item.title}}</view>
-			</view>
-		</view>
-		<view class="menu_body_box">
-			<view class="menu_label_box">
-				<text class="la_ti">海保服务</text>
-				<view class="more_box"  @click="changeMore('menusHbsm')" v-if="dataConfig.menusHbsm.length > 4">
-					更多
-					<wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3 " :class="showOption.menusHbsm ?'more_up' : 'more_down'"></wd-icon>
-				</view>
-			</view>
-			<view class="menu_icon_box"  :style="{height: showOption.menusHbsm ?  'auto': '100px'}">
-				<view class="menu_item_box flex-col" v-for="(item,index) in dataConfig.menusHbsm"
-				@click="jumpUrl(item.url)">
-					<image :src="item.img" class="menu_img"></image>
-					<view class="title_box">{{item.name}}</view>
-				</view>
-			</view>
-		</view>
-		<view class="menu_body_box">
-			<view class="menu_label_box">
-				<text class="la_ti">物流跟踪</text>
-				<view class="more_box"  @click="changeMore('menusLogisticsTracking')" v-if="dataConfig.menusLogisticsTracking.length > 4">
-					更多
-					<wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3" :class="showOption.menusLogisticsTracking ?'more_up' : 'more_down'"></wd-icon>
-				</view>
-			</view>
-			<view class="menu_icon_box" :style="{height: showOption.menusLogisticsTracking ?  'auto': '100px'}">
-				<view class="menu_item_box flex-col" @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusLogisticsTracking">
-					<image :src="item.img" class="menu_img"></image>
-					<view class="title_box">{{item.name}}</view>
-				</view>
-			</view>
-		</view>
-		<view class="menu_body_box">
-			<view class="menu_label_box">
-				<text class="la_ti">查询工具</text>
-				<view class="more_box"  @click="changeMore('menusSearchTool')" v-if="dataConfig.menusSearchTool.length > 4">
-					更多
-					<wd-icon :class="showOption.menusSearchTool ?'more_up' : 'more_down'" name="arrow-down" size="12px" color="#3F8C8B" class="ml-3"></wd-icon>
-				</view>
-			</view>
-			<view class="menu_icon_box" :style="{height: showOption.menusSearchTool ?  'auto': '100px'}">
-				<view class="menu_item_box flex-col" @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusSearchTool">
-					<image :src="item.img" class="menu_img"></image>
-					<view class="title_box">{{item.name}}</view>
-				</view>
-			</view>
-		</view>
-		<view class="menu_body_box">
-			<view class="menu_label_box">
-				<text class="la_ti">增值服务</text>
-				<view class="more_box" @click="changeMore('menusAddedServices')" v-if="dataConfig.menusAddedServices.length > 4">
-					更多
-					<wd-icon :class="showOption.menusAddedServices ?'more_up' : 'more_down'" name="arrow-down" size="12px" color="#3F8C8B" class="ml-3"></wd-icon>
-				</view>
-			</view>
-			<view class="menu_icon_box" :style="{height: showOption.menusAddedServices ?  'auto': '100px'}">
-				<view class="menu_item_box flex-col" @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusAddedServices">
-					<image :src="item.img" class="menu_img"></image>
-					<view class="title_box">{{item.name}}</view>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view class="smart_body_box" v-if="dataConfig">
+    <view class="header_card_box">
+      <view class="item_num_box" v-for="(item,index) in dataConfig.board" :key="index">
+        <text class="num_ti">{{item.value}}</text>
+        <view class="lab_ti">{{item.title}}</view>
+      </view>
+    </view>
+    <view class="menu_body_box">
+      <view class="menu_label_box">
+        <text class="la_ti">海保服务</text>
+        <view class="more_box" @click="changeMore('menus')" v-if="menus.length > 4">
+          更多
+          <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3 "
+            :class="showOption.menus ?'more_up' : 'more_down'"></wd-icon>
+        </view>
+      </view>
+      <view class="menu_icon_box" :style="{height: showOption.menus ?  'auto': '100px'}">
+        <view class="menu_item_box " v-for="(item,index) in dataConfig.menus" :key="index" @click="jumpUrl(item.url)">
+          <image :src="item.img" class="menu_img"></image>
+          <view class="title_box">{{item.name}}</view>
+        </view>
+      </view>
+    </view>
+    <view class="menu_body_box">
+      <view class="menu_label_box">
+        <text class="la_ti">物流跟踪</text>
+        <view class="more_box" @click="changeMore('menusLogisticsTracking')" v-if="menusLogisticsTracking.length > 4">
+          更多
+          <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3"
+            :class="showOption.menusLogisticsTracking ?'more_up' : 'more_down'"></wd-icon>
+        </view>
+      </view>
+      <view class="menu_icon_box" :style="{height: showOption.menusLogisticsTracking ?  'auto': '100px'}">
+        <view class="menu_item_box " @click="jumpUrl(item.url)"
+          v-for="(item,index) in dataConfig.menusLogisticsTracking" key="index">
+          <image :src="item.img" class="menu_img"></image>
+          <view class="title_box">{{item.name}}</view>
+        </view>
+      </view>
+    </view>
+    <view class="menu_body_box">
+      <view class="menu_label_box">
+        <text class="la_ti">查询工具</text>
+        <view class="more_box" @click="changeMore('menusSearchTool')" v-if="menusSearchTool.length > 4">
+          更多
+          <wd-icon :class="showOption.menusSearchTool ?'more_up' : 'more_down'" name="arrow-down" size="12px"
+            color="#3F8C8B" class="ml-3"></wd-icon>
+        </view>
+      </view>
+      <view class="menu_icon_box" :style="{height: showOption.menusSearchTool ?  'auto': '100px'}">
+        <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusSearchTool">
+          <image :src="item.img" class="menu_img"></image>
+          <view class="title_box">{{item.name}}</view>
+        </view>
+      </view>
+    </view>
+    <view class="menu_body_box">
+      <view class="menu_label_box">
+        <text class="la_ti">增值服务</text>
+        <view class="more_box" @click="changeMore('menusAddedServices')" v-if="menusAddedServices.length > 4">
+          更多
+          <wd-icon :class="showOption.menusAddedServices ?'more_up' : 'more_down'" name="arrow-down" size="12px"
+            color="#3F8C8B" class="ml-3"></wd-icon>
+        </view>
+      </view>
+      <view class="menu_icon_box" :style="{height: showOption.menusAddedServices ?  'auto': '100px'}">
+        <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusAddedServices">
+          <image :src="item.img" class="menu_img"></image>
+          <view class="title_box">{{item.name}}</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script lang="ts" setup>
-	import { ref, reactive } from 'vue'
-	import { postDataSmartApi }from '@/api/customs'
-	const dataConfig = ref(null)
-	const showOption = reactive({
-		menusHbsm:false,
-		menusLogisticsTracking:false,
-		menusSearchTool:false,
-		menusAddedServices:false
-	})
-	const getData = ()=>{
-		postDataSmartApi({
-		page:1,
-		page_size:10,
-	}).then(res=>{
-			// console.log(res)
-			if(res.code == 1){
-				dataConfig.value = res.data
-			}
-		})
-	}
-	const jumpUrl = (url)=>{
-		if(url && url !='#'){
-			  uni.navigateTo({
-			  	  url,
-			  	  fail: () => {
-			  	  	uni.reLaunch({
-			  			url
-			  		})
-			  	  }
-			  })
-		}
-	}
-	const changeMore = (data)=>{
-		showOption[data] = !showOption[data]
-	}
-getData()
-console.log(111)
+  import { ref, reactive } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { postDataSmartApi } from '@/api/customs'
+  const dataConfig = ref({})
+  const showOption = reactive({
+    menusHbsm: false,
+    menusLogisticsTracking: false,
+    menusSearchTool: false,
+    menusAddedServices: false
+  })
+  // 海保服务
+  const menus = ref([])
+  const menusAddedServices = ref([])
+  const menusLogisticsTracking = ref([])
+  const menusSearchTool = ref([])
+  const params = {
+    page: 1,
+    page_size: 10,
+  }
+  onLoad(async () => {
+    await getData()
+  })
+
+  const getData = () => {
+    postDataSmartApi(params).then(res => {
+      if (res.code == 1) {
+        dataConfig.value = res.data
+        menus.value = res.data.menus
+        menusAddedServices.value = res.data.menusAddedServices
+        menusLogisticsTracking.value = res.data.menusLogisticsTracking
+        menusSearchTool.value = res.data.menusSearchTool
+      }
+    })
+  }
+  const jumpUrl = (url) => {
+    if (url && url != '#') {
+      uni.navigateTo({
+        url,
+        fail: () => {
+          uni.reLaunch({
+            url
+          })
+        }
+      })
+    }
+  }
+  const changeMore = (data) => {
+    showOption[data] = !showOption[data]
+  }
 </script>
 
 <style>
-	page{
-		height: 100vh;
-		background: #F9FAFB;
-	}
+  page {
+    height: 100vh;
+    background: #F9FAFB;
+  }
 </style>
 <style lang="scss" scoped>
-	.smart_body_box{
-		width: 100%;
-		padding: 0 16px;
-		box-sizing: border-box;
-		.menu_body_box{
-			width: 100%;
-			background: #FFFFFF;
-			padding-top: 18px;
-			padding-bottom: 18px;
-			box-sizing: border-box;
-			margin-top: 14px;
-			border-radius: 6px;
-			.menu_icon_box{
-				width: 100%;
-				display: flex;
-				align-items: center;
-				flex-wrap: wrap;
-				overflow: hidden;
-				.menu_item_box{
-					width: calc(100% / 4);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin-top: 18px;
-					.title_box{
-						width: 56px;
-						height: 38px;
-						text-align: center;
-						margin-top: 6px;
-						font-size: 14px;
-						color: #333333;
-					}
-					.menu_img{
-						width: 48px;
-						height: 48px;
-					}
-				}
-			}
-			.menu_label_box{
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: 0 18px;
-				box-sizing: border-box;
-				.more_box{
-					display: flex;
-					align-items: center;
-					font-size: 12px;
-					color: #3F8C8B;
-					transition: all .3s linear;
-					.more_up{
-						transform: rotate(-180deg);
-						transition: all .3s linear;
-						
-					}
-					.more_down{
-						transform: rotate(0deg);
-						transition: all .3s linear;
-					}
-				}
-				.la_ti{
-					font-size: 16px;
-					color: #333333;
-					font-weight: 700!important;
-				}
-			}
-		}
-		.header_card_box{
-			width: 100%;
-			margin-top: 16px;
-			background: linear-gradient( 47deg, #45908F 0%, #338382 100%);
-			border-radius: 6px;
-			padding: 11px 30px;
-			box-sizing: border-box;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			.item_num_box{
-				width: 90px;
-				height: 102px;
-				background: rgba(255,255,255,0.1);
-				box-shadow: 0px 0px 4px 0px rgba(35,83,83,0.2);
-				border-radius: 4px;
-				border: 1px solid;
-				border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				.lab_ti{
-					width: 48px;
-					height: 38px;
-					text-align: center;
-					color: #D2EDED;
-					font-size: 12px;
-					font-weight: 500;
-					margin-top: 7px;
-				}
-				.num_ti{
-					font-size: 30px;
-					color: #FFFFFF;
-					font-weight: 700!important;
-				}
-			}
-		}
-	}
+  .smart_body_box {
+    width: 100%;
+    padding: 0 16px;
+    box-sizing: border-box;
+
+    .menu_body_box {
+      width: 100%;
+      background: #FFFFFF;
+      padding: 40rpx 0;
+      box-sizing: border-box;
+      margin-top: 14px;
+      border-radius: 6px;
+
+      .menu_icon_box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: hidden;
+
+        .menu_item_box {
+          width: calc(100% / 4);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          align-items: center;
+          justify-content: center;
+          margin-top: 18px;
+
+          .title_box {
+            width: 56px;
+            height: 38px;
+            text-align: center;
+            margin-top: 6px;
+            font-size: 14px;
+            color: #333333;
+          }
+
+          .menu_img {
+            width: 48px;
+            height: 48px;
+          }
+        }
+      }
+
+      .menu_label_box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 18px;
+        box-sizing: border-box;
+
+        .more_box {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          color: #3F8C8B;
+          transition: all .3s linear;
+
+          .more_up {
+            transform: rotate(-180deg);
+            transition: all .3s linear;
+
+          }
+
+          .more_down {
+            transform: rotate(0deg);
+            transition: all .3s linear;
+          }
+        }
+
+        .la_ti {
+          font-size: 16px;
+          color: #333333;
+          font-weight: 700 !important;
+        }
+      }
+    }
+
+    .header_card_box {
+      width: 100%;
+      margin-top: 16px;
+      background: linear-gradient(47deg, #45908F 0%, #338382 100%);
+      border-radius: 6px;
+      padding: 11px 30px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item_num_box {
+        width: 90px;
+        height: 102px;
+        background: rgba(255, 255, 255, 0.1);
+        box-shadow: 0px 0px 4px 0px rgba(35, 83, 83, 0.2);
+        border-radius: 4px;
+        border: 1px solid;
+        border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .lab_ti {
+          width: 48px;
+          height: 38px;
+          text-align: center;
+          color: #D2EDED;
+          font-size: 12px;
+          font-weight: 500;
+          margin-top: 10rpx;
+        }
+
+        .num_ti {
+          font-size: 28px;
+          color: #FFFFFF;
+          font-weight: 700 !important;
+        }
+      }
+    }
+  }
 </style>