optimize：确认订单模块UI调整

src/pages/confirmOrder/details/index.vue

@@ -2,16 +2,20 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img"><img :src="userInfo.image"
+        <div class="user-img"><img :src="userInfo.avatar_url"
                alt=""></div>
         <div class="user-span">
-          <div class="name">昵称：<span>{{userInfo.nickname}}</span></div>
-          <div class="sex">性别：<span>{{userInfo.sex}}</span></div>
-          <div class="age">肤龄：<span>{{userInfo.age==1?'男':userInfo.age==2?'女':'保密'}}</span></div>
-          <div class="skin-type">肤质：<span>{{userInfo.skin}}</span></div>
+          <div class="info">
+            <div class="name"><span>{{userInfo.nickname}}</span></div>
+            <div class="sex"><img :src="gender" alt=""></div>
+            <div class="age"><span>{{userInfo.skin_age}}</span><span>肤龄</span></div>
+          </div>
+          <div class="skin-type">肤质：<span>{{userInfo.skin_type}}</span></div>
+          <div class="skin-color">肤色：<span>{{userInfo.skin_color}}</span></div>
+          <div class="skin-color">上传报告时间：<span>{{userInfo.check_time}}</span></div>
         </div>
       </div>
-      <div class="user-record">
+      <!-- <div class="user-record">
         <div class="fraction"
              @click="isPore=true">
           <div class="title">肌肤得分</div>
@@ -25,26 +29,46 @@
           <div class="title">上传检测时间</div>
           <div class="ts">{{userInfo.check_time}}</div>
         </div>
+      </div> -->
+      <div class="ps">
+        <div class="ps-title">
+          备注
+        </div>
+        <div class="ps-text">{{remarks || '无' | ellipsis(20)}}</div>
+      </div>
+      <div class="lable">
+        <div class="lable-title">
+          问题标签
+        </div>
+        <div class="lable-list">
+          <div v-for="(item,index) in problem"
+               :key="index"
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
+               class='lable-info'>
+            {{item.text}}
+          </div>
+        </div>
       </div>
       <div class="lable">
         <div class="lable-title">
-          面诊标签
+          面部标签
         </div>
         <div class="lable-list">
           <div v-for="(item,index) in lableList"
                :key="index"
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
                class='lable-info'>
-            {{item}}
+            {{item.text}}
           </div>
         </div>
       </div>
-      <div class="ps">
+      <!-- <div class="ps">
         <div class="ps-title">
           备注
         </div>
         <div class="ps-text">{{remarks | ellipsis(20)}}</div>
-      </div>
-      <div class="programme">
+      </div> -->
+      <!-- <div class="programme">
         <div class="tab">
           <div class="tab-title">执行方案</div>
         </div>
@@ -73,7 +97,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="right">
       <div class="shop-info">
@@ -220,6 +244,7 @@
             </div>
           </li>
         </ul>
+        <div class="coupon-confirm" @click="isCoupun=false">确认</div>
       </div>
     </mine-pupop>
     <!-- 选择项目 -->
@@ -426,8 +451,10 @@ export default {
       unSelect: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png',
       userInfo: {
       },
+      // 问题标签
+      problem: [{ text: '干性（干燥）' }, { text: '干性（干燥、脱皮、缺水）' }, { text: '干性（干燥、脱皮、缺水）' }],
       //面部标签
-      lableList: [],
+      lableList: [{ text: '干性（干燥）' }, { text: '干性（干燥、脱皮、缺水）' }, { text: '干性（干燥、脱皮、缺水）' }],
       //执行方案
       programmeList: [],
       order_data: {},//门店
@@ -511,7 +538,12 @@ export default {
     };
   },
   computed: {
-
+    gender() {
+      // 性别，1男，2女，0保密
+      return this.userInfo.sex == 1 ?
+      'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/male.png' :
+      'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/female.png'
+    }
   },
   watch: {},
 
@@ -522,7 +554,8 @@ export default {
     getOrderInfo () {
       api.getOrderInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user
-        this.lableList = res.data.tags
+        this.problem = res.data.skin_name
+        this.lableList = res.data.face_names
         this.remarks = res.data.remark
         this.programmeList = res.data.scheme_list
         this.order_data = res.data.order_data
@@ -1066,6 +1099,25 @@ export default {
         this.discount = res.data.discount
         this.getOrderInfo()
       })
+    },
+    randomColor (type) {
+      let arr = [
+        { background: 'rgba(244, 247, 255, 1)', border: 'rgba(85, 124, 255, 1)' },
+        { background: 'rgba(245, 252, 245, 1)', border: 'rgba(66, 211, 81, 1)' },
+        { background: 'rgba(254, 244, 237, 1)', border: 'rgba(250, 125, 34, 1)' },
+        { background: 'rgba(249, 245, 255, 1)', border: 'rgba(136, 50, 255, 1)' },
+        { background: 'rgba(255, 252, 245, 1)', border: 'rgba(204, 116, 42, 1)' },]
+      this.problem.forEach(res => {
+        let color = Math.floor((Math.random() * arr.length))
+        this.$set(res, 'bgcolor', arr[color].background)
+        this.$set(res, 'bdcolor', arr[color].border)
+      })
+      this.lableList.forEach(res => {
+        let color = Math.floor((Math.random() * arr.length))
+        this.$set(res, 'bgcolor', arr[color].background)
+        this.$set(res, 'bdcolor', arr[color].border)
+      })
+
     }
   },
 
@@ -1081,7 +1133,7 @@ export default {
   },
 
   mounted () {
-
+    this.randomColor()
   },
   destroyed () {
     if (this.payStatusInterval) { //如果定时器在运行则关闭
@@ -1117,6 +1169,7 @@ export default {
         img {
           width: 100%;
           display: block;
+          border-radius: 6px;
         }
       }
       .user-span {
@@ -1125,6 +1178,33 @@ export default {
         span {
           color: #333333;
         }
+        .info {
+          display: flex;
+          justify-content: space-between;
+          
+          .name {
+            font-size: 22px;
+          }
+          .sex {
+            img {
+              width: 24px;
+              height: 24px;
+            }
+          }
+          .age {
+            margin-left: 13px;
+            span:nth-child(1) {
+              font-size: 22px;
+            }
+            span:nth-child(2) {
+              margin-left: 4px;
+              color: #999999;
+            }
+          }
+        }
+        div:nth-child(2), div:nth-child(3) {
+          margin-bottom: 8px;
+        }
       }
     }
     .user-record {
@@ -1159,7 +1239,7 @@ export default {
       overflow: scroll;
       background: #ffffff;
       .lable-title {
-        font-size: 14px;
+        font-size: 20px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #333333;
@@ -1206,9 +1286,13 @@ export default {
       font-weight: 500;
       color: #333333;
       line-height: 20px;
+      margin-top: 20px;
+      .ps-title {
+        font-size: 20px;
+      }
       .ps-text {
         margin-top: 10px;
-        font-size: 12px;
+        font-size: 17px;
         font-weight: 400;
         color: #666666;
         line-height: 17px;
@@ -1649,6 +1733,17 @@ export default {
         }
       }
     }
+    .coupon-confirm {
+      width: 176px;
+      height: 28px;
+      margin: 18px auto 0 auto;
+      color: white;
+      background-color: #FA7D22;
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
   .project-block {
     width: 540px;
@@ -1902,7 +1997,9 @@ export default {
     .banner {
       margin-top: 24px;
       .qrCode {
-        text-align: center;
+        // text-align: center;
+        display: flex;
+        justify-content: center;
       }
     }
     .pay-list {