Bläddra i källkod

feat: axios完善,接口联调

黎海 2 år sedan
förälder
incheckning
7a7678fbcc

+ 1 - 0
package.json

@@ -14,6 +14,7 @@
14 14
     "axios": "^0.27.2",
15 15
     "crypto-js": "^3.1.9-1",
16 16
     "element-ui": "^2.8.2",
17
+    "js-cookie": "^3.0.1",
17 18
     "vue": "^2.6.6",
18 19
     "vue-router": "^3.0.1",
19 20
     "vuex": "^3.0.1"

+ 122 - 96
src/common/http.js

@@ -5,14 +5,17 @@
5 5
 import axios from 'axios';
6 6
 import QS from 'qs';
7 7
 import store from '../store/index'
8
+import { Message, Loading } from 'element-ui'
9
+import { basePath, logFlag } from '@/config/env'
10
+import router from '../router/index'
8 11
 
9 12
 // 环境的切换
10 13
 if (process.env.NODE_ENV == 'development') {
11
-	axios.defaults.baseURL = '/api';
14
+  axios.defaults.baseURL = '/api';
12 15
 } else if (process.env.NODE_ENV == 'debug') {
13
-	axios.defaults.baseURL = '';
16
+  axios.defaults.baseURL = '';
14 17
 } else if (process.env.NODE_ENV == 'production') {
15
-	axios.defaults.baseURL = 'http://api.123dailu.com/';
18
+  axios.defaults.baseURL = 'http://api.123dailu.com/';
16 19
 }
17 20
 
18 21
 // 请求超时时间
@@ -20,116 +23,139 @@ axios.defaults.timeout = 10000;
20 23
 
21 24
 // post请求头
22 25
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
26
+axios.defaults.headers.post['token'] = localStorage.getItem('token');
27
+axios.defaults.headers.get['token'] = localStorage.getItem('token');
23 28
 
24 29
 // 请求拦截器
25 30
 axios.interceptors.request.use(
26
-	config => {
27
-		// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
28
-		// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
29
-		const token = store.state.token;
30
-		token && (config.headers.Authorization = token);
31
-		return config;
32
-	},
33
-	error => {
34
-		return Promise.error(error);
35
-	})
31
+  config => {
32
+    // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
33
+    // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
34
+    const token = localStorage.getItem('token');
35
+    if (!token) {
36
+      router.push('/login')
37
+    }
38
+    token && (config.headers.Authorization = token);
39
+    return config;
40
+  },
41
+  error => {
42
+    return Promise.error(error);
43
+  })
36 44
 
37 45
 // 响应拦截器
38 46
 axios.interceptors.response.use(
39
-	response => {
40
-		if (response.status === 200) {
41
-			return Promise.resolve(response);
42
-		} else {
43
-			return Promise.reject(response);
44
-		}
45
-	},
46
-	// 服务器状态码不是200的情况
47
-	error => {
48
-		if (error.response.status) {
49
-			switch (error.response.status) {
50
-				// 401: 未登录
51
-				// 未登录则跳转登录页面,并携带当前页面的路径
52
-				// 在登录成功后返回当前页面,这一步需要在登录页操作。
53
-				case 401:
54
-					router.replace({
55
-						path: '/login',
56
-						query: { redirect: router.currentRoute.fullPath }
57
-					});
58
-					break;
59
-				// 403 token过期
60
-				// 登录过期对用户进行提示
61
-				// 清除本地token和清空vuex中token对象
62
-				// 跳转登录页面
63
-				case 403:
64
-					this.$message.error('登录过期,请重新登录');
65
-					// 清除token
66
-					localStorage.removeItem('token');
67
-					store.commit('loginSuccess', null);
68
-					// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
69
-					setTimeout(() => {
70
-						router.replace({
71
-							path: '/login',
72
-							query: {
73
-								redirect: router.currentRoute.fullPath
74
-							}
75
-						});
76
-					}, 1000);
77
-					break;
78
-				// 404请求不存在
79
-				case 404:
80
-					this.$message.error('网络请求不存在');
81
-					break;
82
-				// 其他错误,直接抛出错误提示
83
-				default:
84
-					this.$message.error(error.response.data.message);
85
-			}
86
-			return Promise.reject(error.response);
87
-		}
88
-	}
47
+  response => {
48
+    if (response.status === 200) {
49
+      return Promise.resolve(response);
50
+    } else {
51
+      return Promise.reject(response);
52
+    }
53
+  },
54
+  // 服务器状态码不是200的情况
55
+  error => {
56
+    if (error.response.status) {
57
+      switch (error.response.status) {
58
+        // 401: 未登录
59
+        // 未登录则跳转登录页面,并携带当前页面的路径
60
+        // 在登录成功后返回当前页面,这一步需要在登录页操作。
61
+        case 401:
62
+          router.replace({
63
+            path: '/login',
64
+            query: { redirect: router.currentRoute.fullPath }
65
+          });
66
+          break;
67
+        // 403 token过期
68
+        // 登录过期对用户进行提示
69
+        // 清除本地token和清空vuex中token对象
70
+        // 跳转登录页面
71
+        case 403:
72
+          this.$message.error('登录过期,请重新登录');
73
+          // 清除token
74
+          localStorage.removeItem('token');
75
+          store.commit('loginSuccess', null);
76
+          // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
77
+          setTimeout(() => {
78
+            router.replace({
79
+              path: '/login',
80
+              query: {
81
+                redirect: router.currentRoute.fullPath
82
+              }
83
+            });
84
+          }, 1000);
85
+          break;
86
+        // 404请求不存在
87
+        case 404:
88
+          this.$message.error('网络请求不存在');
89
+          break;
90
+        // 其他错误,直接抛出错误提示
91
+        default:
92
+          this.$message.error(error.response.data.message);
93
+      }
94
+      return Promise.reject(error.response);
95
+    }
96
+  }
89 97
 )
90
-	/**
91
-	 * get方法,对应get请求
92
-	 * @param {String} url [请求的url地址]
93
-	 * @param {Object} params [请求时携带的参数]
94
-	 */
95
-function get(url, params){
96
-	return new Promise((resolve, reject) =>{
97
-		axios.get(url, {
98
-			params: params
99
-		})
100
-			.then(res => {
101
-				resolve(res.data);
102
-			})
103
-			.catch(err => {
104
-				reject(err.data)
105
-			})
106
-	});
98
+let reqUrl = ''
99
+/**
100
+ * get方法,对应get请求
101
+ * @param {String} url [请求的url地址]
102
+ * @param {Object} params [请求时携带的参数]
103
+ */
104
+function get (url, params) {
105
+  reqUrl = basePath + url
106
+  return new Promise((resolve, reject) => {
107
+    axios.get(reqUrl, {
108
+      params: params
109
+    })
110
+      .then(res => {
111
+        if (res.data.code != 200) {
112
+          Message({
113
+            message: res.data.msg,
114
+            type: 'error'
115
+          });
116
+        }
117
+        console.log(res.data);
118
+        resolve(res.data);
119
+      })
120
+      .catch(err => {
121
+        reject(err.data)
122
+      })
123
+  });
107 124
 }
108 125
 /**
109 126
  * post方法,对应post请求
110 127
  * @param {String} url [请求的url地址]
111 128
  * @param {Object} params [请求时携带的参数]
112 129
  */
113
-function post(url, params) {
114
-	return new Promise((resolve, reject) => {
115
-		axios.post(url, QS.stringify(params))
116
-			.then(res => {
117
-				resolve(res.data);
118
-			})
119
-			.catch(err => {
120
-				reject(err.data)
121
-			})
122
-	});
130
+function post (url, params) {
131
+  reqUrl = basePath + url
132
+  return new Promise((resolve, reject) => {
133
+    axios.post(reqUrl, QS.stringify(params))
134
+      .then(res => {
135
+        console.log(res, 'resres');
136
+        if (res.data.code != 200) {
137
+          Message({
138
+            message: res.data.msg,
139
+            type: 'error'
140
+          });
141
+        }
142
+        resolve(res.data);
143
+      })
144
+      .catch(err => {
145
+        console.log(err, 'errerrerr');
146
+        reject(err.data)
147
+      })
148
+  });
123 149
 }
124 150
 
125 151
 
126 152
 
127 153
 export default () => {
128
-	if (typeof window.$http == 'undefined') {
129
-		window.$http = {
130
-			post: post,
131
-			get: get
132
-		}
133
-	}
154
+  if (typeof window.$http == 'undefined') {
155
+    window.$http = {
156
+      post: post,
157
+      get: get
158
+    }
159
+  }
134 160
 }
135 161
 

+ 21 - 1
src/common/utils.js

@@ -1,7 +1,27 @@
1 1
 // 自定义全局方法封装
2 2
 const utils = {
3 3
   test: function () { },
4
-  isBack: false
4
+  isBack: false,
5
+  formatTime: function (date, fmt) {
6
+    var date = new Date(date);
7
+    if (/(y+)/.test(fmt)) {
8
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
9
+    }
10
+    var o = {
11
+      'M+': date.getMonth() + 1,
12
+      'd+': date.getDate(),
13
+      'h+': date.getHours(),
14
+      'm+': date.getMinutes(),
15
+      's+': date.getSeconds()
16
+    };
17
+    for (var k in o) {
18
+      if (new RegExp('(' + k + ')').test(fmt)) {
19
+        var str = o[k] + '';
20
+        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
21
+      }
22
+    }
23
+    return fmt;
24
+  },
5 25
 
6 26
 }
7 27
 

+ 1 - 21
src/config/env.js

@@ -1,26 +1,6 @@
1 1
 // 环境配置
2
-let appId = 102;       //sso登录服务的appid,传0表示走老的授权登录
3
-let appVersion = 1;    //sso登录服务的版本,默认为第一版
4
-let logFlag = {
5
-  dev: false,    			// 开发和测试环境是否上报log
6
-  from: false,   			// 是否上传页面来源
7
-  packageName: 'web-init'
8
-};
9
-let basePath = 'https://store.api.ijolijoli.com/'; 	// api请求地址
10
-let ssoPath = 'https://sso.51yund.com';		// 授权登录地址
11
-let localPath = 'https://51yund.com';       // 获取定位地址
12
-let logPath = 'https://api.51yund.com';     // 上传日志地址
13
-let jumpPath = 'https://d.51yund.com';		// 跳转登录地址
14
-let filterErr = ['sskey过期'];  //过滤掉某些错不上报
2
+let basePath = 'https://store.api.ijolijoli.com'; 	// api请求地址
15 3
 
16 4
 export {
17 5
   basePath,
18
-  ssoPath,
19
-  localPath,
20
-  jumpPath,
21
-  logPath,
22
-  logFlag,
23
-  appId,
24
-  appVersion,
25
-  filterErr
26 6
 }

+ 3 - 3
src/main.js

@@ -3,18 +3,18 @@ import App from './App.vue'
3 3
 import router from './router/index'
4 4
 import store from './store/index'
5 5
 import login from './common/login'
6
-import auth from './common/auth'
7
-import { injectGlobal } from './common/'
8 6
 import ElementUI from 'element-ui'
9 7
 import 'element-ui/lib/theme-chalk/index.css'
8
+import auth from './common/auth'
9
+import { injectGlobal } from './common/'
10 10
 import './style/reset.less'
11 11
 import './style/common.less'
12 12
 import './assets/font/iconfont.css'
13 13
 import './style/index.less'
14 14
 import './filters/filter'
15 15
 //全局注入
16
-injectGlobal()
17 16
 Vue.use(ElementUI)
17
+injectGlobal()
18 18
 
19 19
 window.globalVue = "";
20 20
 // login((hasLogin)=>{

+ 47 - 24
src/pages/home/index.vue

@@ -1,7 +1,9 @@
1 1
 <template>
2 2
   <div class="home">
3 3
     <div class="tab">
4
-      <div class="make-order" v-for="item in tabList">
4
+      <div class="make-order"
5
+           v-for="item,index in tabList"
6
+           :key="index">
5 7
         <div class="make-icon">
6 8
           <img :src="item.image">
7 9
         </div>
@@ -14,15 +16,24 @@
14 16
     <div class="order-list">
15 17
       <div class="title">预约订单列表</div>
16 18
       <div class="list-info">
17
-        <div class="user-info" v-for="(item,index) in orderList" :style="index==orderList.length-1?'border-bottom:0px':''">
18
-          <div class="head-img"> <div class="new">新</div><img :src="item.img" alt=""></div>
19
+        <div class="user-info"
20
+             v-for="(item,index) in orderList"
21
+             :key="index"
22
+             :style="index==orderList.length-1?'border-bottom:0px':''">
23
+          <div class="head-img">
24
+            <div class="new">新</div><img :src="item.img"
25
+                 alt="">
26
+          </div>
19 27
           <div class="user-information">
20 28
             <div class="name">客户昵称:<span>{{ item.name }}</span></div>
21 29
             <div class="name">预约项目时间:<span>{{ item.ts }}</span></div>
22 30
             <div class="name">预约项目数量:<span>{{ item.num }}</span></div>
23 31
           </div>
24 32
           <ul class="product-list">
25
-            <li class="product-image" v-for="value in item.imgList"><img :src="value" alt=""></li>
33
+            <li class="product-image"
34
+                v-for="value,i in item.imgList"
35
+                :key="i"><img :src="value"
36
+                   alt=""></li>
26 37
           </ul>
27 38
           <div class="status">
28 39
             {{ item.status }}
@@ -38,22 +49,22 @@ import api from '@/server/home'
38 49
 
39 50
 export default {
40 51
   name: 'home',
41
-  data() {
52
+  data () {
42 53
     return {
43 54
       tabList: [
44 55
         {
45 56
           image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
46
-          num: 0,
57
+          num: 3,
47 58
           name: '预约订单'
48 59
         },
49 60
         {
50 61
           image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
51
-          num: 0,
62
+          num: 4,
52 63
           name: '未支付订单'
53 64
         },
54 65
         {
55 66
           image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png',
56
-          num: 0,
67
+          num: 9,
57 68
           name: '取消订单'
58 69
         },
59 70
       ],
@@ -126,10 +137,27 @@ export default {
126 137
 
127 138
   },
128 139
   created: function () {
129
-
140
+    this.getTotal()
141
+    this.getToday()
142
+    console.log(this.$store.state.comVal.token, 'this.$store.state.comVal.token');
130 143
   },
131 144
   methods: {
132
-    initData() {
145
+    getTotal () {
146
+      api.getTotal().then(res => {
147
+        if (res.code == 200) {
148
+          this.tabList[0].num = res.data.order_num
149
+          this.tabList[1].num = res.data.wait_pay_num
150
+          this.tabList[2].num = res.data.cancel_num
151
+        }
152
+        console.log(res, 'res====');
153
+      })
154
+    },
155
+    getToday () {
156
+      api.getToday().then(res => {
157
+        console.log(res, 'res');
158
+      })
159
+    },
160
+    initData () {
133 161
 
134 162
     },
135 163
   },
@@ -151,7 +179,7 @@ export default {
151 179
     .make-order {
152 180
       width: 274px;
153 181
       padding: 14px 30px;
154
-      background: #FFFFFF;
182
+      background: #ffffff;
155 183
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
156 184
       border-radius: 8px;
157 185
       display: flex;
@@ -189,7 +217,7 @@ export default {
189 217
   .order-list {
190 218
     margin-top: 18px;
191 219
     width: 100%;
192
-    background: #FFFFFF;
220
+    background: #ffffff;
193 221
     box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
194 222
     border-radius: 8px;
195 223
     padding: 14px 12px;
@@ -210,14 +238,14 @@ export default {
210 238
 
211 239
       .user-info {
212 240
         padding: 14px 0;
213
-        border-bottom: 1px solid #E6E6E6;
241
+        border-bottom: 1px solid #e6e6e6;
214 242
         display: flex;
215 243
         align-items: center;
216 244
 
217 245
         .head-img {
218 246
           position: relative;
219 247
           width: 72px;
220
-          .new{
248
+          .new {
221 249
             position: absolute;
222 250
             top: -2px;
223 251
             right: -2px;
@@ -228,9 +256,9 @@ export default {
228 256
             font-size: 12px;
229 257
             font-family: PingFangSC-Regular, PingFang SC;
230 258
             font-weight: 400;
231
-            color: #FFFFFF;
259
+            color: #ffffff;
232 260
             line-height: 17px;
233
-            background: #FF6945;
261
+            background: #ff6945;
234 262
             border-radius: 50%;
235 263
           }
236 264
 
@@ -264,32 +292,27 @@ export default {
264 292
           overflow-y: hidden;
265 293
           padding-left: 8px;
266 294
 
267
-
268 295
           .product-image {
269 296
             display: inline-block;
270 297
             margin-left: 16px;
271 298
             width: 72px;
272
-            img{
299
+            img {
273 300
               border-radius: 8px;
274 301
               width: 100%;
275 302
               display: block;
276 303
             }
277
-
278 304
           }
279
-
280 305
         }
281
-        .status{
306
+        .status {
282 307
           margin-left: 56px;
283 308
           font-size: 16px;
284 309
           font-family: SourceHanSansCN-Regular, SourceHanSansCN;
285 310
           font-weight: 400;
286
-          color: #FC3019;
311
+          color: #fc3019;
287 312
           line-height: 24px;
288 313
         }
289 314
       }
290 315
     }
291
-
292 316
   }
293 317
 }
294
-
295 318
 </style>

+ 82 - 30
src/pages/login/login.vue

@@ -2,17 +2,27 @@
2 2
   <div class="mine">
3 3
     <div class="login-info">
4 4
       <div class="logo">
5
-        <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/logo%402x.png" alt="">
5
+        <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/logo%402x.png"
6
+             alt="">
6 7
       </div>
7 8
       <div class="login-title">JOLIJOLI店员端</div>
8 9
       <div class="content">
9 10
         <div class="value-inp">
10
-          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/num_icon.png" alt="">
11
-          <el-input placeholder="请输入账号名" v-model="account"></el-input>
11
+          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/num_icon.png"
12
+               alt="">
13
+          <el-input placeholder="请输入账号名"
14
+                    v-model="account"></el-input>
12 15
         </div>
13 16
         <div class="value-inp">
14
-          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/password_icon.png" alt="">
15
-          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
17
+          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/password_icon.png"
18
+               alt="">
19
+          <el-input placeholder="请输入密码"
20
+                    v-model="password"
21
+                    show-password></el-input>
22
+        </div>
23
+        <div class="onLogin"
24
+             @click="onLogin">
25
+          登录
16 26
         </div>
17 27
       </div>
18 28
     </div>
@@ -20,25 +30,49 @@
20 30
 </template>
21 31
 
22 32
 <script>
33
+import api from '../../server/home'
34
+// import Cookies from "js-cookie"
23 35
 export default {
24 36
   components: {},
25
-  data() {
37
+  data () {
26 38
     return {
27
-      account:"",
28
-      password:""
39
+      account: "",
40
+      password: ""
29 41
 
30 42
     };
31 43
   },
32 44
   computed: {},
33 45
   watch: {},
34 46
 
35
-  methods: {},
47
+  methods: {
48
+    onLogin () {
49
+      let params = {
50
+        username: this.account,
51
+        password: this.password
52
+      }
53
+      api.getToken(params).then(res => {
54
+        if (res.code == 200) {
55
+          this.$store.state.comVal.token = res.data.token
56
+          console.log(this.$store.state.comVal.token, 'this.$store.');
57
+          localStorage.setItem("token", res.data.token)
58
+          this.$router.push({
59
+            path: '/home'
60
+          })
61
+        }
62
+      })
63
+    }
36 64
 
37
-  created() {
65
+  },
38 66
 
67
+  created () {
68
+    if (localStorage.getItem("token")) {
69
+      this.$router.push({
70
+        path: '/home'
71
+      })
72
+    }
39 73
   },
40 74
 
41
-  mounted() {
75
+  mounted () {
42 76
 
43 77
   },
44 78
 }
@@ -49,68 +83,86 @@ export default {
49 83
 .mine {
50 84
   width: 100%;
51 85
   min-height: 100vh;
52
-  background: linear-gradient(315deg, #FF9F7E 0%, #FF926C 0%, #FF9D55 100%);
86
+  background: linear-gradient(315deg, #ff9f7e 0%, #ff926c 0%, #ff9d55 100%);
53 87
   position: relative;
54
-  .login-info{
88
+  .login-info {
55 89
     position: absolute;
56 90
     left: 50%;
57 91
     top: 15%;
58 92
     transform: translateX(-50%);
59 93
     width: 460px;
60 94
     height: 460px;
61
-    background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/login_bg.png") no-repeat;
95
+    background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/login_bg.png")
96
+      no-repeat;
62 97
     background-size: 100% 100%;
63
-    .logo{
98
+    .logo {
64 99
       width: 100px;
65 100
       height: 100px;
66 101
       position: relative;
67 102
       left: 50%;
68 103
       transform: translateX(-50%);
69 104
       top: -17px;
70
-      img{
105
+      img {
71 106
         width: 100%;
72 107
         display: block;
73 108
       }
74 109
     }
75
-    .login-title{
110
+    .login-title {
76 111
       margin-top: 7px;
77 112
       font-size: 28px;
78 113
       font-family: PingFangSC-Medium, PingFang SC;
79 114
       font-weight: 500;
80 115
       text-align: center;
81
-      color: #EB5C21;
116
+      color: #eb5c21;
82 117
       line-height: 40px;
83 118
     }
84
-    .content{
119
+    .content {
85 120
       padding-top: 15px;
86 121
       position: relative;
87
-      .value-inp{
122
+      .value-inp {
88 123
         position: relative;
89 124
         margin-top: 20px;
90 125
         left: 50%;
91 126
         transform: translateX(-50%);
92 127
         width: 336px;
93 128
         height: 53px;
94
-        background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/input_bg.png") no-repeat;
129
+        background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/input_bg.png")
130
+          no-repeat;
95 131
         background-size: 100% 100%;
96 132
         display: flex;
97 133
         padding: 0 24px;
98 134
         justify-content: space-between;
99 135
         align-items: center;
100
-        img{
136
+        img {
101 137
           width: 32px;
102 138
           height: 32px;
103 139
         }
104
-       /deep/ .el-input__inner{
105
-          background-color:transparent;
106
-         border: 0px solid #DCDFE6;
107
-         height: 53px;
108
-         line-height: 53px;
109
-         font-size: 18px;
110
-         font-family: PingFangSC-Regular, PingFang SC;
111
-         font-weight: 400;
140
+        /deep/ .el-input__inner {
141
+          background-color: transparent;
142
+          border: 0px solid #dcdfe6;
143
+          height: 53px;
144
+          line-height: 53px;
145
+          font-size: 18px;
146
+          font-family: PingFangSC-Regular, PingFang SC;
147
+          font-weight: 400;
112 148
         }
113 149
       }
150
+      .onLogin {
151
+        margin-top: 29px;
152
+        position: relative;
153
+        left: 50%;
154
+        transform: translateX(-50%);
155
+        width: 214px;
156
+        height: 53px;
157
+        line-height: 53px;
158
+        background: #fa7d22;
159
+        border-radius: 27px;
160
+        font-size: 18px;
161
+        font-family: PingFangSC-Medium, PingFang SC;
162
+        font-weight: 500;
163
+        color: #ffffff;
164
+        text-align: center;
165
+      }
114 166
     }
115 167
   }
116 168
 }

+ 44 - 95
src/pages/testSkin/index.vue

@@ -15,7 +15,8 @@
15 15
            class="el-input__icon el-icon-search"></i>
16 16
       </el-input>
17 17
       <el-button type="primary"
18
-                 class="searchButton">搜索</el-button>
18
+                 class="searchButton"
19
+                 @click="getSkinList">搜索</el-button>
19 20
     </div>
20 21
     <div class="list">
21 22
       <div class="tab">
@@ -30,21 +31,21 @@
30 31
              v-for="(item,index) in userList"
31 32
              :key="index"
32 33
              @click="onDetails">
33
-          <div class="head-img"><img :src="item.img"
34
+          <div class="head-img"><img :src="item.avatar_url"
34 35
                  alt=""></div>
35
-          <div class="head-name">{{ item.name }}</div>
36
-          <div class="head-phone">{{ item.phone }}</div>
37
-          <div class="head-ts">{{ item.ts }}</div>
38
-          <div class="head-status">{{ item.status }}</div>
36
+          <div class="head-name">{{ item.nickname }}</div>
37
+          <div class="head-phone">{{ item.mobile }}</div>
38
+          <div class="head-ts">{{ item.check_time }}</div>
39
+          <div class="head-status"
40
+               :style="item.status==1?'color: #61D09D;':'color: #FC3019;'">{{ item.status==1?'已面诊':'未面诊'}}</div>
39 41
         </div>
40 42
       </div>
41 43
       <div class="pagin">
42 44
         <el-pagination background
43 45
                        layout="prev, pager, next"
44
-                       @size-change="handleSizeChange"
45 46
                        @current-change="handleCurrentChange"
46 47
                        :current-page.sync="currentPage1"
47
-                       :total="1000">
48
+                       :total="total">
48 49
         </el-pagination>
49 50
       </div>
50 51
     </div>
@@ -52,111 +53,59 @@
52 53
 </template>
53 54
 
54 55
 <script>
56
+import api from '../../server/home'
55 57
 export default {
56 58
   components: {},
57 59
   data () {
58 60
     return {
59
-      dates: '',
61
+      dates: [],
60 62
       searchText: '',
61
-      userList: [
62
-        {
63
-          img:
64
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
65
-          name: '张三',
66
-          phone: 4556455645,
67
-          ts: '2022.04.15  14:30-16:30',
68
-          status: '标签信息未填写'
69
-        },
70
-        {
71
-          img:
72
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
73
-          name: '张三',
74
-          phone: 4556455645,
75
-          ts: '2022.04.15  14:30-16:30',
76
-          status: '标签信息未填写'
77
-        },
78
-        {
79
-          img:
80
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
81
-          name: '张三',
82
-          phone: 4556455645,
83
-          ts: '2022.04.15  14:30-16:30',
84
-          status: '标签信息未填写'
85
-        },
86
-        {
87
-          img:
88
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
89
-          name: '张三',
90
-          phone: 4556455645,
91
-          ts: '2022.04.15  14:30-16:30',
92
-          status: '标签信息未填写'
93
-        },
94
-        {
95
-          img:
96
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
97
-          name: '张三',
98
-          phone: 4556455645,
99
-          ts: '2022.04.15  14:30-16:30',
100
-          status: '标签信息未填写'
101
-        },
102
-        {
103
-          img:
104
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
105
-          name: '张三',
106
-          phone: 4556455645,
107
-          ts: '2022.04.15  14:30-16:30',
108
-          status: '标签信息未填写'
109
-        },
110
-        {
111
-          img:
112
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
113
-          name: '张三',
114
-          phone: 4556455645,
115
-          ts: '2022.04.15  14:30-16:30',
116
-          status: '标签信息未填写'
117
-        },
118
-        {
119
-          img:
120
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
121
-          name: '张三',
122
-          phone: 4556455645,
123
-          ts: '2022.04.15  14:30-16:30',
124
-          status: '标签信息未填写'
125
-        },
126
-        {
127
-          img:
128
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
129
-          name: '张三',
130
-          phone: 4556455645,
131
-          ts: '2022.04.15  14:30-16:30',
132
-          status: '标签信息未填写'
133
-        },
134
-        {
135
-          img:
136
-            'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
137
-          name: '张三',
138
-          phone: 4556455645,
139
-          ts: '2022.04.15  14:30-16:30',
140
-          status: '标签信息未填写'
141
-        }
142
-      ],
143
-      currentPage1: 2
63
+      userList: [],
64
+      currentPage1: 1,
65
+      limit: 10,
66
+      total: 0,
144 67
     }
145 68
   },
146 69
   computed: {},
147 70
   watch: {},
148 71
 
149 72
   methods: {
73
+    getSkinList () {
74
+      let start_date = '', end_date = ''
75
+      if (this.dates && this.dates.length > 0) {
76
+        start_date = utils.formatTime(this.dates[0], 'yyyy-MM-dd')
77
+        end_date = utils.formatTime(this.dates[1], 'yyyy-MM-dd')
78
+      }
79
+      console.log(start_date, end_date, 'end_date');
80
+      let params = {
81
+        page: this.currentPage1,
82
+        limit: this.limit,
83
+        keywords: this.searchText,
84
+        start_date: start_date,
85
+        end_date: end_date,
86
+      }
87
+      api.getSkinList(params).then(res => {
88
+        if (res.code == 200) {
89
+          this.userList = res.data.list
90
+          this.total = res.data.total
91
+        }
92
+      })
93
+    },
150 94
     onDetails () {
151 95
       this.$router.push({
152 96
         path: '/testSkin/details'
153 97
       })
154 98
     },
155
-    handleCurrentChange () { },
156
-    handleSizeChange () { }
99
+    handleCurrentChange (e) {
100
+      this.currentPage1 = e
101
+      this.getSkinList
102
+      console.log(e, 'eeeeee');
103
+    }
157 104
   },
158 105
 
159
-  created () { },
106
+  created () {
107
+    this.getSkinList()
108
+  },
160 109
 
161 110
   mounted () { }
162 111
 }

+ 1 - 1
src/router/map/home.js

@@ -16,7 +16,7 @@ import Coupon from '@/pages/coupon/index'
16 16
 import projectOrder from '@/pages/customerMan/myOrder'
17 17
 
18 18
 export default {
19
-  path: '/',
19
+  path: '/layout',
20 20
   name: '首页',
21 21
   component: layout,
22 22
   children: [

+ 10 - 5
src/router/map/login.js

@@ -1,8 +1,13 @@
1 1
 // 登录
2 2
 export default [
3
-	{	
4
-		path: '/login',
5
-		name: 'login',
6
-		component: () => import('@/pages/login/login.vue') 
7
-	}
3
+  {
4
+    path: '/',
5
+    name: 'login',
6
+    component: () => import('@/pages/login/login.vue')
7
+  },
8
+  {
9
+    path: '/login',
10
+    name: 'login',
11
+    component: () => import('@/pages/login/login.vue')
12
+  }
8 13
 ]

+ 20 - 8
src/server/home.js

@@ -3,14 +3,26 @@
3 3
 import url from './urls'
4 4
 
5 5
 export default class Home {
6
-	/**
7
-	 * @描述  1.1	获取用户信息
8
-	 */
9
-	static getUserMess(parms) {
10
-		return $http.post(url.getUserMess,parms);
11
-    }
6
+  /**
7
+   * @描述  1.1	获取用户信息
8
+   */
9
+  static getToken (parms) {
10
+    return $http.post(url.getToken, parms);
11
+  }
12
+
13
+  static getTotal (parms) {
14
+    return $http.get(url.getTotal, parms);
15
+  }
16
+
17
+  static getToday (parms) {
18
+    return $http.get(url.getToday, parms);
19
+  }
20
+
21
+  static getSkinList (parms) {
22
+    return $http.get(url.getSkinList, parms);
23
+  }
12 24
 }
13 25
 
14
- 
15
- 
26
+
27
+
16 28
 

+ 8 - 3
src/server/urls.js

@@ -1,5 +1,10 @@
1 1
 export default {
2
-	//登录
3
-	getsskey: '/sport/get_session_key',
4
-	getUserMess: '/enterprise/check_user_auth'
2
+  //登录
3
+  getToken: '/v2/pad/login',
4
+  //首页数据
5
+  getTotal:'/v2/pad/home/total',
6
+  //今日订单列表
7
+  getToday:'/v2/pad/order/today',
8
+  //测肤记录列表
9
+  getSkinList:'/v2/pad/skin/list',
5 10
 }

+ 2 - 1
src/store/modules/comVal.js

@@ -1,5 +1,6 @@
1 1
 const state = {
2
-  name: 666
2
+  name: 666,
3
+  token: null
3 4
 }
4 5
 
5 6
 const actions = {