|
@@ -4,13 +4,6 @@
|
4
|
4
|
<div class="user-info">
|
5
|
5
|
<div class="title">
|
6
|
6
|
<div class="txt">个人信息</div>
|
7
|
|
- <div
|
8
|
|
- class="test-record"
|
9
|
|
- @click="toTestRecord"
|
10
|
|
- v-if="userInfo.analysis_id"
|
11
|
|
- >
|
12
|
|
- 测肤记录
|
13
|
|
- </div>
|
14
|
7
|
</div>
|
15
|
8
|
<div class="detail-info">
|
16
|
9
|
<div class="user-img">
|
|
@@ -22,13 +15,13 @@
|
22
|
15
|
<span>{{ userInfo.nickname | ellipsis(3) }}</span>
|
23
|
16
|
</div>
|
24
|
17
|
<div class="sex"><img :src="gender" alt="" /></div>
|
25
|
|
- <!-- <div class="age">
|
|
18
|
+ <div class="age">
|
26
|
19
|
<span>{{ userInfo.skin_age }}</span
|
27
|
20
|
><span class="min-size">肤龄</span>
|
28
|
|
- </div> -->
|
|
21
|
+ </div>
|
29
|
22
|
</div>
|
30
|
23
|
<div class="real-name">
|
31
|
|
- 姓名:
|
|
24
|
+ 真实姓名:
|
32
|
25
|
<span v-show="!nameInpVisible">{{ userInfo.real_name }}</span>
|
33
|
26
|
<el-input
|
34
|
27
|
size="mini"
|
|
@@ -46,14 +39,9 @@
|
46
|
39
|
srcset=""
|
47
|
40
|
/>
|
48
|
41
|
</div>
|
|
42
|
+
|
49
|
43
|
<div class="skin-type">
|
50
|
|
- 肤质:<span>{{ userInfo.skin_type }}</span>
|
51
|
|
- </div>
|
52
|
|
- <div class="skin-type">
|
53
|
|
- 肤龄:<span>{{ userInfo.age }}</span>
|
54
|
|
- </div>
|
55
|
|
- <div class="skin-color">
|
56
|
|
- 肤色:<span>{{ userInfo.skin_color }}</span>
|
|
44
|
+ 用户ID:<span> {{ userInfo.user_id }}</span>
|
57
|
45
|
</div>
|
58
|
46
|
</div>
|
59
|
47
|
</div>
|
|
@@ -61,53 +49,69 @@
|
61
|
49
|
|
62
|
50
|
<div class="personage-data">
|
63
|
51
|
<div class="myDataList">
|
64
|
|
- 检测时间:
|
65
|
|
- <span>{{ userInfo.check_time }}</span>
|
66
|
|
- </div>
|
67
|
|
- <div class="myDataList">
|
68
|
|
- 出生日期:
|
|
52
|
+ <span class="dataListTitle">出生日期</span> :
|
|
53
|
+
|
69
|
54
|
<span>{{ userInfo.birthday }}</span>
|
70
|
55
|
</div>
|
71
|
56
|
<div class="myDataList">
|
72
|
|
- 手机号:
|
|
57
|
+ <span class="dataListTitle">联系电话</span> :
|
73
|
58
|
<span>{{ userInfo.mobile }}</span>
|
74
|
59
|
</div>
|
75
|
60
|
|
76
|
61
|
<div class="myDataList">
|
77
|
|
- 所在地:
|
|
62
|
+ <span class="dataListTitle">所在地</span> :
|
78
|
63
|
<span>{{ userInfo.city }}</span>
|
79
|
64
|
</div>
|
80
|
65
|
|
81
|
66
|
<div class="myDataList">
|
82
|
|
- 开卡店铺:
|
83
|
|
- <span>{{ userInfo.store_name }}</span>
|
|
67
|
+ <span class="dataListTitle">客户来源</span> :
|
|
68
|
+ <el-select
|
|
69
|
+ v-model="sourceValue"
|
|
70
|
+ placeholder="请选择"
|
|
71
|
+ size="mini"
|
|
72
|
+ @change="selectSource"
|
|
73
|
+ >
|
|
74
|
+ <el-option
|
|
75
|
+ v-for="(item, index) in sourceList"
|
|
76
|
+ :key="index"
|
|
77
|
+ :label="item"
|
|
78
|
+ :value="index"
|
|
79
|
+ >
|
|
80
|
+ </el-option>
|
|
81
|
+ </el-select>
|
84
|
82
|
</div>
|
|
83
|
+ <div class="assetInfo">资产信息</div>
|
85
|
84
|
|
86
|
85
|
<div class="myDataList coupon-num">
|
87
|
|
- 次卡数量:
|
88
|
|
- <span @click="toOrder(2)">{{ order_total.card_num }}</span>
|
|
86
|
+ <span class="dataListTitle">次卡数量</span> :
|
|
87
|
+ <span class="JEcolor" @click="toOrder(2)">{{
|
|
88
|
+ order_total.card_num
|
|
89
|
+ }}</span>
|
89
|
90
|
</div>
|
90
|
91
|
|
91
|
92
|
<div class="myDataList coupon-num">
|
92
|
|
- 优惠券数量:
|
93
|
|
- <span @click="toOrder(4)">{{ userInfo.card_num }}</span>
|
94
|
|
- </div>
|
95
|
|
-
|
96
|
|
- <div class="myDataList">
|
97
|
|
- 储值金额:
|
98
|
|
- <span class="JEcolor">
|
99
|
|
- ¥
|
100
|
|
- <span class="bigSixe">{{ userInfo.amount }}</span>
|
101
|
|
- <!-- .00 -->
|
102
|
|
- </span>
|
|
93
|
+ <span class="dataListTitle">优惠券</span> :
|
|
94
|
+ <span class="JEcolor" @click="toOrder(4)">{{
|
|
95
|
+ userInfo.card_num
|
|
96
|
+ }}</span>
|
103
|
97
|
</div>
|
104
|
98
|
<div class="myDataList">
|
105
|
|
- 积分:
|
|
99
|
+ <span class="dataListTitle">积分</span> :
|
106
|
100
|
<span>{{ userInfo.coin }}</span>
|
107
|
101
|
</div>
|
108
|
|
- <div class="myDataList" @click="remarkPupopVisible = true">
|
109
|
|
- 备注信息:
|
110
|
|
- <span>{{ userInfo.remark | ellipsis(20) }}</span>
|
|
102
|
+ <div class="detectionInfo">
|
|
103
|
+ <div>检测信息</div>
|
|
104
|
+ <div @click="goTestSkin">测肤记录</div>
|
|
105
|
+ </div>
|
|
106
|
+ <div class="skin-type">
|
|
107
|
+ <span class="dataListTitle">肤质</span> :
|
|
108
|
+ <span class="item" v-if="userDetail.detection">{{
|
|
109
|
+ skin_type[userDetail.detection.skin_type - 1]
|
|
110
|
+ }}</span>
|
|
111
|
+ </div>
|
|
112
|
+ <div class="myDataList">
|
|
113
|
+ <span class="dataListTitle">测肤时间</span> :
|
|
114
|
+ <span v-if="userDetail.detection">{{ userDetail.detection.create_time }}</span>
|
111
|
115
|
</div>
|
112
|
116
|
</div>
|
113
|
117
|
</div>
|
|
@@ -287,6 +291,19 @@ export default {
|
287
|
291
|
isPupop: false,
|
288
|
292
|
nameInpVisible: false,
|
289
|
293
|
remarkPupopVisible: false,
|
|
294
|
+ sourceValue: "", //客户来源值
|
|
295
|
+ sourceList: [
|
|
296
|
+ " ",
|
|
297
|
+ "线下进店",
|
|
298
|
+ "种子用户",
|
|
299
|
+ "美团/大众",
|
|
300
|
+ "抖音",
|
|
301
|
+ "达人探店",
|
|
302
|
+ "霸王餐",
|
|
303
|
+ "老带新/转介绍",
|
|
304
|
+ ], //客户来源下拉选择
|
|
305
|
+ userDetail: [], //客户管理详情
|
|
306
|
+ skin_type: ["干性肌肤", "中性肌肤", "油性肌肤", "混合型肌肤"], //肤质 (肤质类型 1-干性肌肤 2-中性肌肤 3-油性肌肤 4-混合型肌肤)
|
290
|
307
|
};
|
291
|
308
|
},
|
292
|
309
|
components: { minePupop },
|
|
@@ -301,6 +318,36 @@ export default {
|
301
|
318
|
watch: {},
|
302
|
319
|
|
303
|
320
|
methods: {
|
|
321
|
+ // 跳转到测肤记录列表
|
|
322
|
+ goTestSkin() {
|
|
323
|
+ this.$router.push({
|
|
324
|
+ path: "/testSkin",
|
|
325
|
+ query: {
|
|
326
|
+ isback: true,
|
|
327
|
+ id: this.id,
|
|
328
|
+ },
|
|
329
|
+ });
|
|
330
|
+ },
|
|
331
|
+ // 获取客户管理详情
|
|
332
|
+ getUserDetail() {
|
|
333
|
+ api.getUserDetail({ id: this.id }).then((res) => {
|
|
334
|
+ this.userDetail = res.data;
|
|
335
|
+ this.sourceValue = this.sourceList[res.data.tag];
|
|
336
|
+ });
|
|
337
|
+ },
|
|
338
|
+ // 选择客户来源
|
|
339
|
+ selectSource(e) {
|
|
340
|
+ this.editSign(e);
|
|
341
|
+ },
|
|
342
|
+ // 编辑客户管理用户标签
|
|
343
|
+ editSign(tag) {
|
|
344
|
+ api
|
|
345
|
+ .editSign({
|
|
346
|
+ tag,
|
|
347
|
+ id: this.id,
|
|
348
|
+ })
|
|
349
|
+ .then();
|
|
350
|
+ },
|
304
|
351
|
getPadUserInfo() {
|
305
|
352
|
api.getPadUserInfo({ id: this.id }).then((res) => {
|
306
|
353
|
console.log(res, "aaaaaaaa");
|
|
@@ -377,8 +424,8 @@ export default {
|
377
|
424
|
activeName = "third";
|
378
|
425
|
} else if (index == 2) {
|
379
|
426
|
activeName = "second";
|
380
|
|
- }else if(index==4){
|
381
|
|
- activeName = 'fourth'
|
|
427
|
+ } else if (index == 4) {
|
|
428
|
+ activeName = "fourth";
|
382
|
429
|
}
|
383
|
430
|
this.$router.push({
|
384
|
431
|
path: "/customerMan/projectOrder",
|
|
@@ -425,6 +472,8 @@ export default {
|
425
|
472
|
created() {
|
426
|
473
|
let id = this.$route.query.id;
|
427
|
474
|
this.id = id;
|
|
475
|
+ // 获取客户管理详情
|
|
476
|
+ this.getUserDetail();
|
428
|
477
|
this.getPadUserInfo();
|
429
|
478
|
},
|
430
|
479
|
|
|
@@ -489,11 +538,12 @@ export default {
|
489
|
538
|
justify-content: space-between;
|
490
|
539
|
.name {
|
491
|
540
|
font-size: 14px;
|
|
541
|
+ width: 60px;
|
492
|
542
|
}
|
493
|
543
|
.sex {
|
494
|
544
|
img {
|
495
|
|
- width: 24px;
|
496
|
|
- height: 24px;
|
|
545
|
+ width: 19px;
|
|
546
|
+ height: 19px;
|
497
|
547
|
}
|
498
|
548
|
}
|
499
|
549
|
.age {
|
|
@@ -529,11 +579,55 @@ export default {
|
529
|
579
|
}
|
530
|
580
|
.personage-data {
|
531
|
581
|
margin-top: 14px;
|
|
582
|
+ .assetInfo {
|
|
583
|
+ font-size: 14px;
|
|
584
|
+ color: #333;
|
|
585
|
+ font-weight: 600;
|
|
586
|
+ margin-top: 10px;
|
|
587
|
+ }
|
|
588
|
+ .detectionInfo {
|
|
589
|
+ margin-top: 10px;
|
|
590
|
+ display: flex;
|
|
591
|
+ justify-content: space-between;
|
|
592
|
+ font-size: 14px;
|
|
593
|
+ font-weight: 600;
|
|
594
|
+ color: #fa7d22;
|
|
595
|
+ div:first-child {
|
|
596
|
+ color: #333333;
|
|
597
|
+ }
|
|
598
|
+ }
|
|
599
|
+ .skin-type {
|
|
600
|
+ margin-top: 10px;
|
|
601
|
+ .dataListTitle {
|
|
602
|
+ display: inline-block;
|
|
603
|
+ font-size: 13px;
|
|
604
|
+ color: #999999;
|
|
605
|
+ width: 55px;
|
|
606
|
+ text-align: justify;
|
|
607
|
+ text-justify: distribute-all-lines;
|
|
608
|
+ text-align-last: justify;
|
|
609
|
+ }
|
|
610
|
+ .item {
|
|
611
|
+ color: #333;
|
|
612
|
+ }
|
|
613
|
+ }
|
|
614
|
+ .skin-color {
|
|
615
|
+ margin-top: 10px;
|
|
616
|
+ .dataListTitle {
|
|
617
|
+ display: inline-block;
|
|
618
|
+ font-size: 13px;
|
|
619
|
+ color: #999999;
|
|
620
|
+ width: 55px;
|
|
621
|
+ text-align: justify;
|
|
622
|
+ text-justify: distribute-all-lines;
|
|
623
|
+ text-align-last: justify;
|
|
624
|
+ }
|
|
625
|
+ }
|
532
|
626
|
.myDataList {
|
533
|
|
- margin-top: 15px;
|
|
627
|
+ margin-top: 10px;
|
534
|
628
|
.bigSixe {
|
535
|
629
|
font-size: 18px;
|
536
|
|
- color: #fa7d22;
|
|
630
|
+ color: #ff3007;
|
537
|
631
|
}
|
538
|
632
|
span {
|
539
|
633
|
color: #333333;
|
|
@@ -541,10 +635,21 @@ export default {
|
541
|
635
|
.JEcolor {
|
542
|
636
|
color: #fa7d22;
|
543
|
637
|
}
|
|
638
|
+ .dataListTitle {
|
|
639
|
+ display: inline-block;
|
|
640
|
+ font-size: 13px;
|
|
641
|
+ color: #999999;
|
|
642
|
+ width: 55px;
|
|
643
|
+ text-align: justify;
|
|
644
|
+ text-justify: distribute-all-lines;
|
|
645
|
+ text-align-last: justify;
|
|
646
|
+ }
|
|
647
|
+ /deep/.el-select {
|
|
648
|
+ width: 150px;
|
|
649
|
+ }
|
544
|
650
|
}
|
545
|
651
|
.coupon-num {
|
546
|
652
|
span {
|
547
|
|
- color: #fa7d22;
|
548
|
653
|
font-size: 16px;
|
549
|
654
|
font-weight: 500;
|
550
|
655
|
}
|