|
|
@@ -69,7 +69,7 @@
|
|
|
</template>
|
|
|
<el-descriptions-item :label="t('mall.store')">{{ DetailData.shopName }}</el-descriptions-item>
|
|
|
<el-descriptions-item :label="t('mall.pickupNumber')" v-if="DetailData.orderType != 'due'">{{ DetailData.numberId }}</el-descriptions-item>
|
|
|
- <el-descriptions-item :label="t('mall.xxx')">{{ DetailData.deskNumber ? DetailData.deskNumber : t('public.none') }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item :label="t('mall.tableNumber')">{{ DetailData.deskNumber ? DetailData.deskNumber : t('public.none') }}</el-descriptions-item>
|
|
|
<el-descriptions-item :label="t('mall.numberOfDiners')" v-if="DetailData.orderType != 'due'">{{ DetailData.deskPeople ? DetailData.deskPeople : t('public.none') }}</el-descriptions-item>
|
|
|
<el-descriptions-item :label="t('mall.orderNo')">{{ DetailData.orderId }}</el-descriptions-item>
|
|
|
<el-descriptions-item :label="t('mall.reservationTime')" v-if="DetailData.orderType == 'due'">{{ formatDate(DetailData.dueTime) }}</el-descriptions-item>
|
|
|
@@ -101,12 +101,44 @@
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
<helpOrder ref="helpOrderRef" />
|
|
|
+
|
|
|
+ <!-- 支付方式选择对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="showPaymentDialog"
|
|
|
+ :title="t('mall.confirmOfflineCollection')"
|
|
|
+ width="400px"
|
|
|
+ class="payment-dialog"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="selectedPayment" class="payment-methods">
|
|
|
+ <el-radio label="cash" size="large" border>{{ t('mall.cashPayment') }}</el-radio>
|
|
|
+ <el-radio label="paypay" size="large" border>PayPay</el-radio>
|
|
|
+ <el-radio label="credit_card" size="large" border>{{ t('mall.creditCard') }}</el-radio>
|
|
|
+ <el-radio label="suica" size="large" border>Suica</el-radio>
|
|
|
+ <el-radio label="id" size="large" border>ID</el-radio>
|
|
|
+ <el-radio label="quick_pay" size="large" border>QuickPay</el-radio>
|
|
|
+ <el-radio label="rakuten_pay" size="large" border>{{ t('mall.rakutenPay') }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="showPaymentDialog = false">{{ t('common.cancel') }}</el-button>
|
|
|
+ <el-button type="primary" @click="confirmPayment">
|
|
|
+ {{ t('common.confirm') }}
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import * as StoreOrderApi from '@/api/mall/order/storeOrder'
|
|
|
import { formatDate } from '@/utils/formatTime'
|
|
|
import helpOrder from '@/views/mall/cashier/help.vue'
|
|
|
import * as CashierApi from '@/api/mall/cashier'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useI18n } from '@/hooks/web/useI18n'
|
|
|
+import type { PaymentData } from '@/api/mall/order/storeOrder'
|
|
|
+import { ElRadioGroup, ElRadio } from 'element-plus'
|
|
|
//const message = useMessage() // 消息弹窗
|
|
|
|
|
|
const { t } = useI18n() // 国际化
|
|
|
@@ -119,6 +151,9 @@ const logisticResult = ref({})
|
|
|
const product = ref([])
|
|
|
const addProductMark = ref(0)
|
|
|
const deskInfo = ref({})
|
|
|
+const selectedPayment = ref('cash')
|
|
|
+const showPaymentDialog = ref(false)
|
|
|
+const currentOrderId = ref<number | null>(null)
|
|
|
/** 打开弹窗 */
|
|
|
const open = async (desk) => {
|
|
|
drawer.value = true
|
|
|
@@ -148,14 +183,24 @@ const handlePay = async (id: number) => {
|
|
|
message.error(t('mall.pleasePlaceAnOrderFirst'))
|
|
|
return
|
|
|
}
|
|
|
+ currentOrderId.value = id
|
|
|
+ showPaymentDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const confirmPayment = async () => {
|
|
|
+ if (!selectedPayment.value) {
|
|
|
+ ElMessage.error(t('mall.pleaseSelectPaymentMethod'))
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
try {
|
|
|
- await message.confirm(t('mall.confirmOfflineCollection'))
|
|
|
- await StoreOrderApi.payStoreOrder(id)
|
|
|
+ await StoreOrderApi.payStoreOrder(currentOrderId.value!)
|
|
|
message.success(t('common.updateSuccess'))
|
|
|
-
|
|
|
+ showPaymentDialog.value = false
|
|
|
drawer.value = false
|
|
|
-
|
|
|
- } catch {}
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Payment error:', error)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const handlePrint = async (id) => {
|
|
|
@@ -189,4 +234,40 @@ const handlePrint = async (id) => {
|
|
|
.flex-column{ flex-direction:column!important; }
|
|
|
.ml-2 { margin-left: 20px; }
|
|
|
.mylabel {font-weight:bolder;text-align:center;font-size:18px}
|
|
|
+
|
|
|
+/* 支付方式选择对话框样式 */
|
|
|
+:deep(.payment-dialog) {
|
|
|
+ width: 400px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.payment-methods) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.payment-methods .el-radio.el-radio--large) {
|
|
|
+ width: 100%;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.payment-methods .el-radio.is-bordered) {
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.payment-methods .el-radio.is-bordered.is-checked) {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+ background: var(--el-color-primary-light-9);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-footer {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
</style>
|
