notarization_applet/pagesHome/brand/index.vue

<template>
	<u-index-list :index-list="indexList" :sticky="false" activeColor="#ffbc00">
		<view :slot="header" class="list">
			<view class="text">热门品牌</view>
			<view class="one">
				<view class="list" v-for="(item, index) in list" :key="index" @tap="toCommon(item)">
					<view class="icon">
						<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:'/static/logo.png'">
						</image>
					</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<template :key="index" v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<u-index-anchor color="#333333" bg-color="#f9f9f9" :text="indexList[index]"></u-index-anchor>
			<!-- #endif -->
			<u-index-item>
				<!-- #ifndef APP-NVUE -->
				<u-index-anchor color="#333333" bg-color="#f9f9f9" :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<view class="list-cell" v-for="(cell, index) in item" @tap="toCommon(cell)">
					<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:'/static/logo.png'">
					</image>
					<view class="title">{{cell.title}}</view>
				</view>
			</u-index-item>
		</template>
	</u-index-list>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// 基本信息
	const config = ref({ logoUrl: [] });
	const indexList = ref(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]);
	const itemArr = ref([
		[{ title: '奥迪', url: [], type: '0' }, { title: '爱驰', url: [], type: '0' }, { title: '阿斯顿·马丁', url: [], type: '0' }],
		[{ title: '宝马', url: [], type: '0' }, { title: '本田', url: [], type: '0' }, { title: '比亚迪', url: [], type: '0' }, { title: '奔腾', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '大众', url: [], type: '0' }, { title: '东风', url: [], type: '0' }, { title: '大运', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
		[{ title: '长安', url: [], type: '0' }, { title: '长城', url: [], type: '0' }, { title: '创维', url: [], type: '0' }],
	]);
	const list = ref([{ title: '奥迪', url: [], type: '0' }, { title: '本田', url: [], type: '0' }, { title: '别克', url: [], type: '0' },
	{ title: '奥迪', url: [], type: '0' }, { title: '大众', url: [], type: '0' }, { title: '长城', url: [], type: '0' },
	{ title: '福特', url: [], type: '0' }, { title: '丰田', url: [], type: '0' }, { title: '长安', url: [], type: '0' },
	{ title: '日产', url: [], type: '0' }]);
	onLoad(async () => {
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {

	};
	const toCommon = (item) => {
		uni.$emit('toRoute', item)
		// 4. 返回上一页面
		uni.navigateBack({
			delta: 1 // 返回的页面数
		})
	};
</script>
<style lang="scss" scoped>
	.list {
		.text {
			margin: 2vw;
			font-weight: bold;
			font-size: var(--font16Size);
		}

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

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 18vw;
				margin: 0 0 1vw 0;

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

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


	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;

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

		.title {
			margin: 0 0 0 1vw;
		}
	}
</style>