首页改版扫码核销美妆订单&&订单分配美容师多选

src/components/common/layout/layout.vue

@@ -17,6 +17,7 @@
         </div>
         <div>
           <div class="left" v-if="menuIndex == 0 && $route.path === '/home'">
+          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/%E5%AE%9A%E4%BD%8D%402x%20%281%29.png" alt="">
             <div class="address">{{ userInfo.store_name }}</div>
           </div>
         </div>
@@ -294,7 +295,7 @@ import api from "@/server/home";
 export default {
   data() {
     return {
-      isback:false,
+      isback: false,
       isFold: false, //导航菜单面板是否折叠
       userId: 0,
       menuIndex: 0,
@@ -384,10 +385,14 @@ export default {
       await this.queryHasUnreadMessage();
     }, 20000);
   },
-  mounted () {
-      if(this.$route.path=='/payUser/details'||this.$route.path=='/testSkin/details'||this.$route.path=='/customerMan/details'){
-        this.isback=true
-      }
+  mounted() {
+    if (
+      this.$route.path == "/payUser/details" ||
+      this.$route.path == "/testSkin/details" ||
+      this.$route.path == "/customerMan/details"
+    ) {
+      this.isback = true;
+    }
   },
   beforeDestroy() {
     // 关闭WebSocket连接并清除定时器
@@ -774,6 +779,12 @@ export default {
       font-weight: 400;
       color: #333333;
       line-height: 21px;
+      display: flex;
+      align-items: center;
+    }
+    img {
+      width: 24px;
+      height: 24px;
     }
     .center {
       color: #000000;

src/pages/cardOrder/index.vue

@@ -25,7 +25,7 @@
         style="width: 100%; border-radius: 8px"
         @row-click="handleSelectionChange"
       >
-        <el-table-column label="头像" width="120">
+        <el-table-column label="头像" width="60">
           <template slot-scope="scope">
             <div @click.stop="goUserDetail(scope.row)" class="head-img">
               <img :src="scope.row.avatar_url" alt />
@@ -87,36 +87,28 @@
           </template>
         </el-table-column>
         <el-table-column
-          width="80"
-          prop="realname"
+          width="100"
+          prop="cosmeticianName"
           label="美容师"
           show-overflow-tooltip
         ></el-table-column>
         <el-table-column
           class="amendTop"
-          width="140"
+          width="80"
           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="selectType(scope.row)"
+              type="primary"
+              class="amend"
+              size="mini"
             >
-              <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>
+              分配
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -132,14 +124,57 @@
         ></el-pagination>
       </div>
     </div>
+    <minePupop :show="selectPup">
+      <div class="selectBox">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeSelect"
+          />
+        </div>
+        <div class="selectTitle">分配美容师</div>
+        <div class="selectFinish">
+          <div class="selecrFinishTop">分配给：</div>
+          <div class="selecrFinishBottom">
+            <div
+              class="item"
+              v-for="(item, index) in selectNameList"
+              :key="index"
+              @click="delectCosmetician(item)"
+            >
+              {{ item.realname }}
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="selectList">
+          <div class="selecrListTop">可选择：</div>
+          <div class="selecrListBottom">
+            <div
+              class="item"
+              @click="selectCosmetician(item)"
+              v-for="(item, index) in nameList"
+              :key="index"
+            >
+              {{ item.realname }}
+            </div>
+          </div>
+        </div>
+        <div class="selectBox-btn" @click="confirmSelect">确认</div>
+      </div>
+    </minePupop>
   </div>
 </template>
 
 <script>
 import api from "../../server/home";
-
+import minePupop from "../../components/minePupop/index.vue";
 export default {
-  components: {},
+  components: { minePupop },
   data() {
     return {
       searchText: "",
@@ -180,7 +215,12 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
-      nameList: "", //员工列表
+      nameListAll: [],
+      nameList: [], //员工列表
+      selectNameList: [], //已选员工列表
+      level: "", //店员等级
+      selectPup: false, //分配弹窗
+      order_id: "", //订单ID
     };
   },
   computed: {},
@@ -196,25 +236,63 @@ export default {
         },
       });
     },
-    // 分配美容师
-    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;
+    // 关闭分配弹窗
+    closeSelect() {
+      this.selectPup = false;
+    },
+    // 选择美容师
+    selectCosmetician(e) {
+      this.selectNameList.push(e);
+      this.nameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          console.log(index);
+          this.nameList.splice(index, 1);
+        }
+      });
+    },
+    // 删除美容师
+    delectCosmetician(e) {
+      this.nameList.push(e);
+      this.selectNameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          this.selectNameList.splice(index, 1);
         }
       });
-      let order_id = this.tableData[index].id;
+    },
+    // 打开分配弹窗
+    selectType(e) {
+      this.selectPup = true;
+      this.order_id = e.id;
+      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)); //重置数据
+      this.selectNameList = []; //重置数据
+      // 筛选出已分配的美容师
+      if (e.assign) {
+        e.assign.forEach((item, index) => {
+          this.nameList.forEach((item1, index1) => {
+            if (item.id == item1.id) {
+              this.selectNameList.push(item);
+              this.nameList.splice(index1, 1);
+            }
+          });
+        });
+      }
+    },
+    // 分配美容师
+    confirmSelect() {
+      let user_id = [];
+      this.selectNameList.forEach((item) => {
+        user_id.push(item.id);
+      });
       let params = {
-        user_id,
-        type: 2, //1项目 2次卡 3美妆产品 4充值
-        order_id,
+        user_id: user_id.toString(),
+        type: 1, //1项目 2次卡 3美妆产品 4充值
+        order_id: this.order_id,
       };
       // 店长分配
       api.orderAllocation(params).then((res) => {
         if (res.code == 200) {
+          this.selectPup = false;
+          this.getOrderList();
         }
       });
     },
@@ -239,6 +317,20 @@ export default {
           res.data.list.map((item) => {
             item.mobile =
               item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            // 整理已选的美容师
+            if (item.assign) {
+              let nameList = [];
+              let cosmeticianName = [];
+              item.assign.forEach((item1) => {
+                let list = {};
+                list.realname = item1.realname;
+                list.id = item1.suser_id;
+                nameList.push(list);
+                cosmeticianName.push(item1.realname);
+              });
+              item.assign = nameList;
+              item.cosmeticianName = cosmeticianName.toString();
+            }
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
@@ -265,6 +357,7 @@ export default {
       api.getStaffList().then((res) => {
         if (res.code == 200) {
           this.nameList = res.data;
+          this.nameListAll = JSON.parse(JSON.stringify(res.data));
         }
       });
     },
@@ -349,6 +442,107 @@ export default {
       text-align: center;
     }
   }
+  // 分配弹窗
+  .selectBox {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    padding-left: 40px;
+    position: relative;
+    .image {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 5px;
+      margin-right: 5px;
+      img {
+        width: 30px;
+      }
+    }
+    .selectTitle {
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+      margin-top: 5px;
+    }
+    .selectFinish {
+      margin-top: 20px;
+      .selecrFinishTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrFinishBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+          position: relative;
+          img {
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+        .item:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .selectList {
+      margin-top: 20px;
+      .selecrListTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrListBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+        }
+      }
+    }
+    .selectBox-btn {
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      color: #fff;
+      line-height: 28px;
+      font-size: 14px;
+      text-align: center;
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
   .color0 {
     color: #fc3019;
   }

src/pages/historicalOrder/index.vue

@@ -34,7 +34,7 @@
         style="width: 100%; border-radius: 8px"
         @row-click="handleSelectionChange"
       >
-        <el-table-column label="头像" width="120">
+        <el-table-column label="头像" width="60">
           <template slot-scope="scope">
             <div @click.stop="goUserDetail(scope.row)" class="head-img">
               <img :src="scope.row.avatar_url" alt />
@@ -44,7 +44,7 @@
         <el-table-column
           prop="user_id"
           label="用户ID"
-          width="80"
+          width="70"
         ></el-table-column>
         <el-table-column
           prop="real_name"
@@ -89,36 +89,29 @@
           </template>
         </el-table-column>
         <el-table-column
-          width="80"
-          prop="realname"
+          width="100"
+          prop="cosmeticianName"
           label="美容师"
           show-overflow-tooltip
-        ></el-table-column>
+        >
+        </el-table-column>
         <el-table-column
           class="amendTop"
-          width="140"
+          width="80"
           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="selectType(scope.row)"
+              type="primary"
+              class="amend"
+              size="mini"
             >
-              <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>
+              分配
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -134,14 +127,57 @@
         ></el-pagination>
       </div>
     </div>
+    <minePupop :show="selectPup">
+      <div class="selectBox">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeSelect"
+          />
+        </div>
+        <div class="selectTitle">分配美容师</div>
+        <div class="selectFinish">
+          <div class="selecrFinishTop">分配给：</div>
+          <div class="selecrFinishBottom">
+            <div
+              class="item"
+              v-for="(item, index) in selectNameList"
+              :key="index"
+              @click="delectCosmetician(item)"
+            >
+              {{ item.realname }}
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="selectList">
+          <div class="selecrListTop">可选择：</div>
+          <div class="selecrListBottom">
+            <div
+              class="item"
+              @click="selectCosmetician(item)"
+              v-for="(item, index) in nameList"
+              :key="index"
+            >
+              {{ item.realname }}
+            </div>
+          </div>
+        </div>
+        <div class="selectBox-btn" @click="confirmSelect">确认</div>
+      </div>
+    </minePupop>
   </div>
 </template>
 
 <script>
 import api from "../../server/home";
-
+import minePupop from "../../components/minePupop/index.vue";
 export default {
-  components: {},
+  components: { minePupop },
   data() {
     return {
       searchText: "",
@@ -181,8 +217,12 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
-      nameList: "", //员工列表
-      level: "",
+      nameListAll:[],
+      nameList: [], //员工列表
+      selectNameList: [], //已选员工列表
+      level: "", //店员等级
+      selectPup: false, //分配弹窗
+      order_id: "", //订单ID
     };
   },
   computed: {},
@@ -199,25 +239,63 @@ export default {
         },
       });
     },
-    // 分配美容师
-    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;
+    // 关闭分配弹窗
+    closeSelect() {
+      this.selectPup = false;
+    },
+    // 选择美容师
+    selectCosmetician(e) {
+      this.selectNameList.push(e);
+      this.nameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          console.log(index);
+          this.nameList.splice(index, 1);
+        }
+      });
+    },
+    // 删除美容师
+    delectCosmetician(e) {
+      this.nameList.push(e);
+      this.selectNameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          this.selectNameList.splice(index, 1);
         }
       });
-      let order_id = this.tableData[index].id;
+    },
+    // 打开分配弹窗
+    selectType(e) {
+      this.selectPup = true;
+      this.order_id = e.id;
+      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)) //重置数据
+      this.selectNameList = []; //重置数据
+      // 筛选出已分配的美容师
+      if (e.assign) {
+        e.assign.forEach((item, index) => {
+          this.nameList.forEach((item1, index1) => {
+            if (item.id == item1.id) {
+              this.selectNameList.push(item);
+              this.nameList.splice(index1, 1);
+            }
+          });
+        });
+      }
+    },
+    // 分配美容师
+    confirmSelect() {
+      let user_id = [];
+      this.selectNameList.forEach((item) => {
+        user_id.push(item.id);
+      });
       let params = {
-        user_id,
+        user_id: user_id.toString(),
         type: 1, //1项目 2次卡 3美妆产品 4充值
-        order_id,
+        order_id: this.order_id,
       };
       // 店长分配
       api.orderAllocation(params).then((res) => {
         if (res.code == 200) {
+          this.selectPup = false;
+          this.getOrderList();
         }
       });
     },
@@ -244,6 +322,20 @@ export default {
           res.data.list.map((item) => {
             item.mobile =
               item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            // 整理已选的美容师
+            if (item.assign) {
+              let nameList = [];
+              let cosmeticianName = [];
+              item.assign.forEach((item1) => {
+                let list = {};
+                list.realname = item1.realname;
+                list.id = item1.suser_id;
+                nameList.push(list);
+                cosmeticianName.push(item1.realname);
+              });
+              item.assign = nameList;
+              item.cosmeticianName = cosmeticianName.toString();
+            }
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
@@ -270,6 +362,7 @@ export default {
       api.getStaffList().then((res) => {
         if (res.code == 200) {
           this.nameList = res.data;
+          this.nameListAll = JSON.parse(JSON.stringify(res.data))
         }
       });
     },
@@ -354,6 +447,107 @@ export default {
       text-align: center;
     }
   }
+  // 分配弹窗
+  .selectBox {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    padding-left: 40px;
+    position: relative;
+    .image {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 5px;
+      margin-right: 5px;
+      img {
+        width: 30px;
+      }
+    }
+    .selectTitle {
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+      margin-top: 5px;
+    }
+    .selectFinish {
+      margin-top: 20px;
+      .selecrFinishTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrFinishBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+          position: relative;
+          img {
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+        .item:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .selectList {
+      margin-top: 20px;
+      .selecrListTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrListBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+        }
+      }
+    }
+    .selectBox-btn {
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      color: #fff;
+      line-height: 28px;
+      font-size: 14px;
+      text-align: center;
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
   .color0 {
     color: #3ef3ed;
   }

src/pages/home/index.vue

@@ -1,53 +1,167 @@
 <template>
   <div class="home">
-    <div class="tab">
-      <div class="make-order"
-           v-for="item,index in tabList"
-           @click="changeTable(item.type)"
-           :key="index">
-        <div class="make-icon">
-          <img :src="item.image">
+    <!-- 扫描二维码 -->
+    <div class="closeQR" v-if="openQR">
+      <img
+        @click="closeQR"
+        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
+        alt=""
+      />
+    </div>
+    <div id="bcid"></div>
+    <!-- 扫描二维码确认 -->
+    <minePupop :show="isGoodsPanel">
+      <div class="cancelGoodsPanel">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeAmend"
+          />
+        </div>
+        <div class="goodsTitle">美妆产品核销</div>
+        <div class="goodsPanelContent">
+          <div class="goodsDetail">
+            <div class="goodsDetail-left">商品名称</div>
+            <div class="goodsDetail-right">
+              <div
+                class="goodsDetail-item"
+                v-for="(item, index) in goodsList.goods"
+                :key="index"
+              >
+                <img class="img" :src="item.cover_url" alt="" />
+                <div class="goodsDetail-title">
+                  <div class="goodsTitle">
+                    {{ item.goods_name }}
+                  </div>
+                  <div class="goodsNum">X{{ item.num }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="buyTime">
+            <div class="buyTime-title">购买时间</div>
+            <div class="time">{{ goodsList.pay_time }}</div>
+          </div>
+          <div class="claimGoods">
+            <div class="claimGoods-title">取货码</div>
+            <div class="claimGoods-number">{{ goodsList.coupon_code }}</div>
+          </div>
         </div>
-        <div class="make-tips">
-          <div class="make-num">{{ item.num }}</div>
-          <div class="make-name">{{ item.name }}</div>
+        <div class="goodsPanelBtn" @click="goodsTakeOut">确认</div>
+      </div>
+    </minePupop>
+    <div class="home-top">
+      <!-- 客户预约表 -->
+      <div class="reservationTable" @click="toDetailList">
+        <img
+          src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
+          alt=""
+        />
+        <div class="right">
+          <div class="top">
+            <div class="num">{{ totalSum }}</div>
+            <div class="date">({{ date }})</div>
+          </div>
+          <div class="name">客户预约表</div>
+        </div>
+      </div>
+      <div class="goodsCancel">
+        <img
+          src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/%E7%BE%8E%E5%A6%86%E4%BA%A7%E5%93%81%E6%A0%B8%E9%94%80%402x.png"
+          alt=""
+        />
+        <div class="right">
+          <div class="goodsName">美妆产品核销</div>
+          <div class="bottom">
+            <input
+              placeholder="请输入取货码"
+              style="text-indent: 20px"
+              type="text"
+              v-model="goodsCode"
+            />
+            <div @click="goodsPickUp" class="goodsCancel-btn">核销</div>
+            <img
+              src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/%E6%89%AB%E4%B8%80%E6%89%AB%402x.png"
+              alt=""
+              @click="cancelQR"
+            />
+          </div>
         </div>
       </div>
     </div>
     <div class="order-list">
-      <div class="title">预约订单列表</div>
-      <div class="detail-list"><span @click="toDetailList">客户预约表</span></div>
+      <div class="order-list-top">
+        <div class="tab">
+          <div
+            class="tabItem"
+            v-for="(item, index) in tabList"
+            @click="changeTable(item.type, index)"
+            :key="index"
+          >
+            <p :class="{ tabName: true, activeTab: index == tabIndex }">
+              {{ item.name }}
+            </p>
+          </div>
+        </div>
+        <div class="search">
+          <input
+            type="text"
+            style="text-indent: 36px"
+            placeholder="用户ID、用户手机号、用户昵称、用户真实姓名"
+            v-model="orderKeyWord"
+          />
+          <div @click="searchOrder" class="searchBtn">搜索</div>
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/%E6%90%9C%E7%B4%A2%402x.png"
+            alt=""
+          />
+        </div>
+      </div>
       <div class="list-info">
-        <van-list v-model="loading"
-                  :finished="finished"
-                  finished-text="没有更多了"
-                  @load=" getToday ">
-          <div class="user-info"
-               v-for="(item,index) in orderList"
-               :key="index"
-               @click="toOrderDetails(item)"
-               :style="index==orderList.length-1?'border-bottom:0px':''">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="getToday"
+        >
+          <div
+            class="user-info"
+            v-for="(item, index) in orderList"
+            :key="index"
+            @click="toOrderDetails(item)"
+            :style="index == orderList.length - 1 ? 'border-bottom:0px' : ''"
+          >
             <div @click.stop="goUserDetail(item)" class="head-img">
-              <div class="new"
-                   v-if="item.is_new==1">新</div><img :src="item.avatar_url"
-                   alt="">
+              <div class="new" v-if="item.is_new == 1">新</div>
+              <img :src="item.avatar_url" alt="" />
             </div>
             <div class="user-information">
-              <div class="name">客户昵称：<span>{{ item.nickname }}</span></div>
-              <div class="name">客户ID：<span>{{ item.user_id }}</span></div>
-              <div class="name">预约项目时间：<span>{{ item.order_time }}</span></div>
-              <div class="name">预约项目数量：<span>{{ item.project_num }}</span></div>
+              <div class="name">
+                客户昵称：<span>{{ item.nickname }}</span>
+              </div>
+              <div class="name">
+                客户ID：<span>{{ item.user_id }}</span>
+              </div>
+              <div class="name">
+                预约项目时间：<span>{{ item.order_time }}</span>
+              </div>
+              <div class="name">
+                预约项目数量：<span>{{ item.project_num }}</span>
+              </div>
             </div>
             <ul class="product-list">
-              <li class="product-image"
-                  v-for="value,i in item.project_list"
-                  :key="i"><img :src="value.cover_url"
-                     alt=""></li>
+              <li
+                class="product-image"
+                v-for="(value, i) in item.project_list"
+                :key="i"
+              >
+                <img :src="value.cover_url" alt="" />
+              </li>
             </ul>
             <!-- 状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，-1已取消，-2退款审核中，-3已退款 -->
-            <div class="status"
-                 :class="'color' + item.status">
-                            {{
+            <div class="status" :class="'color' + item.status">
+              {{
                 item.status == 0
                   ? "已预约"
                   : item.status == 1
@@ -75,170 +189,501 @@
 </template>
 
 <script>
-import api from '@/server/home'
-import vanList from 'vant/lib/list';
-import 'vant/lib/list/style';
-
+import api from "@/server/home";
+import vanList from "vant/lib/list";
+import minePupop from "../../components/minePupop/index.vue";
+import "vant/lib/list/style";
 export default {
-  name: 'home',
-  data () {
+  data() {
     return {
       tabList: [
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
           num: 0,
-          name: '预约订单',
+          name: "预约订单",
           type: 0,
         },
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
           num: 0,
-          name: '未支付订单',
+          name: "未支付订单",
           type: 2,
         },
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png',
           num: 0,
-          name: '取消订单',
-          type: 3
+          name: "取消订单",
+          type: 3,
         },
       ],
-      orderList: [
-      ],
+      tabIndex: 0,
+      orderList: [],
       loading: false,
       finished: false,
       page: 1,
       limit: 10,
-      type: 0
-
-    }
+      type: 0,
+      date: "", //日期
+      totalSum: 0, //今日订单总数量
+      scan: null,
+      openQR: false, //控制摄像头打开关闭
+      isGoodsPanel: false, //控制确认核销打开关闭
+      goodsCode: "", //美妆核销码
+      goodsList: "", //美妆核销信息
+      orderKeyWord:'',//订单搜索关键字
+    };
   },
-  components: { vanList },
-  mounted: function () {
-
+  components: {
+    vanList,
+    minePupop,
   },
+  mounted: function () {},
   created: function () {
-    this.getTotal()
+    this.getTotal();
     // this.getToday()
+    this.getDate();
+  },
+  destroyed() {
+    this.cancelScan();
+    this.closeQR();
   },
   methods: {
+    // 美妆产品核销
+    goodsPickUp() {
+      api.goodsPickUp({ code: this.goodsCode }).then((res) => {
+        this.goodsList = res.data;
+		this.isGoodsPanel = true;
+      });
+    },
+    // 美妆产品取货
+    goodsTakeOut() {
+      api.goodsTakeOut({ id: this.goodsList.id }).then((res) => {
+        if (res.code == 200) {
+          this.$message.success("取货成功");
+          this.isGoodsPanel=false
+          this.goodsCode = "";
+          this.goodsList = "";
+        }
+      });
+    },
+    // 关闭核销美妆产品面板
+    closeAmend() {
+      this.isGoodsPanel = false;
+    },
     // 跳入用户详情
-    goUserDetail(e){
+    goUserDetail(e) {
       console.log(e);
       this.$router.push({
-        path:"/customerMan/details",
-        query:{
-          id:e.user_id
+        path: "/customerMan/details",
+        query: {
+          id: e.user_id,
+        },
+      });
+    },
+    // 获取当天日期&&当天预约总数
+    getDate() {
+      let date = new Date();
+      this.date = date.getMonth() + 1 + "月" + date.getDate() + "日";
+      let day =
+        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+      api
+        .reservedRecords({
+          day,
+        })
+        .then((res) => {
+          let total = 0;
+          res.data.forEach((item) => {
+            total = item.list.length + total;
+          });
+          this.totalSum = total;
+        });
+    },
+    // 扫码核销订单
+    cancelQR() {
+      this.startRecognize();
+    },
+    // 关闭二维码
+    closeQR() {
+      if (!window.plus) return;
+      this.scan.close();
+      this.openQR = false;
+    },
+    // 关闭扫描
+    cancelScan() {
+      if (!window.plus) return;
+      this.scan.cancel();
+    },
+    // 开始扫描
+    startScan() {
+      if (!window.plus) return;
+      this.scan.start();
+    },
+    // 创建扫描控件
+    startRecognize() {
+      if (this.openQR) {
+        return;
+      }
+      this.openQR = true;
+      let that = this;
+      if (!window.plus) return;
+      that.scan = plus.barcode.create("bcid", [plus.barcode.QR], {
+        top: "40px",
+        left: "0px",
+        width: "100%",
+        height: "100%",
+        position: "static",
+      });
+      plus.webview.currentWebview().append(that.scan);
+      // 开始扫描
+      that.scan.start();
+      that.scan.onmarked = onmarked;
+      function onmarked(type, result, file) {
+        switch (type) {
+          case plus.barcode.QR:
+            type = "QR";
+            break;
+          case plus.barcode.EAN13:
+            type = "EAN13";
+            break;
+          case plus.barcode.EAN8:
+            type = "EAN8";
+            break;
+          default:
+            type = "其它" + type;
+            break;
         }
-      })
+        result = result.replace(/\n/g, "");
+        result = result.replace(/\s+/g, "");
+        that.goodsCode = result;
+        that.closeQR();
+        that.goodsPickUp();
+      }
     },
-    getTotal () {
-      api.getTotal().then(res => {
+    getTotal() {
+      api.getTotal().then((res) => {
         if (res.code == 200) {
-          this.tabList[0].num = res.data.order_num
-          this.tabList[1].num = res.data.wait_pay_num
-          this.tabList[2].num = res.data.cancel_num
+          this.tabList[0].num = res.data.order_num;
+          this.tabList[1].num = res.data.wait_pay_num;
+          this.tabList[2].num = res.data.cancel_num;
         }
-      })
+      });
     },
-    changeTable (type) {
-      this.type = type
-      this.orderList = []
-      this.loading = false
-      this.finished = false
-      this.page = 1
+    changeTable(type, index) {
+      this.tabIndex = index;
+      this.type = type;
+      this.orderList = [];
+      this.loading = false;
+      this.finished = false;
+      this.page = 1;
     },
-    getToday () {
+    //搜索订单
+    searchOrder(){
       setTimeout(() => {
-        api.getToday({ page: this.page, limit: this.limit, type: this.type }).then(res => {
-          if (res.code = 200) {
-            this.orderList = [...this.orderList, ...res.data.list]
-            this.page++
-            this.loading = false;
-            if (this.orderList.length >= res.data.total) {
-              this.finished = true;
+        api
+          .getToday({
+            page: 1,
+            limit: 20,
+            type: 0,
+            keywords:this.orderKeyWord
+          })
+          .then((res) => {
+            if ((res.code = 200)) {
+              this.orderList = res.data.list
             }
-          }
-        })
+          });
       }, 1000);
-
     },
-    toOrderDetails (e) {
+    getToday() {
+      setTimeout(() => {
+        api
+          .getToday({
+            page: this.page,
+            limit: this.limit,
+            type: this.type,
+          })
+          .then((res) => {
+            if ((res.code = 200)) {
+              this.orderList = [...this.orderList, ...res.data.list];
+              this.page++;
+              this.loading = false;
+              if (this.orderList.length >= res.data.total) {
+                this.finished = true;
+              }
+            }
+          });
+      }, 1000);
+    },
+    toOrderDetails(e) {
       if (e.status == 0) {
         this.$router.push({
-          path: '/confirmOrder/details',
+          path: "/confirmOrder/details",
           query: {
-            id: e.id
-          }
-        })
+            id: e.id,
+          },
+        });
       } else {
         this.$router.push({
           path: "/historicalOrder/details",
           query: {
-            id: e.id
-          }
+            id: e.id,
+          },
         });
       }
     },
-    initData () {
-
-    },
-    toDetailList () {
+    initData() {},
+    toDetailList() {
       this.$router.push({
         path: "/home/detailList",
-        query: {
-        }
+        query: {},
       });
-    }
+    },
   },
   computed: {},
-  watch: {}
-}
+  watch: {},
+};
 </script>
 <style lang='less' scoped>
 @import url(../../style/root.less);
 
 .home {
   text-align: center;
-
-  .tab {
+  // 扫描二维码
+  .closeQR {
+    width: 100%;
+    height: 40px;
+    background: #000;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    img {
+      width: 30px;
+      height: 30px;
+      float: left;
+      margin-left: 10px;
+    }
+  }
+  // 扫描二维码确认
+  .cancelGoodsPanel {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    .image {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 5px;
+      margin-right: 5px;
+      img {
+        width: 30px;
+      }
+    }
+    .goodsTitle {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+    }
+    .goodsPanelContent {
+      height: 224px;
+      width: 480px;
+      margin-top: 20px;
+      margin-left: 30px;
+      .goodsDetail {
+        display: flex;
+        .goodsDetail-left {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333333;
+          margin-right: 23px;
+        }
+        .goodsDetail-right {
+          height: 164px;
+          overflow-y: auto;
+          .goodsDetail-item {
+            display: flex;
+            margin-top: 10px;
+            .img {
+              width: 48px;
+              height: 48px;
+              border-radius: 4px;
+              margin-right: 10px;
+            }
+            .goodsDetail-title {
+              text-align: left;
+              width: 343px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              .goodsTitle {
+                width: 343px;
+                font-size: 12px;
+                color: #333333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              .goodsNum {
+                font-size: 12px;
+                color: #333333;
+                margin-top: 14px;
+              }
+            }
+          }
+          .goodsDetail-item:first-child {
+            margin-top: 0;
+          }
+        }
+      }
+      .buyTime {
+        margin-top: 10px;
+        text-align: left;
+        display: flex;
+        .buyTime-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333333;
+        }
+        .time {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333333;
+          margin-left: 23px;
+        }
+      }
+      .claimGoods {
+        margin-top: 10px;
+        text-align: left;
+        display: flex;
+      }
+      .claimGoods-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+      }
+      .claimGoods-number {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+        margin-left: 37px;
+      }
+    }
+    .goodsPanelBtn {
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      text-align: center;
+      line-height: 28px;
+      color: #fff;
+      font-size: 14px;
+      margin: 0 auto;
+      margin-top: 24px;
+    }
+  }
+  .home-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    .make-order {
-      width: 274px;
-      padding: 14px 30px;
+    .reservationTable {
+      width: 300px;
+      height: 96px;
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
       border-radius: 8px;
+      padding: 14px 30px;
       display: flex;
-      align-items: center;
 
-      .make-icon {
-        img {
-          width: 68px;
-        }
+      img {
+        width: 68px;
+        height: 68px;
       }
 
-      .make-tips {
+      .right {
         margin-left: 20px;
+        text-align: left !important;
 
-        .make-num {
-          font-size: 34px;
-          font-family: OPPOSans-B, OPPOSans;
-          font-weight: normal;
-          color: #333333;
-          line-height: 40px;
-          text-align: left;
+        .top {
+          display: flex;
+
+          .num {
+            font-size: 34px;
+            font-family: AppleSystemUIFont;
+            color: #333333;
+          }
+
+          .date {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            margin-left: 10px;
+            display: flex;
+            align-items: flex-end;
+          }
         }
+      }
+
+      .name {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        margin-top: 11px;
+      }
+    }
+
+    .goodsCancel {
+      width: 527px;
+      height: 96px;
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 14px 30px;
+      display: flex;
+
+      img {
+        width: 68px;
+        height: 68px;
+      }
 
-        .make-name {
+      .right {
+        margin-left: 30px;
+        text-align: left !important;
+
+        .goodsName {
           font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
           color: #333333;
-          line-height: 20px;
+        }
+
+        .bottom {
+          margin-top: 16px;
+          display: flex;
+          align-items: center;
+
+          input {
+            width: 217px;
+            height: 32px;
+            background: #ffffff;
+            border-radius: 2px;
+            border: 1px solid #d9d9d9;
+          }
+
+          .goodsCancel-btn {
+            width: 68px;
+            height: 32px;
+            background: #fa7d22;
+            border-radius: 2px;
+            margin-left: 30px;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+          }
+
+          img {
+            width: 34px;
+            height: 34px;
+            margin-left: 20px;
+          }
         }
       }
     }
@@ -250,25 +695,104 @@ export default {
     background: #ffffff;
     box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
     border-radius: 8px;
-    padding: 14px 12px;
+    overflow: hidden;
 
-    .title {
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333333;
-      line-height: 20px;
-      text-align: left;
-      padding-bottom: 5px;
-    }
-    .detail-list {
-      text-align: right;
-      color: #FA7D22;
+    // padding:0px 12px 14px 12px;
+    .order-list-top {
+      width: 100%;
+      height: 48px;
+      display: flex;
+
+      .tab {
+        width: 402px;
+        height: 48px;
+        background-color: #ffffff;
+        display: flex;
+        overflow: hidden;
+
+        .tabItem {
+          width: 134px;
+          height: 48px;
+          background: #ffffff;
+          text-align: center;
+          line-height: 48px;
+          font-size: 20px;
+          font-weight: 400;
+          color: #333333;
+          position: relative;
+          display: flex;
+          justify-content: center;
+        }
+
+        .tabName {
+          position: absolute;
+        }
+
+        .activeTab {
+          font-size: 22px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 700;
+          color: #333333;
+        }
+
+        .activeTab::before {
+          content: "";
+          position: absolute;
+          bottom: 12px;
+          left: 0px;
+          width: 100%;
+          height: 5px;
+          background: linear-gradient(
+            270deg,
+            #fa7d22 0%,
+            rgba(253, 180, 70, 0) 100%
+          );
+          border-radius: 3px;
+        }
+      }
+
+      .search {
+        flex: 1;
+        border-radius: 0px 0px 0px 30px;
+        background-color: #f7f8fa;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        input {
+          margin-left: 20px;
+          width: 338px;
+          height: 32px;
+          background: #ffffff;
+          border-radius: 2px;
+          border: 1px solid #d9d9d9;
+        }
+
+        .searchBtn {
+          width: 68px;
+          height: 32px;
+          background: #fa7d22;
+          border-radius: 2px;
+          line-height: 32px;
+          text-align: center;
+          color: #fff;
+          margin-left: 20px;
+        }
+
+        img {
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          left: 30px;
+          top: 17px;
+        }
+      }
     }
 
     .list-info {
       height: 450px;
       overflow: auto;
+
       .user-info {
         padding: 14px 0;
         border-bottom: 1px solid #e6e6e6;
@@ -278,6 +802,8 @@ export default {
         .head-img {
           position: relative;
           width: 72px;
+          margin-left: 12px;
+
           .new {
             position: absolute;
             top: -2px;
@@ -329,6 +855,7 @@ export default {
             display: inline-block;
             margin-left: 16px;
             width: 72px;
+
             img {
               border-radius: 8px;
               width: 100%;
@@ -336,6 +863,7 @@ export default {
             }
           }
         }
+
         .status {
           margin-left: 56px;
           font-size: 16px;
@@ -346,6 +874,7 @@ export default {
         }
       }
     }
+
     .empty {
       height: 300px;
       line-height: 300px;
@@ -355,24 +884,31 @@ export default {
     }
   }
 }
+
 .color0 {
   color: #3ef3ed !important;
 }
+
 .color1 {
   color: #61d09d !important;
 }
+
 .color2 {
   color: #00eeee !important;
 }
+
 .color3 {
   color: #a999ea !important;
 }
+
 .color-2 {
   color: #3115cc !important;
 }
+
 .color-1 {
   color: #fc3019 !important;
 }
+
 .color-3 {
   color: #fc3019 !important;
 }

src/pages/payUser/myOrder/index.vue

@@ -246,11 +246,6 @@ type: "全额券" -->
                 show-overflow-tooltip
               ></el-table-column>
               <el-table-column
-                prop="price"
-                label="总价格"
-                show-overflow-tooltip
-              ></el-table-column>
-              <el-table-column
                 prop="create_time"
                 label="到期时间"
                 width="180"

src/pages/productOrder/index.vue

@@ -25,7 +25,7 @@
         style="width: 100%; border-radius: 8px"
         @row-click="handleSelectionChange"
       >
-        <el-table-column  label="头像" width="120">
+        <el-table-column label="头像" width="60">
           <template slot-scope="scope">
             <div @click.stop="goUserDetail(scope.row)" class="head-img">
               <img :src="scope.row.avatar_url" alt />
@@ -80,36 +80,28 @@
           </template>
         </el-table-column>
         <el-table-column
-          width="80"
-          prop="realname"
+          width="100"
+          prop="cosmeticianName"
           label="美容师"
           show-overflow-tooltip
         ></el-table-column>
         <el-table-column
           class="amendTop"
-          width="140"
+          width="80"
           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="selectType(scope.row)"
+              type="primary"
+              class="amend"
+              size="mini"
             >
-              <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>
+              分配
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -125,14 +117,57 @@
         ></el-pagination>
       </div>
     </div>
+    <minePupop :show="selectPup">
+      <div class="selectBox">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeSelect"
+          />
+        </div>
+        <div class="selectTitle">分配美容师</div>
+        <div class="selectFinish">
+          <div class="selecrFinishTop">分配给：</div>
+          <div class="selecrFinishBottom">
+            <div
+              class="item"
+              v-for="(item, index) in selectNameList"
+              :key="index"
+              @click="delectCosmetician(item)"
+            >
+              {{ item.realname }}
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="selectList">
+          <div class="selecrListTop">可选择：</div>
+          <div class="selecrListBottom">
+            <div
+              class="item"
+              @click="selectCosmetician(item)"
+              v-for="(item, index) in nameList"
+              :key="index"
+            >
+              {{ item.realname }}
+            </div>
+          </div>
+        </div>
+        <div class="selectBox-btn" @click="confirmSelect">确认</div>
+      </div>
+    </minePupop>
   </div>
 </template>
 
 <script>
 import api from "../../server/home";
-
+import minePupop from "../../components/minePupop/index.vue";
 export default {
-  components: {},
+  components: { minePupop },
   data() {
     return {
       level: "", //等级权限
@@ -173,14 +208,19 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
-      nameList: "", //员工列表
+      nameListAll: [],
+      nameList: [], //员工列表
+      selectNameList: [], //已选员工列表
+      level: "", //店员等级
+      selectPup: false, //分配弹窗
+      order_id: "", //订单ID
     };
   },
   computed: {},
   watch: {},
 
   methods: {
-            // 跳入用户详情
+    // 跳入用户详情
     goUserDetail(e) {
       console.log(e);
       this.$router.push({
@@ -190,25 +230,63 @@ export default {
         },
       });
     },
-    // 分配美容师
-    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;
+    // 关闭分配弹窗
+    closeSelect() {
+      this.selectPup = false;
+    },
+    // 选择美容师
+    selectCosmetician(e) {
+      this.selectNameList.push(e);
+      this.nameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          console.log(index);
+          this.nameList.splice(index, 1);
+        }
+      });
+    },
+    // 删除美容师
+    delectCosmetician(e) {
+      this.nameList.push(e);
+      this.selectNameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          this.selectNameList.splice(index, 1);
         }
       });
-      let order_id = this.tableData[index].id;
+    },
+    // 打开分配弹窗
+    selectType(e) {
+      this.selectPup = true;
+      this.order_id = e.id;
+      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)); //重置数据
+      this.selectNameList = []; //重置数据
+      // 筛选出已分配的美容师
+      if (e.assign) {
+        e.assign.forEach((item, index) => {
+          this.nameList.forEach((item1, index1) => {
+            if (item.id == item1.id) {
+              this.selectNameList.push(item);
+              this.nameList.splice(index1, 1);
+            }
+          });
+        });
+      }
+    },
+    // 分配美容师
+    confirmSelect() {
+      let user_id = [];
+      this.selectNameList.forEach((item) => {
+        user_id.push(item.id);
+      });
       let params = {
-        user_id,
-        type: 3, //1项目 2次卡 3美妆产品 4充值
-        order_id,
+        user_id: user_id.toString(),
+        type: 1, //1项目 2次卡 3美妆产品 4充值
+        order_id: this.order_id,
       };
       // 店长分配
       api.orderAllocation(params).then((res) => {
         if (res.code == 200) {
+          this.selectPup = false;
+          this.getOrderList();
         }
       });
     },
@@ -233,6 +311,21 @@ export default {
           res.data.list.map((item) => {
             item.mobile =
               item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            // 整理已选的美容师
+            if (item.assign) {
+              let nameList = [];
+              let cosmeticianName = [];
+              item.assign.forEach((item1) => {
+                console.log(item1);
+                let list = {};
+                list.realname = item1.realname;
+                list.id = item1.suser_id;
+                nameList.push(list);
+                cosmeticianName.push(item1.realname);
+              });
+              item.assign = nameList;
+              item.cosmeticianName = cosmeticianName.toString();
+            }
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
@@ -260,12 +353,11 @@ export default {
       api.getStaffList().then((res) => {
         if (res.code == 200) {
           this.nameList = res.data;
-          // console.log(res);
+          this.nameListAll = JSON.parse(JSON.stringify(res.data))
         }
       });
     },
   },
-
   created() {
     this.level = localStorage.getItem("level");
     this.getOrderList();
@@ -345,6 +437,107 @@ export default {
       text-align: center;
     }
   }
+  // 分配弹窗
+  .selectBox {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    padding-left: 40px;
+    position: relative;
+    .image {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 5px;
+      margin-right: 5px;
+      img {
+        width: 30px;
+      }
+    }
+    .selectTitle {
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+      margin-top: 5px;
+    }
+    .selectFinish {
+      margin-top: 20px;
+      .selecrFinishTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrFinishBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+          position: relative;
+          img {
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+        .item:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .selectList {
+      margin-top: 20px;
+      .selecrListTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrListBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+        }
+      }
+    }
+    .selectBox-btn {
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      color: #fff;
+      line-height: 28px;
+      font-size: 14px;
+      text-align: center;
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
   .color0 {
     color: #fc3019;
   }

src/pages/rechargeOrder/index.vue

@@ -24,7 +24,7 @@
         height="500"
         style="width: 100%; border-radius: 8px"
       >
-        <el-table-column label="头像" width="120">
+        <el-table-column label="头像" width="60">
           <template slot-scope="scope">
             <div @click.stop="goUserDetail(scope.row)" class="head-img">
               <img :src="scope.row.avatar_url" alt />
@@ -56,69 +56,30 @@
           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"
+          width="100"
+          prop="cosmeticianName"
           label="美容师"
           show-overflow-tooltip
-        ></el-table-column>
+        >
+        </el-table-column>
         <el-table-column
           class="amendTop"
-          width="140"
+          width="80"
           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="selectType(scope.row)"
+              type="primary"
+              class="amend"
+              size="mini"
             >
-              <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>
+              分配
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -133,14 +94,57 @@
         ></el-pagination>
       </div>
     </div>
+        <minePupop :show="selectPup">
+      <div class="selectBox">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeSelect"
+          />
+        </div>
+        <div class="selectTitle">分配美容师</div>
+        <div class="selectFinish">
+          <div class="selecrFinishTop">分配给：</div>
+          <div class="selecrFinishBottom">
+            <div
+              class="item"
+              v-for="(item, index) in selectNameList"
+              :key="index"
+              @click="delectCosmetician(item)"
+            >
+              {{ item.realname }}
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="selectList">
+          <div class="selecrListTop">可选择：</div>
+          <div class="selecrListBottom">
+            <div
+              class="item"
+              @click="selectCosmetician(item)"
+              v-for="(item, index) in nameList"
+              :key="index"
+            >
+              {{ item.realname }}
+            </div>
+          </div>
+        </div>
+        <div class="selectBox-btn" @click="confirmSelect">确认</div>
+      </div>
+    </minePupop>
   </div>
 </template>
 
 <script>
 import api from "../../server/home";
-
+import minePupop from "../../components/minePupop/index.vue";
 export default {
-  components: {},
+  components: {minePupop},
   data() {
     return {
       searchText: "",
@@ -181,7 +185,12 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
-      nameList: "", //员工列表
+            nameListAll:[],
+      nameList: [], //员工列表
+      selectNameList: [], //已选员工列表
+      level: "", //店员等级
+      selectPup: false, //分配弹窗
+      order_id: "", //订单ID
     };
   },
   computed: {},
@@ -198,25 +207,63 @@ export default {
         },
       });
     },
-    // 分配美容师
-    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;
+        // 关闭分配弹窗
+    closeSelect() {
+      this.selectPup = false;
+    },
+    // 选择美容师
+    selectCosmetician(e) {
+      this.selectNameList.push(e);
+      this.nameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          console.log(index);
+          this.nameList.splice(index, 1);
         }
       });
-      let order_id = this.tableData[index].id;
+    },
+    // 删除美容师
+    delectCosmetician(e) {
+      this.nameList.push(e);
+      this.selectNameList.forEach((item, index) => {
+        if (item.id == e.id) {
+          this.selectNameList.splice(index, 1);
+        }
+      });
+    },
+    // 打开分配弹窗
+    selectType(e) {
+      this.selectPup = true;
+      this.order_id = e.id;
+      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)) //重置数据
+      this.selectNameList = []; //重置数据
+      // 筛选出已分配的美容师
+      if (e.assign) {
+        e.assign.forEach((item, index) => {
+          this.nameList.forEach((item1, index1) => {
+            if (item.id == item1.id) {
+              this.selectNameList.push(item);
+              this.nameList.splice(index1, 1);
+            }
+          });
+        });
+      }
+    },
+    // 分配美容师
+    confirmSelect() {
+      let user_id = [];
+      this.selectNameList.forEach((item) => {
+        user_id.push(item.id);
+      });
       let params = {
-        user_id,
-        type: 4, //1项目 2次卡 3美妆产品 4充值
-        order_id,
+        user_id: user_id.toString(),
+        type: 1, //1项目 2次卡 3美妆产品 4充值
+        order_id: this.order_id,
       };
       // 店长分配
       api.orderAllocation(params).then((res) => {
         if (res.code == 200) {
+          this.selectPup = false;
+          this.getOrderList();
         }
       });
     },
@@ -241,6 +288,20 @@ export default {
           res.data.list.map((item) => {
             item.mobile =
               item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            // 整理已选的美容师
+            if (item.assign) {
+              let nameList = [];
+              let cosmeticianName = [];
+              item.assign.forEach((item1) => {
+                let list = {};
+                list.realname = item1.realname;
+                list.id = item1.suser_id;
+                nameList.push(list);
+                cosmeticianName.push(item1.realname);
+              });
+              item.assign = nameList;
+              item.cosmeticianName = cosmeticianName.toString();
+            }
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
@@ -257,7 +318,7 @@ export default {
       api.getStaffList().then((res) => {
         if (res.code == 200) {
           this.nameList = res.data;
-          console.log(res);
+          this.nameListAll = JSON.parse(JSON.stringify(res.data))
         }
       });
     },
@@ -342,6 +403,107 @@ export default {
       text-align: center;
     }
   }
+    // 分配弹窗
+  .selectBox {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    padding-left: 40px;
+    position: relative;
+    .image {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 5px;
+      margin-right: 5px;
+      img {
+        width: 30px;
+      }
+    }
+    .selectTitle {
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+      margin-top: 5px;
+    }
+    .selectFinish {
+      margin-top: 20px;
+      .selecrFinishTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrFinishBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+          position: relative;
+          img {
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+        .item:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .selectList {
+      margin-top: 20px;
+      .selecrListTop {
+        font-size: 14px;
+        color: #333;
+      }
+      .selecrListBottom {
+        height: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 40px;
+          padding: 0px 16px;
+          background: #f9f9f9;
+          border-radius: 3px;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 40px;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-top: 20px;
+        }
+      }
+    }
+    .selectBox-btn {
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      color: #fff;
+      line-height: 28px;
+      font-size: 14px;
+      text-align: center;
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
   .color0 {
     color: #fc3019;
   }

src/server/home.js

@@ -293,4 +293,12 @@ export default class Home {
   static getCosmetMessageList(params) {
     return $http.get(url.getCosmetMessageList, params)
   }
+  // 美妆产品核销
+  static goodsPickUp(params) {
+    return $http.post(url.goodsPickUp, params)
+  }
+  // 美妆产品取货
+  static goodsTakeOut(params) {
+    return $http.post(url.goodsTakeOut, params)
+  }
 }

src/server/urls.js

@@ -188,5 +188,11 @@ export default {
   getGoodsOrderList: '/v2/pad/list/goods',
 
   // 后台发送美容师的消息
-  getCosmetMessageList:"/v2/pad/message/message_list",
+  getCosmetMessageList: "/v2/pad/message/message_list",
+
+  // 美妆产品核销
+  goodsPickUp: '/v2/pad/order/pick_up',
+
+  // 美妆产品取货
+  goodsTakeOut: '/v2/pad/order/take_out'
 }

vue.config.js

@@ -4,8 +4,8 @@ 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/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/',