car_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.name}}</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.name}}</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([]);
	const itemArr = ref([]);
	const type = ref('0');
	// const list = ref([{ name: '奥迪', url: [], type: '0' }, { name: '本田', url: [], type: '0' }, { name: '别克', url: [], type: '0' },
	// { name: '奥迪', url: [], type: '0' }, { name: '大众', url: [], type: '0' }, { name: '长城', url: [], type: '0' },
	// { name: '福特', url: [], type: '0' }, { name: '丰田', url: [], type: '0' }, { name: '长安', url: [], type: '0' },
	// { name: '日产', url: [], type: '0' }]);
	onLoad(async (options) => {
		type.value = options && options.type
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		const res = await $api('brand/index', 'GET', {});
		if (res.errcode === 0) {
			itemArr.value = res.data.data1
			indexList.value = res.data.data2
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	const toCommon = (item) => {
		if (type.value == '4') {
			uni.navigateTo({
				url: `/pagesHome/search/index?brand=${item.name}`
			})
		} else {
			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>