haibao/hbsmUniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

智慧关税

Browse Source
This commit is contained in:
陈善美 2025-08-28 18:55:24 +08:00
parent 13b27ce641
commit 45c0f1e05b
1 changed files with 248 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/pagesCustomer/pages/customsService/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="smart_body_box" v-if="dataConfig"> <view class="smart_body_box" v-if="dataConfig">
<view class="header_card_box"> <view class="header_card_box">
<view class="item_num_box flex-col" v-for="(item,index) in dataConfig.board" :key="index"> <view class="item_num_box" v-for="(item,index) in dataConfig.board" :key="index">
<text class="num_ti">{{item.value}}</text> <text class="num_ti">{{item.value}}</text>
<view class="lab_ti">{{item.title}}</view> <view class="lab_ti">{{item.title}}</view>
</view> </view>
@ -9,14 +9,14 @@
<view class="menu_body_box"> <view class="menu_body_box">
<view class="menu_label_box"> <view class="menu_label_box">
<text class="la_ti">海保服务</text> <text class="la_ti">海保服务</text>
<view class="more_box" @click="changeMore('menusHbsm')" v-if="dataConfig.menusHbsm.length > 4"> <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.menusHbsm ?'more_up' : 'more_down'"></wd-icon> <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3 "
:class="showOption.menus ?'more_up' : 'more_down'"></wd-icon>
</view> </view>
</view> </view>
<view class="menu_icon_box" :style="{height: showOption.menusHbsm ? 'auto': '100px'}"> <view class="menu_icon_box" :style="{height: showOption.menus ? 'auto': '100px'}">
<view class="menu_item_box flex-col" v-for="(item,index) in dataConfig.menusHbsm" <view class="menu_item_box " v-for="(item,index) in dataConfig.menus" :key="index" @click="jumpUrl(item.url)">
@click="jumpUrl(item.url)">
<image :src="item.img" class="menu_img"></image> <image :src="item.img" class="menu_img"></image>
<view class="title_box">{{item.name}}</view> <view class="title_box">{{item.name}}</view>
</view> </view>
@ -25,13 +25,15 @@
<view class="menu_body_box"> <view class="menu_body_box">
<view class="menu_label_box"> <view class="menu_label_box">
<text class="la_ti">物流跟踪</text> <text class="la_ti">物流跟踪</text>
<view class="more_box" @click="changeMore('menusLogisticsTracking')" v-if="dataConfig.menusLogisticsTracking.length > 4"> <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> <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3"
:class="showOption.menusLogisticsTracking ?'more_up' : 'more_down'"></wd-icon>
</view> </view>
</view> </view>
<view class="menu_icon_box" :style="{height: showOption.menusLogisticsTracking ? 'auto': '100px'}"> <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"> <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> <image :src="item.img" class="menu_img"></image>
<view class="title_box">{{item.name}}</view> <view class="title_box">{{item.name}}</view>
</view> </view>
@ -40,13 +42,14 @@
<view class="menu_body_box"> <view class="menu_body_box">
<view class="menu_label_box"> <view class="menu_label_box">
<text class="la_ti">查询工具</text> <text class="la_ti">查询工具</text>
<view class="more_box" @click="changeMore('menusSearchTool')" v-if="dataConfig.menusSearchTool.length > 4"> <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> <wd-icon :class="showOption.menusSearchTool ?'more_up' : 'more_down'" name="arrow-down" size="12px"
color="#3F8C8B" class="ml-3"></wd-icon>
</view> </view>
</view> </view>
<view class="menu_icon_box" :style="{height: showOption.menusSearchTool ? 'auto': '100px'}"> <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"> <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusSearchTool">
<image :src="item.img" class="menu_img"></image> <image :src="item.img" class="menu_img"></image>
<view class="title_box">{{item.name}}</view> <view class="title_box">{{item.name}}</view>
</view> </view>
@ -55,13 +58,14 @@
<view class="menu_body_box"> <view class="menu_body_box">
<view class="menu_label_box"> <view class="menu_label_box">
<text class="la_ti">增值服务</text> <text class="la_ti">增值服务</text>
<view class="more_box" @click="changeMore('menusAddedServices')" v-if="dataConfig.menusAddedServices.length > 4"> <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> <wd-icon :class="showOption.menusAddedServices ?'more_up' : 'more_down'" name="arrow-down" size="12px"
color="#3F8C8B" class="ml-3"></wd-icon>
</view> </view>
</view> </view>
<view class="menu_icon_box" :style="{height: showOption.menusAddedServices ? 'auto': '100px'}"> <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"> <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusAddedServices">
<image :src="item.img" class="menu_img"></image> <image :src="item.img" class="menu_img"></image>
<view class="title_box">{{item.name}}</view> <view class="title_box">{{item.name}}</view>
</view> </view>
@ -72,22 +76,36 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { postDataSmartApi } from '@/api/customs' import { postDataSmartApi } from '@/api/customs'
const dataConfig = ref(null) const dataConfig = ref({})
const showOption = reactive({ const showOption = reactive({
menusHbsm: false, menusHbsm: false,
menusLogisticsTracking: false, menusLogisticsTracking: false,
menusSearchTool: false, menusSearchTool: false,
menusAddedServices: false menusAddedServices: false
}) })
const getData = ()=>{ // 海保服务
postDataSmartApi({ const menus = ref([])
const menusAddedServices = ref([])
const menusLogisticsTracking = ref([])
const menusSearchTool = ref([])
const params = {
page: 1, page: 1,
page_size: 10, page_size: 10,
}).then(res=>{ }
// console.log(res) onLoad(async () => {
await getData()
})
const getData = () => {
postDataSmartApi(params).then(res => {
if (res.code == 1) { if (res.code == 1) {
dataConfig.value = res.data dataConfig.value = res.data
menus.value = res.data.menus
menusAddedServices.value = res.data.menusAddedServices
menusLogisticsTracking.value = res.data.menusLogisticsTracking
menusSearchTool.value = res.data.menusSearchTool
} }
}) })
} }
@ -106,8 +124,6 @@
const changeMore = (data) => { const changeMore = (data) => {
showOption[data] = !showOption[data] showOption[data] = !showOption[data]
} }
getData()
console.log(111)
</script> </script>
<style> <style>
@ -121,26 +137,31 @@ console.log(111)
width: 100%; width: 100%;
padding: 0 16px; padding: 0 16px;
box-sizing: border-box; box-sizing: border-box;
.menu_body_box { .menu_body_box {
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
padding-top: 18px; padding: 40rpx 0;
padding-bottom: 18px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 14px; margin-top: 14px;
border-radius: 6px; border-radius: 6px;
.menu_icon_box { .menu_icon_box {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
.menu_item_box { .menu_item_box {
width: calc(100% / 4); width: calc(100% / 4);
display: flex; display: flex;
flex-direction: column;
align-items: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 18px; margin-top: 18px;
.title_box { .title_box {
width: 56px; width: 56px;
height: 38px; height: 38px;
@ -149,12 +170,14 @@ console.log(111)
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
.menu_img { .menu_img {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
} }
} }
.menu_label_box { .menu_label_box {
width: 100%; width: 100%;
display: flex; display: flex;
@ -162,22 +185,26 @@ console.log(111)
justify-content: space-between; justify-content: space-between;
padding: 0 18px; padding: 0 18px;
box-sizing: border-box; box-sizing: border-box;
.more_box { .more_box {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
color: #3F8C8B; color: #3F8C8B;
transition: all .3s linear; transition: all .3s linear;
.more_up { .more_up {
transform: rotate(-180deg); transform: rotate(-180deg);
transition: all .3s linear; transition: all .3s linear;
} }
.more_down { .more_down {
transform: rotate(0deg); transform: rotate(0deg);
transition: all .3s linear; transition: all .3s linear;
} }
} }
.la_ti { .la_ti {
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
@ -185,6 +212,7 @@ console.log(111)
} }
} }
} }
.header_card_box { .header_card_box {
width: 100%; width: 100%;
margin-top: 16px; margin-top: 16px;
@ -195,6 +223,7 @@ console.log(111)
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.item_num_box { .item_num_box {
width: 90px; width: 90px;
height: 102px; height: 102px;
@ -204,8 +233,10 @@ console.log(111)
border: 1px solid; border: 1px solid;
border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1 1; border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1 1;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.lab_ti { .lab_ti {
width: 48px; width: 48px;
height: 38px; height: 38px;
@ -213,10 +244,11 @@ console.log(111)
color: #D2EDED; color: #D2EDED;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
margin-top: 7px; margin-top: 10rpx;
} }
.num_ti { .num_ti {
font-size: 30px; font-size: 28px;
color: #FFFFFF; color: #FFFFFF;
font-weight: 700 !important; font-weight: 700 !important;
} }