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" direction="column" :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"
            @click="onItemClick(baseListItem)"
        >
          <view class="grid-item-icon" :style="[baseListItem.style]">
            <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, fetchMsgList, fetchViewCfgList } from '@/common/api';
import { COMP_CODE } from '@/common/EnumConst';
import ItemList from '@/components/ItemList/index.vue';
import { getImageUrl } from '@/util';

export default {
  components: {
    ItemList,
  },
  data() {
    return {
      keyword: '',
      list: [
      ],
      msg: [],
      baseList: [
      ],
      indexList: [],
      styleObj: {
        "backgroundColor": "#000"
      }
    };
  },
  onLoad() {
    this.loadMsg();
    this.loadmore();
    this.viewCfg();
  },
  methods: {
    click() {

    },
    onContentClick(item) {
      uni.navigateTo({
        url: `/pasb/pages/detail/index?id=${item.id}`,
      });
    },
    async loadmore() {
      const res = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
        contentType: 1,
      });
      this.indexList = res.rows.map(item => {
        return {
          id: item.id,
          imgUrl: getImageUrl(item.thumbnail),
          title: item.title,
          date: item.createTime,
        };
        });
    },
    async loadMsg() {
      let result = [];
      const res = await fetchMsgList({
        pageNum: 1,
        pageSize: 99,
      });
      if (res.rows.length > 0) {
        result = res.rows.map(item => item.msg);
      }
      this.msg = result;
    },
    async viewCfg() {
      let result = [];
      const res = await fetchViewCfgList({
        pageNum: 1,
        pageSize: 99,
      });
      if (res.rows.length > 0) {
        result = res.rows.map(item => item.msg);
        const index_ctl = res.rows.filter((item) => item.compCode === COMP_CODE.index_ctl);
        const index_swip = res.rows.filter((item) => item.compCode === COMP_CODE.index_swip);
        this.list = index_swip.map(item => getImageUrl(item.iconUri));
        this.baseList = index_ctl.map(item => {
          return {
            icon: getImageUrl(item.iconUri),
            style: JSON.parse(item.style),
            title: item.labelTxt,
            url: item.url,
          };
        });
      }
    },
    onSearch(val) {
      uni.reLaunch({
        url: `/pages/tabbar/news/index?keyword=${val}`,
      });
    },
    onItemClick(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
  },
  onShareAppMessage() {
    return {
      title: 'First UI组件库',
    };
  },
};
</script>

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


</style>