Bladeren bron

优化客户管理&&优化预约跳转

yuhao 2 jaren geleden
bovenliggende
commit
671674aa99

+ 1 - 1
src/components/common/layout/leftMenu.vue

@@ -143,7 +143,7 @@ export default {
143 143
         }
144 144
       });
145 145
       // 客户管理详情跳转测肤记录修改返回键显示
146
-      if (from.path == "/payUser/details") {
146
+      if (to.path == "/testSkin") {
147 147
         this.$emit("changeIsBack", this.$route.query.isback);
148 148
       }
149 149
     },

+ 155 - 50
src/pages/customerMan/details/index.vue

@@ -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
         }

+ 10 - 1
src/pages/historicalOrder/details/index.vue

@@ -2,7 +2,7 @@
2 2
   <div class="mine">
3 3
     <div class="left">
4 4
       <div class="user-info">
5
-        <div class="user-img"><img :src="userInfo.avatar_url"
5
+        <div class="user-img" @click="toCustomerManDetail"><img :src="userInfo.avatar_url"
6 6
                alt=""></div>
7 7
         <div class="user-span">
8 8
           <div class="info">
@@ -190,6 +190,15 @@ export default {
190 190
   watch: {},
191 191
 
192 192
   methods: {
193
+    // 跳转到客户管理详情
194
+    toCustomerManDetail(){
195
+      this.$router.push({
196
+        path:'/customerMan/details',
197
+        query:{
198
+          id:this.userInfo.user_id
199
+        }
200
+      })
201
+    },
193 202
     getOrderInfo () {
194 203
       api.getOrderInfo({ id: this.id }).then(res => {
195 204
         this.userInfo = res.data.user;

+ 51 - 18
src/pages/home/detailList/index.vue

@@ -83,14 +83,22 @@
83 83
           class="el-icon-plus"
84 84
           @click="orderCreate(orderListItem.time)"
85 85
           v-if="
86
-            thisDays > Days? false: thisDays == Days? orderListItem.time.end > nowTime: true
86
+            thisDays > Days
87
+              ? false
88
+              : thisDays == Days
89
+              ? orderListItem.time.end > nowTime
90
+              : true
87 91
           "
88 92
         ></i>
89 93
       </div>
90 94
     </div>
91 95
     <!-- 侧边图标 -->
92 96
     <div class="calendar" @click="openCalendar">
93
-      <i class="el-icon-date"></i>
97
+      <img
98
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/%E6%97%A5%E5%8E%86%20%281%29.png"
99
+        alt=""
100
+      />
101
+      <div class="time">{{ thisToday }}</div>
94 102
       <span>日历</span>
95 103
     </div>
96 104
     <div class="setUp" @click="orderCreate">
@@ -154,8 +162,16 @@ export default {
154 162
       Days: "", //要查询的日期
155 163
       thisDays: "", //当前日期
156 164
       isBackToday: false, //是否显示返回今天
165
+      thisToday: "", //今天的日
157 166
     };
158 167
   },
168
+  watch: {
169
+    Days(newValue, oldValue) {
170
+      var index = newValue.lastIndexOf("-");
171
+      let str = newValue.substring(index + 1, newValue.length);
172
+      this.thisToday = str;
173
+    },
174
+  },
159 175
   created() {
160 176
     this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
161 177
     this.fetchOrderList();
@@ -167,6 +183,7 @@ export default {
167 183
     let day = date.getFullYear() + "-" + moth + "-" + date.getDate();
168 184
     this.thisDays = day;
169 185
     this.Days = day;
186
+    this.thisToday = date.getDate();
170 187
   },
171 188
   mounted() {
172 189
     if (this.$refs.row) {
@@ -212,17 +229,17 @@ export default {
212 229
     },
213 230
     // 删除创建订单
214 231
     delOrder(id) {
215
-      api.delOrder(
216
-        {
232
+      api
233
+        .delOrder({
217 234
           id,
218 235
           type: 1,
219
-        },
220
-      ).then(res=>{
236
+        })
237
+        .then((res) => {
221 238
           this.$message({
222 239
             message: "删除成功",
223 240
             type: "success",
224 241
           });
225
-      });
242
+        });
226 243
     },
227 244
     // 打开日历弹窗
228 245
     openCalendar() {
@@ -271,7 +288,7 @@ export default {
271 288
       if (e.command == "b") {
272 289
         if (e.orderInfo.end) {
273 290
           e.orderInfo.isClick = true;
274
-          e.orderInfo.day = this.Days
291
+          e.orderInfo.day = this.Days;
275 292
           this.toTime = e.orderInfo;
276 293
         } else {
277 294
           e.orderInfo.isClick = false;
@@ -279,16 +296,18 @@ export default {
279 296
         }
280 297
         this.orderShow = true;
281 298
       } else if (e.command == "a") {
282
-        api.userOrderDetail({
283
-          id:e.orderInfo.order_id
284
-        }).then(res=>{
285
-        this.$router.push({
286
-          path: "/customerMan/details",
287
-          query:{
288
-            id:res.data[0].user_id
289
-          }
290
-        });
291
-        })
299
+        api
300
+          .userOrderDetail({
301
+            id: e.orderInfo.order_id,
302
+          })
303
+          .then((res) => {
304
+            this.$router.push({
305
+              path: "/customerMan/details",
306
+              query: {
307
+                id: res.data[0].user_id,
308
+              },
309
+            });
310
+          });
292 311
       } else {
293 312
         this.delOrder(e.orderInfo.order_id);
294 313
         this.fetchOrderList();
@@ -434,6 +453,8 @@ export default {
434 453
   }
435 454
   .calendar {
436 455
     top: 102px;
456
+    display: flex;
457
+    align-items: center;
437 458
     span {
438 459
       width: 64px;
439 460
       display: inline-block;
@@ -441,6 +462,18 @@ export default {
441 462
       text-justify: distribute-all-lines;
442 463
       text-align-last: justify;
443 464
     }
465
+    img {
466
+      width: 20px;
467
+      height: 20px;
468
+      margin-left: 15px;
469
+      margin-right: 15px;
470
+    }
471
+    .time {
472
+      font-size: 8px;
473
+      position: absolute;
474
+      left: 20px;
475
+      top: 3.5px;
476
+    }
444 477
   }
445 478
   .setUp {
446 479
     top: 154px;

+ 4 - 4
vue.config.js

@@ -4,11 +4,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 4
 
5 5
 module.exports = {
6 6
   // 测试
7
-  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
8
-  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
9
-  // 正式
10
-  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
7
+  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
11 8
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
9
+  // 正式
10
+  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
11
+  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
12 12
   // 设置跨域
13 13
   crossorigin: 'anonymous',
14 14
   /**