pad-app/pages/shipWork/brandDetails.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>
			<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>