备注

src/components/common/layout/leftMenu.vue

@@ -78,9 +78,17 @@ export default {
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/uncoupon.png",
           icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/coupon.png",
         },
+        // {
+        //   name: "历史订单",
+        //   path: "/historicalOrder",
+        //   unicon:
+        //     "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unhistory.png",
+        //   icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/history.png",
+        // },
         {
-          name: "历史订单",
-          path: "/historicalOrder",
+          name: "订单中心",
+          path: "/orderCenter",
+          // /orderCenter
           unicon:
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unhistory.png",
           icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/history.png",
@@ -112,6 +120,13 @@ export default {
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png",
           icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png",
         },
+        {
+          name: "店铺排班",
+          path: "/scheduling/details",
+          unicon:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png",
+          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png",
+        },
       ],
       nowIndex: 0,
     };

src/pages/cardOrder/details/index.vue

@@ -0,0 +1,727 @@
+<template>
+  <div class="mine">
+    <div class="left">
+      <div class="user-info">
+        <div class="user-img"><img :src="userInfo.avatar_url"
+               alt=""></div>
+        <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="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="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="problem-lable">
+          <div class="lable-text problem-text">{{problem}}</div>
+        </div>
+      </div>
+      <div class="lable">
+        <div class="lable-title">
+          面部标签
+        </div>
+        <div class="lable-list">
+          <div v-for="(item,index) in lableList"
+               :key="index"
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
+               class='lable-info'>
+            {{item.text}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="shop-info">
+        <div class="shpo-name">
+          预约店铺：
+          <span>{{order_data.store_name}}</span>
+        </div>
+        <div class="shpo-address">
+          门店地址：
+          <span>{{order_data.address}}</span>
+        </div>
+        <div class="shpo-ts">
+          美容时间：
+          <span>{{order_data.order_time}}</span>
+        </div>
+      </div>
+      <div class="project">
+        <div class="project-title">
+          共
+          <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-image">
+              <img :src="item.cover_url" />
+            </div>
+            <div class="project-content">
+              <div class="title-price">
+                <div class="project-tit">{{item.name}}</div>
+                <div class="project-price">
+                  <span class="min-size">￥</span>
+                  {{item.price}}
+                </div>
+              </div>
+              <div class="project-tips">{{item.product_names}}</div>
+              <div class="project-zoom">
+                <el-select v-model="item.tot_name"
+                           v-if="order_data.status<3"
+                           @visible-change="openList($event,item,index)"
+                           @change="changeRoom($event,item,index)"
+                           size="mini"
+                           style="min-width: 150px;"
+                           :placeholder="item.tot_name">
+                  <el-option v-for="i in roomList"
+                             :key="i.id"
+                             :label="i.tot_name"
+                             :value="i.tot_name">
+                  </el-option>
+                </el-select>
+                <div v-else>{{item.tot_name}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cost">
+        <div class="cost-title">
+          <div>预约费用</div>
+          <div>¥{{order_data.original_price}}</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"
+                   v-if="coupon_list.length>0">已选择次卡</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <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>
+          <!-- 优惠券 -->
+          <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"
+                   v-if="coupon_list.length>0">已选推荐优惠</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <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>
+        </div>
+        <div class="over-price">
+          合计：
+          <span>
+            <span class="min-size">￥</span>{{order_data.price}}
+            <!-- <span class="min-size">.00</span> -->
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import api from "../../../server/home";
+export default {
+  data () {
+    return {
+      userInfo: {
+      },
+      lableList: [],
+      programmeList: {},
+      scheme_list: {},
+      timesInfo: "",
+      projectInfo: "",
+      weekInfo: "",
+      programmeIndex: "",
+      remarks: "",
+      coupon_list: "",
+      order_data: "",
+      isPupop: false,
+      id: "",
+      problem: '',
+      roomList: [],//设备房间列表
+    };
+  },
+  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 () {
+      api.getOrderInfo({ id: this.id }).then(res => {
+        this.userInfo = res.data.user;
+        res.data.order_data.project_list.forEach(e => {
+          e["tot_name"] = `${e.device_name}（${e.room}）`
+        })
+        this.order_data = res.data.order_data;
+        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;
+      });
+    },
+
+    openList (e, item, index) {
+      console.log(e, item, index, 'e,item,index');
+      if (e) {
+        this.value = ''
+        this.roomList = []
+        let params = {
+          id: this.id,
+          project_id: item.id
+        }
+        api.getDevice_list(params).then(res => {
+          if (res.code == 200) {
+            res.data.list.forEach(item => {
+              item['tot_name'] = `${item.name}（${item.room}）`
+            })
+            this.roomList = res.data.list
+          }
+        })
+      }
+    },
+    changeRoom (e, item, index) {
+      let _id = 0
+      this.roomList.forEach(res => {
+        if (res.tot_name == e) {
+          _id = res.id
+        }
+      })
+      console.log(e, item, index, 'e,item,index');
+      let params = {
+        id: this.id,
+        project_id: item.id,
+        device_id: _id
+      }
+      api.device_change(params).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            message: `${res.msg}`,
+            type: "success"
+          });
+          this.getOrderInfo()
+        }
+      })
+    },
+    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);
+      }
+    },
+    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 () {
+    let id = this.$route.query.id;
+    this.id = id;
+    this.getOrderInfo();
+  },
+
+  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;
+          border-radius: 6px;
+        }
+      }
+      .user-span {
+        margin-left: 12px;
+
+        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 {
+      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;
+      }
+      .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;
+          line-height: 17px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+          margin-top: 10px;
+          margin-right: 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;
+      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;
+      }
+    }
+    .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: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #fa7d22;
+              line-height: 18px;
+              /deep/ .el-input__inner {
+                color: #fa7d22;
+              }
+            }
+          }
+        }
+      }
+    }
+    .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/cardOrder/index.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="mine">
+    <div class="condition">
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <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="getOrderList()"
+        >搜索</el-button
+      >
+    </div>
+
+    <div class="user-list">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        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.avatar_url" alt />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="real_name"
+          label="真实姓名"
+          width="80"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="联系电话"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="card_name"
+          label="次卡名称"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="下单时间"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="date"
+          label="订单状态"
+          show-overflow-tooltip
+          width="100"
+        >
+          <template slot-scope="scope">
+            <div
+              :style="
+                scope.row.status == 0
+                  ? 'color: #FC3019'
+                  : scope.row.status == 5
+                  ? 'color: #A999EA'
+                  : 'color: #61D09D;'
+              "
+            >
+              {{
+                scope.row.status == -1
+                  ? "已取消"
+                  : scope.row.status == 0
+                  ? "待支付"
+                  : scope.row.status == 1
+                  ? "已支付"
+                  : ""
+              }}
+              <!-- -1已取消，0待支付，1已支付 -->
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="80"
+          prop="realname"
+          label="美容师"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          class="amendTop"
+          width="140"
+          prop=""
+          label="分配"
+          show-overflow-tooltip
+          v-if="level == 10"
+        >
+          <template slot-scope="scope">
+            <el-dropdown
+              @command="(command) => selectType(command, scope.$index)"
+              trigger="click"
+            >
+              <el-button @click.stop type="primary" class="amend" size="mini">
+                分配
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="(item, index) in nameList"
+                  :key="index"
+                  :command="item.realname"
+                  >{{ item.realname }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </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="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../server/home";
+
+export default {
+  components: {},
+  data() {
+    return {
+      searchText: "",
+      dates: "",
+      coupon: "",
+      limit: 10,
+      total: 0,
+      product: "",
+      coupon: "",
+      level: "", //等级权限
+      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: "",
+      nameList: "", //员工列表
+    };
+  },
+  computed: {},
+  watch: {},
+
+  methods: {
+    // 分配美容师
+    selectType(type, index) {
+      // 给表单添加美容师
+      this.$set(this.tableData[index], ["realname"], type);
+      let user_id = "";
+      this.nameList.map((item) => {
+        if (item.realname == type) {
+          user_id = item.id;
+        }
+      });
+      let order_id = this.tableData[index].id;
+      let params = {
+        user_id,
+        type: 2, //1项目 2次卡 3美妆产品 4充值
+        order_id,
+      };
+      // 店长分配
+      api.orderAllocation(params).then((res) => {
+        if (res.code == 200) {
+        }
+      });
+    },
+    // 获取订单列表
+    getOrderList() {
+      let start_date = "",
+        end_date = "";
+      if (this.dates && this.dates.length > 0) {
+        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
+        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
+      }
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText,
+        start_time: start_date,
+        end_time: end_date,
+      };
+      api.getCardOrderList(params).then((res) => {
+        if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
+    },
+
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getOrderList();
+    },
+
+    handleSizeChange(val) {},
+    handleSelectionChange(row, column, event) {
+      // this.$router.push({
+      //   path: "/cardOrder/details",
+      //   query: {
+      //     id: row.id,
+      //   },
+      // });
+    },
+    // 获取美容师列表
+    getStaffList() {
+      api.getStaffList().then((res) => {
+        if (res.code == 200) {
+          this.nameList = res.data;
+          console.log(res);
+        }
+      });
+    },
+  },
+
+  created() {
+    this.level = localStorage.getItem("level");
+    this.getOrderList();
+    // 获取员工列表
+    this.getStaffList();
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.mine {
+  .condition {
+    display: flex;
+    .coupon-select {
+      width: 174px;
+      margin-left: 18px;
+    }
+    .search {
+      width: 535px;
+      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;
+    }
+    .amend {
+      background-color: #fa7d22;
+      color: white;
+      font-size: 14px;
+      border: #fa7d22;
+    }
+    /deep/ th.el-table_1_column_7.is-leaf.el-table__cell {
+      text-align: center;
+    }
+    /deep/ td.el-table_1_column_7.el-table__cell {
+      text-align: center;
+    }
+  }
+  .color0 {
+    color: #fc3019;
+  }
+  .color1 {
+    color: #3ef3ed;
+  }
+  .color2 {
+    color: #00eeee;
+  }
+  .color3 {
+    color: #61d09d;
+  }
+  .color4 {
+    color: #3115cc;
+  }
+  .color5 {
+    color: #fc3019;
+  }
+  .color6 {
+    color: #a999ea;
+  }
+}
+</style>

src/pages/historicalOrder/index.vue

@@ -41,7 +41,11 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="user_id" label="用户ID" width="120"></el-table-column>
+        <el-table-column
+          prop="user_id"
+          label="用户ID"
+          width="120"
+        ></el-table-column>
         <el-table-column
           prop="nickname"
           label="昵称"
@@ -84,6 +88,39 @@
             </div>
           </template>
         </el-table-column>
+        <el-table-column
+          width="80"
+          prop="realname"
+          label="美容师"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          class="amendTop"
+          width="140"
+          prop=""
+          label="分配"
+          show-overflow-tooltip
+          v-if="level == 10"
+        >
+          <template slot-scope="scope">
+            <el-dropdown
+              @command="(command) => selectType(command, scope.$index)"
+              trigger="click"
+            >
+              <el-button @click.stop type="primary" class="amend" size="mini">
+                分配
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="(item, index) in nameList"
+                  :key="index"
+                  :command="item.realname"
+                  >{{ item.realname }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
       </el-table>
 
       <div class="pagin">
@@ -144,12 +181,36 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
+      nameList: "", //员工列表
+      level: "",
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 分配美容师
+    selectType(type, index) {
+      // 给表单添加美容师
+      this.$set(this.tableData[index], ["realname"], type);
+      let user_id = "";
+      this.nameList.map((item) => {
+        if (item.realname == type) {
+          user_id = item.id;
+        }
+      });
+      let order_id = this.tableData[index].id;
+      let params = {
+        user_id,
+        type: 1, //1项目 2次卡 3美妆产品 4充值
+        order_id,
+      };
+      // 店长分配
+      api.orderAllocation(params).then((res) => {
+        if (res.code == 200) {
+        }
+      });
+    },
     // 获取订单列表
     getOrderList() {
       let start_date = "",
@@ -194,10 +255,21 @@ export default {
         },
       });
     },
+    // 获取美容师列表
+    getStaffList() {
+      api.getStaffList().then((res) => {
+        if (res.code == 200) {
+          this.nameList = res.data;
+        }
+      });
+    },
   },
 
   created() {
+    this.level = localStorage.getItem("level");
     this.getOrderList();
+    // 获取员工列表
+    this.getStaffList();
   },
 
   mounted() {},
@@ -259,6 +331,18 @@ export default {
     .el-table th.is-leaf {
       border-bottom: none;
     }
+    .amend {
+      background-color: #fa7d22;
+      color: white;
+      font-size: 14px;
+      border: #fa7d22;
+    }
+    /deep/ th.el-table_1_column_7.is-leaf.el-table__cell {
+      text-align: center;
+    }
+    /deep/ td.el-table_1_column_7.el-table__cell {
+      text-align: center;
+    }
   }
   .color0 {
     color: #fc3019;

src/pages/login/login.vue

@@ -2,92 +2,93 @@
   <div class="mine">
     <div class="login-info">
       <div class="logo">
-        <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/logo%402x.png"
-             alt="">
+        <img
+          src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/logo%402x.png"
+          alt=""
+        />
       </div>
       <div class="login-title">JOLIJOLI店员端</div>
       <div class="content">
         <div class="value-inp">
-          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/num_icon.png"
-               alt="">
-          <el-input placeholder="请输入账号名"
-                    v-model="account"></el-input>
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/num_icon.png"
+            alt=""
+          />
+          <el-input placeholder="请输入账号名" v-model="account"></el-input>
         </div>
         <div class="value-inp">
-          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/password_icon.png"
-               alt="">
-          <el-input placeholder="请输入密码"
-                    v-model="password"
-                    show-password></el-input>
-        </div>
-        <div class="onLogin"
-             @click="onLogin">
-          登录
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/password_icon.png"
+            alt=""
+          />
+          <el-input
+            placeholder="请输入密码"
+            v-model="password"
+            show-password
+          ></el-input>
         </div>
+        <div class="onLogin" @click="onLogin">登录</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
-import api from '../../server/home'
-import axios from 'axios';
+import { mapMutations } from "vuex";
+import api from "../../server/home";
+import axios from "axios";
 // import Cookies from "js-cookie"
 export default {
   components: {},
-  data () {
+  data() {
     return {
       account: "",
-      password: ""
-
+      password: "",
     };
   },
   computed: {},
   watch: {},
 
   methods: {
-    ...mapMutations(['SAVE_COMMON_VALUE']),
-    onLogin () {
+    ...mapMutations(["SAVE_COMMON_VALUE"]),
+    onLogin() {
       let params = {
         username: this.account,
-        password: this.password
-      }
-      api.getToken(params).then(res => {
+        password: this.password,
+      };
+      api.getToken(params).then((res) => {
         if (res.code == 200) {
-          localStorage.setItem("token", res.data.token)
+          localStorage.setItem("token", res.data.token);
+          localStorage.setItem("level", res.data.level);
           this.SAVE_COMMON_VALUE({
-            'key': 'token',
-            'value': res.data.token
-          })
+            key: "token",
+            value: res.data.token,
+          });
           this.SAVE_COMMON_VALUE({
-            'key': 'isLogin',
-            'value': true
-          })
-          axios.defaults.headers.token = res.data.token
+            key: "isLogin",
+            value: true,
+          });
+          axios.defaults.headers.token = res.data.token;
           this.$router.push({
-            path: '/home'
-          })
+            path: "/home",
+          });
         } else {
-          this.$message.error('账号或密码错误，请核对后输入');
+          this.$message.error("账号或密码错误，请核对后输入");
         }
-      })
-    }
+      });
+    },
   },
 
-  created () {
+  created() {
     if (localStorage.getItem("token")) {
       this.$router.push({
-        path: '/home'
-      })
+        path: "/home",
+      });
     }
   },
 
-  mounted () {
-
-  },
-}
-
+  mounted() {},
+};
 </script>
 
 <style lang='less' scoped>

src/pages/orderCenter/orderCenter.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="box">
+    <div class="orderForm" @click="$router.push('/historicalOrder')">
+      <img
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E7%BE%8E%E5%A6%86%E4%BA%A7%E5%93%81%402x%281%29.png"
+        alt=""
+      />
+      <div class="title">订单项目</div>
+    </div>
+        <div class="orderForm" @click="$router.push('/cardOrder')">
+      <img
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E5%8D%A1%402x.png"
+        alt=""
+      />
+      <div class="title">次卡订单</div>
+    </div>
+        <div class="orderForm" @click="$router.push('/productOrder')">
+      <img
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E7%BE%8E%E5%A6%86%E4%BA%A7%E5%93%81%402x.png"
+        alt=""
+      />
+      <div class="title">美妆产品订单</div>
+    </div>
+        <div class="orderForm" @click="$router.push('/rechargeOrder')">
+      <img
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E5%85%85%E5%80%BC%20%281%29%402x.png"
+        alt=""
+      />
+      <div class="title">充值订单</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-around;
+}
+.orderForm {
+  width: 371.5px;
+  height: 195px;
+  background-color: #ffffff;
+  margin-left: 50px;
+  margin-top: 30px;
+    display: flex;
+    align-items: center;
+  img {
+    height: 80px;
+    width: 80px;
+    margin-left: 40px;
+  }
+  .title {
+    font-size: 28px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333333;
+    margin-left: 40px;
+  }
+}
+</style>

src/pages/productOrder/details/index.vue

@@ -0,0 +1,727 @@
+<template>
+  <div class="mine">
+    <div class="left">
+      <div class="user-info">
+        <div class="user-img"><img :src="userInfo.avatar_url"
+               alt=""></div>
+        <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="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="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="problem-lable">
+          <div class="lable-text problem-text">{{problem}}</div>
+        </div>
+      </div>
+      <div class="lable">
+        <div class="lable-title">
+          面部标签
+        </div>
+        <div class="lable-list">
+          <div v-for="(item,index) in lableList"
+               :key="index"
+               :style='{background:item.bgcolor,borderColor:item.bdcolor}'
+               class='lable-info'>
+            {{item.text}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="shop-info">
+        <div class="shpo-name">
+          预约店铺：
+          <span>{{order_data.store_name}}</span>
+        </div>
+        <div class="shpo-address">
+          门店地址：
+          <span>{{order_data.address}}</span>
+        </div>
+        <div class="shpo-ts">
+          美容时间：
+          <span>{{order_data.order_time}}</span>
+        </div>
+      </div>
+      <div class="project">
+        <div class="project-title">
+          共
+          <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-image">
+              <img :src="item.cover_url" />
+            </div>
+            <div class="project-content">
+              <div class="title-price">
+                <div class="project-tit">{{item.name}}</div>
+                <div class="project-price">
+                  <span class="min-size">￥</span>
+                  {{item.price}}
+                </div>
+              </div>
+              <div class="project-tips">{{item.product_names}}</div>
+              <div class="project-zoom">
+                <el-select v-model="item.tot_name"
+                           v-if="order_data.status<3"
+                           @visible-change="openList($event,item,index)"
+                           @change="changeRoom($event,item,index)"
+                           size="mini"
+                           style="min-width: 150px;"
+                           :placeholder="item.tot_name">
+                  <el-option v-for="i in roomList"
+                             :key="i.id"
+                             :label="i.tot_name"
+                             :value="i.tot_name">
+                  </el-option>
+                </el-select>
+                <div v-else>{{item.tot_name}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cost">
+        <div class="cost-title">
+          <div>预约费用</div>
+          <div>¥{{order_data.original_price}}</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"
+                   v-if="coupon_list.length>0">已选择次卡</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <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>
+          <!-- 优惠券 -->
+          <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"
+                   v-if="coupon_list.length>0">已选推荐优惠</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <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>
+        </div>
+        <div class="over-price">
+          合计：
+          <span>
+            <span class="min-size">￥</span>{{order_data.price}}
+            <!-- <span class="min-size">.00</span> -->
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import api from "../../../server/home";
+export default {
+  data () {
+    return {
+      userInfo: {
+      },
+      lableList: [],
+      programmeList: {},
+      scheme_list: {},
+      timesInfo: "",
+      projectInfo: "",
+      weekInfo: "",
+      programmeIndex: "",
+      remarks: "",
+      coupon_list: "",
+      order_data: "",
+      isPupop: false,
+      id: "",
+      problem: '',
+      roomList: [],//设备房间列表
+    };
+  },
+  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 () {
+      api.getOrderInfo({ id: this.id }).then(res => {
+        this.userInfo = res.data.user;
+        res.data.order_data.project_list.forEach(e => {
+          e["tot_name"] = `${e.device_name}（${e.room}）`
+        })
+        this.order_data = res.data.order_data;
+        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;
+      });
+    },
+
+    openList (e, item, index) {
+      console.log(e, item, index, 'e,item,index');
+      if (e) {
+        this.value = ''
+        this.roomList = []
+        let params = {
+          id: this.id,
+          project_id: item.id
+        }
+        api.getDevice_list(params).then(res => {
+          if (res.code == 200) {
+            res.data.list.forEach(item => {
+              item['tot_name'] = `${item.name}（${item.room}）`
+            })
+            this.roomList = res.data.list
+          }
+        })
+      }
+    },
+    changeRoom (e, item, index) {
+      let _id = 0
+      this.roomList.forEach(res => {
+        if (res.tot_name == e) {
+          _id = res.id
+        }
+      })
+      console.log(e, item, index, 'e,item,index');
+      let params = {
+        id: this.id,
+        project_id: item.id,
+        device_id: _id
+      }
+      api.device_change(params).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            message: `${res.msg}`,
+            type: "success"
+          });
+          this.getOrderInfo()
+        }
+      })
+    },
+    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);
+      }
+    },
+    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 () {
+    let id = this.$route.query.id;
+    this.id = id;
+    this.getOrderInfo();
+  },
+
+  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;
+          border-radius: 6px;
+        }
+      }
+      .user-span {
+        margin-left: 12px;
+
+        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 {
+      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;
+      }
+      .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;
+          line-height: 17px;
+          border-radius: 2px;
+          border: 1px solid #d6d6d6;
+          margin-top: 10px;
+          margin-right: 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;
+      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;
+      }
+    }
+    .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: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #fa7d22;
+              line-height: 18px;
+              /deep/ .el-input__inner {
+                color: #fa7d22;
+              }
+            }
+          }
+        }
+      }
+    }
+    .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/productOrder/index.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="mine">
+    <div class="condition">
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <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="getOrderList()"
+        >搜索</el-button
+      >
+    </div>
+
+    <div class="user-list">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        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.avatar_url" alt />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="real_name"
+          label="真实姓名"
+          width="80"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="联系电话"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="下单时间"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="date"
+          label="订单状态"
+          show-overflow-tooltip
+          width="100"
+        >
+          <template slot-scope="scope">
+            <div
+              :style="
+                scope.row.status == 2 || scope.row.status == 3
+                  ? 'color: #61D09D;'
+                  : scope.row.status == 5
+                  ? 'color: #A999EA'
+                  : 'color: #A999EA'
+              "
+            >
+              {{
+                scope.row.status == 2 || scope.row.status == 3
+                  ? "已取货"
+                  : scope.row.status == 1
+                  ? "待取货"
+                  : ""
+              }}
+              <!-- 1是待取货  2，3是已取货 -1已取消，0待支付-->
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="80"
+          prop="realname"
+          label="美容师"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          class="amendTop"
+          width="140"
+          prop=""
+          label="分配"
+          show-overflow-tooltip
+          v-if="level == 10"
+        >
+          <template slot-scope="scope">
+            <el-dropdown
+              @command="(command) => selectType(command, scope.$index)"
+              trigger="click"
+            >
+              <el-button @click.stop type="primary" class="amend" size="mini">
+                分配
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="(item, index) in nameList"
+                  :key="index"
+                  :command="item.realname"
+                  >{{ item.realname }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </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="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../server/home";
+
+export default {
+  components: {},
+  data() {
+    return {
+      level: "", //等级权限
+      searchText: "",
+      dates: "",
+      coupon: "",
+      limit: 10,
+      total: 0,
+      product: "",
+      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: "",
+      nameList: "", //员工列表
+    };
+  },
+  computed: {},
+  watch: {},
+
+  methods: {
+    // 分配美容师
+    selectType(type, index) {
+      // 给表单添加美容师
+      this.$set(this.tableData[index], ["realname"], type);
+      let user_id = "";
+      this.nameList.map((item) => {
+        if (item.realname == type) {
+          user_id = item.id;
+        }
+      });
+      let order_id = this.tableData[index].id;
+      let params = {
+        user_id,
+        type: 3, //1项目 2次卡 3美妆产品 4充值
+        order_id,
+      };
+      // 店长分配
+      api.orderAllocation(params).then((res) => {
+        if (res.code == 200) {
+        }
+      });
+    },
+    // 获取订单列表
+    getOrderList() {
+      let start_date = "",
+        end_date = "";
+      if (this.dates && this.dates.length > 0) {
+        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
+        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
+      }
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText,
+        start_time: start_date,
+        end_time: end_date,
+      };
+      api.getGoodsOrderList(params).then((res) => {
+        if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
+    },
+
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getOrderList();
+      console.log(this.tableData);
+    },
+
+    handleSizeChange(val) {},
+    handleSelectionChange(row, column, event) {
+      // this.$router.push({
+      //   path: "/productOrder/details",
+      //   query: {
+      //     id: row.id,
+      //   },
+      // });
+    },
+    // 获取美容师列表
+    getStaffList() {
+      api.getStaffList().then((res) => {
+        if (res.code == 200) {
+          this.nameList = res.data;
+          // console.log(res);
+        }
+      });
+    },
+  },
+
+  created() {
+    this.level = localStorage.getItem("level");
+    this.getOrderList();
+    // 获取员工列表
+    this.getStaffList();
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.mine {
+  .condition {
+    display: flex;
+    .coupon-select {
+      width: 174px;
+      margin-left: 18px;
+    }
+    .search {
+      width: 535px;
+      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;
+    }
+    .amend {
+      background-color: #fa7d22;
+      color: white;
+      font-size: 14px;
+      border: #fa7d22;
+    }
+    /deep/ th.el-table_1_column_7.is-leaf.el-table__cell {
+      text-align: center;
+    }
+    /deep/ td.el-table_1_column_7.el-table__cell {
+      text-align: center;
+    }
+  }
+  .color0 {
+    color: #fc3019;
+  }
+  .color1 {
+    color: #3ef3ed;
+  }
+  .color2 {
+    color: #00eeee;
+  }
+  .color3 {
+    color: #61d09d;
+  }
+  .color4 {
+    color: #3115cc;
+  }
+  .color5 {
+    color: #fc3019;
+  }
+  .color6 {
+    color: #a999ea;
+  }
+}
+</style>

src/pages/rechargeOrder/index.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="mine">
+    <div class="condition">
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <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="getOrderList()"
+        >搜索</el-button
+      >
+    </div>
+
+    <div class="user-list">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        style="width: 100%; border-radius: 8px"
+      >
+        <el-table-column label="头像" width="120">
+          <template slot-scope="scope">
+            <div class="head-img">
+              <img :src="scope.row.avatar_url" alt />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="real_name"
+          label="真实姓名"
+          width="80"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="联系电话"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="下单时间"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="amount"
+          label="充值金额"
+          show-overflow-tooltip
+        ></el-table-column>
+        <!-- <el-table-column
+          prop="date"
+          label="订单状态"
+          show-overflow-tooltip
+          width="100"
+        >
+          <template slot-scope="scope">
+            <div
+              :style="
+                scope.row.status == 0
+                  ? 'color: #FC3019'
+                  : scope.row.status == 5
+                  ? 'color: #A999EA'
+                  : 'color: #61D09D;'
+              "
+            >
+              {{
+                scope.row.status == 0
+                  ? "未支付"
+                  : scope.row.status == 5
+                  ? "已取消"
+                  : scope.row.status == 1
+                  ? "待使用"
+                  : scope.row.status == 2
+                  ? "正在使用"
+                  : scope.row.status == 3
+                  ? "已结算"
+                  : ""
+              }}
+            </div>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          width="80"
+          prop="realname"
+          label="美容师"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          class="amendTop"
+          width="140"
+          prop=""
+          label="分配"
+          show-overflow-tooltip
+          v-if='level==10'
+        >
+          <template slot-scope="scope">
+            <el-dropdown
+              @command="(command) => selectType(command, scope.$index)" trigger='click'
+            >
+              <el-button @click.stop type="primary" class="amend" size="mini">
+                分配
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="(item, index) in nameList"
+                  :key="index"
+                  :command="item.realname"
+                  >{{ item.realname }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagin">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../server/home";
+
+export default {
+  components: {},
+  data() {
+    return {
+      searchText: "",
+      dates: "",
+      coupon: "",
+      limit: 10,
+      total: 0,
+      product: "",
+      coupon: "",
+      level:'', //等级权限
+      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: "",
+      nameList: "", //员工列表
+    };
+  },
+  computed: {},
+  watch: {},
+
+  methods: {
+    // 分配美容师
+    selectType(type, index) {
+      // 给表单添加美容师
+      this.$set(this.tableData[index], ["realname"], type);
+      let user_id = "";
+      this.nameList.map((item) => {
+        if (item.realname == type) {
+          user_id = item.id;
+        }
+      });
+      let order_id = this.tableData[index].id;
+      let params = {
+        user_id,
+        type: 4, //1项目 2次卡 3美妆产品 4充值
+        order_id,
+      };
+      // 店长分配
+      api.orderAllocation(params).then((res) => {
+        if (res.code == 200) {
+        }
+      });
+    },
+    // 获取订单列表
+    getOrderList() {
+      let start_date = "",
+        end_date = "";
+      if (this.dates && this.dates.length > 0) {
+        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
+        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
+      }
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText,
+        start_time: start_date,
+        end_time: end_date,
+      };
+      api.getRechargeOrderList(params).then((res) => {
+        if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
+    },
+
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getOrderList();
+    },
+    // 获取美容师列表
+    getStaffList() {
+      api.getStaffList().then((res) => {
+        if (res.code == 200) {
+          this.nameList = res.data;
+          console.log(res);
+        }
+      });
+    },
+  },
+
+  created() {
+    this.level = localStorage.getItem("level");
+    this.getOrderList();
+    // 获取员工列表
+    this.getStaffList();
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.mine {
+  .condition {
+    display: flex;
+    .coupon-select {
+      width: 174px;
+      margin-left: 18px;
+    }
+    .search {
+      width: 535px;
+      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;
+    }
+    .amend {
+      background-color: #fa7d22;
+      color: white;
+      font-size: 14px;
+      border: #fa7d22;
+    }
+    /deep/ th.el-table_1_column_7.is-leaf.el-table__cell {
+      text-align: center;
+    }
+    /deep/ td.el-table_1_column_7.el-table__cell {
+      text-align: center;
+    }
+  }
+  .color0 {
+    color: #fc3019;
+  }
+  .color1 {
+    color: #3ef3ed;
+  }
+  .color2 {
+    color: #00eeee;
+  }
+  .color3 {
+    color: #61d09d;
+  }
+  .color4 {
+    color: #3115cc;
+  }
+  .color5 {
+    color: #fc3019;
+  }
+  .color6 {
+    color: #a999ea;
+  }
+}
+</style>

src/pages/scheduling/details/index.vue

@@ -0,0 +1,521 @@
+<template>
+  <div>
+    <!-- 头部添加查询排班=表 -->
+    <div class="header">
+      <div class="header-left">
+        <div
+          class="title"
+          :class="activeClass == index ? 'titleActive' : ''"
+          v-for="(item, index) in titleList"
+          :key="index"
+          @click="checkTitle(index)"
+        >
+          {{ item }}月排班表
+          <i class="el-icon-close" @click="delTitle" v-if="index == 1"></i>
+        </div>
+        <div class="add" @click="addList"><i class="el-icon-plus"></i></div>
+      </div>
+      <div class="header-right">
+        <div class="selectTime">
+          <el-date-picker
+            popper-class="mydatestyle"
+            @change="selectTime"
+            v-model="dateList"
+            type="month"
+            placeholder="查询时间"
+            :editable="false"
+            :clearable="false"
+            :picker-options="pickerOptions"
+          >
+            <!-- :picker-options="pickerOptions" -->
+          </el-date-picker>
+        </div>
+        <div @click="search" class="search">查询</div>
+      </div>
+    </div>
+    <!-- 排班表 -->
+    <div class="list">
+      <el-table
+        :data="tableData"
+        @cell-click="handle"
+        :cell-class-name="tableCellClassName"
+        :row-class-name="overTime"
+        height="550"
+      >
+        <el-table-column prop="date" label="日期" align="center" width="155">
+        </el-table-column>
+        <el-table-column
+          v-for="(item, index) in nameList"
+          :prop="'name' + index"
+          :label="item.realname"
+          align="center"
+          width="155"
+          :key="index"
+        >
+          <template slot-scope="scope">
+            <el-dropdown
+              @command="selectType"
+              :disabled="disabled"
+              trigger="click"
+            >
+              <div
+                class="amend"
+                :class="
+                  tableData[scope.row.index]['name' + index] == '早班'
+                    ? 'color1'
+                    : tableData[scope.row.index]['name' + index] == '中班'
+                    ? 'color2'
+                    : tableData[scope.row.index]['name' + index] == '晚班'
+                    ? 'color3'
+                    : tableData[scope.row.index]['name' + index] == '休息'
+                    ? 'color4'
+                    : 'color5'
+                "
+              >
+                {{ tableData[scope.row.index]["name" + index] }}
+              </div>
+              <span v-if="false">{{ scope.row }}</span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item class="color1" command="早班"
+                  >早班</el-dropdown-item
+                >
+                <el-dropdown-item class="color2" command="中班"
+                  >中班</el-dropdown-item
+                >
+                <el-dropdown-item class="color3" command="晚班"
+                  >晚班</el-dropdown-item
+                >
+                <el-dropdown-item class="color4" command="休息"
+                  >休息</el-dropdown-item
+                >
+                <el-dropdown-item class="color5" command="离职"
+                  >离职</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../../server/home";
+export default {
+  data() {
+    return {
+      level: "", //10店长可排班
+      dateList: "", //选择日期的绑定
+      tableData: [], //值班列表
+      nameList: [], //员工列表
+      row: "", //存入数据的行
+      column: "", //存入数据的列
+      titleList: [], //月份数组(最多两个月份)
+      month: "", //今月
+      year: "", //今年
+      day: "", //今日
+      activeClass: 0, //月份活动类名
+      one_selectMonth: "",
+      one_selectYear: "",
+      selectMonth: "", //选择的月份
+      selectYear: "", //选择的年份
+      pickerOptions: {
+        disabledDate: (time) => {
+          const sixMonth = new Date().setMonth(new Date().getMonth() - 5);
+          const maxValue = new Date().setMonth(new Date().getMonth() + 1);
+          return time.getTime() > maxValue || time.getTime() < sixMonth;
+        },
+      }, // 筛选选择日期只能查看前6个月 后一个月
+      disabled: false, // 之前的日期不可分配
+      addYear: "",
+      typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 9是休息 10离职
+    };
+  },
+  methods: {
+    // 将本月过去的时间添加背景色
+    overTime({ row, rowIndex }) {
+      if (row.date.split("日")[0].split("月")[0] != this.month) {
+        return;
+      }
+      let one_selectTime =
+        this.year +
+        "-" +
+        row.date.split("日")[0].split("月")[0] +
+        "-" +
+        row.date.split("日")[0].split("月")[1];
+      //现在的时间
+      let one_nowTime = this.year + "-" + this.month + "-" + this.day;
+      if (
+        new Date(one_selectTime.replace(/-/g, "/")) <
+        new Date(one_nowTime.replace(/-/g, "/"))
+      ) {
+        return "over-row";
+      }
+    },
+    // 删除最后一个标题
+    delTitle() {
+      // 删除标题数组最后一个
+      this.titleList.pop();
+      // 自动切换到本月月份
+      this.checkTitle(0);
+      this.selectMonth = "";
+      this.selectYear = "";
+      this.addYear = "";
+    },
+    // 查询日期
+    search() {
+      // 没有选择日期，返回
+      if (this.one_selectMonth == "" || this.one_selectMonth == this.month) {
+        return;
+      }
+      this.activeClass = 1;
+      this.selectMonth = this.one_selectMonth;
+      this.selectYear = this.one_selectYear;
+      // 设置月份数组最后一个为当前选择月份
+      this.titleList[1] = this.selectMonth;
+      // 获取数据月份
+      this.currentMonthDays(this.selectMonth);
+      this.getWorkList(this.selectMonth, this.selectYear);
+    },
+    // 选择日期
+    selectTime(e) {
+      // 获取月份
+      this.one_selectMonth = e.getMonth() + 1;
+      this.one_selectYear = e.getFullYear();
+    },
+    // 获取本月所有的日期
+    currentMonthDays(month1) {
+      let now = new Date();
+      // 这个月的月份
+      this.month = now.getMonth() + 1;
+      this.year = now.getFullYear();
+      this.day = now.getDate();
+      const daysOfMonth = [];
+      let year = month1 == 1 ? now.getFullYear() + 1 : now.getFullYear();
+      let month = month1 || now.getMonth() + 1;
+      if (!month1) {
+        this.titleList.push(month);
+      }
+      month = parseInt(month, 10);
+      const lastDayOfMonth = new Date(year, month, 0).getDate();
+      var weekDay = [
+        "(周天)",
+        "(周一)",
+        "(周二)",
+        "(周三)",
+        "(周四)",
+        "(周五)",
+        "(周六)",
+      ];
+      for (let i = 1; i <= lastDayOfMonth; i++) {
+        let arr = year + "/" + month + "/" + i;
+        var myDate = new Date(Date.parse(arr));
+        let week = weekDay[myDate.getDay()];
+        daysOfMonth.push(month + "月" + i + "日" + " " + week);
+      }
+      let arr = [];
+      daysOfMonth.map((item) => {
+        arr.push({ date: item });
+      });
+      this.tableData = arr;
+    },
+    // 选择上班类型
+    selectType(e) {
+      this.$set(this.tableData[this.row], [`name${this.column - 1}`], e);
+      // 选择的类型 (1是早班 2是中班 3是晚班 9是休息 10离职)
+      let type = "";
+      e == "早班"
+        ? (type = 1)
+        : e == "中班"
+        ? (type = 2)
+        : e == "晚班"
+        ? (type = 3)
+        : e == "休息"
+        ? (type = 4)
+        : (type = 5);
+      let year = this.year;
+      // 判断是否选择的是明年的1月
+      if (this.selectYear > this.year && this.activeClass != 0) {
+        year = this.year + 1;
+      } else {
+        year = this.year;
+      }
+      // 判断添加下一个月是1月
+      if (this.addYear && this.titleList[1] == 1) {
+        year = this.addYear;
+      }
+      // 选择的时间
+      let day =
+        year +
+        "-" +
+        this.tableData[this.row].date.split("日")[0].split("月")[0] +
+        "-" +
+        this.tableData[this.row].date.split("日")[0].split("月")[1];
+      let user_id = this.nameList[this.column - 1].id;
+      let params = {
+        day,
+        type,
+        user_id,
+      };
+      // 添加排班
+      api.selectScheduling(params).then((res) => {
+        if (res.code == 200) {
+        }
+      });
+    },
+    tableCellClassName({ row, column, rowIndex, columnIndex }) {
+      //注意这里是解构
+      //利用单元格的 className 的回调方法，给行列索引赋值
+      row.index = rowIndex;
+      column.index = columnIndex;
+    },
+    // 获取填写日期的行列
+    handle(row, column, event, cell) {
+      this.row = row.index; //行
+      this.column = column.index; //列
+      let one_year = this.selectYear == "" ? this.year : this.selectYear;
+      if (this.activeClass == 0) {
+        one_year = this.year;
+      }
+      if (this.month + 1 == this.titleList[1]) {
+        one_year = this.year;
+      } else if (this.titleList[this.activeClass] == 1) {
+        one_year = this.addYear || this.selectYear;
+      } else {
+        one_year = this.selectYear || this.year;
+      }
+      //选择的时间
+      let one_selectTime =
+        one_year +
+        "-" +
+        this.tableData[this.row].date.split("日")[0].split("月")[0] +
+        "-" +
+        this.tableData[this.row].date.split("日")[0].split("月")[1];
+      //现在的时间
+      let one_nowTime = this.year + "-" + this.month + "-" + this.day;
+      // 判断是否是今天以前的时间  是否可选择
+      new Date(one_selectTime.replace(/-/g, "/")) <
+      new Date(one_nowTime.replace(/-/g, "/"))
+        ? (this.disabled = true)
+        : (this.disabled = false);
+        // 如果是店员不予操作
+      if (this.level != 10) {
+        this.disabled = true;
+      }
+    },
+    // 添加表单
+    addList() {
+      // 最多可有两个月
+      if (this.titleList.length >= 2) {
+        return;
+      }
+      // 判断是否是最后一个月是的话添加表单就为1月份
+      if (this.month == 12) {
+        this.currentMonthDays(1);
+        this.titleList.push(1);
+        this.addYear = this.year + 1;
+      } else {
+        this.currentMonthDays(this.month + 1);
+        this.titleList.push(this.month + 1);
+      }
+      this.activeClass = this.activeClass + 1;
+      this.getWorkList(this.month + 1, this.addYear || this.year);
+    },
+    // 切换表单
+    checkTitle(index) {
+      this.activeClass = index;
+      // 获取切换月的月份
+      this.month = this.titleList[index];
+      this.currentMonthDays(this.month);
+      this.getWorkList(
+        this.titleList[this.activeClass],
+        this.activeClass == 0
+          ? this.year
+          : this.addYear == ""
+          ? this.selectYear || this.year
+          : this.addYear
+      );
+    },
+    // 获取员工列表
+    getStaffList() {
+      api.getStaffList().then((res) => {
+        if (res.code == 200) {
+          this.nameList = res.data;
+        }
+      });
+    },
+    // 获取排班列表
+    getWorkList(month, year) {
+      let month1 = year + "-" + month;
+      let params = {
+        month: month1,
+      };
+      api.getWorkList(params).then((res) => {
+        if (res.code == 200) {
+          // 获取全部排班
+          let arr = [];
+          res.data.map((item) => {
+            arr.push(item.type);
+          });
+          arr.map((item, index) => {
+            let newArr = this.tableData[index];
+            item.map((item1, index1) => {
+              this.$set(newArr, `name${index1}`, this.typeList[item1[0] - 1]);
+            });
+          });
+        }
+      });
+    },
+  },
+  created() {
+    // 获取店长员工等级
+    this.level = localStorage.getItem("level");
+    // 获取日期列表
+    this.currentMonthDays();
+    // 获取员工列表
+    this.getStaffList();
+    // 获取排班列表
+    this.getWorkList(this.month, this.year);
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.header {
+  width: 857px;
+  height: 70px;
+  background: #ffffff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .header-left {
+    display: flex;
+    align-items: center;
+    .title {
+      width: 217px;
+      height: 70px;
+      // background: #fa7d22;
+      border-radius: 8px;
+      // color: #ffffff;
+      text-align: center;
+      line-height: 70px;
+      font-size: 24px;
+      font-weight: 400;
+      position: relative;
+      .el-icon-close {
+        color: #ffffff;
+        font-size: 24px;
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        padding: 0;
+      }
+    }
+    .titleActive {
+      background: #fa7d22;
+      color: #ffffff;
+    }
+    .add {
+      width: 60px;
+      height: 60px;
+      border-radius: 8px;
+      border: 1px solid #e6e6e6;
+      margin-left: 5px;
+      text-align: center;
+      line-height: 60px;
+      /deep/i {
+        font-size: 19px;
+        color: #e6e6e6;
+      }
+    }
+  }
+  .header-right {
+    display: flex;
+    align-items: center;
+    .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--month {
+      width: 132px;
+      height: 32px;
+      background: #ffffff;
+      border-radius: 2px;
+    }
+    .search {
+      width: 80px;
+      height: 30px;
+      background: #fa7d22;
+      border-radius: 20px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      margin-right: 20px;
+      margin-left: 10px;
+    }
+  }
+}
+.list {
+  height: 420px;
+  width: 857px;
+  background: #ffffff;
+  border-radius: 8px;
+  margin-top: 18px;
+  padding: 0 11px;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  .el-dropdown {
+    width: 100%;
+    height: 100%;
+  }
+  .amend {
+    width: 100%;
+    height: 100%;
+  }
+}
+/deep/ .el-table tbody tr:hover > td {
+  background: #fff !important;
+}
+/deep/tr.el-table__row > * {
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  height: 41px;
+  width: 115px;
+}
+/deep/.cell {
+  height: 100%;
+  width: 100%;
+}
+.color1 {
+  color: #19d1ca !important;
+}
+.color2 {
+  color: #ffafaf !important;
+}
+.color3 {
+  color: #4d5e8e !important ;
+}
+.color4 {
+  color: #fa7d22 !important;
+}
+.color5 {
+  color: #999999 !important;
+}
+.el-month-table td.current:not(.disabled) .cell {
+  color: #4d5e8e;
+}
+/deep/ .el-month-table td.today .cell {
+  color: #4d5e8e;
+  font-size: 40px;
+}
+/deep/.el-picker-panel__body {
+  background-color: red;
+}
+/deep/.el-table {
+  .el-table__body-wrapper {
+    height: calc(100% - 48px) !important; // 表格高度减去表头的高度
+  }
+}
+/deep/.el-table .over-row {
+  background: #f7f8fa;
+  pointer-events: none;
+}
+</style>

src/pages/scheduling/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <div class="mine">
+      <!-- 表头月份 -->
+      <div class="month">
+        <div class="title">{{ month }}月排班</div>
+        <div @click="schedulingDetails" class="btn" v-if="level == 10">
+          排班
+        </div>
+        <!-- v-if='level==10' -->
+      </div>
+      <!-- 日历 -->
+      <el-calendar>
+        <template slot="dateCell" slot-scope="{ date, data }">
+          <div
+            v-for="(item, index) in stateType(getDay(date), data)"
+            :key="index"
+            class="dateContent"
+            :class="
+              thisDay == getDay(date) ? 'today' : item.type == 4 ? 'color5' : ''
+            "
+          >
+            <span
+              class="date"
+              :class="item.type == 4 && thisDay != getDay(date) ? 'color4' : ''"
+              >{{ getDay(date) }}
+            </span>
+            <span
+              class="type"
+              :class="
+                item.type == 1
+                  ? 'color1'
+                  : item.type == 2
+                  ? 'color2'
+                  : item.type == 4 && thisDay != getDay(date)
+                  ? 'color4'
+                  : item.type == 3
+                  ? 'color3'
+                  : 'color6'
+              "
+              >{{ typeList[item.type - 1] }}</span
+            >
+          </div>
+        </template>
+      </el-calendar>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../server/home";
+export default {
+  data() {
+    return {
+      thisDay: "", //今天日期（日）
+      stateList: [], //值班列表
+      typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 4是休息 5离职
+      month: "",
+      level: "", //等级权限
+    };
+  },
+  methods: {
+    // 标注今天日期
+    getDay(date) {
+      return date.getDate();
+    },
+    schedulingDetails() {
+      this.$router.push("/scheduling/details");
+    },
+    // 获取排班列表
+    getScheduling() {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      if (month < 10) {
+        month = "0" + month;
+      }
+      let start_time = `${year}-${month}-01`;
+      const enddate = new Date(year, month, 0);
+      var end_time =
+        enddate.getFullYear() +
+        "-" +
+        (enddate.getMonth() + 1) +
+        "-" +
+        enddate.getDate();
+      let parems = {
+        start_time: start_time,
+        end_time: end_time,
+      };
+      api.getScheduling(parems).then((res) => {
+        if (res.code == 200) {
+          this.stateList = res.data;
+        }
+      });
+    },
+    // 筛选每天对应的排班数据
+    stateType(date, data) {
+      // 获取月份
+      if (!data) {
+        return;
+      }
+      let month = data.day.split("-")[1];
+      return this.stateList.filter((item) => {
+        if (date == item.day && month == this.month) {
+          return item;
+        }
+      });
+    },
+  },
+  created() {
+    this.level = localStorage.getItem("level");
+    let now = new Date();
+    this.thisDay = now.getDate();
+    this.month = now.getMonth() + 1;
+    // 获取排班列表
+    this.getScheduling();
+    this.stateType();
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.mine {
+  width: 857px;
+  height: 504px;
+  background-color: #ffffff;
+  margin: auto auto;
+  border-radius: 10px;
+  // 表头月份样式
+  .month {
+    width: 857px;
+    height: 80px;
+    border-radius: 10px;
+    border: 1px solid #fa7d22;
+    font-size: 24px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #fa7d22;
+    text-align: center;
+    line-height: 80px;
+    display: flex;
+    align-items: center;
+    .title {
+      margin-left: 385px;
+    }
+    .btn {
+      font-weight: 400;
+      width: 80px;
+      line-height: 30px;
+      height: 30px;
+      background: #fa7d22;
+      border-radius: 20px;
+      color: #ffffff;
+      font-size: 14px;
+      margin-left: 285px;
+    }
+  }
+  // 日历样式
+  /deep/.el-calendar__header {
+    display: none;
+  }
+  /deep/.el-calendar-day {
+    text-align: center;
+    color: #333333;
+    border: none;
+  }
+  /deep/ thead {
+    font-size: 20px;
+    font-weight: 400;
+    color: #333;
+  }
+  /deep/td.current {
+    border: none;
+  }
+  /deep/td.next {
+    pointer-events: none;
+    border: none;
+    .dateContent {
+      color: #d4d4d4;
+    }
+  }
+  /deep/td.prev {
+    pointer-events: none;
+    border: none;
+    .dateContent {
+      color: #d4d4d4 !important;
+    }
+  }
+  .dateContent {
+    display: flex;
+    font-size: 20px;
+    flex-direction: column;
+    width: 60px;
+    height: 60px;
+    margin: auto auto;
+    margin-top: 10px;
+    border-radius: 8px;
+    padding-top: 6px;
+    box-sizing: border-box;
+    .date {
+      margin-top: 4px;
+    }
+    .type {
+      font-size: 14px;
+      margin-top: 4px;
+    }
+  }
+  .today {
+    border: 1px solid #fa7d22 !important;
+  }
+  /deep/tr.el-calendar-table__row:last-child {
+    display: none;
+  }
+  .el-calendar {
+    pointer-events: none;
+  }
+}
+/deep/td.current {
+  .color1 {
+    color: #19d1ca; //早班
+  }
+  .color2 {
+    color: #ffa5a5; //午班
+  }
+  .color3 {
+    color: #4b5d8d; //晚班
+  }
+  .color4 {
+    color: #ffffff; //休息
+  }
+  .color5 {
+    background-color: #fa7d22;
+  }
+  .color6 {
+    color: #999999; //离职
+  }
+}
+</style>

src/router/map/home.js

@@ -20,7 +20,14 @@ import projectOrder from '@/pages/customerMan/myOrder'
 import payUser from '@/pages/payUser/index'
 import payUserDetails from '@/pages/payUser/details/index'
 import payUserOrder from '@/pages/payUser/myOrder/index'
-
+import scheduling from '@/pages/scheduling/index'
+import schedulingDetails from '@/pages/scheduling/details/index'
+import orderCenter from '@/pages/orderCenter/orderCenter'
+import productOrder from '@/pages/productOrder/index'
+import productOrderDetails from '@/pages/productOrder/details/index'
+import cardOrderDetails from '@/pages/cardOrder/details/index'
+import cardOrder from '@/pages/cardOrder/index'
+import rechargeOrder from '@/pages/rechargeOrder/index'
 export default {
   path: '/layout',
   name: '首页',
@@ -72,7 +79,7 @@ export default {
       isback: true,
     },
     component: projectOrder
-  }, 
+  },
   {
     path: '/payUser',
     component: payUser,
@@ -90,6 +97,9 @@ export default {
   },
   {
     path: '/historicalOrder',
+    meta: {
+      isback: true,
+    },
     component: HistoricalOrder
   },
   {
@@ -126,5 +136,55 @@ export default {
     path: '/coupon',
     component: Coupon
   },
+  {
+    path: '/scheduling',
+    component: scheduling,
+  },
+  {
+    path: '/scheduling/details',
+    component: schedulingDetails,
+    meta: {
+      isback: true,
+    },
+  },
+  {
+    path: '/orderCenter',
+    component: orderCenter
+  },
+  {
+    path: '/productOrder',
+    component: productOrder,
+    meta: {
+      isback: true,
+    },
+  },
+  {
+    path: '/productOrder/details',
+    component: productOrderDetails,
+    meta: {
+      isback: true,
+    },
+  },
+  {
+    path: '/cardOrder',
+    component: cardOrder,
+    meta: {
+      isback: true,
+    },
+  },
+  {
+    path: '/cardOrder/details',
+    component: cardOrderDetails,
+    meta: {
+      isback: true,
+    },
+  },
+  {
+    path: '/rechargeOrder',
+    component: rechargeOrder,
+    meta: {
+      isback: true,
+    },
+  },
   ]
 }

src/server/home.js

@@ -6,100 +6,100 @@ export default class Home {
   /**
    * @描述  1.1	获取用户信息
    */
-  static getToken (parms) {
+  static getToken(parms) {
     return $http.post(url.getToken, parms);
   }
 
-  static getTotal (parms) {
+  static getTotal(parms) {
     return $http.get(url.getTotal, parms);
   }
 
-  static getToday (parms) {
+  static getToday(parms) {
     return $http.get(url.getToday, parms);
   }
 
-  static getSkinList (parms) {
+  static getSkinList(parms) {
     return $http.get(url.getSkinList, parms);
   }
-  static getSkinInfo (parms) {
+  static getSkinInfo(parms) {
     return $http.get(url.getSkinInfo, parms);
   }
-  static getProject (parms) {
+  static getProject(parms) {
     return $http.get(url.getProject, parms);
   }
-  static getUserInfo (parms) {
+  static getUserInfo(parms) {
     return $http.get(url.getUserInfo, parms);
   }
-  static getSkinTags (parms) {
+  static getSkinTags(parms) {
     return $http.get(url.getSkinTags, parms);
   }
-  static getSkinUpdate (parms) {
+  static getSkinUpdate(parms) {
     return $http.post(url.getSkinUpdate, parms);
   }
-  static getProjectList (parms) {
+  static getProjectList(parms) {
     return $http.get(url.getProjectList, parms);
   }
-  static getProducts (parms) {
+  static getProducts(parms) {
     return $http.get(url.getProducts, parms);
   }
-  static getOrderTime (parms) {
+  static getOrderTime(parms) {
     return $http.get(url.getOrderTime, parms);
   }
-  static setOrderUpdate (parms) {
+  static setOrderUpdate(parms) {
     return $http.post(url.setOrderUpdate, parms);
   }
-  static getOrderCoupon (parms) {
+  static getOrderCoupon(parms) {
     return $http.get(url.getOrderCoupon, parms);
   }
-  static getAuthCode (parms) {
+  static getAuthCode(parms) {
     return $http.get(url.getAuthCode, parms);
   }
-  static checkCode (parms) {
+  static checkCode(parms) {
     return $http.get(url.checkCode, parms);
   }
-  static getOrderByCode (parms) {
+  static getOrderByCode(parms) {
     return $http.get(url.getOrderByCode, parms);
   }
-  static orderPay (parms) {
+  static orderPay(parms) {
     return $http.post(url.orderPay, parms);
   }
-  static payStatus (parms) {
+  static payStatus(parms) {
     return $http.get(url.payStatus, parms);
   }
-  static getOrderDiscount (parms) {
+  static getOrderDiscount(parms) {
     return $http.get(url.getOrderDiscount, parms);
   }
-  static projectClassify (parms) {
+  static projectClassify(parms) {
     return $http.get(url.projectClassify, parms);
   }
-  static schemeDelete (parms) {
+  static schemeDelete(parms) {
     return $http.post(url.schemeDelete, parms);
   }
-  static timesAdd (parms) {
+  static timesAdd(parms) {
     return $http.post(url.timesAdd, parms);
   }
-  static addUpdate (parms) {
+  static addUpdate(parms) {
     return $http.post(url.addUpdate, parms);
   }
-  static getDevice_list (parms) {
+  static getDevice_list(parms) {
     return $http.get(url.getDevice_list, parms);
   }
-  static device_change (parms) {
+  static device_change(parms) {
     return $http.post(url.device_change, parms);
   }
 
   // 获取历史订单
-  static getOrderList (parms) {
+  static getOrderList(parms) {
     return $http.get(url.getOrderList, parms);
   }
 
   // 获取订单详情
-  static getOrderInfo (parms) {
+  static getOrderInfo(parms) {
     return $http.get(url.getOrderInfo, parms);
   }
 
   // 获取用户列表
-  static getUserList (parms) {
+  static getUserList(parms) {
     return $http.get(url.getUserList, parms);
   }
 
@@ -109,152 +109,184 @@ export default class Home {
   // }
 
   // 获取优惠券列表
-  static getCouponInfo (parms) {
+  static getCouponInfo(parms) {
     return $http.get(url.getCouponInfo, parms);
   }
 
   // 发送优惠券接口
-  static sendCoupon (parms) {
+  static sendCoupon(parms) {
     return $http.post(url.sendCoupon, parms);
   }
 
   // 获取用户详情接口
-  static getPadUserInfo (parms) {
+  static getPadUserInfo(parms) {
     return $http.get(url.getPadUserInfo, parms);
   }
 
   // 获取优惠券订单
-  static getUserCoupon (parms) {
+  static getUserCoupon(parms) {
     return $http.get(url.getUserCoupon, parms);
   }
 
   // 获取商品订单
-  static getUserGoods (parms) {
+  static getUserGoods(parms) {
     return $http.get(url.getUserGoods, parms);
   }
 
   // 获取项目订单
-  static getUserProject (parms) {
+  static getUserProject(parms) {
     return $http.get(url.getUserProject, parms);
   }
 
   // 新增项目订单
-  static padOrderAdd (parms) {
+  static padOrderAdd(parms) {
     return $http.post(url.padOrderAdd, parms);
   }
 
   // 面部问题标签
-  static skinFace_tags (parms) {
+  static skinFace_tags(parms) {
     return $http.get(url.skinFace_tags, parms);
   }
 
   // 皮肤问题标签
-  static skinSkin_tags (parms) {
+  static skinSkin_tags(parms) {
     return $http.get(url.skinSkin_tags, parms);
   }
 
   // 新增项目订单
-  static schemeSave (parms) {
+  static schemeSave(parms) {
     return $http.post(url.schemeSave, parms);
   }
 
   // 用户预约记录
-  static reservedRecords (params) {
+  static reservedRecords(params) {
     return $http.get(url.reservedRecords, params)
   }
 
   // 清除未读消息  0清除所有 1清除预约成功 2清除取消
-  static clearMessage (type) {
+  static clearMessage(type) {
     return $http.get(url.clearMessage, type)
   }
 
   // 根据Id清除未读消息  消息记录id
-  static clearMessageById (id) {
+  static clearMessageById(id) {
     return $http.get(url.clearMessageById, id)
   }
 
   // 获取消息列表 （成功/失败）  1预约成功 2取消预约
-  static getMessageByType ({ type, page, limit }) {
+  static getMessageByType({ type, page, limit }) {
     return $http.get(url.getMessageByType, { type, page, limit })
   }
 
   // 获取消息列表
-  static getMessageList ({ page, limit }) {
+  static getMessageList({ page, limit }) {
     return $http.get(url.getMessageList, { page, limit })
   }
 
   // 获取是否有未读消息
-  static hasUnreadMessage () {
+  static hasUnreadMessage() {
     return $http.get(url.hasUnreadMessage)
   }
 
   // 更新用户信息
-  static updateUserProfile (params) {
+  static updateUserProfile(params) {
     return $http.post(url.updateUserProfile, params)
   }
 
   // 获取用户卡券订单
-  static getCardOrders (params) {
+  static getCardOrders(params) {
     return $http.get(url.getCardOrders, params)
   }
   // 获取用户次卡列表
-  static getCardList (params) {
+  static getCardList(params) {
     return $http.get(url.getCardList, params)
   }
   // 次卡订单详情
-  static cardInfo (params) {
+  static cardInfo(params) {
     return $http.get(url.cardInfo, params)
   }
   // 次卡消耗详情
-  static cardLog (params) {
+  static cardLog(params) {
     return $http.get(url.cardLog, params)
   }
   // 修改次数
-  static cardUpdate (params) {
+  static cardUpdate(params) {
     return $http.post(url.cardUpdate, params)
   }
   // 获取项目可用的次卡
-  static getOrderCard (params) {
+  static getOrderCard(params) {
     return $http.get(url.getOrderCard, params)
   }
   // 获取项目可用的次卡
-  static getUserDetail (params) {
+  static getUserDetail(params) {
     return $http.post(url.getUserDetail, params)
   }
   // 客户管理编辑用户标签
-  static editSign (params) {
+  static editSign(params) {
     return $http.post(url.editSign, params)
   }
   // 余额变更记录
-  static getBalanceRecord (params) {
+  static getBalanceRecord(params) {
     return $http.post(url.getBalanceRecord, params)
   }
   // 获取付费用户列表
-  static getUserPayList (params) {
+  static getUserPayList(params) {
     return $http.get(url.getUserPayList, params)
   }
   // 获取付费用户列表
-  static searchOrderUser (params) {
+  static searchOrderUser(params) {
     return $http.post(url.searchOrderUser, params)
   }
   // 创建订单
-  static createUserOrder (params) {
+  static createUserOrder(params) {
     return $http.post(url.createUserOrder, params)
   }
   // 获取预约人数统计
-  static OrderSum (params) {
+  static OrderSum(params) {
     return $http.post(url.OrderSum, params)
   }
   // 删除预约订单
-  static delOrder (params) {
+  static delOrder(params) {
     return $http.get(url.delOrder, params)
   }
   // 用户预约详情
-  static userOrderDetail (params) {
+  static userOrderDetail(params) {
     return $http.get(url.userOrderDetail, params)
   }
   // 修改次卡时间
-  static amendCardTime (params) {
+  static amendCardTime(params) {
     return $http.post(url.amendCardTime, params)
   }
+  // 店员查看排班
+  static getScheduling(params) {
+    return $http.get(url.getScheduling, params)
+  }
+  // 设置排班
+  static selectScheduling(params) {
+    return $http.post(url.selectScheduling, params)
+  }
+  // 员工列表
+  static getStaffList() {
+    return $http.get(url.getStaffList)
+  }
+  // 所有人排班列表
+  static getWorkList(params) {
+    return $http.post(url.getWorkList, params)
+  }
+  // 店长分配订单
+  static orderAllocation(params) {
+    return $http.post(url.orderAllocation, params)
+  }
+  // 次卡订单列表
+  static getCardOrderList(params) {
+    return $http.get(url.getCardOrderList, params)
+  }
+  // 充值订单列表
+  static getRechargeOrderList(params) {
+    return $http.get(url.getRechargeOrderList, params)
+  }
+  // 美妆订单列表
+  static getGoodsOrderList(params) {
+    return $http.get(url.getGoodsOrderList, params)
+  }
 }

src/server/urls.js

@@ -48,17 +48,17 @@ export default {
   //新增项目
   addUpdate: '/v2/pad/scheme/update',
   //次卡订单详情
-  cardInfo:'/v2/pad/card/info',
+  cardInfo: '/v2/pad/card/info',
   //消耗详情
-  cardLog:'/v2/pad/card/log',
+  cardLog: '/v2/pad/card/log',
   //修改次数
-  cardUpdate:'/v2/pad/card/update',
+  cardUpdate: '/v2/pad/card/update',
   //获取项目可用的次卡
-  getOrderCard:'/v2/pad/order/card',
+  getOrderCard: '/v2/pad/order/card',
   //获取可更换的设备
-  getDevice_list:'/v2/pad/order/device_list',
+  getDevice_list: '/v2/pad/order/device_list',
   //更改设备
-  device_change:'/v2/pad/order/device_change',
+  device_change: '/v2/pad/order/device_change',
 
   /**
    *  by ListKer
@@ -131,35 +131,59 @@ export default {
   getCardOrders: '/v2/pad/user/card',
 
   //获取用户次卡列表
-  getCardList:'/v2/pad/user/card_list',
-  
+  getCardList: '/v2/pad/user/card_list',
+
   // 获取客户管理详情
-  getUserDetail:'/v2/pad/detail/user_detail',
+  getUserDetail: '/v2/pad/detail/user_detail',
 
   // 客户管理编辑用户标签
-  editSign:'/v2/pad/detail/sign',
+  editSign: '/v2/pad/detail/sign',
 
   // 余额变更记录
-  getBalanceRecord:'/v2/pad/detail/balance',
+  getBalanceRecord: '/v2/pad/detail/balance',
 
   // 获取付费用户列表
-  getUserPayList:'/v2/pad/user/pay_list',
+  getUserPayList: '/v2/pad/user/pay_list',
 
   // 查询预约用户
-  searchOrderUser:'/v2/pad/reserved/user',
+  searchOrderUser: '/v2/pad/reserved/user',
 
   // 创建预约
-  createUserOrder:'/v2/pad/reserved/created',
+  createUserOrder: '/v2/pad/reserved/created',
 
   // 预约人数统计
-  OrderSum:'/v2/pad/reserved/count',
+  OrderSum: '/v2/pad/reserved/count',
 
   // 预约人数统计
-  delOrder:'/v2/pad/reserved/del',
+  delOrder: '/v2/pad/reserved/del',
 
   //用户预约详情
-  userOrderDetail:'/v2/pad/reserved/info',
+  userOrderDetail: '/v2/pad/reserved/info',
 
   // 修改次卡时间
-  amendCardTime:'/v2/pad/card/delay'
+  amendCardTime: '/v2/pad/card/delay',
+
+  // 店员查看排班
+  getScheduling: '/v2/pad/classes/scheduling',
+
+  // 设置排班
+  selectScheduling: '/v2/pad/classes/add',
+
+  // 店铺员工列表
+  getStaffList: '/v2/pad/classes/salesclerk',
+
+  // 所有人排班列表
+  getWorkList: '/v2/pad/classes/work_list',
+
+  // 店长分配订单
+  orderAllocation: '/v2/pad/classes/assigning',
+
+  //次卡订单列表
+  getCardOrderList: '/v2/pad/list/card',
+
+  //充值订单列表
+  getRechargeOrderList: '/v2/pad/list/recharge',
+
+  //美妆产品订单列表
+  getGoodsOrderList: '/v2/pad/list/goods',
 }

vue.config.js

@@ -4,11 +4,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   // 测试
-  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
-  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
-  // 正式
-  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
+  // 正式
+  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
   // 设置跨域
   crossorigin: 'anonymous',
   /**