feat: 首页页面 接入接口

main.js

@@ -14,6 +14,10 @@ App.mpType = 'app';
 const app = new Vue({
   ...App,
 });
+
+// 引入请求封装，将app参数传递到配置中
+require('@/utils/request.js')(app);
+
 app.$mount();
 // #endif
 

manifest.json

@@ -73,9 +73,10 @@
         "devServer" : {
             "proxy" : {
                 "/api" : {
-                    "target" : "https://csssptest.yuhuofei.cn",
+//                    "target" : "https://csssptest.yuhuofei.cn",
+                    "target" : "https://devrxssph5.yuhuofei.cn/",
                     "pathRewrite" : {
-                        "^/api" : ""
+//                        "^/api" : ""
                     }
                 }
             }

pages/index/index.vue

 <template>
   <view>
     <view class="wrapper">
-      <view style="height: 256rpx" />
+      <!--      <view style="height: 256rpx" />-->
+      <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">
@@ -43,7 +44,7 @@
             <view :class="[articleTypeAction === index ? 'article-task-line--action' : 'article-task-line--none']" />
           </view>
         </view>
-        <view v-for="(item, index) in articleList" :key="item.id">
+        <view v-for="(item, index) in articleList" :key="item.id" @click="onArticleClick(item, index)">
           <view v-if="index < 3" class="article-content">
             <view class="article-left">
               <view class="article-title">{{ item.title }}</view>
@@ -68,7 +69,7 @@
             <!--              <navigator hover-class="none" class="article_container" url="/package-one/article-detail/article-detail?id={{item.id}}"> </navigator>-->
           </view>
         </view>
-        <view class="look_more" bindtap="articleMore">查看更多</view>
+        <view class="look_more" @click="articleMore">查看更多</view>
       </view>
 
       <view style="background-color: #f6f6f6; width: 100%; height: 20rpx" />
@@ -77,21 +78,52 @@
 </template>
 
 <script>
-import { articleList, articleTypeList, bannerList, noticeList } from '@/pages/index/mock';
-
 export default {
   data() {
     return {
       address: '获取位置',
-      bannerList,
-      noticeList,
-      articleTypeList,
+      bannerList: [],
+      noticeList: [],
+      articleTypeList: [],
       articleTypeAction: 0,
-      articleList,
+      articleTypeId: 0,
+      articleList: [],
     };
   },
-  onLoad(query) {},
+
+  onLoad(query) {
+    this.fetchBannerData();
+    this.fetchNoticeData();
+    this.fetchArticleTypeData();
+  },
+
   methods: {
+    async fetchBannerData() {
+      const { list } = await uni.$u.http.get('/api/app/banner/list');
+      this.bannerList = list;
+    },
+
+    async fetchNoticeData() {
+      const { list } = await uni.$u.http.get('/api/app/notice/list');
+      this.noticeList = list;
+    },
+
+    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() {
+      const { list } = await uni.$u.http.get('/api/article/list', {
+        params: {
+          article_type_id: this.articleTypeId,
+        },
+      });
+      this.articleList = list;
+    },
+
     selectAddress() {
       console.log('获取位置');
     },
@@ -99,6 +131,16 @@ export default {
     onArticleTypeClick(item, index) {
       if (this.articleTypeAction === index) return;
       this.articleTypeAction = index;
+      this.articleTypeId = item.id;
+      this.fetchArticleData();
+    },
+
+    articleMore() {
+      uni.$u.route({ url: 'pages/article-list/index' });
+    },
+
+    onArticleClick(item, index) {
+      uni.$u.route({ url: 'pages/article-detail/index', params: { id: item.id } });
     },
   },
 };

utils/request.js

+// 此vm参数为页面的实例，可以通过它引用vuex中的变量
+module.exports = (vm) => {
+  // 初始化请求配置
+  uni.$u.http.setConfig((config) => {
+    return config;
+  });
+
+  // 请求拦截
+  uni.$u.http.interceptors.request.use(
+    (config) => {
+      config.data = config.data || {};
+
+      // config.header.token = '1234qwer1234';
+      config.params.token = '1234qwer1234';
+      return config;
+    },
+    (config) => {
+      return Promise.reject(config);
+    }
+  );
+
+  // 响应拦截
+  uni.$u.http.interceptors.response.use(
+    (response) => {
+      const data = response.data;
+
+      if (data.errcode) uni.$u.toast(data.msg);
+      return data.data === undefined ? {} : data.data;
+    },
+    (response) => {
+      // 对响应错误做点什么 （statusCode !== 200）
+      return Promise.reject(response);
+    }
+  );
+};