studytour-front/components/home/categoryView.vue

<template>
  <view class="category">
    <view class="flex flex-column category-item" v-for="item in categoryOptions" :key="item.id" @click="onClick(item)">
      <image class="img" :src="item.icon" mode="aspectFit"></image>
      <view>{{ item.label }}</view>
    </view>
  </view>
</template>

<script>
  export default {
		data() {
			return {
				categoryOptions: [],
			}
		},
		created() {
      this.getData()
    },
    methods: {
      async getData() {

				try {
					const categorys = (await this.$fetch('queryCategoryList', { pageSize: 6, isShow: '1' }))?.records?.map(item => {
            const { id, icon, title } = item

            return { 
              id,
              icon,
              label: title, 
              path: `/pages/index/category?categoryId=${id}`, 
            }
          })

          this.categoryOptions = [
            ...categorys.slice(0, 5),
            {
              id: '006',
              icon: '/static/image/temp-6.png',
              label: '研学日记',
              path: `/pages_order/article/search?api=queryJournalList&title=研学日记`,
            },
            {
              id: '007',
              icon: '/static/image/temp-7.png',
              label: '研学政策',
              path: `/pages_order/article/search?api=queryPolicyList&title=研学政策`,
            },
            categorys[5],
            {
              id: '009',
              icon: '/static/image/temp-9.png',
              label: '公司动态',
              path: `/pages_order/article/search?api=queryNewsList&title=公司动态`,
            },
            {
              id: '010',
              icon: '/static/image/temp-10.png',
              label: '全部',
              path: `/pages/index/category`,
            },
          ]

				} catch(err) {

				}

      },
      onClick(target) {
        const { path } = target

        if (path) {
          uni.navigateTo({
            url: path
          })
        }
      },
    },
  }
</script>

<style scoped lang="scss">

	.category {
		margin-top: 158rpx;
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: 16rpx;
		row-gap: 4rpx;
		background: linear-gradient(#DAF3FF, #FBFEFF 50rpx, #FBFEFF);
		border: 2rpx solid #FFFFFF;
		border-radius: 32rpx;
		
		&-item {
			padding: 16rpx 0;
			row-gap: 12rpx;
			font-size: 22rpx;
			color: #9B9B9B;
			
			.img {
				width: 72rpx;
				height: 72rpx;
			}
		}
	}

</style>