init

pages/tabpages/find/find.js

@@ -0,0 +1,70 @@
+import articleApi from "../../../api/articleApi"
+import clientConfig from "../../../config/index"
+
+
+Page({
+
+  data: {
+    searchKey: '',
+    hotArticles:[],
+    rankType: 'all',
+    hasMore: true, // 是否有更多数据
+    loading: false, // 是否正在加载
+    pageSize: 10,
+    pageNum: 1,
+    sortField: '',
+  },
+ 
+  onSearch(){
+    this.data.hotArticles = [] 
+    this.data.pageNum = 1
+    this.data.hasMore = true
+    this.fetchData()
+  },
+
+  onLoad(options) {
+    this.fetchData()
+  },
+
+  onReachBottom: function () {
+    if (this.data.hasMore) {
+      this.fetchData(); // 触底时加载更多数据
+    }
+  },
+
+  fetchData(){
+    if (this.data.loading) {
+      return; // 如果正在加载，则不再加载
+    }
+
+    articleApi.page({
+      pageNum: this.data.pageNum,
+      pageSize: this.data.pageSize,
+      searchKey: this.data.searchKey,
+      sortField: this.data.sortField,
+      sortOrder: 'descend'
+    }).then(res=>{
+      res.data.rows.forEach(i => {
+        if(i.fileList.length > 0){
+          i.cover = i.fileList[0].fileUrl
+        }
+      })
+      this.setData({
+        hotArticles: [...this.data.hotArticles, ...res.data.rows],
+        loading: false,
+        pageNum: this.data.pageNum + 1
+      })
+
+      if (res.data.rows.length < 10) {
+        console.log(res.data.rows)
+        this.setData({ hasMore: false });
+      }
+    })
+  },
+
+  rank(e){
+    let rankType = e.currentTarget.dataset.type
+    this.setData({rankType})
+    this.fetchData()
+  }
+})

pages/tabpages/find/find.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "van-search": "@vant/weapp/search/index",
+    "article-card": "/components/articlecard/articlecard",
+    "van-sticky": "@vant/weapp/sticky/index",
+    "van-tag": "@vant/weapp/tag/index",
+    "van-empty": "@vant/weapp/empty/index"
+  },
+  "navigationBarTitleText": "搜索"
+}

pages/tabpages/find/find.wxml

@@ -0,0 +1,33 @@
+<van-sticky>
+  <!-- 搜索框 -->
+	<van-search
+		model:value="{{searchKey}}"
+		input-align="center"
+		use-action-slot
+		placeholder="请输入搜索关键词"
+    bind:search="onSearch"
+	>
+		<view slot="action" bind:tap="onSearch" style="margin: 0 10px;">搜索</view>
+	</van-search>
+</van-sticky>
+
+
+<view class="card-blank hot_title">
+	<view>
+		<van-icon name="fire" color="#DD001B" size="18px" />
+		<text style="margin-left: 10px;">热门文章</text>
+	</view>
+	<!-- <van-button type="info" size="small" bindtap="rank" data-type="all">全部</van-button>
+	<van-button type="info" size="small" bindtap="rank" data-type="collectionNum">收藏榜</van-button>
+	<van-button type="info" size="small" bindtap="rank" data-type="downloadNum">下载榜</van-button> -->
+</view>
+
+<scroll-view scroll-y="true" scroll-x="false" bindscrolltolower="onReachBottom">
+  <view class="card" wx:for="{{hotArticles}}" wx:key="{{index}}">
+    <article-card data="{{item}}" />
+  </view>
+  <view hidden="{{!hasMore}}" class="loading-more">加载中...</view>
+  <view hidden="{{!loading}}" class="loading-icon">loading...</view>
+</scroll-view>
+
+<van-empty wx:if="{{hotArticles.length==0}}" description="没有更多文章了~" />

pages/tabpages/find/find.wxss

@@ -0,0 +1,26 @@
+
+
+.hot_title{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.hot_title>view{
+	flex: 1;
+}
+
+.hot_title van-button{
+	margin-left: 10px;
+}
+
+.hot_title  .van-button{
+	background-color: #E9F2FF;
+	color: #1E80FF;
+	border: none;
+	font-size: 10px;
+	height: 22px;
+	line-height: 22px;
+	min-width: 50px;
+	padding: 0 4px;
+}