market-app-ui/pages/index/index.vue

<template>
	<view>
		<navigation-bar title="首页" background-color="#fff" front-color="#000000" />
		<view class="wrap">
			<u-swiper :list="list"  keyName="image" indicator indicatorMode="line" height="200"></u-swiper>
		</view>
		<view class="grid">
			<u-grid @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in menuList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="50"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [
				// 	require('@/static/images/swiper/20230728155923.jpg'),
				// 	require('@/static/images/swiper/20230728160039.jpg'),
				// 	require('@/static/images/swiper/20230728160045.jpg'),
				// ],
				list: [],
				menuList: []
			}
		},
		created() {
			this.getBanner()
			this.getMenu()
		},
		methods: {
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			getBanner() {
				this.$api.getBanner().then(res => {
					this.list = res.data
					// console.log(this.list)
				})
			},
			getMenu() {
				this.$api.getMenu().then(res => {
					// this.menuList = res.data
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	page {
		padding: 10px;
	}

	.grid {
		margin: 10px 0;
	}

	.grid-text {
		font-size: 18px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>