fix: 优化文章列表和我的随手拍列表 接入接口

components/LoadMore/index.vue

+<template>
+  <view>
+    <u-loadmore :status="status" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'LoadMore',
+
+  props: {
+    status: {
+      type: String,
+      default: 'loading',
+    },
+  },
+
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import 'index.scss';
+</style>

pages/article-list/index.vue

@@ -9,12 +9,12 @@
       </view>
     </view>
     <view class="line"></view>
-    <view v-if="!articleLoading && !articleList.length" class="data_none">
+    <view v-if="!articleLoading && !articleList.data.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%" @click="onArticleClick(item, index)">
+      <view v-for="(item, index) in articleList.data" :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>
@@ -38,19 +38,23 @@
           <image class="article_img" mode="aspectFill" :src="item.img" />
         </view>
       </view>
+
+      <LoadMore :status="articleList.status" />
     </view>
   </view>
 </template>
 
 <script>
-import { articleSort, articleList } from '@/pages/article-list/mock';
+import { getList, createList } from '@/utils/list';
+import LoadMore from '@/components/LoadMore';
 
 export default {
+  components: { LoadMore },
   data() {
     return {
       articleTypeList: [],
       articleTypeId: 0,
-      articleList: [],
+      articleList: createList(),
       articleIdx: 0,
       articleLoading: true,
       id: null,
@@ -64,6 +68,10 @@ export default {
     this.fetchArticleTypeData();
   },
 
+  onReachBottom() {
+    this.fetchArticleData();
+  },
+
   methods: {
     async fetchArticleTypeData() {
       const { list } = await uni.$u.http.get('/api/app/articletype/list');
@@ -74,12 +82,21 @@ export default {
 
     async fetchArticleData() {
       this.articleLoading = true;
-      const { list } = await uni.$u.http.get('/api/article/list', {
-        params: {
-          article_type_id: this.articleTypeId,
-        },
-      });
-      this.articleList = list;
+      const articleTypeId = this.articleTypeId;
+
+      await getList(
+        this,
+        'articleList',
+        [
+          '/api/article/list',
+          {
+            article_type_id: this.articleTypeId,
+          },
+        ],
+        {
+          abandon: () => articleTypeId !== this.articleTypeId,
+        }
+      );
       this.articleLoading = false;
     },
 
@@ -87,6 +104,7 @@ export default {
       if (this.articleIdx === index) return;
       this.articleIdx = index;
       this.articleTypeId = item.id;
+      this.articleList = createList();
       this.fetchArticleData();
     },
 

pages/index/index.vue

@@ -5,7 +5,7 @@
       <view style="height: 28rpx" />
       <view style="display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx">
         <image class="logo" mode="widthFix" src="/static/text_sy_tit@2x.png" />
-        <view class="address">
+        <view class="address" @click="onGetAddress">
           <view class="address-text">{{ address }}</view>
           <image class="address-icon" mode="widthFix" src="/static/icon/ic_dizhi@2x.png" />
         </view>
@@ -142,6 +142,14 @@ export default {
     onArticleClick(item, index) {
       uni.$u.route({ url: 'pages/article-detail/index', params: { id: item.id } });
     },
+
+    onGetAddress() {
+      uni.chooseLocation({
+        success: (result) => {
+          this.address = result.address;
+        },
+      });
+    },
   },
 };
 </script>

pages/mine-picture/index.vue

@@ -37,6 +37,7 @@
             </view>
           </view>
         </view>
+        <LoadMore v-if="list.status !== 'empty'" :status="list.status" />
       </template>
       <template v-if="ExamineIdx === 1">
         <view class="detail" v-for="(item, index) in list.data" :key="item.id" @click="onItemClick(item, index)">
@@ -66,6 +67,7 @@
             </view>
           </view>
         </view>
+        <LoadMore v-if="list.status !== 'empty'" :status="list.status" />
       </template>
       <template v-if="ExamineIdx === 2">
         <view class="detail" v-for="(item, index) in list.data" :key="item.id" @click="onItemClick(item, index)">
@@ -96,6 +98,7 @@
             </view>
           </view>
         </view>
+        <LoadMore v-if="list.status !== 'empty'" :status="list.status" />
       </template>
 
       <view class="data_none" v-if="list.data.length === 0 && list.status !== 'loading'">
@@ -109,8 +112,10 @@
 <script>
 import { examineItem, examineList } from '@/pages/mine-picture/mock';
 import { getList, createList } from '@/utils/list';
+import LoadMore from '@/components/LoadMore';
 
 export default {
+  components: { LoadMore },
   data() {
     return {
       examineItem,