notarization_applet/pagesHome/shop/index.vue

<template>
	<view class="content">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
				<view class="list-scroll-view">
					<view class="top">
						<image class="image"
							:src="shop.logo&&shop.logo?.length>0?shop.logo[0].url:'https://cdn.uviewui.com/uview/album/1.jpg'" />
					</view>
					<view class="bottom">
						<view class="one">
							<view class="name">
								{{shop.name||'暂无'}}
							</view>
							<view class="other">
								<view class="left">
									<view class="left_1">
										<span>在售 {{shop.sale||'0'}} 辆</span>
										|
										<span>已售 {{shop.sold||'0'}} 辆</span>
									</view>
									<view class="left_2">
										<span>{{shop.status=='0'?'营业中':'休息中'}}</span>&nbsp;
										<span>{{shop.start_time||'8:00'}}-{{shop.end_time||'17:00'}}</span>
									</view>
									<view class="left_3" @tap="toImage">
										<u-icon name="file-text" size="16"></u-icon>
										<text>营业执照</text>
									</view>
								</view>
								<view class="center">
									<u-line direction="col"></u-line>
								</view>
								<view class="right">{{shop.address||'暂无'}}</view>
							</view>
						</view>
						<view class="two">
							<view class="search">
								<view class="searchlist" 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 class="search_1" v-else-if="type=='3'">
										<view class="list" v-for="(item, index) in yearList" :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>
										<view class="list" v-for="(item, index) in yearList" :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="searchInfo.brand||searchInfo.money||moreList.length>0">
								<view class="left">
									<scroll-view scroll-x="true">
										<view class="scroll">
											<view v-if="searchInfo&&searchInfo.brand" class="title"
												@tap="toDelete({},'0')">
												<span>{{searchInfo.brand}}</span>&nbsp;
												<u-icon color="#000" size="14px" name="close"></u-icon>
											</view>
											<view v-if="searchInfo&&searchInfo.money" class="title"
												@tap="toDelete({},'1')">
												<span>{{searchInfo.money}}</span>&nbsp;
												<u-icon color="#000" size="14px" name="close"></u-icon>
											</view>
											<view v-if="searchInfo&&searchInfo.year" class="title"
												@tap="toDelete({},'2')">
												<span>{{searchInfo.year}}</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,'3')">
												<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 class="pubuBox">
								<view class="pubuItem">
									<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
										<view class="list_1">
											<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>
							</view>
							<view class="is_bottom" v-if="is_bottom">
								<text>{{config.bottom_title||'没有更多了！'}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<u-button icon="phone" text="电话联系" size="normal" type="info" @click="toChat"></u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad, onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 基本信息
	const config = ref({});
	const id = ref('');
	// 店铺
	const shop = ref({});
	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 }, { title: '更多筛选', type: '4', 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 yearList = ref([{ title: '不限车龄', type: '0', is_open: true }, { title: '2年以下', type: '1', is_open: false }, { title: '4年以下', type: '2', is_open: false }, { title: '6年以下', type: '3', is_open: false }]);
	// 选择的查询条件
	const searchInfo = 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);
	onLoad(async (options) => {
		id.value = options && options.id
		uni.setNavigationBarTitle({
			title: options && options.name || '车行详情'
		});
		await searchConfig();
		await search();
	})
	onShow(async () => {
		uni.$on('toRoute', function (data) {
			if (data && data.name) searchInfo.value.brand = data.name
		})
		await clearPage();
		await searchOther();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`shop/${id.value}`, 'GET', {});
			if (res.errcode === 0) {
				shop.value = res.data
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		}
	};
	// 查询其他信息
	const searchOther = async () => {
		let res;
		const info = {
			skip: skip.value,
			limit: limit.value,
			status: '0',
			shop: id.value
		}
		if (searchInfo.value.brand) info.brand = searchInfo.value.brand
		if (searchInfo.value.money) info.money = searchInfo.value.money
		if (searchInfo.value.year) info.year = searchInfo.value.year
		res = await $api('car', 'GET', {
			...info,
		});
		if (res.errcode === 0) {
			list.value = list.value.concat(res.data)
			total.value = res.total
			shop.value.sale = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
		res = await $api('car', 'GET', {
			skip: 0,
			limit: 1,
			status: '0',
			shop: id.value
		});
		if (res.errcode === 0) shop.value.sold = res.total
	};
	// 查询
	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 == '4') {
			toClose()
			uni.navigateTo({
				url: `/pagesHome/condition/index`,
			})
		} else is_show.value = searchList.value.some(item => item.is_open == true)
	};
	// 关闭筛选
	const toClose = () => {
		is_show.value = false
		searchList.value = searchList.value.map((item, index) => {
			item.is_open = false
			return item
		})
	};
	// 选择
	const toSelect = async (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 if (type == '2') {
			moneyList.value = moneyList.value.map((item, index) => {
				if (item.type == data.type) item.is_open = true
				else item.is_open = false
				return item
			})
			if (data.type != '0') searchInfo.value.money = data.title
			else searchInfo.value.money = ''
		} else {
			yearList.value = yearList.value.map((item, index) => {
				if (item.type == data.type) item.is_open = true
				else item.is_open = false
				return item
			})
			if (data.type != '0') searchInfo.value.year = data.title
			else searchInfo.value.year = ''
		}
		await clearPage();
		await searchOther();
	};
	// 删除筛选
	const toDelete = async (item, type) => {
		if (type == '0') searchInfo.value.brand = ''
		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
			})
			searchInfo.value.money = ''
		}
		else if (type == '2') {
			yearList.value = yearList.value.map((item, index) => {
				if (item.type == '0') item.is_open = true
				else item.is_open = false
				return item
			})
			searchInfo.value.year = ''
		}
		else moreList.value = moreList.value.filter((i, index) => i.type != item.type)
		await clearPage();
		await searchOther();
	};
	// 重置
	const toReset = async () => {
		await toDelete({}, '0')
		await toDelete({}, '1')
		await toDelete({}, '2')
		moreList.value = []
		await toClear();
	};
	// 清除
	const toClear = () => {
		searchList.value = searchList.value.map((i, index) => {
			if (i.type == '0') i.title = '默认排序'
			return i
		})
		sortList.value = sortList.value.map((item, index) => {
			if (item.type == '0') item.is_open = true;
			else item.is_open = false
			return item
		})
	};
	// 联系卖家
	const toChat = () => {
		uni.makePhoneCall({
			phoneNumber: shop.value?.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 toImage = () => {
		if (shop.value?.file.length > 0) {
			// 预览图片
			uni.previewImage({
				urls: [shop.value.file[0].url],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function (data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function (err) {
						console.log(err.errMsg);
					}
				}
			});
		}
	};
	// 分页
	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;

		.info {
			position: relative;
			flex-grow: 1;
			background-color: var(--f1Color);

			.top {

				.image {
					width: 100%;
					height: 55vw;
				}
			}

			.bottom {
				margin: -8vw 2vw 0 2vw;

				.one {
					border-radius: 5px;
					padding: 2vw;
					background-color: var(--mainColor);

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

					.other {
						display: flex;
						justify-content: space-between;
						font-size: var(--font12Size);
						padding: 2vw 0;

						.left {
							width: 45%;

							.left_2 {
								margin: 1vw 0;
							}

							.left_3 {
								display: flex;
								align-items: center;

								text {
									margin: 0 0 1vw 0;
									color: #606266;
								}
							}
						}

						.right {
							width: 45%;
						}
					}
				}

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

						.searchlist {
							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);
								}
							}
						}
					}

					.pubuBox {
						padding: 2vw 0;
					}

					.pubuItem {
						column-count: 2;
						column-gap: 2vw;
					}

					.list {
						box-sizing: border-box;
						border-radius: 2vw;
						overflow: hidden;
						background-color: var(--mainColor);
						break-inside: avoid;
						/*避免在元素内部插入分页符*/
						box-sizing: border-box;
						margin-bottom: 2vw;

						.list_1 {
							.left {
								.image {
									width: 100%;
									height: 120px;
									border-radius: 5px 5px 0 0;
								}
							}

							.right {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 0 2vw;

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

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

								.money {
									color: var(--fF0Color);
									font-size: var(--font12Size);
									margin: 0 0 1vw 0;

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

		.foot {
			padding: 2vw 1vw;
		}
	}

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