新增快捷收银

src/components/payCard/scanModal.vue

@@ -1,24 +1,34 @@
 <!-- 扫码弹窗 -->
 
 <template>
-    <div class="dialog">
-        <el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset">
-            <div class="content">
-                <div class="left">
-                    <el-image :src="icon" style="width: 60px;height: 60px;"></el-image>
-                </div>
-                <div class="right" v-if="!userPayWait">
-                    <div class="amount">
-                        <span class="t">扫码支付</span>
-                        <span class="n">{{ props.amount }}</span>
-                    </div>
-                    <div class="input">
-                        <el-input ref="inputRef" v-model="scanCode"
-                            style="height: calc(var(--el-component-size-large) + 30px);" placeholder="请扫描付款码" clearable
-                            @change="inputChange"></el-input>
-                        <div class="tips">注意：扫码支付请保证输入框获得焦点</div>
-                    </div>
-                    <!-- <div class="number_warp">
+  <div class="dialog">
+    <el-dialog
+      title="扫码支付"
+      width="600"
+      v-model="dialogVisible"
+      @open="reset"
+    >
+      <div class="content">
+        <div class="left">
+          <el-image :src="icon" style="width: 60px; height: 60px"></el-image>
+        </div>
+        <div class="right" v-if="!userPayWait">
+          <div class="amount">
+            <span class="t">扫码支付</span>
+            <span class="n">{{ props.amount }}</span>
+          </div>
+          <div class="input">
+            <el-input
+              ref="inputRef"
+              v-model="scanCode"
+              style="height: calc(var(--el-component-size-large) + 30px)"
+              placeholder="请扫描付款码"
+              clearable
+              @change="inputChange"
+            ></el-input>
+            <div class="tips">注意：扫码支付请保证输入框获得焦点</div>
+          </div>
+          <!-- <div class="number_warp">
                         <div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
                         <div class="item disabled">.</div>
                         <div class="item" @click="inputHandle(0)">0</div>
@@ -28,136 +38,169 @@
                             </el-icon>
                         </div>
                     </div> -->
-                    <div class="btn">
-                        <el-button type="primary" style="width: 100%;" v-loading="loading"
-                            @click="submitHandle">立即支付</el-button>
-                    </div>
-                </div>
-                <div class="pay_wait" v-else>
-                    <div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
-                    <div class="btn">
-                        <el-button type="primary" style="width: 100%;" v-loading="checkPayStatusLoading"
-                            @click="checkPayStauts">
-                            <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
-                            <span v-else>查询中...</span>
-                        </el-button>
-                    </div>
-                    <div class="btn">
-                        <el-button style="width: 100%;" @click="resetScanCode">重新扫码</el-button>
-                    </div>
-                </div>
-            </div>
-        </el-dialog>
-    </div>
+          <div class="btn">
+            <el-button
+              type="primary"
+              style="width: 100%"
+              v-loading="loading"
+              @click="submitHandle"
+              >立即支付</el-button
+            >
+          </div>
+        </div>
+        <div class="pay_wait" v-else>
+          <div
+            class="loading"
+            v-loading="loading"
+            element-loading-text="用户支付中..."
+          ></div>
+          <div class="btn">
+            <el-button
+              type="primary"
+              style="width: 100%"
+              v-loading="checkPayStatusLoading"
+              @click="checkPayStauts"
+            >
+              <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
+              <span v-else>查询中...</span>
+            </el-button>
+          </div>
+          <div class="btn">
+            <el-button style="width: 100%" @click="resetScanCode"
+              >重新扫码</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import _ from 'lodash'
-import { ref } from 'vue'
-import icon from '@/assets/icon_scan.png'
-import { scanpay, queryOrder } from '@/api/pay'
-import { useUser } from "@/store/user.js"
-const store = useUser()
-import { queryMembermember, createMembermember, membermemberScanPay, accountPaymember } from '@/api/member/index.js'
+import _ from "lodash";
+import { ref } from "vue";
+import icon from "@/assets/icon_scan.png";
+import { scanpay, queryOrder, quickPay } from "@/api/pay";
+import { useUser } from "@/store/user.js";
+const store = useUser();
+import {
+  queryMembermember,
+  createMembermember,
+  membermemberScanPay,
+  accountPaymember,
+} from "@/api/member/index.js";
 import { ElMessage } from "element-plus";
-const emits = defineEmits(['success'])
+const emits = defineEmits(["success"]);
 
 const props = defineProps({
-    amount: {
-        type: [Number, String],
-        default: 0
-    },
-    selecttype: {
-        type: Number,
-        default: 0
-    },
-    orderId: {
-        type: [Number, String],
-        default: ''
-    }
-})
+  amount: {
+    type: [Number, String],
+    default: 0,
+  },
+  selecttype: {
+    type: Number,
+    default: 0,
+  },
+  orderId: {
+    type: [Number, String],
+    default: "",
+  },
+  fast: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-const dialogVisible = ref(false)
-const scanCode = ref('')
-const inputRef = ref(null)
+const dialogVisible = ref(false);
+const scanCode = ref("");
+const inputRef = ref(null);
 
-const loading = ref(false)
-const userPayWait = ref(false)
-const checkPayStatusLoading = ref(false)
+const loading = ref(false);
+const userPayWait = ref(false);
+const checkPayStatusLoading = ref(false);
 
 // 提交扫码支付
 async function submitHandle() {
-    try {
-        if (!scanCode.value) return
-        loading.value = true
-        if (props.selecttype == 1) {
-            await membermemberScanPay({
-                shopId: store.userInfo.shopId,
-                memberId: props.orderId,
-                amount: props.amount,
-                authCode: scanCode.value
-            })
-        } else {
-            await scanpay({
-                orderId: props.orderId,
-                authCode: scanCode.value
-            })
-        }
-
-        loading.value = false
-        scanCode.value = ''
-        ElMessage.success('支付成功')
-        dialogVisible.value = false
-        emits('success')
-    } catch (error) {
-        if (error.code === '100015') {
-            userPayWait.value = true
-        } else {
-            loading.value = false
-            console.log(error)
-        }
+  try {
+    if (!scanCode.value) return;
+    loading.value = true;
+    if (props.selecttype == 1) {
+      await membermemberScanPay({
+        shopId: store.userInfo.shopId,
+        memberId: props.orderId,
+        amount: props.amount,
+        authCode: scanCode.value,
+      });
+    } else {
+      if (props.fast) {
+        await quickPay({
+          amount: props.amount,
+          authCode: scanCode.value,
+          payType: "scanCode",
+        });
+      } else {
+        await scanpay({
+          orderId: props.orderId,
+          authCode: scanCode.value,
+        });
+      }
     }
+
+    loading.value = false;
+    scanCode.value = "";
+    ElMessage.success("支付成功");
+    dialogVisible.value = false;
+    emits("success");
+  } catch (error) {
+    if (error.code === "100015") {
+      userPayWait.value = true;
+    } else {
+      loading.value = false;
+      console.log(error);
+    }
+  }
 }
 
 // 查询用户支付状态
 async function checkPayStauts() {
-    try {
-        const res = await queryOrder({ orderId: props.orderId })
-        if (res.status == 'closed') {
-            ElMessage.success('支付成功')
-            emits('success')
-            return
-        } if (res.status == 'paying') {
-            ElMessage.warning('用户支付中...')
-            return
-        } else {
-            ElMessage.error(res.payRemark || '支付失败！')
-            return
-        }
-    } catch (error) {
-        console.log(error)
+  try {
+    const res = await queryOrder({ orderId: props.orderId });
+    if (res.status == "closed") {
+      ElMessage.success("支付成功");
+      emits("success");
+      return;
     }
+    if (res.status == "paying") {
+      ElMessage.warning("用户支付中...");
+      return;
+    } else {
+      ElMessage.error(res.payRemark || "支付失败！");
+      return;
+    }
+  } catch (error) {
+    console.log(error);
+  }
 }
 
 // 重新扫码
 function resetScanCode() {
-    userPayWait.value = false
-    loading.value = false
-    scanCode.value = ''
-    inputRef.value.focus()
+  userPayWait.value = false;
+  loading.value = false;
+  scanCode.value = "";
+  inputRef.value.focus();
 }
 
 // 输入
 function inputHandle(n) {
-    scanCode.value += n
-    inputRef.value.focus()
+  scanCode.value += n;
+  inputRef.value.focus();
 }
 
 // 删除
 function delHandle() {
-    if (!scanCode.value) return
-    scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1)
-    inputRef.value.focus()
+  if (!scanCode.value) return;
+  scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1);
+  inputRef.value.focus();
 }
 
 // 监听扫码枪回车事件
@@ -166,139 +209,138 @@ function delHandle() {
 // }
 
 const inputChange = _.debounce(function (e) {
-    // console.log(e);
-    submitHandle()
-}, 500)
+  // console.log(e);
+  submitHandle();
+}, 500);
 
 function show() {
-    dialogVisible.value = true
-    setTimeout(() => {
-        inputRef.value.focus()
-    }, 500)
+  dialogVisible.value = true;
+  setTimeout(() => {
+    inputRef.value.focus();
+  }, 500);
 }
 
 function close() {
-    dialogVisible.value = false
+  dialogVisible.value = false;
 }
 
 function reset() {
-    loading.value = false
-    scanCode.value = ''
+  loading.value = false;
+  scanCode.value = "";
 }
 
 defineExpose({
-    show,
-    close,
-    loading
-})
+  show,
+  close,
+  loading,
+});
 </script>
 
 <style scoped lang="scss">
 .tips {
-    padding-top: 10px;
-    color: #999;
+  padding-top: 10px;
+  color: #999;
 }
 
 .dialog :deep(.el-dialog__body) {
-    padding: 0 !important;
+  padding: 0 !important;
 }
 
 .content {
+  display: flex;
+
+  .left {
+    width: 200px;
     display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #efefef;
+  }
 
-    .left {
-        width: 200px;
+  .right {
+    flex: 1;
+    padding: var(--el-font-size-base);
+
+    .amount {
+      display: flex;
+      height: calc(var(--el-component-size-large) + 20px);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--primary-color);
+      background-color: #555;
+      border-radius: 6px;
+      padding: 0 var(--el-font-size-base);
+      font-size: calc(var(--el-font-size-base) + 10px);
+    }
+
+    .input {
+      padding: var(--el-font-size-base) 0;
+
+      :deep(.el-input__inner) {
+        font-size: calc(var(--el-font-size-base) + 10px);
+      }
+    }
+
+    .number_warp {
+      --h: 50px;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: var(--h) var(--h) var(--h) var(--h);
+      gap: 8px;
+
+      .item {
+        background-color: #dddddd;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: #efefef;
+        font-size: calc(var(--el-font-size-base) + 10px);
+        border-radius: 4px;
+
+        &.disabled {
+          color: #999;
+          background-color: #efefef;
+
+          &:active {
+            background-color: #efefef;
+          }
+        }
+
+        &:active {
+          background-color: #b9b9b9;
+        }
+      }
     }
 
-    .right {
-        flex: 1;
-        padding: var(--el-font-size-base);
+    // .btn {
+    //     padding-top: 20px;
+    // }
+  }
 
-        .amount {
-            display: flex;
-            height: calc(var(--el-component-size-large) + 20px);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            color: var(--primary-color);
-            background-color: #555;
-            border-radius: 6px;
-            padding: 0 var(--el-font-size-base);
-            font-size: calc(var(--el-font-size-base) + 10px);
-        }
+  .pay_wait {
+    flex: 1;
+    padding: 0 var(--el-font-size-base);
+    height: 400px;
+    padding-bottom: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-        .input {
-            padding: var(--el-font-size-base) 0;
+    .loading {
+      width: 200px;
+      height: 200px;
+      --el-loading-spinner-size: 100px;
 
-            :deep(.el-input__inner) {
-                font-size: calc(var(--el-font-size-base) + 10px);
-            }
-        }
-
-        .number_warp {
-            --h: 50px;
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-template-rows: var(--h) var(--h) var(--h) var(--h);
-            gap: 8px;
-
-            .item {
-                background-color: #dddddd;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: calc(var(--el-font-size-base) + 10px);
-                border-radius: 4px;
-
-                &.disabled {
-                    color: #999;
-                    background-color: #efefef;
-
-                    &:active {
-                        background-color: #efefef;
-                    }
-
-                }
-
-                &:active {
-                    background-color: #b9b9b9;
-                }
-            }
-        }
-
-        // .btn {
-        //     padding-top: 20px;
-        // }
+      :deep(.el-loading-text) {
+        font-size: 20px;
+      }
     }
 
-    .pay_wait {
-        flex: 1;
-        padding: 0 var(--el-font-size-base);
-        height: 400px;
-        padding-bottom: 100px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        .loading {
-            width: 200px;
-            height: 200px;
-            --el-loading-spinner-size: 100px;
-
-            :deep(.el-loading-text) {
-                font-size: 20px;
-            }
-        }
-
-        .btn {
-            width: 200px;
-            padding-top: var(--el-font-size-base);
-        }
+    .btn {
+      width: 200px;
+      padding-top: var(--el-font-size-base);
     }
+  }
 }
-</style>
+</style>