ajax 统一封装

liuqimichale
1 parent 455431ac
Showing 10 changed files with 222 additions and 12 deletions
config/index.js
package.json
src/api/parkRecord/parkRecord.js
src/components/orderPay.vue
src/components/parkRecord.vue
src/router/index.js
src/utils/common.js
src/utils/request.js
src/utils/utils.js
src/utils/variables.js
@@ -10,7 +10,15 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api/': {
+        target: 'http://39.98.54.240:8090/',
+        changeOrigin: true,
+        pathRewrire: {
+          '^/api': ''
+        }
+      }
+    },
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
@@ -20,7 +28,7 @@ module.exports = {
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-    
+
     /**
      * Source Maps
      */
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "css-loader": "^3.6.0",
     "less-loader": "^4.1.0",
     "sass-loader": "^7.3.1",
+import request from '@/utils/request'
+
+export function parkRecordList(params) {
+  return request({
+    url: '/queryParkOrder/queryParkingRecordPageByCarNumbers',
+    method: 'post',
+    data: params
+  })
+}
 <template>
   <div>
     <div class="car-wrap">
-      <div class="carBG">
-        <p>蒙DT849</p>
-        <p>D36.0123</p>
+      <div class="carBG" :class="carWrapBG | formateColor">
+        <p class="carNumber">{{carNumber}}</p>
+        <p class="payFee">{{payFee/100}}.00元</p>
       </div>
     </div>
+    <ul class="fee-wrap">
+      <li>
+        <span>待缴金额</span>
+        <span>36.00</span>
+      </li>
+      <li>
+        <span>优惠金额</span>
+        <span>36.00</span>
+      </li>
+      <li>
+        <span>应付金额</span>
+        <span>36.00</span>
+      </li>
+    </ul>
+    <div style="padding: 20px 18px">
+      <div class="toPay">微信支付</div>
+    </div>
+
+    <p class="tip">
+      温馨提示：
+    </p>
+    <p style="color: #666;padding: 0 18px;">
+      请在支付完成后15分钟内出场，如超出15分钟，会
+      产生相应费用。
+    </p>
+
+
   </div>
 </template>
 <script>
 export default {
-  name: 'orderPay'
+  name: 'orderPay',
+  data() {
+    return {
+      carWrapBG: 0,
+      carNumber: '京A12312',
+      payFee: 0
+    }
+  },
+  created() {
+    this.carWrapBG = this.$route.query.carColor
+  },
+  filters:{
+    formateColor(val){
+      switch (val) {
+        case '0':
+          return 'carBlue'
+          break;
+        case '1':
+          return 'carYellow'
+          break;
+        case '2':
+          return 'carGreen'
+          break;
+        case '3':
+          return 'carWhite'
+          break;
+        case '4':
+          return 'carBlack'
+          break;
+      }
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
   .car-wrap {
     padding: 7px 7px;
+    background: #FFF;
   }
   .carBG {
     width: 100%;
     height: 130px;
+  }
+  .carBlue{
+    background: url("../assets/images/blueBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .carYellow{
     background: url("../assets/images/yellowBG.png") no-repeat;
     background-size: 100% 100%;
   }
+  .carGreen{
+    background: url("../assets/images/greenBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .carWhite{
+    background: url("../assets/images/whiteBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .carBlack{
+    background: url("../assets/images/blackBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carNumber {
+    padding: 20px 0 10px;
+    font-size: 30px;
+    color: #fff;
+    text-align: center;
+  }
+
+  .payFee {
+    font-size: 24px;
+    color: #FF7B7B;
+    text-align: center;
+  }
+
+  .fee-wrap {
+    background: #FFF;
+    padding: 0 18px;
+    > li {
+      display: flex;
+      justify-content: space-between;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #EAEAEA;
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+  }
+
+  .toPay {
+    width: 100%;
+    height: 44px;
+    margin: 0 auto;
+    line-height: 44px;
+    text-align: center;
+    background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+    border-radius: 4px;
+    border: 1px solid #0D72E2;
+    font-size: 20px;
+    color: #FFF;
+    cursor: pointer;
+  }
+  .tip{
+    padding-left: 40px;
+    background: url("../assets/images/free-tip.png") no-repeat 18px center;
+    background-size: 16px 16px;
+    color: #666;
+  }
 </style>
@@ -19,7 +19,7 @@
           <div class="cost-main" >
             <ul class="cost-header">
-              <li :class="carColor | formatColor">蒙DMW169</li>
+              <li :class="carColor | formateColor">蒙DMW169</li>
               <li>本次费用</li>
             </ul>
@@ -61,7 +61,7 @@
             :class="{isChecked: i.checked}"
           >
             <ul class="cost-header">
-              <li :class="carColor | formatColor">蒙DMW169</li>
+              <li :class="carColor | formateColor">蒙DMW169</li>
               <li>欠费</li>
             </ul>
@@ -123,6 +123,8 @@
 </template>
 <script>
+import { parkRecordList } from '@/api/parkRecord/parkRecord.js'
+
 export default {
   name: 'parkRecord',
   data() {
@@ -151,8 +153,18 @@ export default {
   created() {
     this.carNumber = this.$route.query.carNumber  // 获取车牌号
     console.log(this.carNumber)
+    this.parkRecordList(this.carNumber)
   },
   methods: {
+    parkRecordList(){
+      parkRecordList({}).then(res => {
+        console.log(res)
+
+      })
+    },
+
+
+
     tabHandle(index) { // tab 切换
       this.currentTabActive = index
     },
@@ -194,11 +206,18 @@ export default {
         this.$refs.alert.open()
         return
       }
-      this.$router.push({path:'orderPay'})
+      this.$router.push(
+        {
+          path:'orderPay',
+          query:{
+            carColor:0
+          }
+        }
+      )
     }
   },
   filters: {
-    formatColor(val) {
+    formateColor(val) {
       switch (val) {
         case 0:
           return 'carBlue'
@@ -9,8 +9,9 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'plateNumber',
-      component: plateNumber
+      redirect: {
+        name: 'parkRecord'
+      }
     },
     {
       path: '/plateNumber',
+import axios from 'axios'
+
+// let _userToken = sessionStorage.getItem('userToken')
+// let _url = process.env.API_ROOT
+// axios.defaults.baseURL = process.env.API_ROOT
+const service = axios.create({
+  // baseURL: 'http://47.104.196.152:8081', // url = base url + request url
+  //baseURL: _url, // url = base url + request url
+
+  baseURL: '/api', // url = base url + request url
+  withCredentials: true, // send cookies when cross-domain requests
+  timeout: 6000 // request timeout
+})
+
+service.interceptors.request.use(
+  config => {
+    // let token = _userToken
+    // //let  token='298bd7ff-a025-4145-a4a3-554769375b48';
+    // config.headers['X-Auth-Token'] = token
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code != '8888') {
+      return res
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+export default service