task 乳山产交 价格指数

src/views/news/index.vue

@@ -7,21 +7,48 @@
       placeholder
       @click-left="onClickLeft"
     />
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="getList()"
-    >
-      <!--        @load="newList"-->
-      <van-cell v-for="item in newList" :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-tabs animated type="card" color="#007b76" style="margin-top: 10px;">
+
+      <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" :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 in secondList" :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-tabs>
+
+
   </div>
 </template>
 
@@ -35,8 +62,14 @@ export default {
       loading: false,
       //是否滚动到底部
       finished: false,
+      //是否显示加载
+      secondLoading: false,
+      //是否滚动到底部
+      secondFinished: false,
       //新闻集合
       newList:[],
+      //交易规则集合
+      secondList:[],
       //查询参数
       queryParams: {
         pageNum: 1,
@@ -44,6 +77,13 @@ export default {
         deptId:100,
         number:2
       },
+      //交易规则查询参数
+      querySecondParams: {
+        deptId:100,
+        pageNum:1,
+        pageSize:10,
+        number:9
+      },
     };
   },
   created() {},
@@ -70,6 +110,28 @@ export default {
         this.loading = false;
       });
     },
+    getSecondList(){
+      this.loading = true;
+      newList(this.querySecondParams).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>