前端处理开发环境跨域

H5/src/utils/request.js

@@ -4,7 +4,7 @@ import { Toast } from "vant";
 let loading = null;
 
 const service = axios.create({
-  baseURL: "http://8.131.244.76:81/shop-mall",
+  baseURL: "/shop-mall",
   timeout: 5000
 });
 

H5/src/views/income/allIncome.vue

 <template>
   <div class="all-income">
-    <div v-for="item in 10" :key="item.id" class="list-item">
-      <span style="color:#333333">2021-02</span>
-      <span>+989</span>
+    <div v-for="item in incomeList" :key="item.id" class="list-item">
+      <span style="color:#333333">{{ item.yearMonth }}</span>
+      <span>{{ item.income }}</span>
     </div>
   </div>
 </template>
 
+<script>
+import { showIncomeRecord } from "@/api/wallet";
+
+export default {
+  name: "AllIncome",
+  data() {
+    return {
+      incomeList: []
+    };
+  },
+  monted() {
+    this.getAllRecord();
+  },
+  methods: {
+    getAllRecord() {
+      const params = {
+        userId: "5"
+      };
+      showIncomeRecord(params).then(res => {
+        if (res.code === 0) {
+          this.incomeList = res.data;
+        }
+      });
+    }
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 .all-income {
   box-sizing: border-box;

H5/src/views/income/income-detail.vue

@@ -15,7 +15,7 @@
             >
               <span>工资收益</span>
               <span>￥55</span>
-              <span class="time">2021/02/26 10:02</span>
+              <span class="time">2021.02.26 10:02</span>
             </div>
           </div>
         </base-refresh-scroll>

H5/src/views/income/wallet.vue

@@ -7,7 +7,7 @@
       >
         当月收益
       </p>
-      <div style="position:absolute;top:178px;width:100%">
+      <div style="position:absolute;top:178px;width:100%" @click="jumpToIncomeDetail">
         <span class="month-income">{{ walletInfo.moneyIncome }}</span>
         <img
           src="@/assets/images/右箭头.png"
@@ -19,7 +19,7 @@
         <div class="income-item">
           <img src="@/assets/images/待结算.png" alt />
           <p>累计收益</p>
-          <div>
+          <div @click="jumpToAll">
             <span class="money">{{ walletInfo.totalIncome }}</span>
             <img
               src="@/assets/images/右箭头.png"
@@ -31,7 +31,7 @@
         <div class="income-item">
           <img src="@/assets/images/累计收入.png" alt />
           <p>未提余额</p>
-          <div>
+          <div @click="jumpToCanCashOut">
             <span class="money">{{ walletInfo.currentMoneyCan }}</span>
             <img
               src="@/assets/images/右箭头.png"
@@ -59,9 +59,9 @@ export default {
   data() {
     return {
       walletInfo: {
-        currentMoneyCan: null, // 本月可提现
-        moneyIncome: null, // 本月收益
-        totalIncome: null // 累计收益
+        currentMoneyCan: 0, // 本月可提现
+        moneyIncome: 0, // 本月收益
+        totalIncome: 0 // 累计收益
       }
     };
   },
@@ -69,6 +69,18 @@ export default {
     this.getWalletInfo();
   },
   methods: {
+    // 跳转到可提现界面 
+    jumpToCanCashOut() {
+      this.$router.push("/canCashOut");
+    },
+    // 跳转至收益明细
+    jumpToIncomeDetail() {
+      this.$router.push("/income/detail");
+    },
+    // 跳转至累计收益
+    jumpToAll() {
+      this.$router.push("/income/all");
+    },
     onToCashOut() {
       this.$router.push("/cash-out");
     },

H5/vue.config.js

@@ -2,6 +2,14 @@ const name = "西田森App";
 
 module.exports = {
   publicPath: "/front",
+  devServer: {
+    proxy: {
+      '/shop-mall': {
+        target: "http://8.131.244.76:81/",
+        changeOrigin: true
+      }
+    }
+  },
   css: {
     loaderOptions: {
       postcss: {