hongze_yb_xcx/pages-report/classify.vue

<template>
  <view class="classify-page">
    <swiper class="swiper" autoplay interval>
      <swiper-item>
        <image @click="goFiccService" :src="globalImgUrls.ficcServiceImg" mode="aspectFill"/>
      </swiper-item>
    </swiper>
    <view class="list">
      <view class="item" @click="goDetail(item)" v-for="item in list" :key="item.classify_name_first">
        <image :src="item.icon_img_url" mode="aspectFill"/>
        <view>{{item.classify_name_first}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {apiReportClassify} from '@/api/report'
export default {
  data () {
    return {
      list:[]
    }
  },
  onLoad(options) {
    this.getClassifyList()
  },
  onPullDownRefresh() {
    this.getClassifyList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  onShareAppMessage() {
    return {
      title:"FICC研报分类"
    }
  },
  methods: {
    async getClassifyList(){
      const res=await apiReportClassify()
      if(res.code===200){
        this.list=res.data
      }
    },

    goDetail(item){
      //redirect_type : 跳转页面类型：1，专栏列表，2报告列表，3专栏详情
      if(item.redirect_type==1){
        uni.navigateTo({ url: `/pages-report/specialColumn/list?classifyId=${item.classify_id_first}&classifyName=${item.classify_name_first}` })
      }
      if(item.redirect_type==2){
        uni.navigateTo({url:`/pages-report/reportList?classifyId=${item.classify_id_first}&classifyName=${item.classify_name_first}`})
      }
      if(item.redirect_type==3){
        uni.navigateTo({url:'/pages-report/specialColumn/detail?columnId='+item.classify_id_second})
      }
    },

    goFiccService(){
      uni.navigateTo({url:'/pages-report/ficcService'})
    }
  }
};
</script>

<style lang="scss" scoped>
.classify-page {
  padding: 34rpx;
  .swiper{
    height: 300rpx;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 8rpx;
    }
  }
  .list{
    margin-top: 40rpx;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 25%;
      padding: 0 20rpx;
      margin-bottom: 30rpx;
      text-align: center;
      image{
        width: 128rpx;
        height: 128rpx;
        // background-color: #f5f5f5;
      }
    }
  }
}
</style>