Browse Source

Merge branch 'zhp' of http://code.qutaovip.com/lihai/pad_spa into lihai

黎海 2 years ago
parent
commit
8ea9d984c5
1 changed files with 116 additions and 19 deletions
  1. 116 19
      src/pages/confirmOrder/details/index.vue

+ 116 - 19
src/pages/confirmOrder/details/index.vue

@@ -2,16 +2,20 @@
2
   <div class="mine">
2
   <div class="mine">
3
     <div class="left">
3
     <div class="left">
4
       <div class="user-info">
4
       <div class="user-info">
5
-        <div class="user-img"><img :src="userInfo.image"
5
+        <div class="user-img"><img :src="userInfo.avatar_url"
6
                alt=""></div>
6
                alt=""></div>
7
         <div class="user-span">
7
         <div class="user-span">
8
-          <div class="name">昵称:<span>{{userInfo.nickname}}</span></div>
8
+          <div class="info">
9
-          <div class="sex">性别:<span>{{userInfo.sex}}</span></div>
9
+            <div class="name"><span>{{userInfo.nickname}}</span></div>
10
-          <div class="age">肤龄:<span>{{userInfo.age==1?'男':userInfo.age==2?'女':'保密'}}</span></div>
10
+            <div class="sex"><img :src="gender" alt=""></div>
11
-          <div class="skin-type">肤质:<span>{{userInfo.skin}}</span></div>
11
+            <div class="age"><span>{{userInfo.skin_age}}</span><span>肤龄</span></div>
12
+          </div>
13
+          <div class="skin-type">肤质:<span>{{userInfo.skin_type}}</span></div>
14
+          <div class="skin-color">肤色:<span>{{userInfo.skin_color}}</span></div>
15
+          <div class="skin-color">上传报告时间:<span>{{userInfo.check_time}}</span></div>
12
         </div>
16
         </div>
13
       </div>
17
       </div>
14
-      <div class="user-record">
18
+      <!-- <div class="user-record">
15
         <div class="fraction"
19
         <div class="fraction"
16
              @click="isPore=true">
20
              @click="isPore=true">
17
           <div class="title">肌肤得分</div>
21
           <div class="title">肌肤得分</div>
@@ -25,26 +29,46 @@
25
           <div class="title">上传检测时间</div>
29
           <div class="title">上传检测时间</div>
26
           <div class="ts">{{userInfo.check_time}}</div>
30
           <div class="ts">{{userInfo.check_time}}</div>
27
         </div>
31
         </div>
32
+      </div> -->
33
+      <div class="ps">
34
+        <div class="ps-title">
35
+          备注
36
+        </div>
37
+        <div class="ps-text">{{remarks || '无' | ellipsis(20)}}</div>
38
+      </div>
39
+      <div class="lable">
40
+        <div class="lable-title">
41
+          问题标签
42
+        </div>
43
+        <div class="lable-list">
44
+          <div v-for="(item,index) in problem"
45
+               :key="index"
46
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
47
+               class='lable-info'>
48
+            {{item.text}}
49
+          </div>
50
+        </div>
28
       </div>
51
       </div>
29
       <div class="lable">
52
       <div class="lable">
30
         <div class="lable-title">
53
         <div class="lable-title">
31
-          面诊标签
54
+          面标签
32
         </div>
55
         </div>
33
         <div class="lable-list">
56
         <div class="lable-list">
34
           <div v-for="(item,index) in lableList"
57
           <div v-for="(item,index) in lableList"
35
                :key="index"
58
                :key="index"
59
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
36
                class='lable-info'>
60
                class='lable-info'>
37
-            {{item}}
61
+            {{item.text}}
38
           </div>
62
           </div>
39
         </div>
63
         </div>
40
       </div>
64
       </div>
41
-      <div class="ps">
65
+      <!-- <div class="ps">
42
         <div class="ps-title">
66
         <div class="ps-title">
43
           备注
67
           备注
44
         </div>
68
         </div>
45
         <div class="ps-text">{{remarks | ellipsis(20)}}</div>
69
         <div class="ps-text">{{remarks | ellipsis(20)}}</div>
46
-      </div>
70
+      </div> -->
47
-      <div class="programme">
71
+      <!-- <div class="programme">
48
         <div class="tab">
72
         <div class="tab">
49
           <div class="tab-title">执行方案</div>
73
           <div class="tab-title">执行方案</div>
50
         </div>
74
         </div>
@@ -73,7 +97,7 @@
73
             </div>
97
             </div>
74
           </div>
98
           </div>
75
         </div>
99
         </div>
76
-      </div>
100
+      </div> -->
77
     </div>
101
     </div>
78
     <div class="right">
102
     <div class="right">
79
       <div class="shop-info">
103
       <div class="shop-info">
@@ -220,6 +244,7 @@
220
             </div>
244
             </div>
221
           </li>
245
           </li>
222
         </ul>
246
         </ul>
247
+        <div class="coupon-confirm" @click="isCoupun=false">确认</div>
223
       </div>
248
       </div>
224
     </mine-pupop>
249
     </mine-pupop>
225
     <!-- 选择项目 -->
250
     <!-- 选择项目 -->
@@ -426,8 +451,10 @@ export default {
426
       unSelect: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png',
451
       unSelect: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png',
427
       userInfo: {
452
       userInfo: {
428
       },
453
       },
454
+      // 问题标签
455
+      problem: [{ text: '干性(干燥)' }, { text: '干性(干燥、脱皮、缺水)' }, { text: '干性(干燥、脱皮、缺水)' }],
429
       //面部标签
456
       //面部标签
430
-      lableList: [],
457
+      lableList: [{ text: '干性(干燥)' }, { text: '干性(干燥、脱皮、缺水)' }, { text: '干性(干燥、脱皮、缺水)' }],
431
       //执行方案
458
       //执行方案
432
       programmeList: [],
459
       programmeList: [],
433
       order_data: {},//门店
460
       order_data: {},//门店
@@ -511,7 +538,12 @@ export default {
511
     };
538
     };
512
   },
539
   },
513
   computed: {
540
   computed: {
514
-
541
+    gender() {
542
+      // 性别,1男,2女,0保密
543
+      return this.userInfo.sex == 1 ?
544
+      'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/male.png' :
545
+      'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/female.png'
546
+    }
515
   },
547
   },
516
   watch: {},
548
   watch: {},
517
 
549
 
@@ -522,7 +554,8 @@ export default {
522
     getOrderInfo () {
554
     getOrderInfo () {
523
       api.getOrderInfo({ id: this.id }).then(res => {
555
       api.getOrderInfo({ id: this.id }).then(res => {
524
         this.userInfo = res.data.user
556
         this.userInfo = res.data.user
525
-        this.lableList = res.data.tags
557
+        this.problem = res.data.skin_name
558
+        this.lableList = res.data.face_names
526
         this.remarks = res.data.remark
559
         this.remarks = res.data.remark
527
         this.programmeList = res.data.scheme_list
560
         this.programmeList = res.data.scheme_list
528
         this.order_data = res.data.order_data
561
         this.order_data = res.data.order_data
@@ -1066,6 +1099,25 @@ export default {
1066
         this.discount = res.data.discount
1099
         this.discount = res.data.discount
1067
         this.getOrderInfo()
1100
         this.getOrderInfo()
1068
       })
1101
       })
1102
+    },
1103
+    randomColor (type) {
1104
+      let arr = [
1105
+        { background: 'rgba(244, 247, 255, 1)', border: 'rgba(85, 124, 255, 1)' },
1106
+        { background: 'rgba(245, 252, 245, 1)', border: 'rgba(66, 211, 81, 1)' },
1107
+        { background: 'rgba(254, 244, 237, 1)', border: 'rgba(250, 125, 34, 1)' },
1108
+        { background: 'rgba(249, 245, 255, 1)', border: 'rgba(136, 50, 255, 1)' },
1109
+        { background: 'rgba(255, 252, 245, 1)', border: 'rgba(204, 116, 42, 1)' },]
1110
+      this.problem.forEach(res => {
1111
+        let color = Math.floor((Math.random() * arr.length))
1112
+        this.$set(res, 'bgcolor', arr[color].background)
1113
+        this.$set(res, 'bdcolor', arr[color].border)
1114
+      })
1115
+      this.lableList.forEach(res => {
1116
+        let color = Math.floor((Math.random() * arr.length))
1117
+        this.$set(res, 'bgcolor', arr[color].background)
1118
+        this.$set(res, 'bdcolor', arr[color].border)
1119
+      })
1120
+
1069
     }
1121
     }
1070
   },
1122
   },
1071
 
1123
 
@@ -1081,7 +1133,7 @@ export default {
1081
   },
1133
   },
1082
 
1134
 
1083
   mounted () {
1135
   mounted () {
1084
-
1136
+    this.randomColor()
1085
   },
1137
   },
1086
   destroyed () {
1138
   destroyed () {
1087
     if (this.payStatusInterval) { //如果定时器在运行则关闭
1139
     if (this.payStatusInterval) { //如果定时器在运行则关闭
@@ -1117,6 +1169,7 @@ export default {
1117
         img {
1169
         img {
1118
           width: 100%;
1170
           width: 100%;
1119
           display: block;
1171
           display: block;
1172
+          border-radius: 6px;
1120
         }
1173
         }
1121
       }
1174
       }
1122
       .user-span {
1175
       .user-span {
@@ -1125,6 +1178,33 @@ export default {
1125
         span {
1178
         span {
1126
           color: #333333;
1179
           color: #333333;
1127
         }
1180
         }
1181
+        .info {
1182
+          display: flex;
1183
+          justify-content: space-between;
1184
+          
1185
+          .name {
1186
+            font-size: 22px;
1187
+          }
1188
+          .sex {
1189
+            img {
1190
+              width: 24px;
1191
+              height: 24px;
1192
+            }
1193
+          }
1194
+          .age {
1195
+            margin-left: 13px;
1196
+            span:nth-child(1) {
1197
+              font-size: 22px;
1198
+            }
1199
+            span:nth-child(2) {
1200
+              margin-left: 4px;
1201
+              color: #999999;
1202
+            }
1203
+          }
1204
+        }
1205
+        div:nth-child(2), div:nth-child(3) {
1206
+          margin-bottom: 8px;
1207
+        }
1128
       }
1208
       }
1129
     }
1209
     }
1130
     .user-record {
1210
     .user-record {
@@ -1159,7 +1239,7 @@ export default {
1159
       overflow: scroll;
1239
       overflow: scroll;
1160
       background: #ffffff;
1240
       background: #ffffff;
1161
       .lable-title {
1241
       .lable-title {
1162
-        font-size: 14px;
1242
+        font-size: 20px;
1163
         font-family: PingFangSC-Medium, PingFang SC;
1243
         font-family: PingFangSC-Medium, PingFang SC;
1164
         font-weight: 500;
1244
         font-weight: 500;
1165
         color: #333333;
1245
         color: #333333;
@@ -1206,9 +1286,13 @@ export default {
1206
       font-weight: 500;
1286
       font-weight: 500;
1207
       color: #333333;
1287
       color: #333333;
1208
       line-height: 20px;
1288
       line-height: 20px;
1289
+      margin-top: 20px;
1290
+      .ps-title {
1291
+        font-size: 20px;
1292
+      }
1209
       .ps-text {
1293
       .ps-text {
1210
         margin-top: 10px;
1294
         margin-top: 10px;
1211
-        font-size: 12px;
1295
+        font-size: 17px;
1212
         font-weight: 400;
1296
         font-weight: 400;
1213
         color: #666666;
1297
         color: #666666;
1214
         line-height: 17px;
1298
         line-height: 17px;
@@ -1649,6 +1733,17 @@ export default {
1649
         }
1733
         }
1650
       }
1734
       }
1651
     }
1735
     }
1736
+    .coupon-confirm {
1737
+      width: 176px;
1738
+      height: 28px;
1739
+      margin: 18px auto 0 auto;
1740
+      color: white;
1741
+      background-color: #FA7D22;
1742
+      border-radius: 14px;
1743
+      display: flex;
1744
+      align-items: center;
1745
+      justify-content: center;
1746
+    }
1652
   }
1747
   }
1653
   .project-block {
1748
   .project-block {
1654
     width: 540px;
1749
     width: 540px;
@@ -1902,7 +1997,9 @@ export default {
1902
     .banner {
1997
     .banner {
1903
       margin-top: 24px;
1998
       margin-top: 24px;
1904
       .qrCode {
1999
       .qrCode {
1905
-        text-align: center;
2000
+        // text-align: center;
2001
+        display: flex;
2002
+        justify-content: center;
1906
       }
2003
       }
1907
     }
2004
     }
1908
     .pay-list {
2005
     .pay-list {