nsgk_mobile/src/views/index.vue

<template>
  <div class="app-container">
    <van-row>
      <van-col span="2">
        <van-image src="../../static/images/index/logo.png" />
      </van-col>
      <van-col span="22" style="line-height: 29px;font-size: 20px;">农村产权交易平台</van-col>
    </van-row>
    <van-swipe class="my-swipe" :autoplay="3000" height="180" indicator-color="white" :show-indicators="false">
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <van-image :src="item.img" height="180" @click="goDetail(item.id)" />
        <p class="bannerTit">{{item.title}}</p>
      </van-swipe-item>
    </van-swipe>
    <div style="border-radius: 10px;overflow: hidden;">
      <van-grid :border="false" :column-num="3">
        <van-grid-item to="/news/index">
          <van-image src="../../static/images/icon/icon_new.png" width="40" height="40" />
          <p>新闻资讯</p>
        </van-grid-item>
        <van-grid-item to="/biddingHall">
          <van-image src="../../static/images/icon/icon_bidding.png" width="40" height="40" />
          <p>竞价大厅</p>
        </van-grid-item>
        <van-grid-item to="/notice/index">
          <van-image src="../../static/images/icon/icon_project.png" width="40" height="40" />
          <p>项目公告</p>
        </van-grid-item>
        <van-grid-item to="/policy">
          <van-image src="../../static/images/icon/icon_statute.png" width="40" height="40" />
          <p>政策法规</p>
        </van-grid-item>
        <van-grid-item to="/interaction/index">
          <van-image src="../../static/images/icon/icon_talk.png" width="40" height="40" />
          <p>互动交流</p>
        </van-grid-item>
        <van-grid-item to="/supply/index">
          <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
          <p>个人供求</p>
        </van-grid-item>
<!--        <van-grid-item to="/authenticRight">
          <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
          <p>确权调查</p>
        </van-grid-item>-->
      </van-grid>
    </div>
    <p class="newTit">新闻资讯</p>
    <div style="border-radius: 10px;overflow: hidden;">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList()"
      >
<!--        @load="newList"-->
        <van-cell v-for="item in newList" :key="item.id" :label="item.newsTime" :to="{name:'newDetail', query: {id:item.id}}">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <p class="newContent">{{item.title}}</p>
          </template>
          <template #right-icon>
            <van-image :src="item.img" class="search-icon" width="30%" v-if="item.img" />
            <van-image src="../../static/images/zwtpxw.jpg" class="search-icon" width="30%" v-else/>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
import { newList } from "@/api/index";
export default {
  name: "index",
  data() {
    return {
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        deptId:100,
        number:2
      },
      //新闻集合
      newList:[],
      //轮播图集合
      bannerList:''
    };
  },
  created() {
    //this.getList();
    this.getBanner();
  },
  methods: {
    getList(){
      this.loading = true;
      this.queryParams.number = 2 ;
      this.queryParams.pageSize = 5 ;
      newList(this.queryParams).then(response => {
        for (var i = 0; i < response.rows.length; i++) {
          this.newList.push(response.rows[i]);
          var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
          console.log(imgStrs)
          if (imgStrs != null && imgStrs != '') {
            this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
          }
        }
        if(this.newList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    getBanner(){
      this.loading = true;
      this.queryParams.number = 1 ;
      this.queryParams.pageSize = 5 ;
      newList(this.queryParams).then(response => {
        this.bannerList = response.rows;
        for (var i = 0; i < response.rows.length; i++) {
          var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
          if (imgStrs != null && imgStrs != '') {
            this.bannerList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
          }
        }
        this.loading = false;
      });
    },
    goDetail(id){
      console.log(id)
      window.location = 'news/newDetail?id='+id;
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 6% 3% 0;
}
.bannerTit{
  position: absolute;
  bottom: 0;
  background: #000;
  opacity: 0.5;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #eee;
  text-align: center;
  overflow: hidden;
  padding: 0 5%;
}
.link{
  color: #000;
}
.my-swipe {
  border-radius: 30px;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.van-grid-item p{
  margin-top: 10px;
}
.newTit{
  font-size: 0.45rem;
  margin: 0.4rem 0;
  font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
}
.newContent{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.search-icon {
  line-height: inherit;
  margin-left: 10px;
}
</style>