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>
<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">
<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>
@ -9,14 +9,14 @@
<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">
<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 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)">
<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>
@ -25,13 +25,15 @@
<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">
<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 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>
<view class="title_box">{{item.name}}</view>
</view>
@ -40,13 +42,14 @@
<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">
<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 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>
<view class="title_box">{{item.name}}</view>
</view>
@ -55,13 +58,14 @@
<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">
<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 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>
<view class="title_box">{{item.name}}</view>
</view>
@ -72,22 +76,36 @@
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { postDataSmartApi } from '@/api/customs'
const dataConfig = ref(null)
const dataConfig = ref({})
const showOption = reactive({
menusHbsm: false,
menusLogisticsTracking: false,
menusSearchTool: false,
menusAddedServices: false
})
const getData = ()=>{
postDataSmartApi({
// 海保服务
const menus = ref([])
const menusAddedServices = ref([])
const menusLogisticsTracking = ref([])
const menusSearchTool = ref([])
const params = {
page: 1,
page_size: 10,
}).then(res=>{
// console.log(res)
}
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
}
})
}
@ -106,8 +124,6 @@
const changeMore = (data) => {
showOption[data] = !showOption[data]
}
getData()
console.log(111)
</script>
<style>
@ -121,26 +137,31 @@ console.log(111)
width: 100%;
padding: 0 16px;
box-sizing: border-box;
.menu_body_box {
width: 100%;
background: #FFFFFF;
padding-top: 18px;
padding-bottom: 18px;
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;
@ -149,12 +170,14 @@ console.log(111)
font-size: 14px;
color: #333333;
}
.menu_img {
width: 48px;
height: 48px;
}
}
}
.menu_label_box {
width: 100%;
display: flex;
@ -162,22 +185,26 @@ console.log(111)
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;
@ -185,6 +212,7 @@ console.log(111)
}
}
}
.header_card_box {
width: 100%;
margin-top: 16px;
@ -195,6 +223,7 @@ console.log(111)
display: flex;
align-items: center;
justify-content: space-between;
.item_num_box {
width: 90px;
height: 102px;
@ -204,8 +233,10 @@ console.log(111)
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;
@ -213,10 +244,11 @@ console.log(111)
color: #D2EDED;
font-size: 12px;
font-weight: 500;
margin-top: 7px;
margin-top: 10rpx;
}
.num_ti {
font-size: 30px;
font-size: 28px;
color: #FFFFFF;
font-weight: 700 !important;
}