pad-app/pages/shipWork/brandDetails.vue

238 lines
4.6 KiB
Vue
Raw Normal View History

2023-07-13 11:18:17 +08:00
<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>
<view class="ul">
<view class="li" v-for="item in 6" :key="item" @click="togoCar">
<p class="title">品牌特斯拉</p>
<p>提单号TD85875876</p>
<p>源类型新能源</p>
<p>场位C4区15道*2,16*2</p>
<p>航次HC8595986</p>
<p>报关状态未报关</p>
<p>车型轿车</p>
<p>数量100</p>
<p>港口巴塞罗那</p>
<p>报关单号BG09759724</p>
<p>车型明细无动力半挂车</p>
<p>货代华图供应链管理天津有限公司</p>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: "",
color: '#4D7BFE',
hasChoose: false,
menuList: [],
defaultValue: {},
}
},
mounted() {
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: {
// 点击搜索右侧图标
iconClick() {},
// 点击筛选
screen() {
this.$refs.condition.visibleDrawer = true;
},
resultConditon(obj) {
this.$refs.condition.visibleDrawer = false;
this.hasChoose = obj.hasChoose;
console.log(obj);
},
// 跳转车型明细
togoCar(){
uni.navigateTo({
url: `/pages/shipWork/carDetails`
})
}
}
}
</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>