feat: 确定订单

src/components/common/layout/leftMenu.vue

@@ -68,12 +68,14 @@ export default {
           path: "/confirmOrder",
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unconfirmOrder.png',
           icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/confirmOrder.png'
-        }, {
-          name: "门店检测",
-          path: "/storeDetection",
-          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
-          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
-        }, {
+        },
+        //  {
+        //   name: "门店检测",
+        //   path: "/storeDetection",
+        //   icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
+        //   unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
+        // }, 
+        {
           name: "客户管理",
           path: "/customerMan",
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png',

src/config/env.js

@@ -2,11 +2,11 @@
 let appId = 102;       //sso登录服务的appid，传0表示走老的授权登录
 let appVersion = 1;    //sso登录服务的版本，默认为第一版
 let logFlag = {
-	dev: false,    			// 开发和测试环境是否上报log
-	from: false,   			// 是否上传页面来源
-	packageName: 'web-init'
-}; 
-let basePath = 'https://api.51yund.com'; 	// api请求地址
+  dev: false,    			// 开发和测试环境是否上报log
+  from: false,   			// 是否上传页面来源
+  packageName: 'web-init'
+};
+let basePath = 'https://store.api.ijolijoli.com/'; 	// api请求地址
 let ssoPath = 'https://sso.51yund.com';		// 授权登录地址
 let localPath = 'https://51yund.com';       // 获取定位地址
 let logPath = 'https://api.51yund.com';     // 上传日志地址
@@ -14,13 +14,13 @@ let jumpPath = 'https://d.51yund.com';		// 跳转登录地址
 let filterErr = ['sskey过期'];  //过滤掉某些错不上报
 
 export {
-	basePath,
-	ssoPath,
-	localPath,
-	jumpPath,
-	logPath,
-	logFlag,
-	appId,
-	appVersion,
-	filterErr
+  basePath,
+  ssoPath,
+  localPath,
+  jumpPath,
+  logPath,
+  logFlag,
+  appId,
+  appVersion,
+  filterErr
 }

src/pages/confirmOrder/details/index.vue

@@ -0,0 +1,812 @@
+<template>
+  <div class="mine">
+    <div class="left">
+      <div class="user-info">
+        <div class="user-img"><img :src="userInfo.image"
+               alt=""></div>
+        <div class="user-span">
+          <div class="name">昵称：<span>{{userInfo.name}}</span></div>
+          <div class="sex">性别：<span>{{userInfo.sex}}</span></div>
+          <div class="age">肤龄：<span>{{userInfo.age}}</span></div>
+          <div class="skin-type">肤质：<span>{{userInfo.skinType}}</span></div>
+        </div>
+      </div>
+      <div class="user-record">
+        <div class="fraction">
+          <div class="title">肌肤得分</div>
+          <div class="num">37分</div>
+        </div>
+        <div class="status">
+          <div class="title">皮肤状态</div>
+          <div class="tips">肤质一般</div>
+        </div>
+        <div class="times">
+          <div class="title">上传检测时间</div>
+          <div class="ts">2022.04.18 16:04</div>
+        </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>
+      </div>
+      <div class="ps">
+        <div class="ps-title">
+          备注
+        </div>
+        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
+      </div>
+      <div class="programme">
+        <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>
+            <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>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="shop-info">
+        <div class="shpo-name">预约店铺：<span>JOLIJOLI（西安店）</span></div>
+        <div class="shpo-address">门店地址：<span>JOLIJOLI（西安店）</span></div>
+        <div class="shpo-ts">美容时间：<span>JOLIJOLI（西安店）</span></div>
+      </div>
+      <div class="project">
+        <div class="project-title">
+          <div>共<span>3个</span>项目</div>
+          <div class="add-project">添加</div>
+        </div>
+        <div class="project-list">
+          <div class="project-info"
+               v-for="(item,index) in programmeList"
+               :key="index">
+            <div class="project-image"><img :src="item.image"></div>
+            <div class="project-content">
+              <div class="title-price">
+                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
+                <div class="project-price"><span class="min-size">￥</span>{{item.price}}</div>
+              </div>
+              <div class="project-tips">{{item.tips}}</div>
+              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cost">
+        <div class="cost-title">
+          <div>预约费用</div>
+          <div>¥399</div>
+        </div>
+        <div class="cost-coupon-list">
+          <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=""></div>
+              <div class="coupon-title">优惠卷</div>
+              <div class="coupon-tip">已选推荐优惠</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <div class="coupon-ps">
+            <div>【敏感维稳】多元修护加乘维稳</div>
+            <div class="cou-price">-¥100</div>
+          </div>
+        </div>
+        <div class="over-price">
+          合计： <span class="price-num"><span class="min-size">￥</span>399<span class="min-size">.00</span></span>
+        </div>
+      </div>
+      <div class="payment">立即支付</div>
+    </div>
+    <!-- 选择优惠券 -->
+    <mine-pupop :show="isCoupun">
+      <div class="coupon-block">
+        <div class="delete-pupop"
+             @click="isCoupun=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="coupon-pupop-title">选择优惠券</div>
+        <div class="coupon-lists">
+          <div class="coupon-info">
+            <div class="top">
+              <div v-if="false"
+                   class="all-free">全免</div>
+              <div v-else
+                   class="discount">
+                <div class="price-num"><span class="size">￥</span>10<span class="size">.00</span></div>
+                <div class="price-tips">满100元可用</div>
+              </div>
+              <div class="coupon-tip">
+                <div class="tips-title">仅限指定商品使用</div>
+                <div class="tips-ts">有效期至2022.02.07</div>
+              </div>
+              <div class="choice-icon"><img :src="select"></div>
+            </div>
+            <div class="bottom">
+              <div class=""></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </mine-pupop>
+  </div>
+</template>
+
+<script>
+import minePupop from '../../../components/minePupop/index.vue'
+
+export default {
+  components: { minePupop },
+  data () {
+    return {
+      select: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/select.png',
+      unSelect: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png',
+      userInfo: {
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+        name: '张三',
+        sex: '女',
+        age: '23',
+        skinType: '中性皮肤'
+      },
+      //面部标签
+      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: '北京烤鸭'
+      }],
+      couponList: [
+        {
+
+        }
+      ],
+      timesInfo: '',
+      projectInfo: '',
+      weekInfo: '',
+      programmeIndex: '',
+      remarks: '',
+      isCoupun: true
+    };
+  },
+  computed: {
+
+  },
+  watch: {},
+
+  methods: {
+    onOperation (index) {
+      if (this.programmeList[index].onSelect) {
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
+      } else {
+        this.$set(this.programmeList[index], 'onSelect', true)
+      }
+    },
+    onSubmit () {
+
+    },
+    submitFrequency () { },
+  },
+
+  created () {
+
+  },
+
+  mounted () {
+
+  },
+}
+
+</script>
+
+<style lang='less' scoped>
+.mine {
+  height: 100%;
+  display: flex;
+  .left {
+    width: 318px;
+    padding: 12px 12px 0 12px;
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+    border-radius: 8px;
+    font-size: 13px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 18px;
+    overflow: scroll;
+    height: 100%;
+    .user-info {
+      display: flex;
+      align-items: center;
+      .user-img {
+        width: 96px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+      .user-span {
+        margin-left: 12px;
+
+        span {
+          color: #333333;
+        }
+      }
+    }
+    .user-record {
+      margin-top: 16px;
+      display: flex;
+      justify-content: space-between;
+      .num {
+        font-size: 18px;
+        font-family: OPPOSans-B, OPPOSans;
+        font-weight: normal;
+        color: #fa7d22;
+        line-height: 29px;
+      }
+      .tips {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 30px;
+      }
+      .ts {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 30px;
+      }
+    }
+    .lable {
+      margin-top: 23px;
+      width: 100%;
+      overflow: scroll;
+      background: #ffffff;
+      .lable-title {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+        margin-bottom: 14px;
+      }
+      .lable-list {
+        width: 100%;
+        min-height: 105rpx;
+        .lable-info {
+          display: inline-block;
+          padding: 0 12px;
+          margin-left: 10px;
+          height: 24px;
+          line-height: 24px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+          margin-bottom: 10px;
+        }
+        .add-lable {
+          display: inline-block;
+          width: 27px;
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+          font-family: PingFang-SC-Regular, PingFang-SC;
+          font-weight: 400;
+          color: #333333;
+          text-align: center;
+          margin-left: 10px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+        }
+      }
+      .remarks {
+        /deep/ .el-textarea__inner:focus {
+          border-color: #fa852f;
+        }
+      }
+    }
+    .ps {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      .ps-text {
+        margin-top: 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 17px;
+      }
+    }
+    .programme {
+      margin-top: 20px;
+      width: 100%;
+      background: #ffffff;
+      border-radius: 8px;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .tab-title {
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333333;
+          line-height: 20px;
+        }
+      }
+      .programme-list {
+        margin-top: 10px;
+        position: relative;
+        z-index: 1;
+        .programme-info {
+          position: relative;
+          margin-bottom: 10px;
+          border-radius: 4px;
+          border: 1px solid #f5f5f5;
+          display: flex;
+          justify-content: space-between;
+          padding: 8px 8px 8px 10px;
+          align-items: center;
+          .programme-left {
+            display: flex;
+            align-items: center;
+            .programme-img {
+              width: 48px;
+              display: inline-block;
+              img {
+                width: 100%;
+                display: block;
+              }
+            }
+            .programme-tips {
+              display: inline-block;
+              margin-left: 10px;
+              font-size: 10px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 14px;
+              zoom: 0.83;
+            }
+          }
+          .programme-right {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            .duration {
+              margin-top: 14px;
+            }
+          }
+          .operation {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 10px;
+            z-index: 10;
+            width: 44px;
+            background: #ffffff;
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+            border-radius: 2px;
+            padding: 10px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            .delete {
+              margin-top: 20px;
+            }
+          }
+        }
+        .programme-active {
+          border: 1px solid #fa852f;
+        }
+      }
+    }
+  }
+  .right {
+    margin-left: 18px;
+    position: relative;
+    flex: 1;
+    .shop-info {
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 12px;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 24px;
+      span {
+        font-weight: 500;
+        color: #333333;
+      }
+    }
+    .project {
+      margin-top: 18px;
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 16px 12px 12px 12px;
+      .project-title {
+        padding-bottom: 7px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span {
+          color: #fa7d22;
+        }
+        .add-project {
+          width: 60px;
+          height: 28px;
+          background: #fa7d22;
+          border-radius: 8px;
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 28px;
+          text-align: center;
+        }
+      }
+      .project-list {
+        padding-top: 10px;
+        height: 130px;
+        overflow: scroll;
+        .project-info {
+          margin-bottom: 10px;
+          display: flex;
+          .project-image {
+            width: 60px;
+            height: 60px;
+            img {
+              width: 100%;
+              display: block;
+            }
+          }
+          .project-content {
+            flex: 1;
+            margin-left: 10px;
+            .title-price {
+              display: flex;
+              justify-content: space-between;
+              font-size: 14px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #292929;
+              line-height: 22px;
+            }
+            .project-tips {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 18px;
+            }
+            .project-zoom {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #fa7d22;
+              line-height: 18px;
+            }
+          }
+        }
+      }
+    }
+    .cost {
+      overflow: scroll;
+      background: #ffffff;
+      border-radius: 8px;
+      margin-top: 18px;
+      padding: 10px 19px 11px 12px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+      .cost-coupon-list {
+        border-bottom: 1px solid #f9f9f9;
+      }
+      .cost-title {
+        display: flex;
+        justify-content: space-between;
+      }
+      .coupon {
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        .coupon-tips {
+          display: flex;
+          align-items: center;
+          .coupon-icon {
+            width: 16px;
+            img {
+              width: 100%;
+              display: block;
+            }
+          }
+          .coupon-title {
+            margin-left: 3px;
+          }
+          .coupon-tip {
+            margin-left: 10px;
+            background: #ffefeb;
+            border-radius: 4px;
+            border: 1px solid #ff3007;
+            font-size: 10px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ff3007;
+            line-height: 14px;
+            padding: 2px 6px;
+            zoom: 0.83;
+          }
+        }
+      }
+      .coupon-ps {
+        margin-left: -6px;
+        margin-top: 11px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 17px;
+        .cou-price {
+          font-weight: 500;
+          color: #ff3007;
+        }
+      }
+      .over-price {
+        margin-top: 14px;
+        text-align: right;
+        .price-num {
+          font-size: 18px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ff3007;
+          line-height: 25px;
+        }
+      }
+    }
+    .payment {
+      position: relative;
+      margin-top: 18px;
+      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;
+    }
+  }
+  .coupon-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%;
+      }
+    }
+    .coupon-pupop-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .coupon-lists {
+      display: inline-block;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 20px;
+      height: 228px;
+      overflow: scroll;
+      .coupon-info {
+        width: 345px;
+        padding: 20px 14px 0 14px;
+        position: relative;
+        background: #fff4e6;
+        border-radius: 12px;
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: 10px;
+          border-bottom: 1px dashed #ffdfb6;
+          .all-free {
+            font-size: 22px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ff3007;
+            line-height: 30px;
+          }
+          .discount {
+            .price-num {
+              font-size: 28px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #ff3007;
+              line-height: 40px;
+              .size {
+                font-size: 14px;
+                line-height: 20px;
+              }
+            }
+            .price-tips {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #ff3007;
+              line-height: 17px;
+            }
+          }
+          .coupon-tip {
+            .tips-title {
+              font-size: 16px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #875617;
+              line-height: 22px;
+            }
+            .tips-ts {
+              margin-top: 4px;
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #875617;
+              line-height: 17px;
+            }
+          }
+          .choice-icon {
+            width: 20px;
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/confirmOrder/index.vue

@@ -1,13 +1,16 @@
 <template>
-  <div>
-    ConfirmOrder
+  <div class="mine">
+    <div class="qr-code">
+      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/orderQrCode.png"
+           alt="">
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  data() {
+  data () {
     return {};
   },
   computed: {},
@@ -15,11 +18,11 @@ export default {
 
   methods: {},
 
-  created() {
+  created () {
 
   },
 
-  mounted() {
+  mounted () {
 
   },
 }
@@ -27,5 +30,20 @@ export default {
 </script>
 
 <style lang='less' scoped>
-
+.mine {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+  border-radius: 8px;
+  .qr-code {
+    width: 200px;
+    img {
+      width: 100%;
+    }
+  }
+}
 </style>

src/pages/coupon/index.vue

@@ -1,25 +1,175 @@
 <template>
-  <div>
-    coupon
+  <div class="mine">
+    <div class="table">
+      <el-input class="search-input"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                size="mini"
+                v-model="searckItem">
+      </el-input>
+      <div class="search-button">搜索</div>
+      <div class="coupon">选择优惠券</div>
+      <el-select class="coupon-select"
+                 v-model="coupon"
+                 size="mini"
+                 placeholder="选择优惠券">
+        <el-option v-for="item in couponList"
+                   :key="item.value"
+                   :label="item.label"
+                   :value="item.value">
+        </el-option>
+      </el-select>
+      <div class="num-tips">数量</div>
+      <div class="coupon-num">
+        <div class="reduce"
+             @click="reduceNum">-</div>
+        <div class="num">{{couponNum}}</div>
+        <div class="add"
+             @click="couponNum++">+</div>
+      </div>
+      <div class="send-coupon"
+           style="margin-left: 39px;"
+           @click="sendCoupon">发送</div>
+    </div>
+    <div class="user-list">
+      <el-table ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                height="454"
+                style="width: 100%;border-radius: 8px;"
+                @selection-change="handleSelectionChange">
+        <el-table-column type="selection"
+                         width="55">
+        </el-table-column>
+        <el-table-column label="头像"
+                         width="120">
+          <template slot-scope="scope">
+            <div class="head-img"><img :src="scope.row.headImg"
+                   alt=""></div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name"
+                         label="姓名"
+                         width="120">
+        </el-table-column>
+        <el-table-column prop="phone"
+                         label="联系电话"
+                         show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="date"
+                         label="注册时间"
+                         show-overflow-tooltip>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  data() {
-    return {};
+  data () {
+    return {
+      searckItem: '',
+      couponList: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      tableData: [{
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      }, {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645'
+      },
+      ],
+      multipleSelection: [],//选中的列表
+      coupon: '',
+      couponNum: 1,//优惠券数量
+    };
   },
   computed: {},
   watch: {},
 
-  methods: {},
+  methods: {
+    reduceNum () {
+      this.couponNum > 1 ? this.couponNum-- : this.couponNum = 1
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val;
+    },
+    sendCoupon () { },
+  },
 
-  created() {
+  created () {
 
   },
 
-  mounted() {
+  mounted () {
 
   },
 }
@@ -27,5 +177,92 @@ export default {
 </script>
 
 <style lang='less' scoped>
+.mine {
+  .table {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 20px;
+    .search-input {
+      width: 152px;
+    }
+    .search-button,
+    .send-coupon {
+      margin-left: 16px;
+      width: 68px;
+      height: 28px;
+      line-height: 28px;
+      background: #fa7d22;
+      border-radius: 2px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      text-align: center;
+    }
+    .coupon {
+      margin-left: 40px;
+    }
+    .coupon-select {
+      margin-left: 12px;
+      width: 174px;
+    }
+    .num-tips {
+      margin-left: 40px;
+    }
+    .coupon-num {
+      margin-left: 12px;
+      background: #ffffff;
+      display: flex;
+      div {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+      }
+      .reduce,
+      .add {
+        border: 1px solid #d9d9d9;
+        line-height: 26px;
+        font-size: 18px;
+      }
+      .num {
+        border-top: 1px solid #d9d9d9;
+        border-bottom: 1px solid #d9d9d9;
+      }
+    }
+  }
+  .user-list {
+    margin-top: 18px;
+    padding: 0 12px;
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+    border-radius: 8px;
+    .head-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
 
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    /deep/ .el-table th > .cell {
+      font-size: 14px !important;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 20px;
+    }
+    /deep/ .el-table td,
+    .el-table th.is-leaf {
+      border-bottom: none;
+    }
+  }
+}
 </style>

src/pages/historicalOrder/details/index.vue

@@ -0,0 +1,637 @@
+<template>
+  <div class="mine">
+    <div class="left">
+      <div class="user-info">
+        <div class="user-img"><img :src="userInfo.image"
+               alt=""></div>
+        <div class="user-span">
+          <div class="name">昵称：<span>{{userInfo.name}}</span></div>
+          <div class="sex">性别：<span>{{userInfo.sex}}</span></div>
+          <div class="age">肤龄：<span>{{userInfo.age}}</span></div>
+          <div class="skin-type">肤质：<span>{{userInfo.skinType}}</span></div>
+        </div>
+      </div>
+      <div class="user-record">
+        <div class="fraction">
+          <div class="title">肌肤得分</div>
+          <div class="num">37分</div>
+        </div>
+        <div class="status">
+          <div class="title">皮肤状态</div>
+          <div class="tips">肤质一般</div>
+        </div>
+        <div class="times">
+          <div class="title">上传检测时间</div>
+          <div class="ts">2022.04.18 16:04</div>
+        </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>
+      </div>
+      <div class="ps">
+        <div class="ps-title">
+          备注
+        </div>
+        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
+      </div>
+      <div class="programme">
+        <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>
+            <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>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="shop-info">
+        <div class="shpo-name">预约店铺：<span>JOLIJOLI（西安店）</span></div>
+        <div class="shpo-address">门店地址：<span>JOLIJOLI（西安店）</span></div>
+        <div class="shpo-ts">美容时间：<span>JOLIJOLI（西安店）</span></div>
+      </div>
+      <div class="project">
+        <div class="project-title">
+          共<span>3个</span>项目
+        </div>
+        <div class="project-list">
+          <div class="project-info"
+               v-for="(item,index) in programmeList"
+               :key="index">
+            <div class="project-image"><img :src="item.image"></div>
+            <div class="project-content">
+              <div class="title-price">
+                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
+                <div class="project-price"><span class="min-size">￥</span>{{item.price}}</div>
+              </div>
+              <div class="project-tips">{{item.tips}}</div>
+              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cost">
+        <div class="cost-title">
+          <div>预约费用</div>
+          <div>¥399</div>
+        </div>
+        <div class="cost-coupon-list">
+          <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=""></div>
+              <div class="coupon-title">优惠卷</div>
+              <div class="coupon-tip">已选推荐优惠</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <div class="coupon-ps">
+            <div>【敏感维稳】多元修护加乘维稳</div>
+            <div class="cou-price">-¥100</div>
+          </div>
+        </div>
+        <div class="over-price">
+          合计： <span><span class="min-size">￥</span>399<span class="min-size">.00</span></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      userInfo: {
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+        name: '张三',
+        sex: '女',
+        age: '23',
+        skinType: '中性皮肤'
+      },
+      //面部标签
+      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: '北京烤鸭'
+      }],
+      timesInfo: '',
+      projectInfo: '',
+      weekInfo: '',
+      programmeIndex: '',
+      remarks: '',
+      isPupop: false
+    };
+  },
+  computed: {
+
+  },
+  watch: {},
+
+  methods: {
+    onOperation (index) {
+      if (this.programmeList[index].onSelect) {
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
+      } else {
+        this.$set(this.programmeList[index], 'onSelect', true)
+      }
+    },
+    onSubmit () {
+
+    },
+    submitFrequency () { },
+  },
+
+  created () {
+
+  },
+
+  mounted () {
+
+  },
+}
+
+</script>
+
+<style lang='less' scoped>
+.mine {
+  height: 100%;
+  display: flex;
+  .left {
+    width: 318px;
+    padding: 12px 12px 0 12px;
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+    border-radius: 8px;
+    font-size: 13px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 18px;
+    overflow: scroll;
+    height: 100%;
+    .user-info {
+      display: flex;
+      align-items: center;
+      .user-img {
+        width: 96px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+      .user-span {
+        margin-left: 12px;
+
+        span {
+          color: #333333;
+        }
+      }
+    }
+    .user-record {
+      margin-top: 16px;
+      display: flex;
+      justify-content: space-between;
+      .num {
+        font-size: 18px;
+        font-family: OPPOSans-B, OPPOSans;
+        font-weight: normal;
+        color: #fa7d22;
+        line-height: 29px;
+      }
+      .tips {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 30px;
+      }
+      .ts {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 30px;
+      }
+    }
+    .lable {
+      margin-top: 23px;
+      width: 100%;
+      overflow: scroll;
+      background: #ffffff;
+      .lable-title {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+        margin-bottom: 14px;
+      }
+      .lable-list {
+        width: 100%;
+        min-height: 105rpx;
+        .lable-info {
+          display: inline-block;
+          padding: 0 12px;
+          margin-left: 10px;
+          height: 24px;
+          line-height: 24px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+          margin-bottom: 10px;
+        }
+        .add-lable {
+          display: inline-block;
+          width: 27px;
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+          font-family: PingFang-SC-Regular, PingFang-SC;
+          font-weight: 400;
+          color: #333333;
+          text-align: center;
+          margin-left: 10px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+        }
+      }
+      .remarks {
+        /deep/ .el-textarea__inner:focus {
+          border-color: #fa852f;
+        }
+      }
+    }
+    .ps {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      .ps-text {
+        margin-top: 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 17px;
+      }
+    }
+    .programme {
+      margin-top: 20px;
+      width: 100%;
+      background: #ffffff;
+      border-radius: 8px;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .tab-title {
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333333;
+          line-height: 20px;
+        }
+      }
+      .programme-list {
+        margin-top: 10px;
+        position: relative;
+        z-index: 1;
+        .programme-info {
+          position: relative;
+          margin-bottom: 10px;
+          border-radius: 4px;
+          border: 1px solid #f5f5f5;
+          display: flex;
+          justify-content: space-between;
+          padding: 8px 8px 8px 10px;
+          align-items: center;
+          .programme-left {
+            display: flex;
+            align-items: center;
+            .programme-img {
+              width: 48px;
+              display: inline-block;
+              img {
+                width: 100%;
+                display: block;
+              }
+            }
+            .programme-tips {
+              display: inline-block;
+              margin-left: 10px;
+              font-size: 10px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 14px;
+              zoom: 0.83;
+            }
+          }
+          .programme-right {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            .duration {
+              margin-top: 14px;
+            }
+          }
+          .operation {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 10px;
+            z-index: 10;
+            width: 44px;
+            background: #ffffff;
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+            border-radius: 2px;
+            padding: 10px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            .delete {
+              margin-top: 20px;
+            }
+          }
+        }
+        .programme-active {
+          border: 1px solid #fa852f;
+        }
+      }
+    }
+  }
+  .right {
+    margin-left: 18px;
+    position: relative;
+    flex: 1;
+    .shop-info {
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 12px;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 28px;
+      span {
+        font-weight: 500;
+        color: #333333;
+      }
+    }
+    .project {
+      margin-top: 18px;
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 16px 12px 12px 12px;
+      .project-title {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+        span {
+          color: #fa7d22;
+        }
+      }
+      .project-list {
+        padding-top: 10px;
+        height: 130px;
+        overflow: scroll;
+        .project-info {
+          margin-bottom: 10px;
+          display: flex;
+          .project-image {
+            width: 60px;
+            height: 60px;
+            img {
+              width: 100%;
+              display: block;
+            }
+          }
+          .project-content {
+            flex: 1;
+            margin-left: 10px;
+            .title-price {
+              display: flex;
+              justify-content: space-between;
+              font-size: 14px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #292929;
+              line-height: 22px;
+            }
+            .project-tips {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 18px;
+            }
+            .project-zoom {
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #fa7d22;
+              line-height: 18px;
+            }
+          }
+        }
+      }
+    }
+    .cost {
+      height: 186px;
+      overflow: scroll;
+      background: #ffffff;
+      border-radius: 8px;
+      margin-top: 18px;
+      padding: 10px 19px 11px 12px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+      .cost-coupon-list {
+        height: 110px;
+        overflow: scroll;
+        border-bottom: 1px solid #f9f9f9;
+      }
+      .cost-title {
+        display: flex;
+        justify-content: space-between;
+      }
+      .coupon {
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        .coupon-tips {
+          display: flex;
+          align-items: center;
+          .coupon-icon {
+            width: 16px;
+            img {
+              width: 100%;
+              display: block;
+            }
+          }
+          .coupon-title {
+            margin-left: 3px;
+          }
+          .coupon-tip {
+            margin-left: 10px;
+            background: #ffefeb;
+            border-radius: 4px;
+            border: 1px solid #ff3007;
+            font-size: 10px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ff3007;
+            line-height: 14px;
+            padding: 2px 6px;
+            zoom: 0.83;
+          }
+        }
+      }
+      .coupon-ps {
+        margin-left: -6px;
+        margin-top: 11px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 17px;
+        .cou-price {
+          font-weight: 500;
+          color: #ff3007;
+        }
+      }
+      .over-price {
+        margin-top: 14px;
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

src/pages/historicalOrder/index.vue

@@ -1,25 +1,151 @@
 <template>
-  <div>
-    historicalOrder
+  <div class="mine">
+    <div class="condition">
+      <el-date-picker v-model="dates"
+                      type="daterange"
+                      range-separator="->"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期">
+      </el-date-picker>
+      <el-select class="coupon-select"
+                 v-model="coupon"
+                 placeholder="项目名称">
+        <el-option v-for="item in couponList"
+                   :key="item.value"
+                   :label="item.label"
+                   :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select class="coupon-select"
+                 v-model="coupon"
+                 placeholder="卡券名称">
+        <el-option v-for="item in couponList"
+                   :key="item.value"
+                   :label="item.label"
+                   :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-input placeholder="请输入内容"
+                class="search"
+                v-model="searchText">
+        <i slot="prefix"
+           class="el-input__icon el-icon-search"></i>
+      </el-input>
+      <el-button type="primary"
+                 class="searchButton"
+                 @click="search">搜索</el-button>
+    </div>
+
+    <div class="user-list">
+      <el-table ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                height="354"
+                style="width: 100%;border-radius: 8px;"
+                @row-click="handleSelectionChange">
+        <el-table-column label="头像"
+                         width="120">
+          <template slot-scope="scope">
+            <div class="head-img"><img :src="scope.row.headImg"
+                   alt=""></div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name"
+                         label="昵称"
+                         width="120">
+        </el-table-column>
+        <el-table-column prop="phone"
+                         label="联系电话"
+                         show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="date"
+                         label="预约时间"
+                         show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="date"
+                         label="状态"
+                         show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div>{{scope.row.status}}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagin">
+        <el-pagination background
+                       layout="prev, pager, next"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="currentPage1"
+                       :total="1000">
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  data() {
-    return {};
+  data () {
+    return {
+      searchText: '',
+      dates: '',
+      coupon: '',
+      couponList: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      tableData: [{
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645',
+        status: '已完成'
+      },
+      {
+        date: '2022.04.25  14:30',
+        name: '滴滴滴',
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
+        phone: '13346783645',
+        status: '已完成'
+      },
+
+      ],
+      currentPage1: 1,
+      multipleSelection: ''
+
+    };
   },
   computed: {},
   watch: {},
 
-  methods: {},
+  methods: {
+    search () { },
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleSelectionChange (row, column, event) {
+      this.$router.push({
+        path: '/historicalOrder/details'
+      })
+    },
+  },
 
-  created() {
+  created () {
 
   },
 
-  mounted() {
+  mounted () {
 
   },
 }
@@ -27,5 +153,60 @@ export default {
 </script>
 
 <style lang='less' scoped>
+.mine {
+  .condition {
+    display: flex;
+    .coupon-select {
+      width: 174px;
+      margin-left: 18px;
+    }
+    .search {
+      width: 152px;
+      margin-left: 18px;
+    }
 
+    .searchButton {
+      margin-left: 18px;
+      width: 68px;
+      background: #fa7d22;
+      border-radius: 2px;
+      border-color: #fa7d22;
+    }
+  }
+  .user-list {
+    margin-top: 18px;
+    padding: 0 12px;
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+    border-radius: 8px;
+    .head-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .pagin {
+      padding: 20px 0;
+      .el-pagination {
+        text-align: center;
+      }
+    }
+    /deep/ .el-table th > .cell {
+      font-size: 14px !important;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 20px;
+    }
+    /deep/ .el-table td,
+    .el-table th.is-leaf {
+      border-bottom: none;
+    }
+  }
+}
 </style>

src/pages/testSkin/details/index.vue

@@ -77,7 +77,8 @@
       <div class="programme">
         <div class="tab">
           <div class="tab-title">执行方案</div>
-          <div class="add">新增</div>
+          <div class="add"
+               @click="isPupop=true">新增</div>
         </div>
         <div class="programme-list">
           <div :class="['programme-info',item.onSelect?'programme-active':'']"
@@ -109,7 +110,49 @@
            @click="onSubmit">保存</div>
     </div>
     <mine-pupop :show="isPupop">
-      <div class=""></div>
+      <div class="block">
+        <div class="delete-pupop"
+             @click="isPupop=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="pupop-title">
+          选择执行方案
+        </div>
+        <el-select v-model="projectInfo"
+                   placeholder="请选择项目"
+                   class="project-select"
+                   size="mini">
+          <el-option v-for="item in projectList"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="frequency">
+          <div>执行频率：</div>
+          <el-select v-model="weekInfo"
+                     class="week-select"
+                     size="mini">
+            <el-option v-for="item in weekList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+          <div>周</div>
+          <el-select v-model="timesInfo"
+                     class="times-select"
+                     size="mini">
+            <el-option v-for="item in timesList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+          <div>次</div>
+        </div>
+        <div class="submit-frequency"
+             @click="submitFrequency">确定</div>
+      </div>
     </mine-pupop>
   </div>
 </template>
@@ -185,9 +228,51 @@ export default {
           duration: '28天'
         },
       ],
+      //项目列表
+      projectList: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      //周期
+      weekList: [
+        {
+          value: '选项1',
+          label: '1'
+        },
+        {
+          value: '选项2',
+          label: '2'
+        },
+      ],
+      //次数
+      timesList: [
+        {
+          value: '选项1',
+          label: '1'
+        },
+        {
+          value: '选项2',
+          label: '2'
+        },
+      ],
+      timesInfo: '',
+      projectInfo: '',
+      weekInfo: '',
       programmeIndex: '',
       remarks: '',
-      isPupop: true
+      isPupop: false
     };
   },
   computed: {
@@ -205,7 +290,8 @@ export default {
     },
     onSubmit () {
 
-    }
+    },
+    submitFrequency () { },
   },
 
   created () {
@@ -526,5 +612,74 @@ export default {
       color: #ffffff;
     }
   }
+  .block {
+    width: 540px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px;
+    .delete-pupop {
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      top: 5px;
+      right: 5px;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+    .pupop-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .project-select {
+      margin-top: 26px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 300px;
+    }
+    .frequency {
+      margin-top: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+      .week-select {
+        width: 77px;
+        margin-right: 8px;
+      }
+      .times-select {
+        width: 77px;
+        margin: 0 8px 0 20px;
+      }
+    }
+    .submit-frequency {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 158px;
+      width: 176px;
+      height: 28px;
+      text-align: center;
+      background: #fa7d22;
+      border-radius: 14px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 28px;
+    }
+  }
 }
 </style>

src/router/map/home.js

@@ -7,7 +7,9 @@ import TestSkin from '@/pages/testSkin/index'
 import TestSkinDetails from '@/pages/testSkin/details'
 import CustomerMan from '@/pages/customerMan/index'
 import HistoricalOrder from '@/pages/historicalOrder/index'
+import HistoricalOrderDetails from '@/pages/historicalOrder/details'
 import ConfirmOrder from '@/pages/confirmOrder/index'
+import ConfirmOrderDetails from '@/pages/confirmOrder/details'
 import StoreDetection from '@/pages/storeDetection/index'
 import Coupon from '@/pages/coupon/index'
 export default {
@@ -20,7 +22,9 @@ export default {
     { path: '/testSkin/details', component: TestSkinDetails },
     { path: '/customerMan', component: CustomerMan },
     { path: '/historicalOrder', component: HistoricalOrder },
+    { path: '/historicalOrder/details', component: HistoricalOrderDetails },
     { path: '/confirmOrder', component: ConfirmOrder },
+    { path: '/confirmOrder/details', component: ConfirmOrderDetails },
     { path: '/storeDetection', component: StoreDetection },
     { path: '/coupon', component: Coupon },
 

src/style/index.less

@@ -1,32 +1,69 @@
-
 //elementUI 组件样式覆盖
 
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
   background-color: #FFF0E6;
 }
-.el-date-table td.end-date span, .el-date-table td.start-date span {
-  background-color:  #FA7D22 !important;
+
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+  background-color: #FA7D22 !important;
   border-radius: 2px;
 }
-.el-date-table td.today span{
+
+.el-date-table td.today span {
   border-radius: 2px;
   border: 1px solid #FA7D22;
   color: #FA7D22;
 }
- .el-date-table td.start-date div{
+
+.el-date-editor .el-range-separator {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.el-date-table td.start-date div {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
-.el-date-table td.end-date div{
+
+.el-date-table td.end-date div {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
   width: 280px;
 }
-.el-date-editor .el-range-separator{
+
+.el-date-editor .el-range-separator {
   width: 20px;
 }
-.el-pagination.is-background .el-pager li:not(.disabled).active{
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #FA7D22;
+}
+
+.el-select .el-input.is-focus .el-input__inner {
+  border: 1px solid #FA7D22;
+}
+
+.el-select .el-input__inner:focus {
+  border: 1px solid #FA7D22;
+}
+
+.el-select-dropdown__item.selected {
+  color: #FA7D22;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #FFF0E6;
+}
+
+.min-size {
+  font-size: 12px;
+  zoom: 0.83;
 }