瀏覽代碼

feat: 添加用户管理界面

listKer 2 年之前
父節點
當前提交
0beeefc7b6
共有 5 個文件被更改,包括 22077 次插入44 次删除
  1. 21207 37
      package-lock.json
  2. 508 0
      src/pages/customerMan/details/index.vue
  3. 156 7
      src/pages/customerMan/index.vue
  4. 201 0
      src/pages/customerMan/myOrder/index.vue
  5. 5 0
      src/router/map/home.js

File diff suppressed because it is too large
+ 21207 - 37
package-lock.json


+ 508 - 0
src/pages/customerMan/details/index.vue

@@ -0,0 +1,508 @@
1
+<template>
2
+  <div class="mine">
3
+    <div class="left">
4
+      <div class="user-info">
5
+        <div class="user-img"><img :src="userInfo.image"
6
+               alt=""></div>
7
+        <div class="user-span">
8
+          <div class="name">昵称:<span>{{userInfo.name}}</span></div>
9
+          <div class="sex">性别:<span>{{userInfo.sex}}</span></div>
10
+          <div class="age">肤龄:<span>{{userInfo.age}}</span></div>
11
+          <div class="skin-type">肤质:<span>{{userInfo.skinType}}</span></div>
12
+        </div>
13
+        
14
+      </div>
15
+      <div class="personage-data">
16
+           <div class="myDataList">肌肤得分:<span class="bigSixe">56分</span></div>
17
+          <div class="myDataList">皮肤状态:<span>肤质一般</span></div>
18
+          <div class="myDataList">上传检测时间:<span>2022.0418 16:04</span></div>
19
+          <div class="myDataList">出生日期:<span>2000.02.29</span></div>
20
+          <div class="myDataList">联系电话:<span>13334597987</span></div>
21
+
22
+          <div class="myDataList">所在地:<span>广东省,深圳市,南山区</span></div>
23
+
24
+          <div class="myDataList">开卡店铺:<span>JOLIJOLI(西安店)</span></div>
25
+
26
+          <div class="myDataList">卡卷数量:<span>5</span></div>
27
+
28
+          <div class="myDataList">储值金额:<span class="JEcolor">¥<span class="bigSixe">500</span>.00</span></div>
29
+          <div class="myDataList">积分:<span>200</span></div>
30
+
31
+
32
+      </div>
33
+    </div>
34
+    <div class="right"> 
35
+       <div class="right-top">
36
+            <div class="right-top-data">
37
+                <div class="lable">
38
+                    <div class="lable-title">
39
+                        面诊标签
40
+                    </div>
41
+                    <div class="lable-list">
42
+                        <div v-for="(item,index) in lableList"
43
+                            :key="index"
44
+                            class='lable-info'>
45
+                        {{item.text}}
46
+                        </div>
47
+                    </div>
48
+                </div>
49
+                <div class="ps">
50
+                    <div class="ps-title">
51
+                        备注
52
+                    </div>
53
+                    <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
54
+                    </div>
55
+            </div>  
56
+            <div class="right-top-list" @click="toOrder(1)">
57
+                <div class="dataList">
58
+                    <img :src="userInfo.image">
59
+                    <p>项目订单</p>
60
+                    <span>19</span>
61
+                </div>
62
+                <div class="dataList" style="margin:18px 0px">
63
+                     <img :src="userInfo.image">
64
+                    <p>项目订单</p>
65
+                    <span>19</span>
66
+                </div>
67
+                <div class="dataList">
68
+                     <img :src="userInfo.image">
69
+                    <p>项目订单</p>
70
+                    <span>19</span>
71
+                </div>
72
+            </div>
73
+       </div>
74
+       <div class="right-bottom">
75
+           <div class="programme">
76
+        <div class="tab">
77
+          <div class="tab-title">执行方案</div>
78
+        </div>
79
+        <div class="programme-list">
80
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
81
+               v-for="(item,index) in programmeList"
82
+               :key="index"
83
+               @click="onOperation(index)">
84
+            <div class="programme-left">
85
+              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
86
+                     alt=""></div>
87
+              <div class="programme-tips">
88
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
89
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
90
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
91
+              </div>
92
+            </div>
93
+            <div class="programme-right">
94
+              <div class="frequency">执行频率:<span>一周一次</span></div>
95
+              <div class="duration">持续时长:<span>28天</span></div>
96
+            </div>
97
+            <div class="operation"
98
+                 v-if="item.onSelect">
99
+              <div class="edit">编辑</div>
100
+              <div class="delete">删除</div>
101
+            </div>
102
+          </div>
103
+        </div>
104
+      </div>
105
+       </div>
106
+    </div>
107
+      
108
+  </div>
109
+</template>
110
+
111
+<script>
112
+
113
+export default {
114
+  data () {
115
+    return {
116
+      userInfo: {
117
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
118
+        name: '张三',
119
+        sex: '女',
120
+        age: '23',
121
+        skinType: '中性皮肤'
122
+      },
123
+      //面部标签
124
+      lableList: [
125
+        {
126
+          text: '对话框的',
127
+          disabled: false
128
+        },
129
+        {
130
+          text: '对话框的',
131
+          disabled: true
132
+        },
133
+        {
134
+          text: '对话框的',
135
+          disabled: false
136
+        },
137
+        {
138
+          text: '对话框的',
139
+          disabled: false
140
+        },
141
+        {
142
+          text: '对话框的',
143
+          disabled: false
144
+        },
145
+       
146
+      ],
147
+      //执行方案
148
+      programmeList: [
149
+        {
150
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
151
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
152
+          tips: '+润百颜精华',
153
+          zoom: '皮肤综合仪(30号房)',
154
+          ts: '30分钟',
155
+          price: '79.00'
156
+        },
157
+        {
158
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
159
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
160
+          tips: '+润百颜精华',
161
+          zoom: '皮肤综合仪(30号房)',
162
+          ts: '30分钟',
163
+          price: '79.00'
164
+        },
165
+        {
166
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
167
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
168
+          tips: '+润百颜精华',
169
+          zoom: '皮肤综合仪(30号房)',
170
+          ts: '30分钟',
171
+          price: '79.00'
172
+        },
173
+      ],
174
+      //项目列表
175
+      projectList: [{
176
+        value: '选项1',
177
+        label: '黄金糕'
178
+      }, {
179
+        value: '选项2',
180
+        label: '双皮奶'
181
+      }, {
182
+        value: '选项3',
183
+        label: '蚵仔煎'
184
+      }, {
185
+        value: '选项4',
186
+        label: '龙须面'
187
+      }, {
188
+        value: '选项5',
189
+        label: '北京烤鸭'
190
+      }],
191
+      timesInfo: '',
192
+      projectInfo: '',
193
+      weekInfo: '',
194
+      programmeIndex: '',
195
+      remarks: '',
196
+      isPupop: false
197
+    };
198
+  },
199
+  computed: {
200
+
201
+  },
202
+  watch: {},
203
+
204
+  methods: {
205
+    onOperation (index) {
206
+      if (this.programmeList[index].onSelect) {
207
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
208
+      } else {
209
+        this.$set(this.programmeList[index], 'onSelect', true)
210
+      }
211
+    },
212
+    toOrder(index){
213
+        if(index === 1){
214
+           this.$router.push({
215
+            path: '/customerMan/projectOrder'
216
+            })
217
+        }
218
+    },
219
+    onSubmit () {
220
+
221
+    },
222
+    submitFrequency () { },
223
+  },
224
+
225
+  created () {
226
+
227
+  },
228
+
229
+  mounted () {
230
+
231
+  },
232
+}
233
+
234
+</script>
235
+
236
+<style lang='less' scoped>
237
+.mine {
238
+  height: 100%;
239
+  display: flex;
240
+  .left {
241
+    width: 276px;
242
+    padding: 12px 12px 0 12px;
243
+    background: #ffffff;
244
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
245
+    border-radius: 8px;
246
+    font-size: 13px;
247
+    font-family: PingFangSC-Regular, PingFang SC;
248
+    font-weight: 400;
249
+    color: #999999;
250
+    line-height: 18px;
251
+    overflow: scroll;
252
+    height: 100%;
253
+    .user-info {
254
+      display: flex;
255
+      align-items: center;
256
+      .user-img {
257
+        width: 98px;
258
+        img {
259
+          width: 100%;
260
+          display: block;
261
+        }
262
+      }
263
+      .user-span {
264
+        margin-left: 12px;
265
+        .sex{
266
+            margin-top: 8px;
267
+        }
268
+         .age{
269
+            margin-top: 8px;
270
+        }
271
+         .skin-type{
272
+            margin-top: 8px;
273
+        }
274
+
275
+        span {
276
+          color: #333333;
277
+        }
278
+      }
279
+    }
280
+    .personage-data{
281
+        margin-top: 30px;
282
+        .myDataList{
283
+          margin-top: 15px;
284
+          .bigSixe{
285
+              font-size: 18px;
286
+              color: #FA7D22;
287
+          }
288
+          span{
289
+             color: #333333;
290
+          }
291
+          .JEcolor{
292
+              color: #FA7D22;
293
+          }
294
+        }
295
+    }
296
+  }  
297
+ 
298
+  .right {
299
+    margin-left: 18px;
300
+    position: relative;
301
+    flex: 1;
302
+    .right-top{
303
+        height: 205px;
304
+        // border: 1px solid red;
305
+        display: flex;
306
+        .right-top-list{
307
+            width: 239ppx;
308
+            margin-left: 18px;
309
+            display: flex;
310
+            flex-direction: column;
311
+            .dataList{
312
+                height: 56px;
313
+                // width: 239ppx;
314
+                background: #ffffff;
315
+                box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
316
+                border-radius: 8px;
317
+                padding: 16px 12px 12px 12px;
318
+                display: flex;
319
+                align-items: center;
320
+                img{
321
+                    width: 33px;
322
+                    height: 33px;
323
+                }
324
+                p{
325
+                    font-size: 14px;
326
+                    margin-left:14px;
327
+                    margin-right: 80px;
328
+                }
329
+                span{
330
+                    font-size: 16px;
331
+                    margin-right: 20px;
332
+                }
333
+            }
334
+
335
+        }
336
+        .right-top-data{
337
+            background: #ffffff;
338
+            box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
339
+            border-radius: 8px;
340
+            padding: 16px 12px 12px 12px;
341
+            width: 310px;
342
+            height: 100%;
343
+            .lable {
344
+            //   margin-top: 23px;
345
+                width: 100%;
346
+                overflow: scroll;
347
+                background: #ffffff;
348
+            .lable-title {
349
+            font-size: 14px;
350
+            font-family: PingFangSC-Medium, PingFang SC;
351
+            font-weight: 500;
352
+            color: #333333;
353
+            line-height: 20px;
354
+            margin-bottom: 14px;
355
+            }
356
+            .lable-list {
357
+            width: 100%;
358
+            min-height: 105rpx;
359
+            .lable-info {
360
+                display: inline-block;
361
+                padding: 0 12px;
362
+                margin-left: 10px;
363
+                height: 24px;
364
+                line-height: 24px;
365
+                border-radius: 2px;
366
+                border: 1px solid #d6d6d6;
367
+                margin-bottom: 10px;
368
+            }
369
+            .add-lable {
370
+                display: inline-block;
371
+                width: 27px;
372
+                height: 24px;
373
+                line-height: 24px;
374
+                font-size: 12px;
375
+                font-family: PingFang-SC-Regular, PingFang-SC;
376
+                font-weight: 400;
377
+                color: #333333;
378
+                text-align: center;
379
+                margin-left: 10px;
380
+                border-radius: 2px;
381
+                border: 1px solid #d6d6d6;
382
+            }
383
+            }
384
+            .remarks {
385
+            /deep/ .el-textarea__inner:focus {
386
+                border-color: #fa852f;
387
+            }
388
+            }
389
+    }
390
+    .ps {
391
+      font-size: 14px;
392
+      font-family: PingFangSC-Medium, PingFang SC;
393
+      font-weight: 500;
394
+      color: #333333;
395
+      line-height: 20px;
396
+      .ps-text {
397
+        margin-top: 10px;
398
+        font-size: 12px;
399
+        font-weight: 400;
400
+        color: #666666;
401
+        line-height: 17px;
402
+      }
403
+    }
404
+        }
405
+    }
406
+   .right-bottom{
407
+      margin-top: 18px;
408
+      background: #ffffff;
409
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
410
+      border-radius: 8px;
411
+      padding: 16px 61px 12px 12px;
412
+      .programme {
413
+    //   margin-top: 20px;
414
+      width: 100%;
415
+      background: #ffffff;
416
+      border-radius: 8px;
417
+        
418
+      .tab {
419
+        display: flex;
420
+        align-items: center;
421
+        justify-content: space-between;
422
+        .tab-title {
423
+          font-size: 14px;
424
+          font-family: PingFangSC-Medium, PingFang SC;
425
+          font-weight: 500;
426
+          color: #333333;
427
+          line-height: 20px;
428
+        }
429
+      }
430
+      .programme-list {
431
+        margin-top: 10px;
432
+        position: relative;
433
+        z-index: 1;
434
+        .programme-info {
435
+          position: relative;
436
+          margin-bottom: 10px;
437
+          border-radius: 4px;
438
+          border: 1px solid #f5f5f5;
439
+          display: flex;
440
+          justify-content: space-between;
441
+          padding: 8px 8px 8px 10px;
442
+          align-items: center;
443
+          .programme-left {
444
+            display: flex;
445
+            align-items: center;
446
+            .programme-img {
447
+              width: 48px;
448
+              display: inline-block;
449
+              img {
450
+                width: 100%;
451
+                display: block;
452
+              }
453
+            }
454
+            .programme-tips {
455
+              display: inline-block;
456
+              margin-left: 10px;
457
+              font-size: 10px;
458
+              font-family: PingFangSC-Regular, PingFang SC;
459
+              font-weight: 400;
460
+              color: #999999;
461
+              line-height: 14px;
462
+              zoom: 0.83;
463
+            }
464
+          }
465
+          .programme-right {
466
+            font-size: 12px;
467
+            font-family: PingFangSC-Regular, PingFang SC;
468
+            font-weight: 400;
469
+            color: #333333;
470
+            line-height: 17px;
471
+            .duration {
472
+              margin-top: 14px;
473
+            }
474
+          }
475
+          .operation {
476
+            position: absolute;
477
+            left: 50%;
478
+            transform: translateX(-50%);
479
+            top: 10px;
480
+            z-index: 10;
481
+            width: 44px;
482
+            background: #ffffff;
483
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
484
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
485
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
486
+            border-radius: 2px;
487
+            padding: 10px;
488
+            font-size: 12px;
489
+            font-family: PingFangSC-Regular, PingFang SC;
490
+            font-weight: 400;
491
+            color: #333333;
492
+            line-height: 17px;
493
+            .delete {
494
+              margin-top: 20px;
495
+            }
496
+          }
497
+        }
498
+        .programme-active {
499
+          border: 1px solid #fa852f;
500
+        }
501
+      }
502
+    }
503
+   }
504
+   
505
+
506
+  }
507
+}
508
+</style>

+ 156 - 7
src/pages/customerMan/index.vue

@@ -1,25 +1,119 @@
1 1
 <template>
2
-  <div>
3
-客户管理
2
+  <div class="mine">
3
+    <div class="condition">
4
+      <el-input placeholder="请输入内容"
5
+                class="search"
6
+                v-model="searchText">
7
+        <i slot="prefix"
8
+           class="el-input__icon el-icon-search"></i>
9
+      </el-input>
10
+      <el-button type="primary"
11
+                 class="searchButton"
12
+                 @click="search">搜索</el-button>
13
+    </div>
14
+
15
+    <div class="user-list">
16
+      <el-table ref="multipleTable"
17
+                :data="tableData"
18
+                tooltip-effect="dark"
19
+                height="354"
20
+                style="width: 100%;border-radius: 8px;"
21
+                @row-click="handleSelectionChange">
22
+        <el-table-column label="头像"
23
+                         width="120">
24
+          <template slot-scope="scope">
25
+            <div class="head-img"><img :src="scope.row.headImg"
26
+                   alt=""></div>
27
+          </template>
28
+        </el-table-column>
29
+        <el-table-column prop="name"
30
+                         label="昵称"
31
+                         width="120">
32
+        </el-table-column>
33
+        <el-table-column prop="phone"
34
+                         label="联系电话"
35
+                         show-overflow-tooltip>
36
+        </el-table-column>
37
+        <el-table-column prop="date"
38
+                         label="注册时间"
39
+                         show-overflow-tooltip>
40
+        </el-table-column>
41
+      </el-table>
42
+
43
+      <div class="pagin">
44
+        <el-pagination background
45
+                       layout="prev, pager, next"
46
+                       @size-change="handleSizeChange"
47
+                       @current-change="handleCurrentChange"
48
+                       :current-page.sync="currentPage1"
49
+                       :total="1000">
50
+        </el-pagination>
51
+      </div>
52
+    </div>
4 53
   </div>
5 54
 </template>
6 55
 
7 56
 <script>
8 57
 export default {
9 58
   components: {},
10
-  data() {
11
-    return {};
59
+  data () {
60
+    return {
61
+      searchText: '',
62
+      dates: '',
63
+      coupon: '',
64
+      couponList: [
65
+        {
66
+          value: '选项1',
67
+          label: '黄金糕'
68
+        }, {
69
+          value: '选项2',
70
+          label: '双皮奶'
71
+        }
72
+      ],
73
+      tableData: [{
74
+        date: '2022.04.25  14:30',
75
+        name: '滴滴滴',
76
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
77
+        phone: '13346783645',
78
+        status: '已完成'
79
+      },
80
+      {
81
+        date: '2022.04.25  14:30',
82
+        name: '滴滴滴',
83
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
84
+        phone: '13346783645',
85
+        status: '已完成'
86
+      },
87
+
88
+      ],
89
+      currentPage1: 1,
90
+      multipleSelection: ''
91
+
92
+    };
12 93
   },
13 94
   computed: {},
14 95
   watch: {},
15 96
 
16
-  methods: {},
97
+  methods: {
98
+    search () { },
99
+    handleSizeChange (val) {
100
+      console.log(`每页 ${val} 条`);
101
+    },
102
+    handleCurrentChange (val) {
103
+      console.log(`当前页: ${val}`);
104
+    },
105
+    handleSelectionChange (row, column, event) {
106
+      this.$router.push({
107
+        path: '/customerMan/details'
108
+      })
109
+    },
110
+  },
17 111
 
18
-  created() {
112
+  created () {
19 113
 
20 114
   },
21 115
 
22
-  mounted() {
116
+  mounted () {
23 117
 
24 118
   },
25 119
 }
@@ -27,5 +121,60 @@ export default {
27 121
 </script>
28 122
 
29 123
 <style lang='less' scoped>
124
+.mine {
125
+  .condition {
126
+    display: flex;
127
+    .coupon-select {
128
+      width: 174px;
129
+      margin-left: 18px;
130
+    }
131
+    .search {
132
+      width: 152px;
133
+      margin-left: 18px;
134
+    }
135
+
136
+    .searchButton {
137
+      margin-left: 18px;
138
+      width: 68px;
139
+      background: #fa7d22;
140
+      border-radius: 2px;
141
+      border-color: #fa7d22;
142
+    }
143
+  }
144
+  .user-list {
145
+    margin-top: 18px;
146
+    padding: 0 12px;
147
+    width: 100%;
148
+    background: #ffffff;
149
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
150
+    border-radius: 8px;
151
+    .head-img {
152
+      width: 36px;
153
+      height: 36px;
154
+      border-radius: 50%;
30 155
 
156
+      img {
157
+        width: 100%;
158
+        height: 100%;
159
+      }
160
+    }
161
+    .pagin {
162
+      padding: 20px 0;
163
+      .el-pagination {
164
+        text-align: center;
165
+      }
166
+    }
167
+    /deep/ .el-table th > .cell {
168
+      font-size: 14px !important;
169
+      font-family: PingFangSC-Regular, PingFang SC;
170
+      font-weight: 400;
171
+      color: #999999;
172
+      line-height: 20px;
173
+    }
174
+    /deep/ .el-table td,
175
+    .el-table th.is-leaf {
176
+      border-bottom: none;
177
+    }
178
+  }
179
+}
31 180
 </style>

+ 201 - 0
src/pages/customerMan/myOrder/index.vue

@@ -0,0 +1,201 @@
1
+<template>
2
+  <div class="order">
3
+    <div class="warp">
4
+      <el-tabs type="border-card">
5
+        <el-tab-pane label="项目订单">
6
+          <div class="user-list">
7
+            <el-table
8
+              ref="multipleTable"
9
+              :data="tableData"
10
+              tooltip-effect="dark"
11
+              height="354"
12
+              style="width: 100%;border-radius: 8px;"
13
+              @row-click="handleSelectionChange"
14
+            >
15
+              <el-table-column prop="name" label="项目名称" width="120"></el-table-column>
16
+              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></el-table-column>
17
+              <el-table-column prop="price" label="总价格" show-overflow-tooltip></el-table-column>
18
+              <el-table-column prop="date" label="预约时间" width="180" show-overflow-tooltip></el-table-column>
19
+              <el-table-column prop="shop" label="预约店铺" show-overflow-tooltip></el-table-column>
20
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
21
+                <template slot-scope="scope">
22
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
23
+                </template>
24
+              </el-table-column>
25
+            </el-table>
26
+
27
+            <div class="pagin">
28
+              <el-pagination
29
+                background
30
+                layout="prev, pager, next"
31
+                @size-change="handleSizeChange"
32
+                @current-change="handleCurrentChange"
33
+                :current-page.sync="currentPage1"
34
+                :total="1000"
35
+              ></el-pagination>
36
+            </div>
37
+          </div>
38
+        </el-tab-pane>
39
+        <el-tab-pane label="卡卷订单">
40
+          <div class="user-list">
41
+            <el-table
42
+              ref="multipleTable"
43
+              :data="tableData"
44
+              tooltip-effect="dark"
45
+              height="354"
46
+              style="width: 100%;border-radius: 8px;"
47
+              @row-click="handleSelectionChange"
48
+            >
49
+              <el-table-column prop="name" label="卡卷名称" width="120"></el-table-column>
50
+              <el-table-column prop="numberList" label="卡卷类型" show-overflow-tooltip></el-table-column>
51
+              <el-table-column prop="price" label="总价格" show-overflow-tooltip></el-table-column>
52
+              <el-table-column prop="date" label="到期时间" width="180" show-overflow-tooltip></el-table-column>
53
+              <el-table-column prop="date" label="创建时间" width="180" show-overflow-tooltip></el-table-column>
54
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
55
+                <template slot-scope="scope">
56
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
57
+                </template>
58
+              </el-table-column>
59
+            </el-table>
60
+
61
+            <div class="pagin">
62
+              <el-pagination
63
+                background
64
+                layout="prev, pager, next"
65
+                @size-change="handleSizeChange"
66
+                @current-change="handleCurrentChange"
67
+                :current-page.sync="currentPage1"
68
+                :total="1000"
69
+              ></el-pagination>
70
+            </div>
71
+          </div>
72
+        </el-tab-pane>
73
+
74
+        <el-tab-pane label="商品订单">
75
+          <div class="user-list">
76
+            <el-table
77
+              ref="multipleTable"
78
+              :data="tableData"
79
+              tooltip-effect="dark"
80
+              height="354"
81
+              style="width: 100%;border-radius: 8px;"
82
+              @row-click="handleSelectionChange"
83
+            >
84
+              <el-table-column prop="name" label="商品名称" width="120"></el-table-column>
85
+              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></el-table-column>
86
+              <el-table-column prop="price" label="实付款" show-overflow-tooltip></el-table-column>
87
+              <el-table-column prop="date" label="下单时间" width="180" show-overflow-tooltip></el-table-column>
88
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
89
+                <template slot-scope="scope">
90
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
91
+                </template>
92
+              </el-table-column>
93
+            </el-table>
94
+
95
+            <div class="pagin">
96
+              <el-pagination
97
+                background
98
+                layout="prev, pager, next"
99
+                @size-change="handleSizeChange"
100
+                @current-change="handleCurrentChange"
101
+                :current-page.sync="currentPage1"
102
+                :total="1000"
103
+              ></el-pagination>
104
+            </div>
105
+          </div>
106
+        </el-tab-pane>
107
+      </el-tabs>
108
+    </div>
109
+  </div>
110
+</template>
111
+
112
+<script>
113
+export default {
114
+  data() {
115
+    return {
116
+      couponList: [
117
+        {
118
+          value: "选项1",
119
+          label: "黄金糕"
120
+        },
121
+        {
122
+          value: "选项2",
123
+          label: "双皮奶"
124
+        }
125
+      ],
126
+      tableData: [
127
+        {
128
+          date: "2022.04.25  14:30",
129
+          name: "滴滴滴",
130
+          headImg:
131
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
132
+          phone: "13346783645",
133
+          numberList: 2,
134
+          price: 100,
135
+          shop: "运用店",
136
+          status: 2
137
+        },
138
+        {
139
+          date: "2022.04.25  14:30",
140
+          name: "滴滴滴",
141
+          headImg:
142
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
143
+          phone: "13346783645",
144
+          numberList: 5,
145
+          price: 800,
146
+          shop: "武昌店",
147
+          status: 1
148
+        }
149
+      ],
150
+      statusStr: ["未完成", "代发货", "代使用", "已完成"],
151
+      currentPage1: 1,
152
+      multipleSelection: ""
153
+    };
154
+  },
155
+  computed: {},
156
+  watch: {},
157
+
158
+  methods: {
159
+    handleSizeChange(val) {
160
+      console.log(`每页 ${val} 条`);
161
+    },
162
+    handleCurrentChange(val) {
163
+      console.log(`当前页: ${val}`);
164
+    },
165
+    handleSelectionChange(row, column, event) {},
166
+    onSubmit() {},
167
+    submitFrequency() {}
168
+  },
169
+
170
+  created() {},
171
+
172
+  mounted() {}
173
+};
174
+</script>
175
+
176
+<style lang='less' scoped>
177
+.order {
178
+  height: 100%;
179
+  width: 100%;
180
+  .pagin {
181
+    padding: 20px 0;
182
+    .el-pagination {
183
+      text-align: center;
184
+    }
185
+  }
186
+  .colorList {
187
+    color: green;
188
+  }
189
+}
190
+.classShow1 {
191
+  color: #00EC67;
192
+}
193
+
194
+.classShow0 {
195
+  color: #FF1818;
196
+}
197
+
198
+.priceColor {
199
+  color: #ff3007;
200
+}
201
+</style>

+ 5 - 0
src/router/map/home.js

@@ -6,12 +6,15 @@ import Home from '@/pages/home/index.vue'
6 6
 import TestSkin from '@/pages/testSkin/index'
7 7
 import TestSkinDetails from '@/pages/testSkin/details'
8 8
 import CustomerMan from '@/pages/customerMan/index'
9
+import CustomerManDetails from '@/pages/customerMan/details'
9 10
 import HistoricalOrder from '@/pages/historicalOrder/index'
10 11
 import HistoricalOrderDetails from '@/pages/historicalOrder/details'
11 12
 import ConfirmOrder from '@/pages/confirmOrder/index'
12 13
 import ConfirmOrderDetails from '@/pages/confirmOrder/details'
13 14
 import StoreDetection from '@/pages/storeDetection/index'
14 15
 import Coupon from '@/pages/coupon/index'
16
+import projectOrder from '@/pages/customerMan/myOrder'
17
+
15 18
 export default {
16 19
   path: '/',
17 20
   name: '首页',
@@ -21,6 +24,8 @@ export default {
21 24
     { path: '/testSkin', component: TestSkin },
22 25
     { path: '/testSkin/details', component: TestSkinDetails },
23 26
     { path: '/customerMan', component: CustomerMan },
27
+    { path: '/customerMan/details', component: CustomerManDetails },
28
+    { path: '/customerMan/projectOrder', component: projectOrder },
24 29
     { path: '/historicalOrder', component: HistoricalOrder },
25 30
     { path: '/historicalOrder/details', component: HistoricalOrderDetails },
26 31
     { path: '/confirmOrder', component: ConfirmOrder },