封装请求拦截器

jsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "types": [
-      "@dcloudio/types",
-      "miniprogram-api-typings",
-      "mini-types"
-    ]
+    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   }
 }

src/components/Navbar.vue

@@ -0,0 +1,87 @@
+<template>
+  <!-- 导航条 -->
+  <view class="navbar" :style="{ paddingTop: paddingTop + 'px' }">
+    <!-- 文字logo -->
+    <view class="logo">
+      <text>{{ title }}</text>
+    </view>
+    <!-- 搜索条 -->
+    <view class="search">
+      <text class="icon-search">UDI码信息查询</text>
+      <uni-icons type="search" size="30"></uni-icons>
+      <uni-icons type="scan" size="30"></uni-icons>
+    </view>
+  </view>
+</template>
+
+<script>
+// 引入vuex
+import { mapState } from 'vuex';
+export default {
+  computed: {
+    ...mapState(['safeArea']),
+  },
+
+  data() {
+    return {
+      paddingTop: 0,
+      title: 'UDI码信息查询',
+    };
+  },
+  created() {
+    this.paddingTop = uni.getSystemInfoSync().safeArea.top;
+    console.log(
+      'this.paddingTop',
+      this.paddingTop,
+      uni.getSystemInfoSync().safeArea.top
+    );
+  },
+};
+</script>
+
+<style lang="scss">
+.navbar {
+  background-color: #00c09d;
+  background-size: cover;
+  position: relative;
+  overflow: hidden;
+
+  .logo {
+    display: flex;
+    align-items: center;
+    height: 64rpx;
+    padding-left: 30rpx;
+
+    text {
+      flex: 1;
+      line-height: 28rpx;
+      color: #fff;
+      margin: 10rpx 0 0 0;
+      font-size: 40rpx;
+      text-align: center;
+    }
+  }
+
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10rpx 0 26rpx;
+    height: 64rpx;
+    margin: 16rpx 20rpx;
+    color: #fff;
+    font-size: 28rpx;
+    border-radius: 32rpx;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .icon-search {
+    &::before {
+      margin-right: 10rpx;
+    }
+  }
+  .icon-scan {
+    font-size: 30rpx;
+    padding: 15rpx;
+  }
+}
+</style>

src/pages.json

@@ -14,7 +14,10 @@
     },
     {
       "path": "pages/information/index",
-      "style": {}
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "white"
+      }
     },
     {
       "path": "pages/exist/index",

src/pages/information/index.vue

@@ -1,26 +1,9 @@
 <template>
   <!-- UDI码信息查询 -->
-  <view class="box">
-    <!-- 扫码 -->
-    <view class="header">
-      <input
-        focus
-        placeholder="请扫条码"
-        style="border: 1px solid #00a8e1; height: 30px; width: 70vw"
-      />
-      <uni-icons
-        type="search"
-        size="30"
-        color="#52bee3"
-        style="margin: 0 5px"
-      ></uni-icons>
-      <uni-icons
-        type="scan"
-        size="30"
-        color="#52bee3"
-        style="margin: 0 10px 0 5px"
-      ></uni-icons>
-    </view>
+
+  <view>
+    <Navbar></Navbar>
+
     <!-- 产品详情信息 -->
     <uni-section border>
       <uni-collapse ref="collapse" v-model="value">
@@ -41,27 +24,15 @@
   </view>
 </template>
 <script>
+import Navbar from '@/components/Navbar.vue';
 export default {
+  components: { Navbar },
   data() {
-    return {
-      value: ['0'],
-      content:
-        '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
-    };
+    return {};
   },
+  created() {},
   methods: {},
   onLoad() {},
 };
 </script>
-<style scoped lang="scss">
-.box {
-  display: flex;
-  padding: 0 20px;
-  flex-wrap: wrap;
-  .header {
-    width: 100vw;
-    display: flex;
-    justify-content: space-around;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/store/index.js

@@ -7,7 +7,9 @@ Vue.use(Vuex); //vue的插件机制
 //Vuex.Store 构造器选项
 const store = new Vuex.Store({
   // 使用模块
-  state: {},
+  state: {
+    safeArea: uni.getSystemInfoSync().safeArea,
+  },
   getters: {},
   modules: {},
   plugins: [persistence()], //持久化插件

src/utils/http.js

@@ -0,0 +1,36 @@
+const baseURL = ''; //基地址
+const request = {
+  invoke(args) {
+    uni.showLoading({ title: '加载中' });
+    if (!args.url.startsWith('http')) {
+      args.url = baseURL + args.url;
+    }
+    args.header = {
+      ...args.header, // 保留原本的 header
+      'source-client': 'miniapp', // 添加小程序端调用标识
+    };
+  },
+  complete(res) {
+    uni.hideLoading();
+  },
+};
+uni.addInterceptor('request', request);
+uni.addInterceptor('uploadFile', request);
+
+export default (options) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      ...options,
+      success(res) {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(res.data);
+        } else {
+          reject(res);
+        }
+      },
+      fail(err) {
+        reject(res);
+      },
+    });
+  });
+};