feat: 更新

src/pages/confirmOrder/details/index.vue

@@ -151,16 +151,114 @@
               <div class="choice-icon"><img :src="select"></div>
             </div>
             <div class="bottom">
-              <div class=""></div>
+              <div class="coupon-notes">
+                <div class="notes-text min-size">
+                  <span v-if="!isOver">{{'优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目' |ellipsis(20)}}</span>
+                  <span v-else>优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目优惠卷仅限试用项目优惠卷仅限试用项目优惠卷仅限项目</span>
+                </div>
+                <div class="notes-icon"
+                     @click="isOver=!isOver"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/openNotes.png"
+                       alt=""></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </mine-pupop>
+    <!-- 选择项目 -->
+    <mine-pupop :show="isProject">
+      <div class="project-block">
+        <div class="delete-pupop"
+             @click="isProject=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="project-pupop-title">选择项目</div>
+        <div class="project-select">
+          <el-select v-model="projectInfo"
+                     placeholder="请选择项目"
+                     style="width: 295px;"
+                     size="mini">
+            <el-option v-for="item in projectList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="products-select">
+          <el-select v-model="productsInfo"
+                     placeholder="请选择升级产品包"
+                     style="width: 295px;"
+                     size="mini">
+            <el-option v-for="item in productsList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="products-button">确定</div>
+      </div>
+    </mine-pupop>
+    <!-- 选择时间 -->
+    <mine-pupop :show="isTs">
+      <div class="ts-block">
+        <div class="delete-pupop"
+             @click="isTs=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="ts-pupop-title">选择时间</div>
+        <div class="ts-content">
+          <ul class="ts-table">
+            <li v-for="item,index in tsTableList"
+                :key="index">
+              <div>{{item.text}}</div>
+              <div>{{item.ts}}</div>
+            </li>
+          </ul>
+          <ul class="ts-boty">
+            <li v-for="item,index in tsBodyList"
+                :key="index">
+              <div>{{item.ts}}</div>
+            </li>
+          </ul>
+        </div>
+        <div class="ts-button">确认</div>
+      </div>
+    </mine-pupop>
+    <!-- 皮肤状态 -->
+    <mine-pupop :show="isPore">
+      <div class="pore-block">
+        <div class="delete-pupop"
+             @click="isPore=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="pore-content">
+          <ul>
+            <li class="pore-info"
+                v-for="item,index in poreList"
+                :key="index">
+              <div class="pore-top">
+                <div class="pore-title">
+                  <div>RGB毛孔：</div>
+                  <div class="pore-medium">粗大毛孔个数{{item.medium}}</div>
+                </div>
+                <div class="pore-over">
+                  <div class="min-size">粗大毛孔个数：{{item.medium}}个</div>
+                  <div class="min-size">中等毛孔个数：{{item.small}}个</div>
+                  <div class="min-size">细小毛孔个数：{{item.mini}}个</div>
+                </div>
+              </div>
+              <div class="pore-bottom min-size">
+                {{'皮肤状态一般，污物阻塞导致，油脂分泌旺盛，皮肤状态一般，污物阻塞导致，油脂分泌旺盛皮肤状态一般，污物阻塞导致，油脂分泌旺盛，皮肤状态一般，污物阻塞导致，油脂分泌旺盛油脂分泌旺盛油脂分泌旺盛旺…' |ellipsis(85)}}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
+import { lstat } from 'fs';
 import minePupop from '../../../components/minePupop/index.vue'
 
 export default {
@@ -263,6 +361,111 @@ export default {
         value: '选项5',
         label: '北京烤鸭'
       }],
+      //产品列表
+      productsList: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      //时间列表（头部）
+      tsTableList: [
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+        {
+          text: '今天',
+          ts: '10-27',
+        },
+      ],
+      //时间列表（body）
+      tsBodyList: [
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+        {
+          id: 0,
+          ts: '10:00'
+        },
+      ],
+      //皮肤状态列表
+      poreList: [
+        {
+          medium: 133,
+          small: 344,
+          mini: 242
+        },
+        {
+          medium: 133,
+          small: 344,
+          mini: 242
+        },
+        {
+          medium: 133,
+          small: 344,
+          mini: 242
+        }
+      ],
       couponList: [
         {
 
@@ -270,10 +473,15 @@ export default {
       ],
       timesInfo: '',
       projectInfo: '',
+      productsInfo: '',
       weekInfo: '',
       programmeIndex: '',
       remarks: '',
-      isCoupun: true
+      isCoupun: false,//是否展示优惠券弹窗
+      isOver: false,//优惠券注释
+      isProject: false,//是否展示选择项目弹窗
+      isTs: false,//是否展示选择时间弹窗
+      isPore: false,//皮肤状态弹窗
     };
   },
   computed: {
@@ -744,7 +952,7 @@ export default {
       overflow: scroll;
       .coupon-info {
         width: 345px;
-        padding: 20px 14px 0 14px;
+        padding: 20px 14px 10px 14px;
         position: relative;
         background: #fff4e6;
         border-radius: 12px;
@@ -805,6 +1013,209 @@ export default {
             }
           }
         }
+        .bottom {
+          padding-top: 9px;
+          .coupon-notes {
+            display: flex;
+            justify-content: space-between;
+
+            .notes-text {
+              width: 314px;
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #c38029;
+              line-height: 18px;
+            }
+            .notes-icon {
+              width: 24px;
+              img {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .project-block {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px;
+    .delete-pupop {
+      width: 32px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      img {
+        width: 100%;
+      }
+    }
+    .project-pupop-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .project-select {
+      text-align: center;
+      margin-top: 26px;
+    }
+    .products-select {
+      text-align: center;
+      margin-top: 20px;
+    }
+    .products-button {
+      position: absolute;
+      bottom: 42px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 28px;
+      text-align: center;
+    }
+  }
+  .ts-block {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px 105px;
+    .delete-pupop {
+      width: 32px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      img {
+        width: 100%;
+      }
+    }
+    .ts-pupop-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .ts-content {
+      .ts-table {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #999999;
+        line-height: 20px;
+        padding: 9px 0;
+        display: flex;
+        justify-content: space-between;
+        li {
+          text-align: center;
+        }
+      }
+      .ts-boty {
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        li {
+          margin-top: 10px;
+          width: 68px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          background: #f9f9f9;
+          border-radius: 8px;
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+    .ts-button {
+      position: absolute;
+      bottom: 42px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 28px;
+      text-align: center;
+    }
+  }
+  .pore-block {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px;
+    .delete-pupop {
+      width: 32px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      img {
+        width: 100%;
+      }
+    }
+    .pore-content {
+      overflow: scroll;
+      height: 310px;
+      .pore-info {
+        margin-top: 10px;
+        border-radius: 4px;
+        border: 1px solid #f5f5f5;
+        .pore-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 20px;
+          padding: 10px;
+          .pore-title {
+            .pore-medium {
+              font-size: 18px;
+              color: #fa7d22;
+              line-height: 25px;
+            }
+          }
+          .pore-over {
+            font-size: 12px;
+          }
+        }
+        .pore-bottom {
+          padding: 6px 8px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          font-size: 12px;
+          font-family: PingFang-SC-Regular, PingFang-SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 14px;
+        }
       }
     }
   }