feat: 文章列表页 接入接口

pages/article-detail/index.vue

@@ -25,19 +25,20 @@
     </view>
 
     <view class="buttom_btn">
-      <view class="btn_box">
-        <view :class="[!follow ? 'btn_box_item' : 'item_active']" bindtap="follow">
-          <image v-if="!follow" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />
-          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu3@2x.png" />
-        </view>
-        <view :class="[!fabulous ? 'btn_box_item' : 'item_active2']" bindtap="fabulous">
-          <image v-if="!fabulous" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />
-          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan3@2x.png" />
-        </view>
-        <button class="btn_box_item" bindtap="showTip">
-          <image class="btn_icon" mode="aspectFill" src="/static/icon/ic_fenxiang@2x.png" />
-        </button>
-      </view>
+      <!--      <view class="btn_box">-->
+      <!--        <view :class="[!follow ? 'btn_box_item' : 'item_active']" bindtap="follow">-->
+      <!--          <image v-if="!follow" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />-->
+      <!--          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu3@2x.png" />-->
+      <!--        </view>-->
+      <!--        <view :class="[!fabulous ? 'btn_box_item' : 'item_active2']" bindtap="fabulous">-->
+      <!--          <image v-if="!fabulous" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />-->
+      <!--          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan3@2x.png" />-->
+      <!--        </view>-->
+      <!--        <button class="btn_box_item" bindtap="showTip">-->
+      <!--          <image class="btn_icon" mode="aspectFill" src="/static/icon/ic_fenxiang@2x.png" />-->
+      <!--        </button>-->
+      <!--      </view>-->
+
       <!--      <van-action-sheet v-show="showTip" cancel-text="取消" bind:close="close" bind:cancel="cancelShare">-->
       <!--        <view class="share_box">-->
       <!--          <button open-type="share" class="share_pyq_btn">分享给好友</button>-->
@@ -46,11 +47,11 @@
       <!--      </van-action-sheet>-->
     </view>
 
-    <view class="share_bg" bindtap="closetipPyq" v-if="tipPyq">
-      <view class="share_bg_box">
-        <image mode="aspectFill" class="img_pyq_tip" src="/static/img_pyq_tip@2x.png" />
-      </view>
-    </view>
+    <!--    <view class="share_bg" bindtap="closetipPyq" v-if="tipPyq">-->
+    <!--      <view class="share_bg_box">-->
+    <!--        <image mode="aspectFill" class="img_pyq_tip" src="/static/img_pyq_tip@2x.png" />-->
+    <!--      </view>-->
+    <!--    </view>-->
   </view>
 </template>
 

pages/article-list/index.vue

@@ -2,20 +2,19 @@
   <view>
     <view class="article_box">
       <view class="article_list">
-        <view class="article_item" v-for="(item, index) in articleSort" @click="changeArticle(item, index)" :key="item.name">
+        <view class="article_item" v-for="(item, index) in articleTypeList" @click="changeArticle(item, index)" :key="item.name">
           <view :class="[articleIdx === index ? 'article_active' : 'article_item_name']">{{ item.name }}</view>
           <view :class="[articleIdx === index ? 'task_line' : 'task_line_none']"></view>
         </view>
       </view>
     </view>
     <view class="line"></view>
-    <view v-if="!articleList.length" class="data_none">
+    <view v-if="!articleLoading && !articleList.length" class="data_none">
       <image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
       <view class="data_title">暂无数据</view>
     </view>
     <view class="article_boxs">
-      <view v-for="(item, index) in articleList" :key="item.index" style="width: 100%">
-        <navigator hover-class="none" url="/package-one/article-detail/article-detail?id=item.id" />
+      <view v-for="(item, index) in articleList" :key="item.index" style="width: 100%" @click="onArticleClick(item, index)">
         <view class="article_container" style="width: 100%">
           <view class="article_left">
             <view class="article_title">{{ item.title }}</view>
@@ -49,19 +48,50 @@ import { articleSort, articleList } from '@/pages/article-list/mock';
 export default {
   data() {
     return {
-      articleSort,
-      articleList,
+      articleTypeList: [],
+      articleTypeId: 0,
+      articleList: [],
       articleIdx: 0,
+      articleLoading: true,
       id: null,
       ifShare: true,
       is_fabulous: null, // 点赞
       is_follow: null, // 关注
     };
   },
+
+  onLoad(query) {
+    this.fetchArticleTypeData();
+  },
+
   methods: {
+    async fetchArticleTypeData() {
+      const { list } = await uni.$u.http.get('/api/app/articletype/list');
+      this.articleTypeList = list;
+      this.articleTypeId = list[0]?.id ?? 0;
+      this.fetchArticleData();
+    },
+
+    async fetchArticleData() {
+      this.articleLoading = true;
+      const { list } = await uni.$u.http.get('/api/article/list', {
+        params: {
+          article_type_id: this.articleTypeId,
+        },
+      });
+      this.articleList = list;
+      this.articleLoading = false;
+    },
+
     async changeArticle(item, index) {
       if (this.articleIdx === index) return;
       this.articleIdx = index;
+      this.articleTypeId = item.id;
+      this.fetchArticleData();
+    },
+
+    onArticleClick(item, index) {
+      uni.$u.route({ url: 'pages/article-detail/index', params: { id: item.id } });
     },
   },
 };