traffic-eff-app/pages/tabbar/index/index.vue

<template>
  <view class="fui-wrap">
    <view class="search-content">
      <u-search placeholder="请输入关键字" v-model="keyword" @custom="onSearch" @search="onSearch"></u-search>
    </view>

    <u-swiper :list="list" imgMode="aspectFill" :radius='0' :height="240" />
    <u-notice-bar :text="msg" :more-icon="false" color="#5af" bg-color="#d6e8f7"></u-notice-bar>
    <view style="width: 100%; margin-top: 20rpx">
      <u-grid
          :border="false"
          :col="3"
          @click="click"
      >
        <u-grid-item
            v-for="(baseListItem,baseListIndex) in baseList"
            :key="baseListIndex"
        >
          <view class="grid-item-icon" :style="{backgroundColor: baseListItem.bgColor}">
            <image :src="baseListItem.icon"></image>
          </view>
          <text class="grid-text">{{ baseListItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <u-gap height="10" bgColor="#bbb"></u-gap>
    <view class="u-page">
      <view class="u-page-title">
        <view class="line"></view>
        <view class="rectangle"></view>
        <view class="rectangle"></view>
        <view class="title-content">最新资讯</view>
        <view class="rectangle"></view>
        <view class="rectangle"></view>
        <view class="line"></view>
      </view>
      <item-list :ds="indexList" :onItemClick="onContentClick" />
    </view>
  </view>
</template>

<script>
import { fetchContentInfo } from '@/common/api';
import ItemList from '@/components/ItemList/index.vue';
import { getImageUrl } from '@/util';

export default {
  components: {
    ItemList,
  },
  data() {
    return {
      keyword: '',
      list: [
        '/static/images/swiper/title.png',
      ],
      msg: '加快建设交通强国大会将于2024年8月在南京召开',
      baseList: [
        {
          name: 'photo',
          icon: '/static/images/icons/meeting_info.svg',
          bgColor: '#6abff9',
          title: '大会介绍',
        },
        {
          name: 'lock',
          icon: '/static/images/icons/meeting_apply.svg',
          bgColor: '#f1b06c',
          title: '会议报名',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_point.svg',
          title: '会议指南',
          bgColor: '#ee794d',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_doc.svg',
          title: '交流材料汇编',
          bgColor: '#e66b66',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_traffic.svg',
          title: '交通指引',
          bgColor: '#82cf92',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_contact.svg',
          title: '联系我们',
          bgColor: '#4a75f6',
        },
      ],
      indexList: [],
    };
  },
  onLoad() {
    this.loadmore();
  },
  methods: {
    click() {

    },
    onContentClick(item) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${item.id}`,
      });
    },
    async loadmore() {
      const res = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
      });
      this.indexList = res.rows.map(item => {
        return {
          id: item.id,
          imgUrl: getImageUrl(item.thumbnail),
          title: item.title,
          date: item.createTime,
        };
        });
    },
    onSearch(val) {
      debugger
      uni.navigateTo({
        url: `/pages/tabbar/news/index?keyword=${val}`,
      });
    },
  },
  onShareAppMessage() {
    return {
      title: 'First UI组件库',
    };
  },
};
</script>

<style lang="scss" src="./index.scss">


</style>