对接完毕下单

2024-03-04 15:48:40 +08:00
parent 6e796c1855
commit 27721ca096
21 changed files with 1010 additions and 237 deletions
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@@ -1,4 +1,5 @@
 <!-- 商品列表 -->
+
 <template>
    <div class="header">
        <div class="menus">
@@ -15,6 +16,7 @@
                    </el-icon>
                </div>
            </template>
+
            <template #default>
                <div class="popover_wrap">
                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
@@ -27,10 +29,11 @@
    </div>
    <div class="search_wrap">
        <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" style="width: 400px;" clearable
-                @input="inputChange"></el-input>
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" style="width: 400px;"
+                clearable @input="inputChange"></el-input>
        </div>
-        <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
+        <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
+            @click="changeShopListType"></el-button>
    </div>
    <div class="shop_list" :class="{ img: shopListType == 'img' }">
        <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
@@ -188,17 +191,14 @@ async function productqueryCommodityInfoAjax() {
 }

 // 更新商品数据
-function updateData() {
-    productqueryCommodityInfoAjax()
+async function updateData() {
+    await queryCategoryAjax()
+    await productqueryCommodityInfoAjax()
 }

 defineExpose({
    updateData
 })
-
-onMounted(async () => {
-    await queryCategoryAjax()
-})
 </script>

 <style scoped lang="scss">
--- a/src/views/home/components/pendingCartModal.vue
+++ b/src/views/home/components/pendingCartModal.vue
@@ -13,6 +13,9 @@
                    <span class="p">￥{{ item.totalAmount }}</span>
                </div>
            </div>
+            <div class="empty">
+                <el-empty description="暂无挂单" v-if="!cartList.length" />
+            </div>
        </div>
    </el-dialog>
 </template>
--- a/src/views/home/components/settleAccount.vue
+++ b/src/views/home/components/settleAccount.vue
@@ -1,8 +1,9 @@
 <!-- 结算订单 -->
+
 <template>
    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
        <div class="drawer_wrap">
-            <div class="cart_list" style="width: 500px;">
+            <div class="cart_list">
                <div class="nav_wrap card">
                    <div class="return" @click="dialogVisible = false">
                        <el-icon class="icon">
@@ -10,7 +11,7 @@
                        </el-icon>
                    </div>
                    <div class="info">
-                        <div class="master_id">#16</div>
+                        <div class="master_id">{{ props.masterId }}</div>
                        <div class="btm">
                            <span class="p">服务员：溜溜</span>
                            <span class="t">03-01 09:05</span>
@@ -41,17 +42,17 @@
                    </div>
                </div>
                <div class="footer">
-                    <el-button icon="Edit"></el-button>
+                    <!-- <el-button icon="Edit"></el-button> -->
                    <div class="button">
                        <el-checkbox v-model="isPrint" border label="打印结算小票" style="width: 100%;" />
                    </div>
                    <div class="print">
-                        <el-button type="primary">打印预结单</el-button>
+                        <el-button type="primary" @click="printHandle">打印预结单</el-button>
                    </div>
                </div>
            </div>
            <div class="pay_wrap">
-                <payCard />
+                <payCard :amount="props.amount" :orderId="props.orderId" @paySuccess="paySuccess" />
            </div>
        </div>
    </el-drawer>
@@ -59,7 +60,11 @@

 <script setup>
 import { ref } from 'vue'
-import payCard from '@/components/payCard.vue'
+import payCard from '@/components/payCard/payCard.vue'
+
+import { ipcRenderer } from 'electron'
+
+const emit = defineEmits('paySuccess')

 const dialogVisible = ref(false)
 const props = defineProps({
@@ -73,12 +78,38 @@ const props = defineProps({
    },
    remark: {
        type: String,
-        default: 0
+        default: ''
+    },
+    orderId: {
+        type: [String, Number],
+        default: ''
+    },
+    masterId: {
+        type: String,
+        default: ''
    }
 })

 const isPrint = ref(true)

+function printHandle() {
+    if (!isPrint.value) return
+    // const data = {
+    //     shop_name: '测试打印',
+    //     carts: props.cart,
+    //     amount: props.amount,
+    //     remark: props.remark
+    // }
+    ipcRenderer.sendSync('printerInfoSync', '测试打印')
+}
+
+// 订单已支付
+function paySuccess() {
+    dialogVisible.value = false
+    printHandle()
+    emit('paySuccess')
+}
+
 function show() {
    dialogVisible.value = true
 }
@@ -93,6 +124,7 @@ defineExpose({
    background-color: #efefef !important;
 }
 </style>
+
 <style scoped lang="scss">
 .drawer_wrap {
    width: 100%;
@@ -101,6 +133,8 @@ defineExpose({
    padding: 20px 0;

    .cart_list {
+        flex: 1;
+
        .nav_wrap {
            display: flex;
            align-items: center;
@@ -251,7 +285,7 @@ defineExpose({
    }

    .pay_wrap {
-        flex: 1;
+        flex: 1.5;
        padding-left: 20px;
    }
 }
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -23,8 +23,8 @@
      </div>
      <div class="shop_operation">
        <div class="shop_list">
-          <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList" :key="item.id"
-            @click="selectCartItemHandle(item, index)">
+          <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
+            :key="item.id" @click="selectCartItemHandle(item, index)">
            <div class="name_wrap">
              <span>{{ item.name }}</span>
              <span>￥{{ item.salePrice }}</span>
@@ -74,10 +74,14 @@
        <div class="btm">
          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
          <div class="button">
-            <el-button type="primary" style="width: 100%;" @click="settleAccountRef.show()">
+            <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
+              @click="createOrderHandle">
              <div class="js">
                <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
-                <el-text class="t" style="margin-left: 250px;">结算</el-text>
+                <el-text class="t" style="margin-left: 250px;">
+                  <span v-if="!createOrderLoading">结算</span>
+                  <span v-else>下单中...</span>
+                </el-text>
              </div>
            </el-button>
          </div>
@@ -90,15 +94,16 @@
    </div>
  </div>
  <!-- 备注 -->
-  <remarkModal ref="remarkRef" />
+  <remarkModal ref="remarkRef" @success="e => remark = e" />
  <!-- 修改取餐号 -->
  <takeFoodCode />
-  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
+  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
    <member :membershow="1"></member>
  </el-drawer>
  <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
  <!-- 结算订单 -->
-  <settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark" />
+  <settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark"
+    :orderId="orderId" :masterId="masterId" @paySuccess="createCodeAjax" />
  <!-- 挂起订单 -->
  <pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
 </template>
@@ -112,7 +117,7 @@ import cartOperation from '@/views/home/components/cartOperation.vue'
 import settleAccount from '@/views/home/components/settleAccount.vue'
 import pendingCartModal from '@/views/home/components/pendingCartModal.vue'

-import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearCart } from '@/api/product'
+import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearCart, createOrder } from '@/api/product'

 // 商品列表
 import goods from '@/views/home/components/goods.vue'
@@ -132,11 +137,32 @@ const cartListActive = ref(0)
 const cartList = ref([])
 const cartInfo = ref({})

+const orderId = ref('')
+const createOrderLoading = ref(false)
+
 // 取餐码
 const masterId = ref('')
 // 挂单量
 const pendingCartNum = ref(0)

+// 生成订单
+async function createOrderHandle() {
+  try {
+    createOrderLoading.value = true
+    const res = await createOrder({
+      masterId: masterId.value,
+      shopId: store.userInfo.shopId,
+      remark: remark.value
+    })
+    orderId.value = res
+    settleAccountRef.value.show()
+    createOrderLoading.value = false
+  } catch (error) {
+    console.log(error)
+    createOrderLoading.value = false
+  }
+}
+
 // 清空购物车
 async function clearCartHandle() {
  try {
@@ -168,7 +194,8 @@ async function pendingCart(params, status = true) {
    await cartStatus({
      shopId: store.userInfo.shopId,
      masterId: params.masterId,
-      status: status
+      status: status,
+      uuid: params.uuid
    })
    if (status && !cartList.value.length) createCodeAjax()
  } catch (error) {
@@ -232,7 +259,7 @@ async function addCart(params, type = 'add') {
    })
    masterId.value = res
    goodsRef.value.updateData()
-    queryCartAjax(type)
+    queryCartAjax()
  } catch (error) {
    console.log(error)
  }
@@ -258,8 +285,8 @@ async function queryCartAjax() {
 async function createCodeAjax() {
  try {
    const res = await createCode({ shopId: store.userInfo.shopId })
-    // masterId.value = res.code
-    masterId.value = '#51'
+    masterId.value = res.code
+    // masterId.value = '#13'
    queryCartAjax()
  } catch (error) {
    console.log(error)
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@@ -0,0 +1,37 @@
+<template>
+    <el-button @click="chooseSerial">选择扫码枪串口</el-button>
+    <el-input ref="inputRef" v-model="printValue" @keyup.enter="enterHandle" @input="inputHandle"></el-input>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, onMounted } from 'vue';
+
+const inputRef = ref(null)
+
+const printValue = ref('')
+
+function enterHandle() {
+    console.log('回车了')
+}
+
+const inputHandle = _.debounce(function (e) {
+    console.log('扫码枪输入完了', e)
+}, 100)
+
+//选择串口设备
+const chooseSerial = async () => {
+    if ('serial' in navigator) {
+        // await port.close();
+        console.log('当前浏览器支持serial')
+        const port = await navigator.serial.requestPort()
+        await port.open({ baudRate: 9600 })
+    }
+};
+
+onMounted(() => {
+    setTimeout(() => {
+        inputRef.value.focus()
+    }, 1000)
+})
+</script>