Merge branch 'lihai' into zhp

src/pages/confirmOrder/details/index.vue

@@ -7,7 +7,8 @@
         <div class="user-span">
           <div class="info">
             <div class="name"><span>{{userInfo.nickname}}</span></div>
-            <div class="sex"><img :src="gender" alt=""></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>
@@ -40,13 +41,8 @@
         <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 class="problem-lable">
+          <div class="lable-text problem-text">{{problem}}</div>
         </div>
       </div>
       <div class="lable">
@@ -244,7 +240,8 @@
             </div>
           </li>
         </ul>
-        <div class="coupon-confirm" @click="isCoupun=false">确认</div>
+        <div class="coupon-confirm"
+             @click="isCoupun=false">确认</div>
       </div>
     </mine-pupop>
     <!-- 选择项目 -->
@@ -452,9 +449,9 @@ export default {
       userInfo: {
       },
       // 问题标签
-      problem: [{ text: '干性（干燥）' }, { text: '干性（干燥、脱皮、缺水）' }, { text: '干性（干燥、脱皮、缺水）' }],
+      problem: '',
       //面部标签
-      lableList: [{ text: '干性（干燥）' }, { text: '干性（干燥、脱皮、缺水）' }, { text: '干性（干燥、脱皮、缺水）' }],
+      lableList: [],
       //执行方案
       programmeList: [],
       order_data: {},//门店
@@ -538,11 +535,11 @@ export default {
     };
   },
   computed: {
-    gender() {
+    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'
+        '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: {},
@@ -555,7 +552,15 @@ export default {
       api.getOrderInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user
         this.problem = res.data.skin_name
-        this.lableList = res.data.face_names
+        let _problem = []
+        res.data.face_names.forEach(item => {
+          let info = {}
+          info['text'] = item
+          _problem.push(info)
+          console.log(_problem, '_problem');
+        })
+        this.lableList = _problem
+        this.randomColor();
         this.remarks = res.data.remark
         this.programmeList = res.data.scheme_list
         this.order_data = res.data.order_data
@@ -1107,11 +1112,6 @@ export default {
         { 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)
@@ -1133,7 +1133,6 @@ export default {
   },
 
   mounted () {
-    this.randomColor()
   },
   destroyed () {
     if (this.payStatusInterval) { //如果定时器在运行则关闭
@@ -1181,7 +1180,7 @@ export default {
         .info {
           display: flex;
           justify-content: space-between;
-          
+
           .name {
             font-size: 22px;
           }
@@ -1202,7 +1201,8 @@ export default {
             }
           }
         }
-        div:nth-child(2), div:nth-child(3) {
+        div:nth-child(2),
+        div:nth-child(3) {
           margin-bottom: 8px;
         }
       }
@@ -1239,25 +1239,53 @@ export default {
       overflow: scroll;
       background: #ffffff;
       .lable-title {
-        font-size: 20px;
+        font-size: 14px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #333333;
         line-height: 20px;
-        margin-bottom: 14px;
+      }
+      .problem-lable {
+        flex: 1;
+        overflow-y: hidden;
+        width: 100%;
+        font-size: 12px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 17px;
+        display: flex;
+        flex-flow: column wrap;
+        list-style-type: none;
+        overflow-x: scroll;
+        align-items: baseline;
+
+        .lable-text {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          height: 24px;
+          line-height: 24px;
+          border: 1px solid #42d351;
+          padding: 0 12px;
+          border-radius: 2px;
+        }
+        .problem-text {
+          background: rgba(244, 247, 255, 1);
+          border: 1px solid rgba(85, 124, 255, 1);
+        }
       }
       .lable-list {
         width: 100%;
         min-height: 105rpx;
         .lable-info {
           display: inline-block;
-          padding: 0 12px;
-          margin-left: 10px;
+          padding-bottom: 12px;
           height: 24px;
           line-height: 24px;
           border-radius: 2px;
           border: 1px solid #d6d6d6;
-          margin-bottom: 10px;
+          margin-top: 10px;
+          margin-right: 10px;
         }
         .add-lable {
           display: inline-block;
@@ -1287,12 +1315,10 @@ export default {
       color: #333333;
       line-height: 20px;
       margin-top: 20px;
-      .ps-title {
-        font-size: 20px;
-      }
       .ps-text {
         margin-top: 10px;
-        font-size: 17px;
+        font-size: 12px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
         font-weight: 400;
         color: #666666;
         line-height: 17px;
@@ -1738,7 +1764,7 @@ export default {
       height: 28px;
       margin: 18px auto 0 auto;
       color: white;
-      background-color: #FA7D22;
+      background-color: #fa7d22;
       border-radius: 14px;
       display: flex;
       align-items: center;

src/pages/customerMan/details/index.vue

@@ -2,44 +2,23 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img">
-          <img :src="userInfo.avatar_url"
-               alt />
-        </div>
+        <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==1?'男':'女'}}</span>
-          </div>
-          <div class="age">
-            肤龄：
-            <span>{{userInfo.age||'--'}}</span>
-          </div>
-          <div class="skin-type">
-            肤质：
-            <span>{{userInfo.skin}}</span>
+          <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="personage-data">
         <div class="myDataList">
-          肌肤得分：
-          <span class="bigSixe">{{userInfo.scorec}}分</span>
-        </div>
-        <div class="myDataList">
-          皮肤状态：
-          <span>{{userInfo.skin_status}}</span>
-        </div>
-        <div class="myDataList">
-          上传检测时间：
-          <span>{{userInfo.check_time}}</span>
-        </div>
-        <div class="myDataList">
           出生日期：
           <span>{{userInfo.birthday}}</span>
         </div>
@@ -75,6 +54,10 @@
           积分：
           <span>{{userInfo.coin}}</span>
         </div>
+        <div class="myDataList">
+          备注：
+          <span>{{remarks | ellipsis(20)}}</span>
+        </div>
       </div>
     </div>
     <div class="right">
@@ -82,15 +65,21 @@
         <div class="right-top-data">
           <div class="lable">
             <div class="lable-title">面诊标签</div>
-            <div class="lable-list">
-              <div v-for="(item,index) in lableList"
-                   :key="index"
-                   class="lable-info">{{item.text}}</div>
+            <div class="problem">
+              <div class="problem-title">问题标签</div>
+              <div class="problem-lable">
+                <div class="lable-text problem-text">{{problem}}</div>
+              </div>
+            </div>
+            <div class="problem">
+              <div class="problem-title">面部标签</div>
+              <div class="problem-lable">
+                <div class="lable-text"
+                     v-for="item,index in lableList"
+                     :key="index"
+                     :style="{background:item.bgcolor,borderColor:item.bdcolor}">{{item.text}}</div>
+              </div>
             </div>
-          </div>
-          <div class="ps">
-            <div class="ps-title">备注</div>
-            <div class="ps-text">{{remarks | ellipsis(20)}}</div>
           </div>
         </div>
         <div class="right-top-list">
@@ -120,40 +109,43 @@
           <div class="tab">
             <div class="tab-title">执行方案</div>
           </div>
-          <div class="programme-list">
-            <div :class="['programme-info',item.onSelect?'programme-active':'']"
-                 v-for="(item,index) in programmeList"
-                 :key="index"
-                 @click="onOperation(index)">
-              <div class="programme-left">
-                <div class="programme-img">
-                  <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
-                       alt />
-                </div>
-                <div class="programme-tips">
-                  <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
-                  <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
-                  <div class="tips-title">
-                    仪器：
-                    <span>{{'无创水光'|ellipsis(9)}}</span>
-                  </div>
-                </div>
+          <div class="programmeList"
+               v-if="programmeList.length>0">
+            <div class="programmeWeek">
+              <div class="programmeItem"
+                   v-for="item,index in programmeList"
+                   :key="index">
+                <div :class="selectWeek==index?'weekItemSelect':'weekItem'"
+                     @click="weekSelect(index)">{{item.name}}</div>
+                <div class="weekLine"
+                     v-if="index==3?false:true"></div>
               </div>
-              <div class="programme-right">
-                <div class="frequency">
-                  执行频率：
-                  <span>一周一次</span>
+            </div>
+            <div class="doTime">{{programmeList[selectWeek].time}}</div>
+            <div class="weekDetails"
+                 v-if="programmeList.length>0">
+              <div class="contentItem"
+                   v-for="item,index1 in programmeList[selectWeek].list"
+                   :key="index1">
+                <div class="itemTitle">
+                  <div>{{item.name}}</div>
+                  <div>{{item.classify_name}}</div>
+                  <!-- <div>{{item.time}}</div> -->
                 </div>
-                <div class="duration">
-                  持续时长：
-                  <span>28天</span>
+                <div class="itemContent"
+                     v-for="items,index2 in item.list"
+                     :key="index2">
+                  <img class="itemContent-img"
+                       :src="items.cover_url" />
+                  <div class="itemContent-right">
+                    <div class="right-content">
+                      <div class="right-name">{{items.name |ellipsis(14)}}</div>
+                      <div class="right-price">{{items.price |doubleNum(2)}}</div>
+                    </div>
+                    <div class="right-project">{{items.product_name}}</div>
+                  </div>
                 </div>
               </div>
-              <div class="operation"
-                   v-if="item.onSelect">
-                <div class="edit">编辑</div>
-                <div class="delete">删除</div>
-              </div>
             </div>
           </div>
         </div>
@@ -176,8 +168,10 @@ export default {
         age: "23",
         skinType: "中性皮肤"
       },
+      problem: "",
       //面部标签
-      lableList: [],
+      lableList: [
+      ],
       //执行方案
       programmeList: [],
 
@@ -186,7 +180,7 @@ export default {
       projectList: [],
 
       order_total: {},
-
+      selectWeek: 0,
       timesInfo: "",
       projectInfo: "",
       weekInfo: "",
@@ -195,7 +189,14 @@ export default {
       isPupop: false
     };
   },
-  computed: {},
+  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: {},
 
   methods: {
@@ -203,14 +204,56 @@ export default {
       api.getPadUserInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user;
         this.remarks = res.data.remark;
-        this.lableList = res.data.tags;
+        this.problem = res.data.skin_name;
+        let _problem = []
+        res.data.face_names.forEach(item => {
+          let info = {}
+          info['text'] = item
+          _problem.push(info)
+          console.log(_problem, '_problem');
+        })
+        this.lableList = _problem
+        this.remarks = res.data.remark
+        this.randomColor();
         this.order_total = res.data.order_total;
         this.programmeList = res.data.scheme_list;
         // this.programmeList = res.data.order_data.project_list;
         // this.coupon_list = res.data.order_data.coupon_list;
       });
     },
-
+    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.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);
+      });
+    },
+    weekSelect (index) {
+      console.log("xxxx");
+      this.selectWeek = index;
+    },
     onOperation (index) {
       if (this.programmeList[index].onSelect) {
         this.$set(
@@ -270,27 +313,47 @@ export default {
       display: flex;
       align-items: center;
       .user-img {
-        width: 98px;
+        width: 96px;
         img {
           width: 100%;
           display: block;
+          border-radius: 6px;
         }
       }
       .user-span {
         margin-left: 12px;
-        .sex {
-          margin-top: 8px;
-        }
-        .age {
-          margin-top: 8px;
-        }
-        .skin-type {
-          margin-top: 8px;
-        }
 
         span {
           color: #333333;
         }
+        .info {
+          display: flex;
+          justify-content: space-between;
+
+          .name {
+            font-size: 16px;
+          }
+          .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;
+        }
       }
     }
     .personage-data {
@@ -368,6 +431,44 @@ export default {
             line-height: 20px;
             margin-bottom: 14px;
           }
+          .problem {
+            display: flex;
+            .problem-title {
+              font-size: 13px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 18px;
+            }
+            .problem-lable {
+              flex: 1;
+              overflow-y: hidden;
+              width: 100%;
+              height: 68px;
+              font-size: 12px;
+              font-family: PingFang-SC-Regular, PingFang-SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 17px;
+              display: flex;
+              flex-flow: column wrap;
+              list-style-type: none;
+              overflow-x: scroll;
+              align-items: baseline;
+
+              .lable-text {
+                margin-left: 10px;
+                margin-bottom: 10px;
+                border: 1px solid #42d351;
+                padding: 0 12px;
+                border-radius: 2px;
+              }
+              .problem-text {
+                background: rgba(244, 247, 255, 1);
+                border: 1px solid rgba(85, 124, 255, 1);
+              }
+            }
+          }
           .lable-list {
             width: 100%;
             min-height: 105rpx;
@@ -420,16 +521,147 @@ export default {
     }
     .right-bottom {
       margin-top: 18px;
+      width: 575px;
+      height: 286px;
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
       border-radius: 8px;
-      padding: 16px 61px 12px 12px;
+      padding: 16px 12px 12px 12px;
       .programme {
         //   margin-top: 20px;
         width: 100%;
         background: #ffffff;
         border-radius: 8px;
+        .programmeList {
+          width: 550px;
+          .programmeWeek {
+            display: flex;
+            align-items: center;
+          }
+
+          .programmeItem {
+            margin-top: 20px;
+            flex: 1;
+            display: flex;
+          }
+          .weekItem {
+            text-align: center;
+            font-size: 13px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #999999;
+            flex: 1;
+          }
+
+          .weekItemSelect {
+            text-align: center;
+            font-size: 13px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #fa7d22;
+            flex: 1;
+          }
 
+          .weekLine {
+            width: 1px;
+            height: 12px;
+            background: #f0f0f0;
+          }
+          .doTime {
+            // margin-left: 20px;
+            line-height: 30px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .weekDetails {
+            height: 180px;
+            border-radius: 6px;
+            border: 1px solid #f5f5f5;
+            display: flex;
+            align-items: center;
+            overflow: scroll;
+          }
+
+          .contentItem {
+            margin-left: 10px;
+            width: 317px;
+            min-height: 211px;
+            border-right: 1px solid #f5f5f5;
+            // overflow-y: scroll;
+          }
+
+          .line-hor {
+            margin-top: 30px;
+            margin-left: 10px;
+            width: 1px;
+            height: 261px;
+            background: #f0f0f0;
+          }
+
+          .itemTitle {
+            display: flex;
+            padding-right: 10px;
+            justify-content: space-between;
+            width: 100%;
+            line-height: 20px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #333333;
+          }
+
+          .itemContent {
+            width: 317px;
+            margin-top: 10px;
+            display: flex;
+            align-items: center;
+            height: 49px;
+          }
+
+          .itemContent-img {
+            width: 49px;
+            height: 49px;
+            background: #d8d8d8;
+            border-radius: 2px;
+          }
+
+          .itemContent-right {
+            margin-left: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 49px;
+            flex: 1;
+          }
+
+          .right-content {
+            flex: 1;
+            display: flex;
+          }
+
+          .right-name {
+            font-size: 12px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            flex: 1;
+          }
+
+          .right-price {
+            margin-right: 10px;
+            margin-left: 20px;
+            font-size: 12px;
+            font-family: OPPOSans-B, OPPOSans;
+            font-weight: normal;
+            color: #ff3007;
+          }
+
+          .right-project {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffc630;
+          }
+        }
         .tab {
           display: flex;
           align-items: center;

src/pages/historicalOrder/details/index.vue

@@ -2,90 +2,44 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img">
-          <img :src="userInfo.avatar_url" alt />
-        </div>
+        <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==1?'男':'女'}}</span>
-          </div>
-          <div class="age">
-            肤龄：
-            <span>{{userInfo.age}}</span>
-          </div>
-          <div class="skin-type">
-            肤质：
-            <span>{{userInfo.skin}}</span>
+          <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="fraction">
-          <div class="title">肌肤得分</div>
-          <div class="num">{{userInfo.score}}分</div>
-        </div>
-        <div class="status">
-          <div class="title">皮肤状态</div>
-          <div class="tips">{{userInfo.skin_status}}</div>
-        </div>
-        <div class="times">
-          <div class="title">上传检测时间</div>
-          <div class="ts">{{userInfo.check_time}}</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 lableList" :key="index" class="lable-info">{{item.text}}</div>
+        <div class="lable-title">
+          问题标签
+        </div>
+        <div class="problem-lable">
+          <div class="lable-text problem-text">{{problem}}</div>
         </div>
       </div>
-      <div class="ps">
-        <div class="ps-title">备注</div>
-        <div class="ps-text">{{remarks | ellipsis(20)}}</div>
-      </div>
-      <div class="programme">
-        <div class="tab">
-          <div class="tab-title">执行方案</div>
+      <div class="lable">
+        <div class="lable-title">
+          面部标签
         </div>
-        <div class="programme-list">
-          <div
-            :class="['programme-info',item.onSelect?'programme-active':'']"
-            v-for="(item,index) in scheme_list"
-            :key="index"
-            @click="onOperation(index)"
-          >
-            <div class="programme-left">
-              <div class="programme-img">
-                <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png" alt />
-              </div>
-              <div class="programme-tips">
-                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
-                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
-                <div class="tips-title">
-                  仪器：
-                  <span>{{'无创水光'|ellipsis(9)}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="programme-right">
-              <div class="frequency">
-                执行频率：
-                <span>{{item.frequency}}</span>
-              </div>
-              <div class="duration">
-                持续时长：
-                <span>{{item.duration}}</span>
-              </div>
-            </div>
-            <div class="operation" v-if="item.onSelect">
-              <div class="edit">编辑</div>
-              <div class="delete">删除</div>
-            </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.text}}
           </div>
         </div>
       </div>
@@ -111,7 +65,9 @@
           <span>{{order_data.project_num}}个</span>项目
         </div>
         <div class="project-list">
-          <div class="project-info" v-for="(item,index) in programmeList" :key="index">
+          <div class="project-info"
+               v-for="(item,index) in programmeList"
+               :key="index">
             <div class="project-image">
               <img :src="item.cover_url" />
             </div>
@@ -138,17 +94,17 @@
           <div class="coupon">
             <div class="coupon-tips">
               <div class="coupon-icon">
-                <img
-                  src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
-                  alt
-                />
+                <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
+                     alt />
               </div>
               <div class="coupon-title">优惠卷</div>
               <div class="coupon-tip">已选推荐优惠</div>
             </div>
             <div class="on-icon">></div>
           </div>
-          <div class="coupon-ps" v-for="(item,index) in coupon_list" :key="index">
+          <div class="coupon-ps"
+               v-for="(item,index) in coupon_list"
+               :key="index">
             <div>{{item.coupon_name}}</div>
             <div class="cou-price">-¥{{item.price}}</div>
           </div>
@@ -168,136 +124,57 @@
 <script>
 import api from "../../../server/home";
 export default {
-  data() {
+  data () {
     return {
       userInfo: {
       },
-      lableList:{},
-      programmeList:{},
-      scheme_list:{},
-      // //面部标签
-      // lableList: [
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: true
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   },
-      //   {
-      //     text: "对话框的",
-      //     disabled: false
-      //   }
-      // ],
-      // //执行方案
-      // programmeList: [
-      //   {
-      //     image:
-      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-      //     tips: "+润百颜精华",
-      //     zoom: "皮肤综合仪（30号房）",
-      //     ts: "30分钟",
-      //     price: "79.00"
-      //   },
-      //   {
-      //     image:
-      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-      //     tips: "+润百颜精华",
-      //     zoom: "皮肤综合仪（30号房）",
-      //     ts: "30分钟",
-      //     price: "79.00"
-      //   },
-      //   {
-      //     image:
-      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-      //     tips: "+润百颜精华",
-      //     zoom: "皮肤综合仪（30号房）",
-      //     ts: "30分钟",
-      //     price: "79.00"
-      //   }
-      // ],
-      // //项目列表
-      // projectList: [
-      //   {
-      //     value: "选项1",
-      //     label: "黄金糕"
-      //   },
-      //   {
-      //     value: "选项2",
-      //     label: "双皮奶"
-      //   },
-      //   {
-      //     value: "选项3",
-      //     label: "蚵仔煎"
-      //   },
-      //   {
-      //     value: "选项4",
-      //     label: "龙须面"
-      //   },
-      //   {
-      //     value: "选项5",
-      //     label: "北京烤鸭"
-      //   }
-      // ],
+      lableList: [],
+      programmeList: {},
+      scheme_list: {},
       timesInfo: "",
       projectInfo: "",
       weekInfo: "",
       programmeIndex: "",
       remarks: "",
-      coupon_list:"",
-      order_data:"",
+      coupon_list: "",
+      order_data: "",
       isPupop: false,
-      id:""
+      id: "",
+      problem: '',
     };
   },
-  computed: {},
+  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: {},
 
   methods: {
-    getOrderInfo() {
+    getOrderInfo () {
       api.getOrderInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user;
         this.order_data = res.data.order_data;
-        this.lableList = res.data.tags;
+        this.problem = res.data.skin_name
+        let _problem = []
+        res.data.face_names.forEach(item => {
+          let info = {}
+          info['text'] = item
+          _problem.push(info)
+          console.log(_problem, '_problem');
+        })
+        this.lableList = _problem
+        this.randomColor();
         this.programmeList = res.data.order_data.project_list;
         this.coupon_list = res.data.order_data.coupon_list;
         this.remarks = res.data.remark;
       });
     },
 
-    onOperation(index) {
+    onOperation (index) {
       if (this.programmeList[index].onSelect) {
         this.$set(
           this.programmeList[index],
@@ -308,17 +185,31 @@ export default {
         this.$set(this.programmeList[index], "onSelect", true);
       }
     },
-    onSubmit() {},
-    submitFrequency() {}
+    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.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)
+      })
+
+    },
+    onSubmit () { },
+    submitFrequency () { }
   },
 
-  created() {
+  created () {
     let id = this.$route.query.id;
     this.id = id;
     this.getOrderInfo();
   },
 
-  mounted() {}
+  mounted () { }
 };
 </script>
 
@@ -347,6 +238,7 @@ export default {
         img {
           width: 100%;
           display: block;
+          border-radius: 6px;
         }
       }
       .user-span {
@@ -355,6 +247,34 @@ 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 {
@@ -394,20 +314,47 @@ export default {
         font-weight: 500;
         color: #333333;
         line-height: 20px;
-        margin-bottom: 14px;
+      }
+      .problem-lable {
+        flex: 1;
+        overflow-y: hidden;
+        width: 100%;
+        font-size: 12px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 17px;
+        display: flex;
+        flex-flow: column wrap;
+        list-style-type: none;
+        overflow-x: scroll;
+        align-items: baseline;
+
+        .lable-text {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          height: 24px;
+          line-height: 24px;
+          border: 1px solid #42d351;
+          padding: 0 12px;
+          border-radius: 2px;
+        }
+        .problem-text {
+          background: rgba(244, 247, 255, 1);
+          border: 1px solid rgba(85, 124, 255, 1);
+        }
       }
       .lable-list {
         width: 100%;
         min-height: 105rpx;
         .lable-info {
+          padding: 3px 12px;
           display: inline-block;
-          padding: 0 12px;
-          margin-left: 10px;
-          height: 24px;
-          line-height: 24px;
+          line-height: 17px;
           border-radius: 2px;
           border: 1px solid #d6d6d6;
-          margin-bottom: 10px;
+          margin-top: 10px;
+          margin-right: 10px;
         }
         .add-lable {
           display: inline-block;
@@ -436,9 +383,11 @@ export default {
       font-weight: 500;
       color: #333333;
       line-height: 20px;
+      margin-top: 20px;
       .ps-text {
         margin-top: 10px;
         font-size: 12px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
         font-weight: 400;
         color: #666666;
         line-height: 17px;

src/pages/testSkin/index.vue

@@ -100,7 +100,7 @@ export default {
     },
     handleCurrentChange (e) {
       this.currentPage1 = e
-      this.getSkinList
+      this.getSkinList()
     }
   },
 

src/router/map/home.js

@@ -6,6 +6,7 @@ import Home from '@/pages/home/index.vue'
 import HomeDetailList from '@/pages/home/detailList'
 import TestSkin from '@/pages/testSkin/index'
 import TestSkinDetails from '@/pages/testSkin/details'
+import TestSkinUpdate from '@/pages/testSkin/updates'
 import CustomerMan from '@/pages/customerMan/index'
 import CustomerManDetails from '@/pages/customerMan/details'
 import HistoricalOrder from '@/pages/historicalOrder/index'
@@ -45,6 +46,13 @@ export default {
       component: TestSkinDetails
     },
     {
+      path: '/testSkin/updates',
+      meta: {
+        isback: true,
+      },
+      component: TestSkinUpdate
+    },
+    {
       path: '/customerMan',
       component: CustomerMan
     },

src/server/home.js

@@ -72,6 +72,15 @@ export default class Home {
   static projectClassify (parms) {
     return $http.get(url.projectClassify, parms);
   }
+  static schemeDelete (parms) {
+    return $http.post(url.schemeDelete, parms);
+  }
+  static timesAdd (parms) {
+    return $http.post(url.timesAdd, parms);
+  }
+  static addUpdate (parms) {
+    return $http.post(url.addUpdate, parms);
+  }
 
   // 获取历史订单
   static getOrderList (parms) {
@@ -128,8 +137,19 @@ export default class Home {
     return $http.post(url.padOrderAdd, parms);
   }
 
-}
-
+  // 面部问题标签
+  static skinFace_tags (parms) {
+    return $http.get(url.skinFace_tags, parms);
+  }
 
+  // 皮肤问题标签
+  static skinSkin_tags (parms) {
+    return $http.get(url.skinSkin_tags, parms);
+  }
 
+  // 新增项目订单
+  static schemeSave (parms) {
+    return $http.post(url.schemeSave, parms);
+  }
 
+}

src/server/urls.js

@@ -41,6 +41,12 @@ export default {
   getOrderDiscount: '/v2/pad/order/discount',
   //获取项目分类
   projectClassify: '/v2/pad/project/classify',
+  //删除项目和耗材
+  schemeDelete: '/v2/pad/scheme/delete',
+  //新增次数
+  timesAdd: '/v2/pad/scheme/times_add',
+  //新增项目
+  addUpdate: '/v2/pad/scheme/update',
 
   /**
    *  by ListKer
@@ -79,4 +85,13 @@ export default {
   // 获取优惠券订单
   padOrderAdd: '/v2/pad/order/add',
 
+  // 面部问题标签
+  skinFace_tags: '/v2/pad/skin/face_tags',
+
+  // 皮肤问题标签
+  skinSkin_tags: '/v2/pad/skin/skin_tags',
+
+  // 创建标签
+  schemeSave: '/v2/pad/scheme/save',
+
 }