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

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

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