1

src/前端/src/pages/Pay.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="payment">
+    <h2>支付订单</h2>
+    <div class="order-summary">
+      <p>订单金额: {{ orderAmount }} 元</p>
+    </div>
+    <div class="payment-form">
+      <label for="cardNumber">银行卡号：</label>
+      <input type="text" id="cardNumber" v-model.trim="cardNumber" placeholder="请输入银行卡号">
+      <label for="expiry">到期日期：</label>
+      <input type="text" id="expiry" v-model.trim="expiry" placeholder="MM/YY">
+      <label for="cvv">CVV：</label>
+      <input type="text" id="cvv" v-model.trim="cvv" placeholder="请输入CVV">
+      <button @click="submitPayment" :disabled="loading">支付</button>
+      <p v-if="error" class="error-message">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      orderAmount: 100, // 假设订单金额为100元
+      cardNumber: '',
+      expiry: '',
+      cvv: '',
+      loading: false,
+      error: ''
+    };
+  },
+  methods: {
+    submitPayment() {
+      // 模拟与后端支付接口通信
+      this.loading = true;
+      const paymentData = {
+        cardNumber: this.cardNumber,
+        expiry: this.expiry,
+        cvv: this.cvv,
+        amount: this.orderAmount
+      };
+      // 假设支付接口的地址为 '/api/payment'
+      fetch('/api/payment', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(paymentData)
+      })
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('支付失败，请稍后重试。');
+            }
+            return response.json();
+          })
+          .then(data => {
+            // 支付成功，可以根据返回的数据进行相应处理，比如跳转到订单成功页面
+            console.log('支付成功:', data);
+            this.error = '';
+          })
+          .catch(error => {
+            // 支付失败，显示错误信息
+            console.error('支付失败:', error.message);
+            this.error = error.message;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.payment {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.order-summary {
+  margin-bottom: 20px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input {
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.error-message {
+  color: #dc3545;
+}
+</style>