online-order-h5/src/views/pos/checkout.vue

<template>
  <div class="pos-checkout">
    <van-nav-bar :title="$t('pos.checkout.title')" left-arrow @click-left="$router.back()" fixed placeholder />

    <div class="checkout-content">
      <!-- 订单金额 -->
      <div class="amount-card">
        <div class="label">{{ $t('pos.checkout.amountDue') }}</div>
        <div class="amount">¥{{ order.amount }}</div>
        <div class="order-info">{{ $t('pos.checkout.orderNo', { no: order.orderNo }) }}</div>
      </div>

      <!-- 支付方式 -->
      <div class="payment-methods">
        <div class="section-title">{{ $t('pos.checkout.paymentMethod') }}</div>
        <van-radio-group v-model="paymentMethod">
          <van-cell-group inset>
            <van-cell :title="$t('pos.checkout.methods.cash')" clickable @click="paymentMethod = 'cash'">
              <template #icon>
                <van-icon name="gold-coin" color="#ff976a" class="method-icon" />
              </template>
              <template #right-icon>
                <van-radio name="cash" />
              </template>
            </van-cell>
            <van-cell :title="$t('pos.checkout.methods.linePay')" clickable @click="paymentMethod = 'line'">
              <template #icon>
                <van-icon name="wechat-pay" color="#07c160" class="method-icon" />
              </template>
              <template #right-icon>
                <van-radio name="line" />
              </template>
            </van-cell>
            <van-cell :title="$t('pos.checkout.methods.card')" clickable @click="paymentMethod = 'card'">
              <template #icon>
                <van-icon name="card" color="#1989fa" class="method-icon" />
              </template>
              <template #right-icon>
                <van-radio name="card" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>

      <!-- 支付按钮 -->
      <div class="action-area">
        <van-button type="primary" block round size="large" @click="handleCheckout" :loading="loading">
          {{ $t('pos.checkout.confirm', { amount: order.amount }) }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const paymentMethod = ref('cash')

// 模拟订单数据
const order = ref({
  id: '',
  orderNo: '',
  amount: 0
})

onMounted(() => {
  const orderId = route.params.id as string
  // 实际项目中应根据 ID 获取订单详情
  // 这里使用 Mock 数据
  order.value = {
    id: orderId,
    orderNo: '2024011201',
    amount: 158
  }
})

const handleCheckout = async () => {
  loading.value = true
  
  // 模拟支付过程
  setTimeout(() => {
    loading.value = false
    showSuccessToast(t('pos.checkout.success'))
    
    // 支付成功后返回订单列表或详情
    // 实际项目中应更新订单状态
    setTimeout(() => {
      router.push('/pos/orders')
    }, 1500)
  }, 1000)
}
</script>

<style scoped>
.pos-checkout {
  min-height: 100vh;
  background: #f5f5f5;
}

.checkout-content {
  padding: 16px;
}

.amount-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.amount {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.order-info {
  font-size: 13px;
  color: #999;
}

.section-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  padding-left: 4px;
}

.method-icon {
  font-size: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.action-area {
  margin-top: 40px;
  padding: 0 16px;
}
</style>