代客下单增加先付费后付费选择

src/views/table/components/table-diancan.vue

@@ -7,38 +7,52 @@
       :visible.sync="informationdialogshow"
       @close="onclose"
     >
-      <div class="head-container search-box flex">
+      <div class="head-container search-box flex row-between">
-        <div style="width: 300px">
+        <div>
-          <el-input
+          <el-dropdown @command="changePostPay">
-            v-model="goods.query.productId"
+            <el-button plain type="success" size="mini">
-            size="small"
+              {{ postPay ? "后付费" : "先付费" }}
-            clearable
+              <i class="el-icon-caret-bottom"></i>
-            placeholder="请输入商品名称"
+            </el-button>
-            style="width: 100%"
+            <el-dropdown-menu slot="dropdown">
-            class="filter-item"
+              <el-dropdown-item :command="false">先付费</el-dropdown-item>
-            suffix-icon="el-icon-search"
+              <el-dropdown-item :command="true">后付费</el-dropdown-item>
-          />
+            </el-dropdown-menu>
-          <!-- @keyup.enter.native="getGoods" -->
+          </el-dropdown>
         </div>
 
-        <div
+        <div class="flex">
-          style="display: flex; justify-content: flex-end; margin-left: 10px"
+          <div style="width: 300px">
-        >
+            <el-input
-          <!-- <el-button style="margin-right: 10px" type="primary" @click="getGoods"
+              v-model="goods.query.productId"
+              size="small"
+              clearable
+              placeholder="请输入商品名称"
+              style="width: 100%"
+              class="filter-item"
+              suffix-icon="el-icon-search"
+            />
+            <!-- @keyup.enter.native="getGoods" -->
+          </div>
+          <div
+            style="display: flex; justify-content: flex-end; margin-left: 10px"
+          >
+            <!-- <el-button style="margin-right: 10px" type="primary" @click="getGoods"
             >查询</el-button
           >
           <el-button @click="reset">重置</el-button> -->
-          <div style="width: 100px; margin-left: 20px">
+            <div style="width: 100px; margin-left: 20px">
-            <el-select v-model="layout.sel" placeholder="请选择">
+              <el-select v-model="layout.sel" placeholder="请选择">
-              <el-option
+                <el-option
-                v-for="item in layout.list"
+                  v-for="item in layout.list"
-                :key="item.value"
+                  :key="item.value"
-                :label="item.label"
+                  :label="item.label"
-                :value="item.value"
+                  :value="item.value"
-                :disabled="item.disabled"
+                  :disabled="item.disabled"
-              >
+                >
-              </el-option>
+                </el-option>
-            </el-select>
+              </el-select>
+            </div>
           </div>
         </div>
       </div>
@@ -107,9 +121,6 @@
               </div>
 
               <div class="flex mt-14">
-                <!-- <button class="my-btn flex-1 success" v-if="!isCreateOrder">
-                  <span>仅下单</span>
-                </button> -->
                 <template v-if="isCreateOrder">
                   <button
                     class="my-btn flex-1 default"
@@ -123,7 +134,7 @@
                   </button>
                 </template>
                 <template v-else>
-                  <el-dropdown
+                  <!-- <el-dropdown
                     split-button
                     size="medium"
                     type="success"
@@ -138,50 +149,31 @@
                         >下单并打印制作单</el-dropdown-item
                       >
                     </el-dropdown-menu>
-                  </el-dropdown>
+                  </el-dropdown> -->
-                  <div style="width: 15px"></div>
+                  <template v-if="postPay">
+                    <div class="flex-1">
+                      <el-button
+                      type="success"
+                        size="medium"
+                        :disabled="!order.list.length"
+                        @click="toCreateOrder"
+                      >
+                        仅下单
+                      </el-button>
+                    </div>
+                    <div style="width: 15px"></div>
+                  </template>
                   <div class="flex-1">
                     <el-button
                       size="medium"
                       :disabled="!order.list.length"
-                      @click="toPay"
+                      @click="toCreateOrder"
                     >
                       去结账
                     </el-button>
                   </div>
-
-                  <!-- <button
-                    class="my-btn flex-1 success"
-                    :class="{ disabled: !order.list.length }"
-                    :disabled="!order.list.length"
-                    @click="toPay"
-                  >
-                    <span>去结账</span>
-                  </button> -->
                 </template>
               </div>
-
-              <!-- <div class="flex mt-14">
-                <button class="my-btn flex-1 success" v-if="!isCreateOrder">
-                  <span>仅下单</span>
-                </button>
-                <button
-                  class="my-btn flex-1 default"
-                  v-else
-                  @click="createOrderClose"
-                >
-                  <span>加菜/返回</span>
-                </button>
-                <div style="width: 15px"></div>
-                <button
-                  class="my-btn flex-1 default"
-                  :class="{ disabled: !order.list.length }"
-                  :disabled="!order.list.length"
-                  @click="toPay"
-                >
-                  <span>去结账</span>
-                </button>
-              </div> -->
             </div>
             <div class="list">
               <div
@@ -418,9 +410,17 @@
                   <div>
                     <div class="stockNumber"></div>
                     <div class="">￥{{ item.lowPrice }}</div>
-                    <div class="flex" v-if="item.isPauseSale">
+                    <template v-if="layout.sel === 'default'">
-                      <div class="timeSale">售罄</div>
+                      <div
-                    </div>
+                        class="flex"
+                        v-if="
+                          item.isPauseSale ||
+                          (item.typeEnum !== 'sku' && item.stockNumber <= 0)
+                        "
+                      >
+                        <div class="timeSale">售罄</div>
+                      </div>
+                    </template>
                   </div>
                 </div>
               </div>
@@ -825,7 +825,7 @@ import {
   $getCacheOrder,
   $delOrder,
   $setUser,
-  $payOrder
+  $payOrder,
 } from "@/api/table";
 import { tbShopCategoryGet } from "@/api/shop";
 //判断商品是否可以下单
@@ -885,6 +885,8 @@ export default {
   },
   data() {
     return {
+      //true后付款false先付款
+      postPay: true,
       //是否打印
       isPrint: false,
       // 备注
@@ -1231,6 +1233,9 @@ export default {
     this.getCategory();
   },
   methods: {
+    changePostPay(val) {
+      this.postPay = val;
+    },
     //改变是否打印
     changeIsPrint(e) {
       console.log(e);
@@ -1286,15 +1291,23 @@ export default {
       this.isCreateOrder = false;
     },
     //生成订单
-    async toPay() {
+    async toCreateOrder() {
       const res = await $createOrder({
         masterId: this.order.masterId || this.masterId,
         vipUserId: this.vipUser.id,
         tableId: this.table.tableId,
         note: this.note.content,
       });
+      //后付款
+      if(this.postPay){
+        this.$notify({
+          title: "下单成功",
+          type: "success",
+        });
+        return this.close()
+      }
       this.createOrder.data = res;
-      const {masterId} = await this.getMasterId();
+      const { masterId } = await this.getMasterId();
       this.masterId = masterId;
       this.isCreateOrder = true;
     },
@@ -1805,9 +1818,9 @@ export default {
         this.skuGoods.number = skuGoods.suit || 1;
       }
     },
-    onclose(){
+    onclose() {
-      this.$emit('close')
+      this.$emit("close");
-      this.reset()
+      this.reset();
     },
     reset() {
       // this.goods.list = [];
@@ -2072,7 +2085,7 @@ export default {
     },
     close() {
       this.informationdialogshow = false;
-      this.$emit('close')
+      this.$emit("close");
     },
     resetCommodityArr() {
       this.commodityArr = [];