feat: 增加各页面公共请求

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "amfe-flexible": "^2.2.1",
+    "axios": "^0.18.0",
     "jsbarcode": "^3.6.0",
     "vant": "^1.4.1",
     "vconsole": "^3.2.2",

src/api/cards.js

+/**
+ * 卡券 api
+ */
+import { postJson } from './request';
+
+/* Common */
+export const getCardsData = data => postJson('/vip/getvouchers', data);

src/api/index.js

+/**
+ * 首页 api
+ */
+import { postJson } from './request';
+
+/* Common */
+export const getIndexData = data => postJson('/vip/getvouchers', data);

src/api/point.js

+/**
+ * 积分 api
+ */
+import { postJson } from './request';
+
+/* Common */
+export const getPointData = data => postJson('/vip/getvouchers', data);

src/api/record.js

+/**
+ * 积分 api
+ */
+import { postJson } from './request';
+
+/* Common */
+export const getRecordData = data => postJson('/vip/getvouchers', data);

src/api/request.js

 import axios from 'axios';
-import store from '@/store';
+import store from '../store/index';
+import qs from 'qs';
+import {  Toast } from 'vant';
 
-let local = window.location.origin;
-if (local.indexOf('localhost') != -1) {
-  local = 'http://www.gicdev.com';
+let local = '';
+if (process.env.NODE_ENV === 'development') {
+  local = 'https://apitest.pbwear.com';
+}else {
+  local = 'https://api.pbwear.com';
 }
+let loading = '';
 
 // 创建axios 实例
 const service = axios.create({
   baseURL: local, // api的base_url
-  timeout: 20000 // 请求超时时间
+  timeout: 20000, // 请求超时时间
+  withCredentials: true,
 })
 
 // request 拦截器
 service.interceptors.request.use(
   config => {
-    // 这里可以自定义一些config 配置
-
-    // loading + 1
+    loading = Toast.loading({
+      duration: 0, // 持续展示 toast
+      mask: true,
+      forbidClick: true, // 禁用背景点击
+      loadingType: 'spinner',
+      message: ' '
+    });
+    // loading true
     store.dispatch('SetLoading', true);
-
     return config;
   },
   error => {
-    //  这里处理一些请求出错的情况
-
-    // loading 清 0
+    loading.clear();
+    // loading false
     setTimeout(function() {
-      store.dispatch('SetLoading', 0);
+      store.dispatch('SetLoading', false);
     }, 300)
-
-    console.log(error)
     Promise.reject(error);
   }
 )
@@ -38,22 +45,150 @@ service.interceptors.request.use(
 // response 拦截器
 service.interceptors.response.use(
   response => {
-    const res = response.data
-      // 这里处理一些response 正常放回时的逻辑
-
-    // loading - 1
-    store.dispatch('SetLoading', false)
-
-    return res
+    const res = response.data;
+    loading.clear();
+    // loading false
+    store.dispatch('SetLoading', false);
+    return res;
   },
   error => {
-    // 这里处理一些response 出错时的逻辑
+    loading.clear();
+    // loading false
+    store.dispatch('SetLoading', false);
+    return Promise.reject(error);
+  }
+)
+
+// export default service
+/*
+ *
+ * 统一响应处理
+ * @url:
+ *
+ */
+function handleResponse(code, msg) {
+  switch (code) {
+    case 0:
+      Toast(msg);
+      break;
+  }
+  Toast(msg);
+}
 
-    // loading - 1
-    store.dispatch('SetLoading', false)
+/*
+ *
+ * 统一 get 请求方法
+ * @url: 请求的 url
+ * @params: 请求带的参数
+ * @header: 带 token
+ *
+ */
 
-    return Promise.reject(error)
+export const getRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'get',
+      url: `${local}${url}`,
+      data: {},
+      params: params,
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },// "token": token
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/*
+ *
+ * 统一 post 请求方法
+ * url: 请求的 url
+ * @params: 请求带的参数
+ * @header:
+ *
+ */
+
+export const postRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: qs.stringify(params),
+      headers: { 'content-type': 'application/x-www-form-urlencoded' }
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export const postJsonRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: "{}",
+      params: params,
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+    }).then(res => {
+      resolve(res);
+    }).catch(error => {
+      reject(error);
+    })
+  })
+}
+
+/*
+ * method: 'post'
+ * 'Content-Type': 'application/json;charset=UTF-8'
+ * @data: params
+ * @requestProject: 'web'
+ *
+ */
+
+export const postJson = (url, params) => {
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: params,
+      params: { requestProject: 'web' },
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+    }).then(res => {
+      if (res.errorCode != 0) {
+        handleResponse(res.errorCode, res.message);
+        reject(res);
+      } else {
+        resolve(res);
       }
-)
+    }).catch(error => {
+      reject(error);
+    })
+  })
+}
 
-export default service
\ No newline at end of file
+/*
+ * method: 'post'
+ * @data: params
+ *
+ */
+export const postForm = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: params,
+      headers: {}
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}

src/assets/css/index.css

@@ -43,7 +43,7 @@ body {
 
 .clique-menu {
   width: 100%;
-  padding: 15px 0;
+  padding: 25px 0;
 }
 
 .clique-menu-cell:after {
@@ -53,6 +53,7 @@ body {
 
 .clique-menu p {
   text-align: center;
+  margin-top: 10px;
 }
 
 .van-swipe__indicator {

src/assets/js/public.js

 /**
  * 手机号格式化
+ * import formatPhone from '@/assets/js/public.js';
+ * formatPhone.formatPhone(12345678900)
  * @param {String} phone
  */
 const formatPhone = (phone) => {

src/store/index.js

-import Vuex from 'vuex';
 import Vue from 'vue';
+import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
     bodyH: document.documentElement.clientHeight,
+    reqLoading: false
   },
   mutations: {
-
+    setReqLoading(state, data) {
+      state.reqLoading = data;
+    }
   },
-  action: {
-
+  actions: {
+    SetLoading({ commit }, flag) {
+      commit('setReqLoading', flag)
+    }
   }
 })

src/views/cards/index.vue

@@ -47,17 +47,15 @@
 </template>
 
 <script>
-import formatPhone from '@/assets/js/public.js';
-import { Icon } from 'vant';
+import { Icon, Toast } from 'vant';
+import { getCardsData } from '@/api/cards.js';
 export default {
   name: "cards",
   components: {
     [Icon.name]: Icon
   },
-
   data() {
     return {
-
       cardList: [
         {
           brandName: 'MATERIAL GIRL',
@@ -123,11 +121,28 @@ export default {
     showPartData(item) {
       // const that = this;
       item.showCount = 3;
+    },
+
+    async getCardList() {
+      const that = this;
+      let params = {
+        CardNo: '',
+        SecretId: '',
+        Timestamp: '',
+        Signature: ''
+      }
+      let resData = await getCardsData(params);
+      if (resData.errcode == 1) {
+        that.cardList = resData.result;
+      }else {
+        Toast(resData.message);
+      }
     }
   },
   mounted(){
     /* eslint-disable */
-    console.log( formatPhone.formatPhone(12345678900) );
+
+    this.getCardList();
   }
 };
 </script>

src/views/index/index.vue

@@ -8,17 +8,17 @@
     <section>
       <div class="clique-qrcode">
         <svg id="barcode"></svg>
-        <p class="font-13 color-232326">18790876890</p>
+        <p class="font-13 color-232326">{{ userData.phoneNumber }}</p>
       </div>
     </section>
     <section>
       <div class="clique-menu flex">
         <div class="flex-1 flex flex-column clique-menu-cell" @click="changeRoute('point')">
-          <p class="color-232326 font-20 font-w-500">10,000</p>
+          <p class="color-232326 font-20 font-w-500">{{ userData.AvailableIntegral }}</p>
           <p class="color-848689 font-14 m-t-6">可用积分</p>
         </div>
         <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('records')">
-          <p class="color-232326 font-20 font-w-500">2</p>
+          <p class="color-232326 font-20 font-w-500">{{ userData.record }}</p>
           <p class="color-848689 font-14 m-t-6">消费记录</p>
         </div>
         <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('cards')">
@@ -72,12 +72,9 @@
 </template>
 
 <script>
+import { Swipe, SwipeItem, Icon } from 'vant';
 import JsBarcode from 'jsbarcode';
-import {
-  Swipe,
-  SwipeItem,
-  Icon
-} from 'vant';
+import { getIndexData } from '@/api/index.js';
 
 export default {
   components: {
@@ -89,6 +86,12 @@ export default {
   data() {
     return {
       cliqueCard: false, // 是否有集团卡
+      userData: {
+        cardNumber: '122223334444f',
+        phoneNumber: '18790876890',
+        AvailableIntegral: '10,000',
+        record: 2
+      },
       banners: {
         title: 'test',
         price: 2680,
@@ -182,18 +185,30 @@ export default {
     /**
      * 生成条形码
      */
-    barcode() {
-      JsBarcode("#barcode", "122223334444f",{
+    barcode(code) {
+      JsBarcode("#barcode", code, {
         format: 'CODE128',
         displayValue: false,
         background: "#ffffff",
         height: '60'
       })
+    },
+
+    /**
+     * 获取数据
+     */
+    async getData() {
+      const that = this;
+      let resData = await getIndexData();
+      if (resData.errorCode == 1) {
+        that.userData = resData;
+        that.barcode(that.userData.cardNumber);
+      }
     }
   },
   mounted() {
     let that = this;
-    that.barcode();
+    that.barcode('123456789766');
   }
 };
 </script>
@@ -284,6 +299,4 @@ export default {
     }
   }
 }
-
-
 </style>

src/views/point/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="point-body" :style="{'min-height': $store.state.bodyH - 113 + 'px'}">
       <van-list
-        v-if="list.length"
+        v-if="!!list.length"
         v-model="loading"
         :finished="finished"
         finished-text=" "
@@ -32,6 +32,7 @@
 
 <script>
 import { List  } from 'vant';
+import { getPointData } from '@/api/point.js';
 export default {
   name: "point",
   components: {
@@ -64,16 +65,32 @@ export default {
       // 异步更新数据
       setTimeout(() => {
         for (let i = 0; i < 10; i++) {
-          // this.list.push(this.list.length + 1);
+          this.list.push({
+            name: '今日签到',
+            brandName: '[MATERIAL GIRL]',
+            date: '2018-12-06 10:32',
+            point: '5'
+          });
         }
         // 加载状态结束
         that.loading = false;
 
         // 数据全部加载完成
-        if (that.list.length >=1) {
+        if (that.list.length >= 50) {
           that.finished = true;
         }
       }, 500);
+    },
+
+    /**
+     * 获取积分数据
+     */
+    async getData() {
+      const that = this;
+      let resData = await getPointData();
+      if (resData.errorCode == 1) {
+        that.list = resData;
+      }
     }
   }
 };

src/views/records/index.vue

@@ -2,7 +2,7 @@
   <div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
     <div class="list-contian">
       <van-list
-        v-if="list.length"
+        v-if="!!list.length"
         v-model="loading"
         :finished="finished"
         finished-text=" "
@@ -43,6 +43,7 @@
 
 <script>
 import { List, Icon  } from 'vant';
+import { getRecordData } from '@/api/record.js';
 export default {
   name: "record",
   components: {
@@ -127,6 +128,17 @@ export default {
           that.finished = true;
         }
       }, 500);
+    },
+
+    /**
+     * 获取消费记录数据
+     */
+    async getData() {
+      const that = this;
+      let resData = await getRecordData();
+      if (resData.errorCode == 1) {
+        that.list = resData;
+      }
     }
   }
 };

vue.config.js

@@ -5,6 +5,10 @@ const path = require('path');
 module.exports = {
   outputDir: 'dist',
   publicPath: process.env.NODE_ENV === 'production' ? './' : './',
+  /* devServer: {
+      host: "localhost",
+      port: 8006, // 端口号
+  }, */
   css: {
     loaderOptions: {
       postcss: {