Quellcode durchsuchen

feat: 确定订单

lihai vor 2 Jahren
Ursprung
Commit
eea3b7cc55

+ 8 - 6
src/components/common/layout/leftMenu.vue

@@ -68,12 +68,14 @@ export default {
68 68
           path: "/confirmOrder",
69 69
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unconfirmOrder.png',
70 70
           icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/confirmOrder.png'
71
-        }, {
72
-          name: "门店检测",
73
-          path: "/storeDetection",
74
-          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
75
-          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
76
-        }, {
71
+        },
72
+        //  {
73
+        //   name: "门店检测",
74
+        //   path: "/storeDetection",
75
+        //   icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
76
+        //   unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
77
+        // }, 
78
+        {
77 79
           name: "客户管理",
78 80
           path: "/customerMan",
79 81
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png',

+ 14 - 14
src/config/env.js

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

+ 812 - 0
src/pages/confirmOrder/details/index.vue

@@ -0,0 +1,812 @@
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
+      </div>
14
+      <div class="user-record">
15
+        <div class="fraction">
16
+          <div class="title">肌肤得分</div>
17
+          <div class="num">37分</div>
18
+        </div>
19
+        <div class="status">
20
+          <div class="title">皮肤状态</div>
21
+          <div class="tips">肤质一般</div>
22
+        </div>
23
+        <div class="times">
24
+          <div class="title">上传检测时间</div>
25
+          <div class="ts">2022.04.18 16:04</div>
26
+        </div>
27
+      </div>
28
+      <div class="lable">
29
+        <div class="lable-title">
30
+          面诊标签
31
+        </div>
32
+        <div class="lable-list">
33
+          <div v-for="(item,index) in lableList"
34
+               :key="index"
35
+               class='lable-info'>
36
+            {{item.text}}
37
+          </div>
38
+        </div>
39
+      </div>
40
+      <div class="ps">
41
+        <div class="ps-title">
42
+          备注
43
+        </div>
44
+        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
45
+      </div>
46
+      <div class="programme">
47
+        <div class="tab">
48
+          <div class="tab-title">执行方案</div>
49
+        </div>
50
+        <div class="programme-list">
51
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
52
+               v-for="(item,index) in programmeList"
53
+               :key="index"
54
+               @click="onOperation(index)">
55
+            <div class="programme-left">
56
+              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
57
+                     alt=""></div>
58
+              <div class="programme-tips">
59
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
60
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
61
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
62
+              </div>
63
+            </div>
64
+            <div class="programme-right">
65
+              <div class="frequency">执行频率:<span>{{item.frequency}}</span></div>
66
+              <div class="duration">持续时长:<span>{{item.duration}}</span></div>
67
+            </div>
68
+            <div class="operation"
69
+                 v-if="item.onSelect">
70
+              <div class="edit">编辑</div>
71
+              <div class="delete">删除</div>
72
+            </div>
73
+          </div>
74
+        </div>
75
+      </div>
76
+    </div>
77
+    <div class="right">
78
+      <div class="shop-info">
79
+        <div class="shpo-name">预约店铺:<span>JOLIJOLI(西安店)</span></div>
80
+        <div class="shpo-address">门店地址:<span>JOLIJOLI(西安店)</span></div>
81
+        <div class="shpo-ts">美容时间:<span>JOLIJOLI(西安店)</span></div>
82
+      </div>
83
+      <div class="project">
84
+        <div class="project-title">
85
+          <div>共<span>3个</span>项目</div>
86
+          <div class="add-project">添加</div>
87
+        </div>
88
+        <div class="project-list">
89
+          <div class="project-info"
90
+               v-for="(item,index) in programmeList"
91
+               :key="index">
92
+            <div class="project-image"><img :src="item.image"></div>
93
+            <div class="project-content">
94
+              <div class="title-price">
95
+                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
96
+                <div class="project-price"><span class="min-size">¥</span>{{item.price}}</div>
97
+              </div>
98
+              <div class="project-tips">{{item.tips}}</div>
99
+              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
100
+            </div>
101
+          </div>
102
+        </div>
103
+      </div>
104
+      <div class="cost">
105
+        <div class="cost-title">
106
+          <div>预约费用</div>
107
+          <div>¥399</div>
108
+        </div>
109
+        <div class="cost-coupon-list">
110
+          <div class="coupon">
111
+            <div class="coupon-tips">
112
+              <div class="coupon-icon"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
113
+                     alt=""></div>
114
+              <div class="coupon-title">优惠卷</div>
115
+              <div class="coupon-tip">已选推荐优惠</div>
116
+            </div>
117
+            <div class="on-icon">></div>
118
+          </div>
119
+          <div class="coupon-ps">
120
+            <div>【敏感维稳】多元修护加乘维稳</div>
121
+            <div class="cou-price">-¥100</div>
122
+          </div>
123
+        </div>
124
+        <div class="over-price">
125
+          合计: <span class="price-num"><span class="min-size">¥</span>399<span class="min-size">.00</span></span>
126
+        </div>
127
+      </div>
128
+      <div class="payment">立即支付</div>
129
+    </div>
130
+    <!-- 选择优惠券 -->
131
+    <mine-pupop :show="isCoupun">
132
+      <div class="coupon-block">
133
+        <div class="delete-pupop"
134
+             @click="isCoupun=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
135
+               alt=""></div>
136
+        <div class="coupon-pupop-title">选择优惠券</div>
137
+        <div class="coupon-lists">
138
+          <div class="coupon-info">
139
+            <div class="top">
140
+              <div v-if="false"
141
+                   class="all-free">全免</div>
142
+              <div v-else
143
+                   class="discount">
144
+                <div class="price-num"><span class="size">¥</span>10<span class="size">.00</span></div>
145
+                <div class="price-tips">满100元可用</div>
146
+              </div>
147
+              <div class="coupon-tip">
148
+                <div class="tips-title">仅限指定商品使用</div>
149
+                <div class="tips-ts">有效期至2022.02.07</div>
150
+              </div>
151
+              <div class="choice-icon"><img :src="select"></div>
152
+            </div>
153
+            <div class="bottom">
154
+              <div class=""></div>
155
+            </div>
156
+          </div>
157
+        </div>
158
+      </div>
159
+    </mine-pupop>
160
+  </div>
161
+</template>
162
+
163
+<script>
164
+import minePupop from '../../../components/minePupop/index.vue'
165
+
166
+export default {
167
+  components: { minePupop },
168
+  data () {
169
+    return {
170
+      select: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/select.png',
171
+      unSelect: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png',
172
+      userInfo: {
173
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
174
+        name: '张三',
175
+        sex: '女',
176
+        age: '23',
177
+        skinType: '中性皮肤'
178
+      },
179
+      //面部标签
180
+      lableList: [
181
+        {
182
+          text: '对话框的',
183
+          disabled: false
184
+        },
185
+        {
186
+          text: '对话框的',
187
+          disabled: true
188
+        },
189
+        {
190
+          text: '对话框的',
191
+          disabled: false
192
+        },
193
+        {
194
+          text: '对话框的',
195
+          disabled: false
196
+        },
197
+        {
198
+          text: '对话框的',
199
+          disabled: false
200
+        },
201
+        {
202
+          text: '对话框的',
203
+          disabled: false
204
+        },
205
+        {
206
+          text: '对话框的',
207
+          disabled: false
208
+        },
209
+        {
210
+          text: '对话框的',
211
+          disabled: false
212
+        },
213
+        {
214
+          text: '对话框的',
215
+          disabled: false
216
+        },
217
+        {
218
+          text: '对话框的',
219
+          disabled: false
220
+        },
221
+      ],
222
+      //执行方案
223
+      programmeList: [
224
+        {
225
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
226
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
227
+          tips: '+润百颜精华',
228
+          zoom: '皮肤综合仪(30号房)',
229
+          ts: '30分钟',
230
+          price: '79.00'
231
+        },
232
+        {
233
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
234
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
235
+          tips: '+润百颜精华',
236
+          zoom: '皮肤综合仪(30号房)',
237
+          ts: '30分钟',
238
+          price: '79.00'
239
+        },
240
+        {
241
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
242
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
243
+          tips: '+润百颜精华',
244
+          zoom: '皮肤综合仪(30号房)',
245
+          ts: '30分钟',
246
+          price: '79.00'
247
+        },
248
+      ],
249
+      //项目列表
250
+      projectList: [{
251
+        value: '选项1',
252
+        label: '黄金糕'
253
+      }, {
254
+        value: '选项2',
255
+        label: '双皮奶'
256
+      }, {
257
+        value: '选项3',
258
+        label: '蚵仔煎'
259
+      }, {
260
+        value: '选项4',
261
+        label: '龙须面'
262
+      }, {
263
+        value: '选项5',
264
+        label: '北京烤鸭'
265
+      }],
266
+      couponList: [
267
+        {
268
+
269
+        }
270
+      ],
271
+      timesInfo: '',
272
+      projectInfo: '',
273
+      weekInfo: '',
274
+      programmeIndex: '',
275
+      remarks: '',
276
+      isCoupun: true
277
+    };
278
+  },
279
+  computed: {
280
+
281
+  },
282
+  watch: {},
283
+
284
+  methods: {
285
+    onOperation (index) {
286
+      if (this.programmeList[index].onSelect) {
287
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
288
+      } else {
289
+        this.$set(this.programmeList[index], 'onSelect', true)
290
+      }
291
+    },
292
+    onSubmit () {
293
+
294
+    },
295
+    submitFrequency () { },
296
+  },
297
+
298
+  created () {
299
+
300
+  },
301
+
302
+  mounted () {
303
+
304
+  },
305
+}
306
+
307
+</script>
308
+
309
+<style lang='less' scoped>
310
+.mine {
311
+  height: 100%;
312
+  display: flex;
313
+  .left {
314
+    width: 318px;
315
+    padding: 12px 12px 0 12px;
316
+    background: #ffffff;
317
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
318
+    border-radius: 8px;
319
+    font-size: 13px;
320
+    font-family: PingFangSC-Regular, PingFang SC;
321
+    font-weight: 400;
322
+    color: #999999;
323
+    line-height: 18px;
324
+    overflow: scroll;
325
+    height: 100%;
326
+    .user-info {
327
+      display: flex;
328
+      align-items: center;
329
+      .user-img {
330
+        width: 96px;
331
+        img {
332
+          width: 100%;
333
+          display: block;
334
+        }
335
+      }
336
+      .user-span {
337
+        margin-left: 12px;
338
+
339
+        span {
340
+          color: #333333;
341
+        }
342
+      }
343
+    }
344
+    .user-record {
345
+      margin-top: 16px;
346
+      display: flex;
347
+      justify-content: space-between;
348
+      .num {
349
+        font-size: 18px;
350
+        font-family: OPPOSans-B, OPPOSans;
351
+        font-weight: normal;
352
+        color: #fa7d22;
353
+        line-height: 29px;
354
+      }
355
+      .tips {
356
+        font-size: 13px;
357
+        font-family: PingFangSC-Regular, PingFang SC;
358
+        font-weight: 400;
359
+        color: #333333;
360
+        line-height: 30px;
361
+      }
362
+      .ts {
363
+        font-size: 13px;
364
+        font-family: PingFangSC-Regular, PingFang SC;
365
+        font-weight: 400;
366
+        color: #333333;
367
+        line-height: 30px;
368
+      }
369
+    }
370
+    .lable {
371
+      margin-top: 23px;
372
+      width: 100%;
373
+      overflow: scroll;
374
+      background: #ffffff;
375
+      .lable-title {
376
+        font-size: 14px;
377
+        font-family: PingFangSC-Medium, PingFang SC;
378
+        font-weight: 500;
379
+        color: #333333;
380
+        line-height: 20px;
381
+        margin-bottom: 14px;
382
+      }
383
+      .lable-list {
384
+        width: 100%;
385
+        min-height: 105rpx;
386
+        .lable-info {
387
+          display: inline-block;
388
+          padding: 0 12px;
389
+          margin-left: 10px;
390
+          height: 24px;
391
+          line-height: 24px;
392
+          border-radius: 2px;
393
+          border: 1px solid #d6d6d6;
394
+          margin-bottom: 10px;
395
+        }
396
+        .add-lable {
397
+          display: inline-block;
398
+          width: 27px;
399
+          height: 24px;
400
+          line-height: 24px;
401
+          font-size: 12px;
402
+          font-family: PingFang-SC-Regular, PingFang-SC;
403
+          font-weight: 400;
404
+          color: #333333;
405
+          text-align: center;
406
+          margin-left: 10px;
407
+          border-radius: 2px;
408
+          border: 1px solid #d6d6d6;
409
+        }
410
+      }
411
+      .remarks {
412
+        /deep/ .el-textarea__inner:focus {
413
+          border-color: #fa852f;
414
+        }
415
+      }
416
+    }
417
+    .ps {
418
+      font-size: 14px;
419
+      font-family: PingFangSC-Medium, PingFang SC;
420
+      font-weight: 500;
421
+      color: #333333;
422
+      line-height: 20px;
423
+      .ps-text {
424
+        margin-top: 10px;
425
+        font-size: 12px;
426
+        font-weight: 400;
427
+        color: #666666;
428
+        line-height: 17px;
429
+      }
430
+    }
431
+    .programme {
432
+      margin-top: 20px;
433
+      width: 100%;
434
+      background: #ffffff;
435
+      border-radius: 8px;
436
+
437
+      .tab {
438
+        display: flex;
439
+        align-items: center;
440
+        justify-content: space-between;
441
+        .tab-title {
442
+          font-size: 14px;
443
+          font-family: PingFangSC-Medium, PingFang SC;
444
+          font-weight: 500;
445
+          color: #333333;
446
+          line-height: 20px;
447
+        }
448
+      }
449
+      .programme-list {
450
+        margin-top: 10px;
451
+        position: relative;
452
+        z-index: 1;
453
+        .programme-info {
454
+          position: relative;
455
+          margin-bottom: 10px;
456
+          border-radius: 4px;
457
+          border: 1px solid #f5f5f5;
458
+          display: flex;
459
+          justify-content: space-between;
460
+          padding: 8px 8px 8px 10px;
461
+          align-items: center;
462
+          .programme-left {
463
+            display: flex;
464
+            align-items: center;
465
+            .programme-img {
466
+              width: 48px;
467
+              display: inline-block;
468
+              img {
469
+                width: 100%;
470
+                display: block;
471
+              }
472
+            }
473
+            .programme-tips {
474
+              display: inline-block;
475
+              margin-left: 10px;
476
+              font-size: 10px;
477
+              font-family: PingFangSC-Regular, PingFang SC;
478
+              font-weight: 400;
479
+              color: #999999;
480
+              line-height: 14px;
481
+              zoom: 0.83;
482
+            }
483
+          }
484
+          .programme-right {
485
+            font-size: 12px;
486
+            font-family: PingFangSC-Regular, PingFang SC;
487
+            font-weight: 400;
488
+            color: #333333;
489
+            line-height: 17px;
490
+            .duration {
491
+              margin-top: 14px;
492
+            }
493
+          }
494
+          .operation {
495
+            position: absolute;
496
+            left: 50%;
497
+            transform: translateX(-50%);
498
+            top: 10px;
499
+            z-index: 10;
500
+            width: 44px;
501
+            background: #ffffff;
502
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
503
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
504
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
505
+            border-radius: 2px;
506
+            padding: 10px;
507
+            font-size: 12px;
508
+            font-family: PingFangSC-Regular, PingFang SC;
509
+            font-weight: 400;
510
+            color: #333333;
511
+            line-height: 17px;
512
+            .delete {
513
+              margin-top: 20px;
514
+            }
515
+          }
516
+        }
517
+        .programme-active {
518
+          border: 1px solid #fa852f;
519
+        }
520
+      }
521
+    }
522
+  }
523
+  .right {
524
+    margin-left: 18px;
525
+    position: relative;
526
+    flex: 1;
527
+    .shop-info {
528
+      background: #ffffff;
529
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
530
+      border-radius: 8px;
531
+      padding: 12px;
532
+      font-size: 13px;
533
+      font-family: PingFangSC-Regular, PingFang SC;
534
+      font-weight: 400;
535
+      color: #999999;
536
+      line-height: 24px;
537
+      span {
538
+        font-weight: 500;
539
+        color: #333333;
540
+      }
541
+    }
542
+    .project {
543
+      margin-top: 18px;
544
+      background: #ffffff;
545
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
546
+      border-radius: 8px;
547
+      padding: 16px 12px 12px 12px;
548
+      .project-title {
549
+        padding-bottom: 7px;
550
+        font-size: 14px;
551
+        font-family: PingFangSC-Medium, PingFang SC;
552
+        font-weight: 500;
553
+        color: #333333;
554
+        line-height: 20px;
555
+        display: flex;
556
+        justify-content: space-between;
557
+        align-items: center;
558
+        span {
559
+          color: #fa7d22;
560
+        }
561
+        .add-project {
562
+          width: 60px;
563
+          height: 28px;
564
+          background: #fa7d22;
565
+          border-radius: 8px;
566
+          font-size: 14px;
567
+          font-family: PingFangSC-Medium, PingFang SC;
568
+          font-weight: 500;
569
+          color: #ffffff;
570
+          line-height: 28px;
571
+          text-align: center;
572
+        }
573
+      }
574
+      .project-list {
575
+        padding-top: 10px;
576
+        height: 130px;
577
+        overflow: scroll;
578
+        .project-info {
579
+          margin-bottom: 10px;
580
+          display: flex;
581
+          .project-image {
582
+            width: 60px;
583
+            height: 60px;
584
+            img {
585
+              width: 100%;
586
+              display: block;
587
+            }
588
+          }
589
+          .project-content {
590
+            flex: 1;
591
+            margin-left: 10px;
592
+            .title-price {
593
+              display: flex;
594
+              justify-content: space-between;
595
+              font-size: 14px;
596
+              font-family: PingFangSC-Medium, PingFang SC;
597
+              font-weight: 500;
598
+              color: #292929;
599
+              line-height: 22px;
600
+            }
601
+            .project-tips {
602
+              font-size: 12px;
603
+              font-family: PingFangSC-Regular, PingFang SC;
604
+              font-weight: 400;
605
+              color: #999999;
606
+              line-height: 18px;
607
+            }
608
+            .project-zoom {
609
+              font-size: 12px;
610
+              font-family: PingFangSC-Regular, PingFang SC;
611
+              font-weight: 400;
612
+              color: #fa7d22;
613
+              line-height: 18px;
614
+            }
615
+          }
616
+        }
617
+      }
618
+    }
619
+    .cost {
620
+      overflow: scroll;
621
+      background: #ffffff;
622
+      border-radius: 8px;
623
+      margin-top: 18px;
624
+      padding: 10px 19px 11px 12px;
625
+      font-size: 14px;
626
+      font-family: PingFangSC-Regular, PingFang SC;
627
+      font-weight: 400;
628
+      color: #333333;
629
+      line-height: 20px;
630
+      .cost-coupon-list {
631
+        border-bottom: 1px solid #f9f9f9;
632
+      }
633
+      .cost-title {
634
+        display: flex;
635
+        justify-content: space-between;
636
+      }
637
+      .coupon {
638
+        margin-top: 10px;
639
+        display: flex;
640
+        justify-content: space-between;
641
+        .coupon-tips {
642
+          display: flex;
643
+          align-items: center;
644
+          .coupon-icon {
645
+            width: 16px;
646
+            img {
647
+              width: 100%;
648
+              display: block;
649
+            }
650
+          }
651
+          .coupon-title {
652
+            margin-left: 3px;
653
+          }
654
+          .coupon-tip {
655
+            margin-left: 10px;
656
+            background: #ffefeb;
657
+            border-radius: 4px;
658
+            border: 1px solid #ff3007;
659
+            font-size: 10px;
660
+            font-family: PingFangSC-Regular, PingFang SC;
661
+            font-weight: 400;
662
+            color: #ff3007;
663
+            line-height: 14px;
664
+            padding: 2px 6px;
665
+            zoom: 0.83;
666
+          }
667
+        }
668
+      }
669
+      .coupon-ps {
670
+        margin-left: -6px;
671
+        margin-top: 11px;
672
+        display: flex;
673
+        justify-content: space-between;
674
+        font-size: 12px;
675
+        font-family: PingFangSC-Regular, PingFang SC;
676
+        font-weight: 400;
677
+        color: #333333;
678
+        line-height: 17px;
679
+        .cou-price {
680
+          font-weight: 500;
681
+          color: #ff3007;
682
+        }
683
+      }
684
+      .over-price {
685
+        margin-top: 14px;
686
+        text-align: right;
687
+        .price-num {
688
+          font-size: 18px;
689
+          font-family: PingFangSC-Medium, PingFang SC;
690
+          font-weight: 500;
691
+          color: #ff3007;
692
+          line-height: 25px;
693
+        }
694
+      }
695
+    }
696
+    .payment {
697
+      position: relative;
698
+      margin-top: 18px;
699
+      left: 50%;
700
+      transform: translateX(-50%);
701
+      width: 176px;
702
+      height: 28px;
703
+      background: #fa7d22;
704
+      border-radius: 14px;
705
+      font-size: 14px;
706
+      font-family: PingFangSC-Medium, PingFang SC;
707
+      font-weight: 500;
708
+      color: #ffffff;
709
+      line-height: 28px;
710
+      text-align: center;
711
+    }
712
+  }
713
+  .coupon-block {
714
+    width: 540px;
715
+    height: 400px;
716
+    background: #ffffff;
717
+    border-radius: 8px;
718
+    position: relative;
719
+    padding: 42px;
720
+    .delete-pupop {
721
+      width: 32px;
722
+      position: absolute;
723
+      right: 5px;
724
+      top: 5px;
725
+      img {
726
+        width: 100%;
727
+      }
728
+    }
729
+    .coupon-pupop-title {
730
+      font-size: 14px;
731
+      font-family: PingFangSC-Medium, PingFang SC;
732
+      font-weight: 500;
733
+      color: #333333;
734
+      line-height: 20px;
735
+      text-align: center;
736
+    }
737
+    .coupon-lists {
738
+      display: inline-block;
739
+      position: relative;
740
+      left: 50%;
741
+      transform: translateX(-50%);
742
+      margin-top: 20px;
743
+      height: 228px;
744
+      overflow: scroll;
745
+      .coupon-info {
746
+        width: 345px;
747
+        padding: 20px 14px 0 14px;
748
+        position: relative;
749
+        background: #fff4e6;
750
+        border-radius: 12px;
751
+        .top {
752
+          display: flex;
753
+          justify-content: space-between;
754
+          align-items: center;
755
+          padding-bottom: 10px;
756
+          border-bottom: 1px dashed #ffdfb6;
757
+          .all-free {
758
+            font-size: 22px;
759
+            font-family: PingFangSC-Medium, PingFang SC;
760
+            font-weight: 500;
761
+            color: #ff3007;
762
+            line-height: 30px;
763
+          }
764
+          .discount {
765
+            .price-num {
766
+              font-size: 28px;
767
+              font-family: PingFangSC-Medium, PingFang SC;
768
+              font-weight: 500;
769
+              color: #ff3007;
770
+              line-height: 40px;
771
+              .size {
772
+                font-size: 14px;
773
+                line-height: 20px;
774
+              }
775
+            }
776
+            .price-tips {
777
+              font-size: 12px;
778
+              font-family: PingFangSC-Regular, PingFang SC;
779
+              font-weight: 400;
780
+              color: #ff3007;
781
+              line-height: 17px;
782
+            }
783
+          }
784
+          .coupon-tip {
785
+            .tips-title {
786
+              font-size: 16px;
787
+              font-family: PingFangSC-Medium, PingFang SC;
788
+              font-weight: 500;
789
+              color: #875617;
790
+              line-height: 22px;
791
+            }
792
+            .tips-ts {
793
+              margin-top: 4px;
794
+              font-size: 12px;
795
+              font-family: PingFangSC-Regular, PingFang SC;
796
+              font-weight: 400;
797
+              color: #875617;
798
+              line-height: 17px;
799
+            }
800
+          }
801
+          .choice-icon {
802
+            width: 20px;
803
+            img {
804
+              width: 100%;
805
+            }
806
+          }
807
+        }
808
+      }
809
+    }
810
+  }
811
+}
812
+</style>

+ 24 - 6
src/pages/confirmOrder/index.vue

@@ -1,13 +1,16 @@
1 1
 <template>
2
-  <div>
3
-    ConfirmOrder
2
+  <div class="mine">
3
+    <div class="qr-code">
4
+      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/orderQrCode.png"
5
+           alt="">
6
+    </div>
4 7
   </div>
5 8
 </template>
6 9
 
7 10
 <script>
8 11
 export default {
9 12
   components: {},
10
-  data() {
13
+  data () {
11 14
     return {};
12 15
   },
13 16
   computed: {},
@@ -15,11 +18,11 @@ export default {
15 18
 
16 19
   methods: {},
17 20
 
18
-  created() {
21
+  created () {
19 22
 
20 23
   },
21 24
 
22
-  mounted() {
25
+  mounted () {
23 26
 
24 27
   },
25 28
 }
@@ -27,5 +30,20 @@ export default {
27 30
 </script>
28 31
 
29 32
 <style lang='less' scoped>
30
-
33
+.mine {
34
+  width: 100%;
35
+  height: 100%;
36
+  display: flex;
37
+  justify-content: center;
38
+  align-items: center;
39
+  background: #ffffff;
40
+  box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
41
+  border-radius: 8px;
42
+  .qr-code {
43
+    width: 200px;
44
+    img {
45
+      width: 100%;
46
+    }
47
+  }
48
+}
31 49
 </style>

+ 244 - 7
src/pages/coupon/index.vue

@@ -1,25 +1,175 @@
1 1
 <template>
2
-  <div>
3
-    coupon
2
+  <div class="mine">
3
+    <div class="table">
4
+      <el-input class="search-input"
5
+                placeholder="请输入内容"
6
+                prefix-icon="el-icon-search"
7
+                size="mini"
8
+                v-model="searckItem">
9
+      </el-input>
10
+      <div class="search-button">搜索</div>
11
+      <div class="coupon">选择优惠券</div>
12
+      <el-select class="coupon-select"
13
+                 v-model="coupon"
14
+                 size="mini"
15
+                 placeholder="选择优惠券">
16
+        <el-option v-for="item in couponList"
17
+                   :key="item.value"
18
+                   :label="item.label"
19
+                   :value="item.value">
20
+        </el-option>
21
+      </el-select>
22
+      <div class="num-tips">数量</div>
23
+      <div class="coupon-num">
24
+        <div class="reduce"
25
+             @click="reduceNum">-</div>
26
+        <div class="num">{{couponNum}}</div>
27
+        <div class="add"
28
+             @click="couponNum++">+</div>
29
+      </div>
30
+      <div class="send-coupon"
31
+           style="margin-left: 39px;"
32
+           @click="sendCoupon">发送</div>
33
+    </div>
34
+    <div class="user-list">
35
+      <el-table ref="multipleTable"
36
+                :data="tableData"
37
+                tooltip-effect="dark"
38
+                height="454"
39
+                style="width: 100%;border-radius: 8px;"
40
+                @selection-change="handleSelectionChange">
41
+        <el-table-column type="selection"
42
+                         width="55">
43
+        </el-table-column>
44
+        <el-table-column label="头像"
45
+                         width="120">
46
+          <template slot-scope="scope">
47
+            <div class="head-img"><img :src="scope.row.headImg"
48
+                   alt=""></div>
49
+          </template>
50
+        </el-table-column>
51
+        <el-table-column prop="name"
52
+                         label="姓名"
53
+                         width="120">
54
+        </el-table-column>
55
+        <el-table-column prop="phone"
56
+                         label="联系电话"
57
+                         show-overflow-tooltip>
58
+        </el-table-column>
59
+        <el-table-column prop="date"
60
+                         label="注册时间"
61
+                         show-overflow-tooltip>
62
+        </el-table-column>
63
+      </el-table>
64
+    </div>
4 65
   </div>
5 66
 </template>
6 67
 
7 68
 <script>
8 69
 export default {
9 70
   components: {},
10
-  data() {
11
-    return {};
71
+  data () {
72
+    return {
73
+      searckItem: '',
74
+      couponList: [
75
+        {
76
+          value: '选项1',
77
+          label: '黄金糕'
78
+        }, {
79
+          value: '选项2',
80
+          label: '双皮奶'
81
+        }
82
+      ],
83
+      tableData: [{
84
+        date: '2022.04.25  14:30',
85
+        name: '滴滴滴',
86
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
87
+        phone: '13346783645'
88
+      }, {
89
+        date: '2022.04.25  14:30',
90
+        name: '滴滴滴',
91
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
92
+        phone: '13346783645'
93
+      }, {
94
+        date: '2022.04.25  14:30',
95
+        name: '滴滴滴',
96
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
97
+        phone: '13346783645'
98
+      }, {
99
+        date: '2022.04.25  14:30',
100
+        name: '滴滴滴',
101
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
102
+        phone: '13346783645'
103
+      }, {
104
+        date: '2022.04.25  14:30',
105
+        name: '滴滴滴',
106
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
107
+        phone: '13346783645'
108
+      }, {
109
+        date: '2022.04.25  14:30',
110
+        name: '滴滴滴',
111
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
112
+        phone: '13346783645'
113
+      }, {
114
+        date: '2022.04.25  14:30',
115
+        name: '滴滴滴',
116
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
117
+        phone: '13346783645'
118
+      }, {
119
+        date: '2022.04.25  14:30',
120
+        name: '滴滴滴',
121
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
122
+        phone: '13346783645'
123
+      }, {
124
+        date: '2022.04.25  14:30',
125
+        name: '滴滴滴',
126
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
127
+        phone: '13346783645'
128
+      }, {
129
+        date: '2022.04.25  14:30',
130
+        name: '滴滴滴',
131
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
132
+        phone: '13346783645'
133
+      }, {
134
+        date: '2022.04.25  14:30',
135
+        name: '滴滴滴',
136
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
137
+        phone: '13346783645'
138
+      }, {
139
+        date: '2022.04.25  14:30',
140
+        name: '滴滴滴',
141
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
142
+        phone: '13346783645'
143
+      }, {
144
+        date: '2022.04.25  14:30',
145
+        name: '滴滴滴',
146
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
147
+        phone: '13346783645'
148
+      },
149
+      ],
150
+      multipleSelection: [],//选中的列表
151
+      coupon: '',
152
+      couponNum: 1,//优惠券数量
153
+    };
12 154
   },
13 155
   computed: {},
14 156
   watch: {},
15 157
 
16
-  methods: {},
158
+  methods: {
159
+    reduceNum () {
160
+      this.couponNum > 1 ? this.couponNum-- : this.couponNum = 1
161
+    },
162
+    handleSelectionChange (val) {
163
+      this.multipleSelection = val;
164
+    },
165
+    sendCoupon () { },
166
+  },
17 167
 
18
-  created() {
168
+  created () {
19 169
 
20 170
   },
21 171
 
22
-  mounted() {
172
+  mounted () {
23 173
 
24 174
   },
25 175
 }
@@ -27,5 +177,92 @@ export default {
27 177
 </script>
28 178
 
29 179
 <style lang='less' scoped>
180
+.mine {
181
+  .table {
182
+    display: flex;
183
+    align-items: center;
184
+    font-size: 14px;
185
+    font-family: PingFangSC-Regular, PingFang SC;
186
+    font-weight: 400;
187
+    color: #333333;
188
+    line-height: 20px;
189
+    .search-input {
190
+      width: 152px;
191
+    }
192
+    .search-button,
193
+    .send-coupon {
194
+      margin-left: 16px;
195
+      width: 68px;
196
+      height: 28px;
197
+      line-height: 28px;
198
+      background: #fa7d22;
199
+      border-radius: 2px;
200
+      font-size: 14px;
201
+      font-family: PingFangSC-Medium, PingFang SC;
202
+      font-weight: 500;
203
+      color: #ffffff;
204
+      text-align: center;
205
+    }
206
+    .coupon {
207
+      margin-left: 40px;
208
+    }
209
+    .coupon-select {
210
+      margin-left: 12px;
211
+      width: 174px;
212
+    }
213
+    .num-tips {
214
+      margin-left: 40px;
215
+    }
216
+    .coupon-num {
217
+      margin-left: 12px;
218
+      background: #ffffff;
219
+      display: flex;
220
+      div {
221
+        width: 28px;
222
+        height: 28px;
223
+        line-height: 28px;
224
+        text-align: center;
225
+      }
226
+      .reduce,
227
+      .add {
228
+        border: 1px solid #d9d9d9;
229
+        line-height: 26px;
230
+        font-size: 18px;
231
+      }
232
+      .num {
233
+        border-top: 1px solid #d9d9d9;
234
+        border-bottom: 1px solid #d9d9d9;
235
+      }
236
+    }
237
+  }
238
+  .user-list {
239
+    margin-top: 18px;
240
+    padding: 0 12px;
241
+    width: 100%;
242
+    background: #ffffff;
243
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
244
+    border-radius: 8px;
245
+    .head-img {
246
+      width: 36px;
247
+      height: 36px;
248
+      border-radius: 50%;
30 249
 
250
+      img {
251
+        width: 100%;
252
+        height: 100%;
253
+      }
254
+    }
255
+    /deep/ .el-table th > .cell {
256
+      font-size: 14px !important;
257
+      font-family: PingFangSC-Regular, PingFang SC;
258
+      font-weight: 400;
259
+      color: #999999;
260
+      line-height: 20px;
261
+    }
262
+    /deep/ .el-table td,
263
+    .el-table th.is-leaf {
264
+      border-bottom: none;
265
+    }
266
+  }
267
+}
31 268
 </style>

+ 637 - 0
src/pages/historicalOrder/details/index.vue

@@ -0,0 +1,637 @@
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
+      </div>
14
+      <div class="user-record">
15
+        <div class="fraction">
16
+          <div class="title">肌肤得分</div>
17
+          <div class="num">37分</div>
18
+        </div>
19
+        <div class="status">
20
+          <div class="title">皮肤状态</div>
21
+          <div class="tips">肤质一般</div>
22
+        </div>
23
+        <div class="times">
24
+          <div class="title">上传检测时间</div>
25
+          <div class="ts">2022.04.18 16:04</div>
26
+        </div>
27
+      </div>
28
+      <div class="lable">
29
+        <div class="lable-title">
30
+          面诊标签
31
+        </div>
32
+        <div class="lable-list">
33
+          <div v-for="(item,index) in lableList"
34
+               :key="index"
35
+               class='lable-info'>
36
+            {{item.text}}
37
+          </div>
38
+        </div>
39
+      </div>
40
+      <div class="ps">
41
+        <div class="ps-title">
42
+          备注
43
+        </div>
44
+        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
45
+      </div>
46
+      <div class="programme">
47
+        <div class="tab">
48
+          <div class="tab-title">执行方案</div>
49
+        </div>
50
+        <div class="programme-list">
51
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
52
+               v-for="(item,index) in programmeList"
53
+               :key="index"
54
+               @click="onOperation(index)">
55
+            <div class="programme-left">
56
+              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
57
+                     alt=""></div>
58
+              <div class="programme-tips">
59
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
60
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
61
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
62
+              </div>
63
+            </div>
64
+            <div class="programme-right">
65
+              <div class="frequency">执行频率:<span>{{item.frequency}}</span></div>
66
+              <div class="duration">持续时长:<span>{{item.duration}}</span></div>
67
+            </div>
68
+            <div class="operation"
69
+                 v-if="item.onSelect">
70
+              <div class="edit">编辑</div>
71
+              <div class="delete">删除</div>
72
+            </div>
73
+          </div>
74
+        </div>
75
+      </div>
76
+    </div>
77
+    <div class="right">
78
+      <div class="shop-info">
79
+        <div class="shpo-name">预约店铺:<span>JOLIJOLI(西安店)</span></div>
80
+        <div class="shpo-address">门店地址:<span>JOLIJOLI(西安店)</span></div>
81
+        <div class="shpo-ts">美容时间:<span>JOLIJOLI(西安店)</span></div>
82
+      </div>
83
+      <div class="project">
84
+        <div class="project-title">
85
+          共<span>3个</span>项目
86
+        </div>
87
+        <div class="project-list">
88
+          <div class="project-info"
89
+               v-for="(item,index) in programmeList"
90
+               :key="index">
91
+            <div class="project-image"><img :src="item.image"></div>
92
+            <div class="project-content">
93
+              <div class="title-price">
94
+                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
95
+                <div class="project-price"><span class="min-size">¥</span>{{item.price}}</div>
96
+              </div>
97
+              <div class="project-tips">{{item.tips}}</div>
98
+              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
99
+            </div>
100
+          </div>
101
+        </div>
102
+      </div>
103
+      <div class="cost">
104
+        <div class="cost-title">
105
+          <div>预约费用</div>
106
+          <div>¥399</div>
107
+        </div>
108
+        <div class="cost-coupon-list">
109
+          <div class="coupon">
110
+            <div class="coupon-tips">
111
+              <div class="coupon-icon"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
112
+                     alt=""></div>
113
+              <div class="coupon-title">优惠卷</div>
114
+              <div class="coupon-tip">已选推荐优惠</div>
115
+            </div>
116
+            <div class="on-icon">></div>
117
+          </div>
118
+          <div class="coupon-ps">
119
+            <div>【敏感维稳】多元修护加乘维稳</div>
120
+            <div class="cou-price">-¥100</div>
121
+          </div>
122
+        </div>
123
+        <div class="over-price">
124
+          合计: <span><span class="min-size">¥</span>399<span class="min-size">.00</span></span>
125
+        </div>
126
+      </div>
127
+    </div>
128
+  </div>
129
+</template>
130
+
131
+<script>
132
+
133
+export default {
134
+  data () {
135
+    return {
136
+      userInfo: {
137
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
138
+        name: '张三',
139
+        sex: '女',
140
+        age: '23',
141
+        skinType: '中性皮肤'
142
+      },
143
+      //面部标签
144
+      lableList: [
145
+        {
146
+          text: '对话框的',
147
+          disabled: false
148
+        },
149
+        {
150
+          text: '对话框的',
151
+          disabled: true
152
+        },
153
+        {
154
+          text: '对话框的',
155
+          disabled: false
156
+        },
157
+        {
158
+          text: '对话框的',
159
+          disabled: false
160
+        },
161
+        {
162
+          text: '对话框的',
163
+          disabled: false
164
+        },
165
+        {
166
+          text: '对话框的',
167
+          disabled: false
168
+        },
169
+        {
170
+          text: '对话框的',
171
+          disabled: false
172
+        },
173
+        {
174
+          text: '对话框的',
175
+          disabled: false
176
+        },
177
+        {
178
+          text: '对话框的',
179
+          disabled: false
180
+        },
181
+        {
182
+          text: '对话框的',
183
+          disabled: false
184
+        },
185
+      ],
186
+      //执行方案
187
+      programmeList: [
188
+        {
189
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
190
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
191
+          tips: '+润百颜精华',
192
+          zoom: '皮肤综合仪(30号房)',
193
+          ts: '30分钟',
194
+          price: '79.00'
195
+        },
196
+        {
197
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
198
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
199
+          tips: '+润百颜精华',
200
+          zoom: '皮肤综合仪(30号房)',
201
+          ts: '30分钟',
202
+          price: '79.00'
203
+        },
204
+        {
205
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
206
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
207
+          tips: '+润百颜精华',
208
+          zoom: '皮肤综合仪(30号房)',
209
+          ts: '30分钟',
210
+          price: '79.00'
211
+        },
212
+      ],
213
+      //项目列表
214
+      projectList: [{
215
+        value: '选项1',
216
+        label: '黄金糕'
217
+      }, {
218
+        value: '选项2',
219
+        label: '双皮奶'
220
+      }, {
221
+        value: '选项3',
222
+        label: '蚵仔煎'
223
+      }, {
224
+        value: '选项4',
225
+        label: '龙须面'
226
+      }, {
227
+        value: '选项5',
228
+        label: '北京烤鸭'
229
+      }],
230
+      timesInfo: '',
231
+      projectInfo: '',
232
+      weekInfo: '',
233
+      programmeIndex: '',
234
+      remarks: '',
235
+      isPupop: false
236
+    };
237
+  },
238
+  computed: {
239
+
240
+  },
241
+  watch: {},
242
+
243
+  methods: {
244
+    onOperation (index) {
245
+      if (this.programmeList[index].onSelect) {
246
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
247
+      } else {
248
+        this.$set(this.programmeList[index], 'onSelect', true)
249
+      }
250
+    },
251
+    onSubmit () {
252
+
253
+    },
254
+    submitFrequency () { },
255
+  },
256
+
257
+  created () {
258
+
259
+  },
260
+
261
+  mounted () {
262
+
263
+  },
264
+}
265
+
266
+</script>
267
+
268
+<style lang='less' scoped>
269
+.mine {
270
+  height: 100%;
271
+  display: flex;
272
+  .left {
273
+    width: 318px;
274
+    padding: 12px 12px 0 12px;
275
+    background: #ffffff;
276
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
277
+    border-radius: 8px;
278
+    font-size: 13px;
279
+    font-family: PingFangSC-Regular, PingFang SC;
280
+    font-weight: 400;
281
+    color: #999999;
282
+    line-height: 18px;
283
+    overflow: scroll;
284
+    height: 100%;
285
+    .user-info {
286
+      display: flex;
287
+      align-items: center;
288
+      .user-img {
289
+        width: 96px;
290
+        img {
291
+          width: 100%;
292
+          display: block;
293
+        }
294
+      }
295
+      .user-span {
296
+        margin-left: 12px;
297
+
298
+        span {
299
+          color: #333333;
300
+        }
301
+      }
302
+    }
303
+    .user-record {
304
+      margin-top: 16px;
305
+      display: flex;
306
+      justify-content: space-between;
307
+      .num {
308
+        font-size: 18px;
309
+        font-family: OPPOSans-B, OPPOSans;
310
+        font-weight: normal;
311
+        color: #fa7d22;
312
+        line-height: 29px;
313
+      }
314
+      .tips {
315
+        font-size: 13px;
316
+        font-family: PingFangSC-Regular, PingFang SC;
317
+        font-weight: 400;
318
+        color: #333333;
319
+        line-height: 30px;
320
+      }
321
+      .ts {
322
+        font-size: 13px;
323
+        font-family: PingFangSC-Regular, PingFang SC;
324
+        font-weight: 400;
325
+        color: #333333;
326
+        line-height: 30px;
327
+      }
328
+    }
329
+    .lable {
330
+      margin-top: 23px;
331
+      width: 100%;
332
+      overflow: scroll;
333
+      background: #ffffff;
334
+      .lable-title {
335
+        font-size: 14px;
336
+        font-family: PingFangSC-Medium, PingFang SC;
337
+        font-weight: 500;
338
+        color: #333333;
339
+        line-height: 20px;
340
+        margin-bottom: 14px;
341
+      }
342
+      .lable-list {
343
+        width: 100%;
344
+        min-height: 105rpx;
345
+        .lable-info {
346
+          display: inline-block;
347
+          padding: 0 12px;
348
+          margin-left: 10px;
349
+          height: 24px;
350
+          line-height: 24px;
351
+          border-radius: 2px;
352
+          border: 1px solid #d6d6d6;
353
+          margin-bottom: 10px;
354
+        }
355
+        .add-lable {
356
+          display: inline-block;
357
+          width: 27px;
358
+          height: 24px;
359
+          line-height: 24px;
360
+          font-size: 12px;
361
+          font-family: PingFang-SC-Regular, PingFang-SC;
362
+          font-weight: 400;
363
+          color: #333333;
364
+          text-align: center;
365
+          margin-left: 10px;
366
+          border-radius: 2px;
367
+          border: 1px solid #d6d6d6;
368
+        }
369
+      }
370
+      .remarks {
371
+        /deep/ .el-textarea__inner:focus {
372
+          border-color: #fa852f;
373
+        }
374
+      }
375
+    }
376
+    .ps {
377
+      font-size: 14px;
378
+      font-family: PingFangSC-Medium, PingFang SC;
379
+      font-weight: 500;
380
+      color: #333333;
381
+      line-height: 20px;
382
+      .ps-text {
383
+        margin-top: 10px;
384
+        font-size: 12px;
385
+        font-weight: 400;
386
+        color: #666666;
387
+        line-height: 17px;
388
+      }
389
+    }
390
+    .programme {
391
+      margin-top: 20px;
392
+      width: 100%;
393
+      background: #ffffff;
394
+      border-radius: 8px;
395
+
396
+      .tab {
397
+        display: flex;
398
+        align-items: center;
399
+        justify-content: space-between;
400
+        .tab-title {
401
+          font-size: 14px;
402
+          font-family: PingFangSC-Medium, PingFang SC;
403
+          font-weight: 500;
404
+          color: #333333;
405
+          line-height: 20px;
406
+        }
407
+      }
408
+      .programme-list {
409
+        margin-top: 10px;
410
+        position: relative;
411
+        z-index: 1;
412
+        .programme-info {
413
+          position: relative;
414
+          margin-bottom: 10px;
415
+          border-radius: 4px;
416
+          border: 1px solid #f5f5f5;
417
+          display: flex;
418
+          justify-content: space-between;
419
+          padding: 8px 8px 8px 10px;
420
+          align-items: center;
421
+          .programme-left {
422
+            display: flex;
423
+            align-items: center;
424
+            .programme-img {
425
+              width: 48px;
426
+              display: inline-block;
427
+              img {
428
+                width: 100%;
429
+                display: block;
430
+              }
431
+            }
432
+            .programme-tips {
433
+              display: inline-block;
434
+              margin-left: 10px;
435
+              font-size: 10px;
436
+              font-family: PingFangSC-Regular, PingFang SC;
437
+              font-weight: 400;
438
+              color: #999999;
439
+              line-height: 14px;
440
+              zoom: 0.83;
441
+            }
442
+          }
443
+          .programme-right {
444
+            font-size: 12px;
445
+            font-family: PingFangSC-Regular, PingFang SC;
446
+            font-weight: 400;
447
+            color: #333333;
448
+            line-height: 17px;
449
+            .duration {
450
+              margin-top: 14px;
451
+            }
452
+          }
453
+          .operation {
454
+            position: absolute;
455
+            left: 50%;
456
+            transform: translateX(-50%);
457
+            top: 10px;
458
+            z-index: 10;
459
+            width: 44px;
460
+            background: #ffffff;
461
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
462
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
463
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
464
+            border-radius: 2px;
465
+            padding: 10px;
466
+            font-size: 12px;
467
+            font-family: PingFangSC-Regular, PingFang SC;
468
+            font-weight: 400;
469
+            color: #333333;
470
+            line-height: 17px;
471
+            .delete {
472
+              margin-top: 20px;
473
+            }
474
+          }
475
+        }
476
+        .programme-active {
477
+          border: 1px solid #fa852f;
478
+        }
479
+      }
480
+    }
481
+  }
482
+  .right {
483
+    margin-left: 18px;
484
+    position: relative;
485
+    flex: 1;
486
+    .shop-info {
487
+      background: #ffffff;
488
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
489
+      border-radius: 8px;
490
+      padding: 12px;
491
+      font-size: 13px;
492
+      font-family: PingFangSC-Regular, PingFang SC;
493
+      font-weight: 400;
494
+      color: #999999;
495
+      line-height: 28px;
496
+      span {
497
+        font-weight: 500;
498
+        color: #333333;
499
+      }
500
+    }
501
+    .project {
502
+      margin-top: 18px;
503
+      background: #ffffff;
504
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
505
+      border-radius: 8px;
506
+      padding: 16px 12px 12px 12px;
507
+      .project-title {
508
+        font-size: 14px;
509
+        font-family: PingFangSC-Medium, PingFang SC;
510
+        font-weight: 500;
511
+        color: #333333;
512
+        line-height: 20px;
513
+        span {
514
+          color: #fa7d22;
515
+        }
516
+      }
517
+      .project-list {
518
+        padding-top: 10px;
519
+        height: 130px;
520
+        overflow: scroll;
521
+        .project-info {
522
+          margin-bottom: 10px;
523
+          display: flex;
524
+          .project-image {
525
+            width: 60px;
526
+            height: 60px;
527
+            img {
528
+              width: 100%;
529
+              display: block;
530
+            }
531
+          }
532
+          .project-content {
533
+            flex: 1;
534
+            margin-left: 10px;
535
+            .title-price {
536
+              display: flex;
537
+              justify-content: space-between;
538
+              font-size: 14px;
539
+              font-family: PingFangSC-Medium, PingFang SC;
540
+              font-weight: 500;
541
+              color: #292929;
542
+              line-height: 22px;
543
+            }
544
+            .project-tips {
545
+              font-size: 12px;
546
+              font-family: PingFangSC-Regular, PingFang SC;
547
+              font-weight: 400;
548
+              color: #999999;
549
+              line-height: 18px;
550
+            }
551
+            .project-zoom {
552
+              font-size: 12px;
553
+              font-family: PingFangSC-Regular, PingFang SC;
554
+              font-weight: 400;
555
+              color: #fa7d22;
556
+              line-height: 18px;
557
+            }
558
+          }
559
+        }
560
+      }
561
+    }
562
+    .cost {
563
+      height: 186px;
564
+      overflow: scroll;
565
+      background: #ffffff;
566
+      border-radius: 8px;
567
+      margin-top: 18px;
568
+      padding: 10px 19px 11px 12px;
569
+      font-size: 14px;
570
+      font-family: PingFangSC-Regular, PingFang SC;
571
+      font-weight: 400;
572
+      color: #333333;
573
+      line-height: 20px;
574
+      .cost-coupon-list {
575
+        height: 110px;
576
+        overflow: scroll;
577
+        border-bottom: 1px solid #f9f9f9;
578
+      }
579
+      .cost-title {
580
+        display: flex;
581
+        justify-content: space-between;
582
+      }
583
+      .coupon {
584
+        margin-top: 10px;
585
+        display: flex;
586
+        justify-content: space-between;
587
+        .coupon-tips {
588
+          display: flex;
589
+          align-items: center;
590
+          .coupon-icon {
591
+            width: 16px;
592
+            img {
593
+              width: 100%;
594
+              display: block;
595
+            }
596
+          }
597
+          .coupon-title {
598
+            margin-left: 3px;
599
+          }
600
+          .coupon-tip {
601
+            margin-left: 10px;
602
+            background: #ffefeb;
603
+            border-radius: 4px;
604
+            border: 1px solid #ff3007;
605
+            font-size: 10px;
606
+            font-family: PingFangSC-Regular, PingFang SC;
607
+            font-weight: 400;
608
+            color: #ff3007;
609
+            line-height: 14px;
610
+            padding: 2px 6px;
611
+            zoom: 0.83;
612
+          }
613
+        }
614
+      }
615
+      .coupon-ps {
616
+        margin-left: -6px;
617
+        margin-top: 11px;
618
+        display: flex;
619
+        justify-content: space-between;
620
+        font-size: 12px;
621
+        font-family: PingFangSC-Regular, PingFang SC;
622
+        font-weight: 400;
623
+        color: #333333;
624
+        line-height: 17px;
625
+        .cou-price {
626
+          font-weight: 500;
627
+          color: #ff3007;
628
+        }
629
+      }
630
+      .over-price {
631
+        margin-top: 14px;
632
+        text-align: right;
633
+      }
634
+    }
635
+  }
636
+}
637
+</style>

+ 188 - 7
src/pages/historicalOrder/index.vue

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

+ 159 - 4
src/pages/testSkin/details/index.vue

@@ -77,7 +77,8 @@
77 77
       <div class="programme">
78 78
         <div class="tab">
79 79
           <div class="tab-title">执行方案</div>
80
-          <div class="add">新增</div>
80
+          <div class="add"
81
+               @click="isPupop=true">新增</div>
81 82
         </div>
82 83
         <div class="programme-list">
83 84
           <div :class="['programme-info',item.onSelect?'programme-active':'']"
@@ -109,7 +110,49 @@
109 110
            @click="onSubmit">保存</div>
110 111
     </div>
111 112
     <mine-pupop :show="isPupop">
112
-      <div class=""></div>
113
+      <div class="block">
114
+        <div class="delete-pupop"
115
+             @click="isPupop=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
116
+               alt=""></div>
117
+        <div class="pupop-title">
118
+          选择执行方案
119
+        </div>
120
+        <el-select v-model="projectInfo"
121
+                   placeholder="请选择项目"
122
+                   class="project-select"
123
+                   size="mini">
124
+          <el-option v-for="item in projectList"
125
+                     :key="item.value"
126
+                     :label="item.label"
127
+                     :value="item.value">
128
+          </el-option>
129
+        </el-select>
130
+        <div class="frequency">
131
+          <div>执行频率:</div>
132
+          <el-select v-model="weekInfo"
133
+                     class="week-select"
134
+                     size="mini">
135
+            <el-option v-for="item in weekList"
136
+                       :key="item.value"
137
+                       :label="item.label"
138
+                       :value="item.value">
139
+            </el-option>
140
+          </el-select>
141
+          <div>周</div>
142
+          <el-select v-model="timesInfo"
143
+                     class="times-select"
144
+                     size="mini">
145
+            <el-option v-for="item in timesList"
146
+                       :key="item.value"
147
+                       :label="item.label"
148
+                       :value="item.value">
149
+            </el-option>
150
+          </el-select>
151
+          <div>次</div>
152
+        </div>
153
+        <div class="submit-frequency"
154
+             @click="submitFrequency">确定</div>
155
+      </div>
113 156
     </mine-pupop>
114 157
   </div>
115 158
 </template>
@@ -185,9 +228,51 @@ export default {
185 228
           duration: '28天'
186 229
         },
187 230
       ],
231
+      //项目列表
232
+      projectList: [{
233
+        value: '选项1',
234
+        label: '黄金糕'
235
+      }, {
236
+        value: '选项2',
237
+        label: '双皮奶'
238
+      }, {
239
+        value: '选项3',
240
+        label: '蚵仔煎'
241
+      }, {
242
+        value: '选项4',
243
+        label: '龙须面'
244
+      }, {
245
+        value: '选项5',
246
+        label: '北京烤鸭'
247
+      }],
248
+      //周期
249
+      weekList: [
250
+        {
251
+          value: '选项1',
252
+          label: '1'
253
+        },
254
+        {
255
+          value: '选项2',
256
+          label: '2'
257
+        },
258
+      ],
259
+      //次数
260
+      timesList: [
261
+        {
262
+          value: '选项1',
263
+          label: '1'
264
+        },
265
+        {
266
+          value: '选项2',
267
+          label: '2'
268
+        },
269
+      ],
270
+      timesInfo: '',
271
+      projectInfo: '',
272
+      weekInfo: '',
188 273
       programmeIndex: '',
189 274
       remarks: '',
190
-      isPupop: true
275
+      isPupop: false
191 276
     };
192 277
   },
193 278
   computed: {
@@ -205,7 +290,8 @@ export default {
205 290
     },
206 291
     onSubmit () {
207 292
 
208
-    }
293
+    },
294
+    submitFrequency () { },
209 295
   },
210 296
 
211 297
   created () {
@@ -526,5 +612,74 @@ export default {
526 612
       color: #ffffff;
527 613
     }
528 614
   }
615
+  .block {
616
+    width: 540px;
617
+    background: #ffffff;
618
+    border-radius: 8px;
619
+    position: relative;
620
+    padding: 42px;
621
+    .delete-pupop {
622
+      position: absolute;
623
+      width: 32px;
624
+      height: 32px;
625
+      top: 5px;
626
+      right: 5px;
627
+      img {
628
+        width: 100%;
629
+        height: 100%;
630
+        display: block;
631
+      }
632
+    }
633
+    .pupop-title {
634
+      font-size: 14px;
635
+      font-family: PingFangSC-Medium, PingFang SC;
636
+      font-weight: 500;
637
+      color: #333333;
638
+      line-height: 20px;
639
+      text-align: center;
640
+    }
641
+    .project-select {
642
+      margin-top: 26px;
643
+      position: relative;
644
+      left: 50%;
645
+      transform: translateX(-50%);
646
+      width: 300px;
647
+    }
648
+    .frequency {
649
+      margin-top: 20px;
650
+      display: flex;
651
+      justify-content: center;
652
+      align-items: center;
653
+      font-size: 14px;
654
+      font-family: PingFangSC-Regular, PingFang SC;
655
+      font-weight: 400;
656
+      color: #333333;
657
+      line-height: 20px;
658
+      .week-select {
659
+        width: 77px;
660
+        margin-right: 8px;
661
+      }
662
+      .times-select {
663
+        width: 77px;
664
+        margin: 0 8px 0 20px;
665
+      }
666
+    }
667
+    .submit-frequency {
668
+      position: relative;
669
+      left: 50%;
670
+      transform: translateX(-50%);
671
+      margin-top: 158px;
672
+      width: 176px;
673
+      height: 28px;
674
+      text-align: center;
675
+      background: #fa7d22;
676
+      border-radius: 14px;
677
+      font-size: 14px;
678
+      font-family: PingFangSC-Medium, PingFang SC;
679
+      font-weight: 500;
680
+      color: #ffffff;
681
+      line-height: 28px;
682
+    }
683
+  }
529 684
 }
530 685
 </style>

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

@@ -7,7 +7,9 @@ import TestSkin from '@/pages/testSkin/index'
7 7
 import TestSkinDetails from '@/pages/testSkin/details'
8 8
 import CustomerMan from '@/pages/customerMan/index'
9 9
 import HistoricalOrder from '@/pages/historicalOrder/index'
10
+import HistoricalOrderDetails from '@/pages/historicalOrder/details'
10 11
 import ConfirmOrder from '@/pages/confirmOrder/index'
12
+import ConfirmOrderDetails from '@/pages/confirmOrder/details'
11 13
 import StoreDetection from '@/pages/storeDetection/index'
12 14
 import Coupon from '@/pages/coupon/index'
13 15
 export default {
@@ -20,7 +22,9 @@ export default {
20 22
     { path: '/testSkin/details', component: TestSkinDetails },
21 23
     { path: '/customerMan', component: CustomerMan },
22 24
     { path: '/historicalOrder', component: HistoricalOrder },
25
+    { path: '/historicalOrder/details', component: HistoricalOrderDetails },
23 26
     { path: '/confirmOrder', component: ConfirmOrder },
27
+    { path: '/confirmOrder/details', component: ConfirmOrderDetails },
24 28
     { path: '/storeDetection', component: StoreDetection },
25 29
     { path: '/coupon', component: Coupon },
26 30
 

+ 47 - 10
src/style/index.less

@@ -1,32 +1,69 @@
1
-
2 1
 //elementUI 组件样式覆盖
3 2
 
4
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
3
+.el-date-table td.in-range div,
4
+.el-date-table td.in-range div:hover,
5
+.el-date-table.is-week-mode .el-date-table__row.current div,
6
+.el-date-table.is-week-mode .el-date-table__row:hover div {
5 7
   background-color: #FFF0E6;
6 8
 }
7
-.el-date-table td.end-date span, .el-date-table td.start-date span {
8
-  background-color:  #FA7D22 !important;
9
+
10
+.el-date-table td.end-date span,
11
+.el-date-table td.start-date span {
12
+  background-color: #FA7D22 !important;
9 13
   border-radius: 2px;
10 14
 }
11
-.el-date-table td.today span{
15
+
16
+.el-date-table td.today span {
12 17
   border-radius: 2px;
13 18
   border: 1px solid #FA7D22;
14 19
   color: #FA7D22;
15 20
 }
16
- .el-date-table td.start-date div{
21
+
22
+.el-date-editor .el-range-separator {
23
+  color: rgba(0, 0, 0, 0.25);
24
+}
25
+
26
+.el-date-table td.start-date div {
17 27
   border-top-left-radius: 2px;
18 28
   border-bottom-left-radius: 2px;
19 29
 }
20
-.el-date-table td.end-date div{
30
+
31
+.el-date-table td.end-date div {
21 32
   border-top-right-radius: 2px;
22 33
   border-bottom-right-radius: 2px;
23 34
 }
24
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
35
+
36
+.el-date-editor.el-input,
37
+.el-date-editor.el-input__inner {
25 38
   width: 280px;
26 39
 }
27
-.el-date-editor .el-range-separator{
40
+
41
+.el-date-editor .el-range-separator {
28 42
   width: 20px;
29 43
 }
30
-.el-pagination.is-background .el-pager li:not(.disabled).active{
44
+
45
+.el-pagination.is-background .el-pager li:not(.disabled).active {
31 46
   background-color: #FA7D22;
47
+}
48
+
49
+.el-select .el-input.is-focus .el-input__inner {
50
+  border: 1px solid #FA7D22;
51
+}
52
+
53
+.el-select .el-input__inner:focus {
54
+  border: 1px solid #FA7D22;
55
+}
56
+
57
+.el-select-dropdown__item.selected {
58
+  color: #FA7D22;
59
+}
60
+
61
+.el-select-dropdown__item.hover,
62
+.el-select-dropdown__item:hover {
63
+  background: #FFF0E6;
64
+}
65
+
66
+.min-size {
67
+  font-size: 12px;
68
+  zoom: 0.83;
32 69
 }