316 lines
6.8 KiB
Vue
316 lines
6.8 KiB
Vue
<template>
|
||
<view class="brandDetails">
|
||
<view class="container">
|
||
<view class="topBox">
|
||
<view class="searchBox">
|
||
<uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="品牌/提单号"
|
||
@iconClick="iconClick"></uni-easyinput>
|
||
<text @tap="screen">筛选</text>
|
||
<fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList"
|
||
:defaultValue="defaultValue" @result="resultConditon" />
|
||
</view>
|
||
</view>
|
||
<template v-if="listInfo.length > 0">
|
||
<view class="ul">
|
||
<view class="li" v-for="(item,index) in listInfo" :key="index" @click="togoCar(item)">
|
||
<p class="title">品牌：{{item.brdName}}</p>
|
||
<p>提单号：{{item.mnfBl}}</p>
|
||
<p>源类型：{{item.sourceType}}</p>
|
||
<p>场位：{{item.yardPos}}</p>
|
||
<p>航次：{{item.vvyName}}</p>
|
||
<p>报关状态：{{item.customsDeclareStatus}}</p>
|
||
<p>车型：{{item.bvmName}}</p>
|
||
<p>数量：{{item.amount}}</p>
|
||
<p>港口：{{item.potName}}</p>
|
||
<p>报关单号：{{item.customsDeclareNo}}</p>
|
||
<p>车型明细：{{item.bvdName}}</p>
|
||
<p>货代：{{item.agentName}}</p>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<o-empty v-else height="70vh" bg="#fff" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchValue: "",
|
||
color: '#4D7BFE',
|
||
hasChoose: false,
|
||
menuList: [],
|
||
defaultValue: {},
|
||
listInfo: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initData()
|
||
setTimeout(() => {
|
||
this.menuList = [{
|
||
'title': '按港口',
|
||
'type': 'custom',
|
||
'key': 'custom1',
|
||
'isMutiple': true, //多选
|
||
'detailList': [{
|
||
title: '港口1',
|
||
value: "1",
|
||
isSelected: true
|
||
}, {
|
||
title: '港口2',
|
||
value: "2",
|
||
}, {
|
||
title: '港口3',
|
||
value: "3",
|
||
}, {
|
||
title: '港口4',
|
||
value: "4",
|
||
}, {
|
||
title: '港口5',
|
||
value: "5",
|
||
}, {
|
||
title: '港口6',
|
||
value: "6",
|
||
}],
|
||
}, {
|
||
'title': '按车型',
|
||
'type': 'custom',
|
||
'key': 'custom2',
|
||
'isMutiple': true, //多选
|
||
'detailList': [{
|
||
title: '车型1',
|
||
value: "1",
|
||
}, {
|
||
title: '车型2',
|
||
value: "2",
|
||
}, {
|
||
title: '车型3',
|
||
value: "3",
|
||
}, {
|
||
title: '车型4',
|
||
value: "4",
|
||
}, {
|
||
title: '车型5',
|
||
value: "5",
|
||
}, {
|
||
title: '车型6',
|
||
value: "6",
|
||
}, {
|
||
title: '车型7',
|
||
value: "7",
|
||
}],
|
||
}, {
|
||
'title': '按品牌',
|
||
'type': 'custom',
|
||
'key': 'custom3',
|
||
'isMutiple': true, //多选
|
||
'detailList': [{
|
||
title: '品牌1',
|
||
value: "1",
|
||
}, {
|
||
title: '品牌2',
|
||
value: "2",
|
||
}, {
|
||
title: '品牌3',
|
||
value: "3",
|
||
}, {
|
||
title: '品牌4',
|
||
value: "4",
|
||
}, {
|
||
title: '品牌5',
|
||
value: "5",
|
||
}, {
|
||
title: '品牌6',
|
||
value: "6",
|
||
}],
|
||
}, {
|
||
'title': '按型号',
|
||
'type': 'custom',
|
||
'key': 'custom4',
|
||
'isMutiple': true, //多选
|
||
'detailList': [{
|
||
title: '型号1',
|
||
value: "1",
|
||
}, {
|
||
title: '型号2',
|
||
value: "2",
|
||
}, {
|
||
title: '型号3',
|
||
value: "3",
|
||
}, {
|
||
title: '型号4',
|
||
value: "4",
|
||
}, {
|
||
title: '型号5',
|
||
value: "5",
|
||
}, {
|
||
title: '型号6',
|
||
value: "6",
|
||
}],
|
||
}, {
|
||
'title': '单选',
|
||
'type': 'custom',
|
||
'key': 'custom5',
|
||
'isMutiple': false, //单选
|
||
'detailList': [{
|
||
title: '选项1',
|
||
value: "1",
|
||
}, {
|
||
title: '选项2',
|
||
value: "2",
|
||
}],
|
||
}, ]
|
||
this.defaultValue = {
|
||
custom1: ['1'],
|
||
custom5: 1,
|
||
};
|
||
}, 2000)
|
||
},
|
||
methods: {
|
||
initData() {
|
||
this.listInfo = [{
|
||
brdName: "特斯拉",
|
||
mnfBl: "TD85875876",
|
||
sourceType: "新能源",
|
||
yardPos: "C4区15道*2,16道*2",
|
||
vvyName: "HC8595986",
|
||
customsDeclareStatus: "未报关",
|
||
bvmName: "轿车",
|
||
amount: "100",
|
||
potName: "巴塞罗那",
|
||
customsDeclareNo: "BG09759724",
|
||
bvdName: "无动力半挂车",
|
||
agentName: "华图供应链管理（天津）有限公司",
|
||
},
|
||
{
|
||
brdName: "比亚迪",
|
||
mnfBl: "TD85875876A",
|
||
sourceType: "新能源",
|
||
yardPos: "C4区15道*2,16道*2",
|
||
vvyName: "HC8595986",
|
||
customsDeclareStatus: "未报关",
|
||
bvmName: "轿车",
|
||
amount: "100",
|
||
potName: "巴塞罗那",
|
||
customsDeclareNo: "BG09759724",
|
||
bvdName: "无动力半挂车",
|
||
agentName: "华图供应链管理（天津）有限公司",
|
||
},
|
||
{
|
||
brdName: "比亚迪",
|
||
mnfBl: "TD85875876A",
|
||
sourceType: "新能源",
|
||
yardPos: "C4区15道*2,16道*2",
|
||
vvyName: "HC8595986",
|
||
customsDeclareStatus: "未报关",
|
||
bvmName: "轿车",
|
||
amount: "100",
|
||
potName: "巴塞罗那",
|
||
customsDeclareNo: "BG09759724",
|
||
bvdName: "无动力半挂车",
|
||
agentName: "华图供应链管理（天津）有限公司",
|
||
}
|
||
]
|
||
},
|
||
// 点击搜索右侧图标
|
||
iconClick() {
|
||
if (this.searchValue != "") {
|
||
let listIndexArr = []
|
||
let newArr = []
|
||
this.listInfo.forEach((v, index) => {
|
||
if (v.brdName.indexOf(this.searchValue) != -1 || v.mnfBl.indexOf(this.searchValue) != -1) {
|
||
console.log(index)
|
||
listIndexArr.push(index)
|
||
}
|
||
})
|
||
console.log(listIndexArr)
|
||
if (listIndexArr.length > 0) {
|
||
listIndexArr.forEach((v, index) => {
|
||
newArr.push(this.listInfo[v])
|
||
})
|
||
this.listInfo = newArr
|
||
console.log(this.listInfo)
|
||
}
|
||
} else {
|
||
this.initData()
|
||
}
|
||
},
|
||
// 点击筛选
|
||
screen() {
|
||
this.$refs.condition.visibleDrawer = true;
|
||
},
|
||
resultConditon(obj) {
|
||
this.$refs.condition.visibleDrawer = false;
|
||
this.hasChoose = obj.hasChoose;
|
||
console.log(obj);
|
||
},
|
||
// 跳转车型明细
|
||
togoCar(item) {
|
||
uni.setStorageSync('brandRow', item);
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/carDetails`
|
||
})
|
||
},
|
||
onBackPress(event) {
|
||
uni.navigateTo({
|
||
url: '/pages/shipWork/documentList'
|
||
})
|
||
return true;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.brandDetails {
|
||
.container {
|
||
padding: 30px 20px;
|
||
background-color: #fff;
|
||
|
||
.topBox {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.searchBox {
|
||
width: 33%;
|
||
display: flex;
|
||
|
||
text {
|
||
margin-left: 10px;
|
||
color: #2979ff;
|
||
line-height: 36px;
|
||
}
|
||
|
||
/deep/.uni-drawer__content {
|
||
width: 500px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ul {
|
||
padding: 20px 0;
|
||
|
||
.li {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
p {
|
||
width: 22%;
|
||
margin: 10px;
|
||
color: rgba(0, 0, 0, .5);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |