car_applet/pages/select/index.vue

<template>
	<view class="content">
		<view class="top">
			<u-search shape="square" :show-action="false" placeholder="品牌/车系" @focus="toChange"></u-search>
		</view>
		<view class="bottom">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
				<view class="list-scroll-view">
					<view class="one">
						<view class="one_1">
							<view class="list" v-for="(item, index) in $config.searchList" :key="index"
								@tap="toRoute(item)">
								<view class="icon">
									<text class="t-icon" :class="item.icon"></text>
								</view>
								<view class="title">{{item.title||'暂无'}}</view>
							</view>
						</view>
						<view class="one_1 one_2">
							<view class="list" v-for="(item, index) in carList" :key="index" @tap="toCommon(item,'0')">
								<view class="icon">
									<image class="image"
										:src="item.logo&&item.logo.length>0?item.logo[0].url:'/static/logo.png'">
									</image>
								</view>
								<view class="title">{{item.name}}</view>
							</view>
						</view>
						<view class="one_1 one_3">
							<view class="list" v-for="(item, index) in typeList" :key="index" @tap="toCommon(item,'1')">
								<view class="name">{{item.title||'暂无'}}</view>
							</view>
						</view>
					</view>
					<view class="two">
						<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="money">
									<text>{{item.total_money||'0'}}</text>
									<text>万</text>
								</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 { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({ logoUrl: [] });
	// 列表
	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([])
	onShow(async () => {
		await searchOther();
		await searchConfig();
		await clearPage();
		await search();
	})
	onPullDownRefresh(async () => {
		await clearPage();
		await searchOther();
		await search();
		uni.stopPullDownRefresh();
	})
	const searchOther = async () => {
		let res;
		// 品牌
		res = await $api(`brand`, 'GET', { skip: 0, limit: 4, is_use: '0' });
		if (res.errcode === 0) carList.value = res.data;
		carList.value.push({
			name: '更多品牌',
			type: '4',
		})
	};
	// 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 toChange = () => {
		uni.navigateTo({
			url: `/pagesHome/type/index`
		})
	};
	const toRoute = (item) => {
		uni.navigateTo({
			url: `/${item.route}`,
		})
	};
	const toCommon = (item, type) => {
		if (type == '0') {
			if (item.type == '4') {
				uni.navigateTo({
					url: `/pagesHome/brand/index?type=${item.type}`,
				})
			} else {
				uni.navigateTo({
					url: `/pagesHome/search/index?brand=${item.name}`,
				})
			}
		} else {
			if (item.type == '3') {
				uni.navigateTo({
					url: `/pagesHome/search/index?type=${item.type}`,
				})
			} else {
				uni.navigateTo({
					url: `/pagesHome/search/index?money=${item.title}`,
				})
			}
		}
	};
	// 查看详情
	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;
		}

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

			.one {

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

					.list {
						display: flex;
						flex-direction: column;
						align-items: center;

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

				.one_2 {
					.image {
						width: 35px;
						height: 35px;
						border-radius: 35px;
					}
				}

				.one_3 {
					padding: 2vw;

					.list {
						background-color: var(--f9Color);

						.name {
							padding: 2vw 4vw;
							font-size: var(--font14Size);
						}
					}
				}
			}

			.two {
				margin: 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);
						}

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

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

	.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>