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="aspectFit" :radius='10' :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="$u.throttle(()=>onItemClick(baseListItem), 500)"
        >
          <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>
    <view class="u-page"
          :style="{
                 background: `url(${getImageUrl(ICON_CFG.theme_bg)}) no-repeat `,
                 backgroundSize: '100%',
               }">
      <view class="u-page-title">
        <view class="title-content">主题研讨交流</view>
      </view>
      <item-list-simple :ds="indexList" :onItemClick="onContentClick" />
    </view>
  </view>
</template>

<script>
import { fetchContentInfo, fetchMsgList, fetchViewCfgList } from '@/common/api';
import { COMP_CODE, ICON_CFG, MEETING_TYPE } from '@/common/EnumConst';
import ItemListSimple from '@/components/ItemListSimple/index.vue';
import { getImageUrl, setStorageObj, storageKey } from '@/util';

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

    },
    onContentClick(item) {
      setStorageObj(storageKey.regtheme, {
        type: MEETING_TYPE.theme.value,
        id: item.id,
      });
      uni.navigateTo({
        url: `/pasbrg/pages/regtheme/index?type=${MEETING_TYPE.theme.value}&id=${item.id}`,
      });
    },
    async loadmore() {
      const res = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
        contentType: 4,
      });
      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>