task 22985 【首页】【新闻资讯】——缺少【更多】功能，及相应列表

src/permission.js

@@ -15,6 +15,7 @@ const whiteList = [
   '/register',
 
   '/news/index',
+  '/news/index_new',
   '/news/newDetail',
   '/notice/index',
   '/notice/inviteTendersDetail',

src/router/index.js

@@ -147,6 +147,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/news/index'], resolve)
   },
+  {
+    path: '/news/index_new',
+    name: 'newsNew',
+    meta: {
+      title: '新闻资讯',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/news/index_new'], resolve)
+  },
   {
     path: '/news/newDetail',
     name: 'newDetailCJ',

src/views/index.vue

@@ -45,7 +45,7 @@
       </van-grid>
     </div>
     <div class="block_box">
-      <p class="block_tt"><i></i>新闻资讯 <span style="margin-left: auto;color: #A5A5A5;">更多</span></p>
+      <p class="block_tt"><i></i>新闻资讯 <span style="margin-left: auto;color: #A5A5A5;font-size: 14px;" @click="$router.push('/news/index_new')">更多</span></p>
       <van-list
         v-model="loading"
         :finished="finished"

src/views/news/index.vue

@@ -187,6 +187,7 @@ export default {
   overflow: hidden;
 
   width: 94%;
-  margin: 0 auto;
+  margin: 0 auto 10Px;
+
 }
 </style>

src/views/news/index_new.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="app-container">
+    <navBar title="新闻资讯" background="0" positionType="fixed"></navBar>
+    <van-tabs animated :swipeable="true">
+
+      <van-tab title="推荐">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          style="margin-top: 10px;"
+          @load="getList()"
+        >
+          <!--        @load="newList"-->
+          <van-cell v-for="item in newList" v-if="item.isHot == 'Y'" :key="item.id" :title="item.title" :label="item.newsTime" :to="{name:'newDetailCJ', query: {id:item.id}}">
+            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+            <template #right-icon>
+              <van-image :src="item.img" class="search-icon" width="30%" style="margin-left: 10px;" v-if="item.img" />
+              <van-image src="../../static/images/zwtpxw.jpg" class="search-icon" width="30%" v-else/>
+            </template>
+          </van-cell>
+        </van-list>
+      </van-tab>
+
+      <van-tab title="最新">
+        <van-list
+          v-model="secondLoading"
+          :finished="secondFinished"
+          finished-text="没有更多了"
+          style="margin-top: 10px;"
+          @load="getSecondList"
+        >
+          <van-cell v-for="(item,index) in secondList" v-if="item.isHot != 'Y'" :key="index" :title="item.title" :label="item.newsTime" :to="{name:'newDetailCJ', query: {id:item.id}}">
+            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+            <template #right-icon>
+              <van-image :src="item.img" class="search-icon" width="30%" style="margin-left: 10px;" v-if="item.img" />
+              <van-image src="../../static/images/zwtpxw.jpg" class="search-icon" width="30%" v-else/>
+            </template>
+          </van-cell>
+        </van-list>
+      </van-tab>
+
+    </van-tabs>
+
+
+  </div>
+</template>
+
+<script>
+import { newList } from "@/api/index";
+import navBar from "@/components/common/nav_bar.vue";
+export default {
+  name: "news",
+  components: { navBar },
+  data() {
+    return {
+      //是否显示加载
+      loading: false,
+      //是否滚动到底部
+      finished: false,
+      //是否显示加载
+      secondLoading: false,
+      //是否滚动到底部
+      secondFinished: false,
+      //新闻集合
+      newList:[],
+      //交易规则集合
+      secondList:[],
+      //查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        deptId:100,
+        number:2
+      },
+      //交易规则查询参数
+      querySecondParams: {
+        deptId:100,
+        pageNum:1,
+        pageSize:10,
+        number:9
+      },
+    };
+  },
+  created() {},
+  methods: {
+    getList(){
+      this.loading = true;
+      newList(this.queryParams).then(response => {
+        console.log(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)
+          if (imgStrs != null && imgStrs != '') {
+            console.log(imgStrs[0].length-2)
+            console.log(imgStrs[0])
+            this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
+          }
+        }
+        console.log(this.newList)
+        if(this.newList.length >= response.total){
+          this.finished = true;
+          return;
+        }
+        this.queryParams.pageNum += 1 ;
+        this.loading = false;
+      });
+    },
+    getSecondList(){
+      this.loading = true;
+      newList(this.queryParams).then(response => {
+        console.log(response);
+        for (var i = 0; i < response.rows.length; i++) {
+          this.secondList.push(response.rows[i]);
+          var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
+          if (imgStrs != null && imgStrs != '') {
+            console.log(imgStrs[0].length-2)
+            console.log(imgStrs[0])
+            this.secondList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
+          }
+        }
+        console.log(this.secondList)
+        if(this.secondList.length >= response.total){
+          this.secondFinished = true;
+          return;
+        }
+        this.querySecondParams.pageNum += 1 ;
+        this.secondLoading = false;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  height: 100vh;
+  background: #F4F8FB;
+}
+/deep/ .van-tabs__content{
+  background: transparent;
+  /*border-radius: 20PX;*/
+}
+/deep/ .van-tabs__nav{
+  /*background: transparent;*/
+  padding-bottom: 0;
+}
+/deep/ .van-tab--active{
+  background: #fff;
+}
+/deep/ .van-tab::after{
+  display: none;
+}
+/deep/ .van-tabs__wrap{
+  overflow: initial;
+}
+/deep/ .van-tabs__line{
+  /*background: linear-gradient(to right, #5166f5, #97eedc);*/
+  background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
+  height: 0.35rem;
+  bottom: 0;
+}
+/deep/ .van-tab:nth-child(1)::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  top: 0;
+  right: -19%;
+  bottom: 0;
+  background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 20%;
+}
+/deep/ .van-tab:nth-child(2)::before{
+  content: "";
+  position: absolute;
+  left: -19%;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
+  /*background-size: 100% 100%;*/
+  width: 20%;
+}
+.van-cell{
+  border-radius: 15px;
+  overflow: hidden;
+
+  width: 94%;
+  margin: 0 auto 10Px;
+
+}
+</style>