notarization_applet/pagesHome/condition/index.vue

<template>
	<view class="content">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="u-menu-wrap">
						<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
							:scroll-top="scrollTop">
							<view v-for="(item,index) in tabbar" :key="index" :id="'item' + index" class="u-tab-item"
								:class="[current == index ? 'u-tab-item-active' : '']" @tap="swichMenu(index)">
								<text class="u-line-1">{{item.name}}</text>
							</view>
						</scroll-view>
						<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
							:scroll-into-view="itemId" @scroll="rightScroll">
							<view class="page-view">
								<view class="class-item" :id="'item' + index" v-for="(item,index) in tabbar"
									:key="index">
									<view class="item-title">
										<view v-if="item.type!='2'">{{item.name}}</view>
										<view v-else class="title">
											<view class="left">{{item.name}} <span class="span">({{item.unit}})</span>
											</view>
											<view class="right">{{item.content||'不限'}}</view>
										</view>
									</view>
									<view class="item-container">
										<view v-if="item.type=='1'" class="thumb-box1">
											<u-button :text="item.text" size="normal" type="info"
												@click="toCommon(item.value)"></u-button>
										</view>
										<view v-else-if="item.type=='2'" class="thumb-box2">
											<slider-range :value="item.value" :min="item.min" :max="item.max"
												:step="item.step" :scale="{ show: true}"
												@change="event=>changeSliderValue(event,item)">
											</slider-range>
										</view>
										<view v-else class="thumb-box3" v-for="(item1, index1) in item.foods"
											:key="index1" @tap="toSelect(item,item1)">
											<view :class="[item1?.is_open==false?'title_1':'title_2']">{{item1.label}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="left">重置</view>
			<view class="right">
				<view class="button">共{{total}}辆车符合条件</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import Vue from 'vue';
	import classifyData from '@/pagesHome/condition/common/classify.js';
	import SliderRange from '@/components/slider-range/index.vue'
	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 total = ref(0);
	// 滑动菜单的值
	const scrollTop = ref(0); //tab标题的滚动条位置
	const current = ref(0); // 预设当前项的值
	const itemId = ref(''); // 栏目右边scroll-view用于滚动的id
	const tabbar = ref([]);
	const scrollRightTop = ref(0); // 右边栏目scroll-view的滚动条高度
	const brandInfo = ref({}); // 车牌信息
	const cityInfo = ref({}); // 城市信息
	const searchList = ref([]); // 选中的搜索信息
	// 字典表
	const boxTypeList = ref([]);
	const structureList = ref([]);
	const emissionList = ref([]);
	const energyList = ref([]);
	const displacementList = ref([]);
	const setList = ref([]);
	onLoad(async (options) => {
		id.value = options && options.id
		await searchOther();
		await searchConfig();
		await search();
	})
	onShow(async () => {
		uni.$on('toRoute', function (data) {
			brandInfo.value = data
			tabbar.value = tabbar.value.map((item, index) => {
				if (item.type == '1' && item.value == '0') item.text = data.title
				return item
			})
		})
		uni.$on('toCity', function (data) {
			cityInfo.value = data
			tabbar.value = tabbar.value.map((item, index) => {
				if (item.type == '1' && item.value == '1') item.text = data.name
				return item
			})
		})
	})
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 变速箱
		res = await $api(`dictData`, 'GET', { code: 'boxType', is_use: '0' });
		if (res.errcode === 0) boxTypeList.value = res.data;
		// 车身结构
		res = await $api(`dictData`, 'GET', { code: 'structure', is_use: '0' });
		if (res.errcode === 0) structureList.value = res.data;
		// 排放标准
		res = await $api(`dictData`, 'GET', { code: 'emission', is_use: '0' });
		if (res.errcode === 0) emissionList.value = res.data;
		// 能源类型
		res = await $api(`dictData`, 'GET', { code: 'energy', is_use: '0' });
		if (res.errcode === 0) energyList.value = res.data;
		// 排量
		res = await $api(`dictData`, 'GET', { code: 'displacement', is_use: '0' });
		if (res.errcode === 0) displacementList.value = res.data;
		// 座椅
		res = await $api(`dictData`, 'GET', { code: 'set', is_use: '0' });
		if (res.errcode === 0) setList.value = res.data;
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		const data = classifyData.map((item, index) => {
			if (item.type == 'boxType') {
				// 变速箱
				boxTypeList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = boxTypeList.value;
			} else if (item.type == 'structure') {
				// 车身结构
				structureList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = structureList.value;
			} else if (item.type == 'emission') {
				// 排放标准
				emissionList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = emissionList.value;
			} else if (item.type == 'energy') {
				// 能源类型
				energyList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = energyList.value
			} else if (item.type == 'displacement') {
				// 排量
				displacementList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = displacementList.value;
			} else if (item.type == 'set') {
				// 座椅
				setList.value.forEach(v => {
					v['is_open'] = false;
				});
				item.foods = setList.value;
			}
			return item
		})
		tabbar.value = data
	};
	// 点击左边的栏目切换
	const swichMenu = (index) => {
		if (index == current.value) return;
		current.value = index;
		itemId.value = `item${index}`
	};
	// 右侧滚动
	const rightScroll = async (e) => {
		scrollTop.value = e.scrollTop
	};
	// 品牌/城市
	const toCommon = (type) => {
		if (type == '0') {
			uni.navigateTo({
				url: `/pagesHome/brand/index`
			})
		} else {
			uni.navigateTo({
				url: `/pagesHome/city/index`
			})
		}
	};
	// 刻度选择
	const changeSliderValue = (e, data) => {
		tabbar.value = tabbar.value.map((item, index) => {
			if (item.name == data.name) {
				if (e.firstValue == 0) item.content = `${e.secondValue}${item.unit}以下`
				else item.content = `${e.firstValue}-${e.secondValue}${item.unit}`
				item.value = e.values
			}
			return item
		})
	};
	// 选择
	const toSelect = async (arr, data) => {
		searchList.value.push(data)
		tabbar.value = tabbar.value.map((item, index) => {
			if (item.type == arr.type) {
				item.foods = item.foods.map((item1, index1) => {
					if (item1.value == data.value) item1.is_open = !item1.is_open
					return item1
				})
			}
			return item
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

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

			.u-menu-wrap {
				flex: 1;
				display: flex;
				overflow: hidden;
			}

			.u-tab-view {
				width: 100px;
				background: var(--f6Color);
			}

			.u-tab-item {
				height: 55px;
				background: var(--f6Color);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: var(--font14Size);
				color: #444;
				line-height: 1;
			}

			.u-tab-item-active {
				position: relative;
				color: var(--f00Color);
				font-size: var(--font15Size);
				font-weight: 600;
				background-color: var(--mainColor);
				border-left: 4px solid var(--fFFColor);
			}

			.right-box {
				height: 705px;
				background-color: rgb(250, 250, 250);
			}

			.page-view {
				padding: 8px;
			}

			.class-item {
				margin-bottom: 15px;
				background-color: var(--mainColor);
				padding: 8px;
				border-radius: 4px;
			}

			.item-title {
				font-size: var(--font14Size);
				margin: 0 0 2vw 0;

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

					.left {
						font-weight: bold;

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

			.item-menu-name {
				font-size: var(--font12Size);
			}

			.item-container {
				display: flex;
				flex-wrap: wrap;


				.thumb-box1 {
					width: 100%;
				}

				.thumb-box2 {
					width: 100%;
				}

				.thumb-box3 {
					font-size: var(--font12Size);
					width: 23vw;
					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);
					}
				}

			}
		}

		.foot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 2vw;

			.right {
				.button {
					text-align: center;
					width: 65vw;
					padding: 4vw 6vw;
					font-size: var(--font16Size);
					background-color: var(--fFFColor);
				}
			}
		}
	}

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

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>