智慧关税
This commit is contained in:
parent
13b27ce641
commit
45c0f1e05b
@ -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,27 +76,41 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { postDataSmartApi }from '@/api/customs'
|
||||
const dataConfig = ref(null)
|
||||
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
|
||||
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){
|
||||
// 海保服务
|
||||
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 !='#'){
|
||||
const jumpUrl = (url) => {
|
||||
if (url && url != '#') {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
fail: () => {
|
||||
@ -103,45 +121,48 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
const changeMore = (data)=>{
|
||||
const changeMore = (data) => {
|
||||
showOption[data] = !showOption[data]
|
||||
}
|
||||
getData()
|
||||
console.log(111)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
page {
|
||||
height: 100vh;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.smart_body_box{
|
||||
.smart_body_box {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
.menu_body_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{
|
||||
|
||||
.menu_icon_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
.menu_item_box{
|
||||
|
||||
.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{
|
||||
|
||||
.title_box {
|
||||
width: 56px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
@ -149,76 +170,87 @@ console.log(111)
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.menu_img{
|
||||
|
||||
.menu_img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu_label_box{
|
||||
|
||||
.menu_label_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 18px;
|
||||
box-sizing: border-box;
|
||||
.more_box{
|
||||
|
||||
.more_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #3F8C8B;
|
||||
transition: all .3s linear;
|
||||
.more_up{
|
||||
|
||||
.more_up {
|
||||
transform: rotate(-180deg);
|
||||
transition: all .3s linear;
|
||||
|
||||
}
|
||||
.more_down{
|
||||
|
||||
.more_down {
|
||||
transform: rotate(0deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
}
|
||||
.la_ti{
|
||||
|
||||
.la_ti {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 700!important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_card_box{
|
||||
|
||||
.header_card_box {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
background: linear-gradient( 47deg, #45908F 0%, #338382 100%);
|
||||
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{
|
||||
|
||||
.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);
|
||||
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{
|
||||
|
||||
.lab_ti {
|
||||
width: 48px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
color: #D2EDED;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-top: 7px;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.num_ti{
|
||||
font-size: 30px;
|
||||
|
||||
.num_ti {
|
||||
font-size: 28px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700!important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user