car_applet/pagesHome/search/index.vue

<template>
	<view class="content">
		<view class="top">
			<u-search shape="square" :show-action="false" placeholder="请输入车辆的名称或品牌" @focus="toChange"></u-search>
			<view class="search">
				<view class="list" v-for="(item, index) in searchList" :key="index" @tap="toSearch(item)">
					<view :class="[item.is_open==false?'title_1':'title_2']">{{item.title}}</view>
					<u-icon color="#000" size="10px" v-if="item.is_open==false" name="arrow-down-fill"></u-icon>
					<u-icon color="#ffbc00" size="10px" v-else name="arrow-up-fill"></u-icon>
				</view>
			</view>
			<view v-show="is_show" @tap="toClose" class="popup-layer">
				<view class="popup-content">
					<view class="search_1" v-if="type=='0'">
						<view class="list" v-for="(item, index) in sortList" :key="index" @tap="toSelect(item,type)">
							<view :class="[item.is_open==false?'title_1':'title_2']">{{item.title}}</view>
						</view>
					</view>
					<view class="search_1" v-else-if="type=='2'">
						<view class="list" v-for="(item, index) in moneyList" :key="index" @tap="toSelect(item,type)">
							<view :class="[item.is_open==false?'title_1':'title_2']">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="search_2"
				v-if="Object.keys(brandInfo).length > 0||Object.keys(moneyInfo).length > 0||moreList.length>0">
				<view class="left">
					<scroll-view scroll-x="true">
						<view class="scroll">
							<view v-if="brandInfo&&brandInfo.type" class="title" @tap="toDelete({},'0')">
								<span>{{brandInfo.title}}</span>&nbsp;
								<u-icon color="#000" size="14px" name="close"></u-icon>
							</view>
							<view v-if="moneyInfo&&moneyInfo.type" class="title" @tap="toDelete({},'1')">
								<span>{{moneyInfo.title}}</span>&nbsp;
								<u-icon color="#000" size="14px" name="close"></u-icon>
							</view>
							<view v-if="moreList.length>0" class="title" v-for="(item, index) in moreList" :key="index"
								@tap="toDelete(item,'2')">
								<span>{{item.title}}</span>&nbsp;
								<u-icon color="#000" size="14px" name="close"></u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<view class="right_1" @tap="toReset">重置</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
				<view class="list-scroll-view">
					<view class="one">
						<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
							<view class="left">
								<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''">
								</image>
							</view>
							<view class="right">
								<view class="name textOver">{{item.series||'暂无'}} {{item.year||'暂无'}}款
									{{item.style||'暂无'}}</view>
								<view class="other">
									<text v-if="item.year">{{item.year||'暂无'}}年 | </text>
									<text v-if="item.mileage">{{item.mileage||'暂无'}}公里 | </text>
									<text v-if="item.place">{{item.place||'暂无'}}</text>
								</view>
								<view class="right_1">
									<view class="money">
										<text>{{item.total_money||'0'}}</text>
										<text>万</text>
									</view>
									<view>
										<button @tap.stop="toChat(item)" class="button" size="mini"
											type="default">询底价</button>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="is_bottom" v-if="is_bottom">
						<text>{{config.bottom_title||'没有更多了！'}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad, onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({ logoUrl: [] });
	const type = ref('0');
	const is_show = ref(false);
	//查询
	const searchList = ref([{ title: '默认排序', type: '0', is_open: false }, { title: '品牌', type: '1', is_open: false }, { title: '价格', type: '2', is_open: false }, { title: '更多筛选', type: '3', is_open: false }]);
	//排序
	const sortList = ref([{ title: '默认排序', type: '0', is_open: true }, { title: '最新上架', type: '1', is_open: false }, { title: '车龄最短', type: '2', is_open: false }, { title: '里程最少', type: '3', is_open: false }, { title: '价格最高', type: '4', is_open: false }, { title: '价格最低', type: '5', is_open: false }]);
	//价格
	const moneyList = ref([{ title: '不限价格', type: '0', is_open: true }, { title: '10万以下', type: '1', is_open: false }, { title: '10-15万', type: '2', is_open: false }, { title: '15-20万', type: '3', is_open: false }, { title: '20-25万', type: '4', is_open: false }, { title: '25-30万', type: '5', is_open: false }, { title: '30-50万', type: '6', is_open: false }, { title: '50万以上', type: '7', is_open: false }]);
	// 选择的查询条件
	const brandInfo = ref({});
	const moneyInfo = ref({});
	const moreList = ref([]);
	// 列表
	const list = ref([]);
	const total = ref(0);
	const skip = ref(0);
	const limit = ref(6);
	const page = ref(0);
	// 数据是否触底
	const is_bottom = ref(false);
	const scrollTop = ref(0);
	// 字典表
	const typeList = ref([
		{
			title: '5万以下',
			type: '0',
		},
		{
			title: '5-10万',
			type: '1',
		},
		{
			title: '10-15万',
			type: '2',
		},
		{
			title: '更多条件',
			type: '3',
		}
	]);
	const carList = ref([
		{
			title: '大众',
			type: '0',
		},
		{
			title: '宝马',
			type: '1',
		},
		{
			title: '本田',
			type: '2',
		},
		{
			title: '丰田',
			type: '3',
		},
		{
			title: '更多品牌',
			type: '4',
		}
	]);
	onLoad(async () => {
		await searchConfig();
		await search();
	})
	onShow(() => {
		uni.$on('toRoute', function (data) {
			brandInfo.value = data
		})
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		const info = {
			skip: skip.value,
			limit: limit.value,
			status: '0'
		}
		const res = await $api('car', 'GET',info);
		if (res.errcode === 0) {
			list.value = list.value.concat(res.data)
			total.value = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	// 查询
	const toSearch = (value) => {
		// 判断点击的是那个筛选
		searchList.value = searchList.value.map((item, index) => {
			if (item.type == value.type && !item.is_open) item.is_open = true
			else item.is_open = false
			return item
		})
		type.value = value.type
		if (value.type == '1') {
			toClose()
			uni.navigateTo({
				url: `/pagesHome/brand/index`,
			})
		}
		else if (value.type == '3') {
			toClose()
			uni.navigateTo({
				url: `/pagesHome/condition/index`,
			})
		} else is_show.value = searchList.value.some(item => item.is_open == true)
	};
	// 搜索
	const toChange = () => {
		uni.navigateTo({
			url: `/pagesHome/type/index`
		})
	};
	// 关闭筛选
	const toClose = () => {
		is_show.value = false
		searchList.value = searchList.value.map((item, index) => {
			item.is_open = false
			return item
		})
	};
	// 选择
	const toSelect = (data, type) => {
		// 判断点击的是那个筛选
		if (type == '0') {
			sortList.value = sortList.value.map((item, index) => {
				if (item.type == data.type) item.is_open = true
				else item.is_open = false
				return item
			})
			searchList.value = searchList.value.map((i, index) => {
				if (i.type == '0') i.title = data.title
				return i
			})
		} else {
			moneyList.value = moneyList.value.map((item, index) => {
				if (item.type == data.type) item.is_open = true
				else item.is_open = false
				return item
			})
			moneyInfo.value = data
		}
	};
	// 删除筛选
	const toDelete = (item, type) => {
		if (type == '0') brandInfo.value = {}
		else if (type == '1') {
			moneyList.value = moneyList.value.map((item, index) => {
				if (item.type == '0') item.is_open = true
				else item.is_open = false
				return item
			})
			moneyInfo.value = {}
		}
		else moreList.value = moreList.value.filter((i, index) => i.type != item.type)
	};
	// 重置
	const toReset = () => {
		brandInfo.value = {}
		moneyInfo.value = {}
		moreList.value = []
		toClear();
	};
	// 清除
	const toClear = () => {
		searchList.value = searchList.value.map((i, index) => {
			if (i.type == '0') i.title = '默认排序'
			return i
		})
		moneyList.value = moneyList.value.map((item, index) => {
			if (item.type == '0') item.is_open = true
			else item.is_open = false
			return item
		})
		sortList.value = sortList.value.map((item, index) => {
			if (item.type == '0') item.is_open = true
			else item.is_open = false
			return item
		})
	};
	// 联系卖家
	const toChat = (item) => {
		uni.makePhoneCall({
			phoneNumber: item.shop?.tel,
			success: function () {
				console.log('拨打电话成功');
			},
			fail: function () {
				uni.showToast({
					title: '拨打电话失败',
					icon: 'error',
				});
			}
		});
	};
	// 查看详情
	const toView = (item) => {
		uni.navigateTo({
			url: `/pagesHome/car/index?id=${item.id || item._id}`
		})
	};
	// 分页
	const toPage = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			page.value = page.value + 1;
			skip.value = page.value * limit.value;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	// 清空列表
	const clearPage = () => {
		list.value = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.top {
			margin: 2vw;

			.search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 2vw 2vw 0 2vw;

				.list {
					display: flex;
					align-items: center;
					padding: 1vw 0;

					.title_1 {
						margin: 0 1vw 0 0;
						font-size: var(--font14Size);
					}

					.title_2 {
						margin: 0 1vw 0 0;
						font-size: var(--font14Size);
						color: var(--fFFColor);
					}
				}
			}

			.popup-layer {
				position: absolute;
				z-index: 999999;
				background: rgba(0, 0, 0, .3);
				height: calc(100% - 50px);
				width: 100%;
				left: 0px;
				overflow: hidden;
				height: 87.5vh;
			}

			.popup-content {
				position: absolute;
				width: 100%;
				z-index: 1000000;
				background: #FFFFFF;
				transition: all .3s ease;

				.search_1 {
					display: flex;
					flex-wrap: wrap;
					padding: 2vw;

					.list {
						font-size: var(--font14Size);
						width: 24vw;
						text-align: center;

						.title_1 {
							padding: 2vw;
							margin: 1vw;
							background-color: var(--f5Color);
						}

						.title_2 {
							padding: 2vw;
							margin: 1vw;
							background: rgba(255, 222, 173, 0.35);
							border: 1px solid var(--fFFColor);
						}
					}
				}
			}

			.search_2 {
				padding: 2vw;
				background-color: var(--f5Color);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 80vw;

					.scroll {
						display: flex;
						white-space: nowrap;

						.title {
							font-size: var(--font14Size);
							display: flex;
							padding: 2vw;
							margin: 1vw;
							background-color: var(--mainColor);
						}
					}
				}
			}
		}

		.bottom {
			position: relative;
			flex-grow: 1;

			.one {
				margin: 0 2vw 2vw 2vw;

				.list {
					display: flex;
					margin: 1vw 0 0 0;
					padding: 1vw;

					.left {
						.image {
							width: 130px;
							height: 100px;
							border-radius: 2px;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin: 0 0 0 2vw;
						width: 100%;

						.name {
							font-size: var(--font14Size);
						}

						.other {
							color: var(--f85Color);
							font-size: var(--font12Size);
						}

						.right_1 {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.money {
								color: var(--fF0Color);
								font-size: var(--font12Size);

								text:first-child {
									font-size: var(--font18Size);
								}
							}

							.button {
								background-color: var(--fFFColor);
							}
						}
					}
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.is_bottom {
		width: 100%;
		text-align: center;

		text {
			padding: 2vw 0;
			display: inline-block;
			color: var(--f85Color);
			font-size: var(--font12Size);
		}
	}
</style>