新界面

src/前端/walktofree/src/components/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>

src/前端/walktofree/src/components/SecurityVerification.vue

@@ -1,11 +1,116 @@
-<script setup>
+<template>
+  <div class="security-verification">
+    <h2>安全验证</h2>
+    <!-- 身份证号验证 -->
+    <div class="verification-item">
+      <label for="idCard">身份证号：</label>
+      <input type="text" id="idCard" v-model.trim="idCard" placeholder="请输入身份证号">
+      <button @click="verifyIdCard" :disabled="loading">验证</button>
+      <p v-if="idCardValid" class="valid-message">身份证号验证通过！</p>
+      <p v-else-if="idCard !== ''" class="invalid-message">请输入有效的身份证号！</p>
+    </div>
+    <!-- 银行卡号验证 -->
+    <div class="verification-item">
+      <label for="bankCard">银行卡号：</label>
+      <input type="text" id="bankCard" v-model.trim="bankCard" placeholder="请输入银行卡号">
+      <button @click="verifyBankCard" :disabled="loading">验证</button>
+      <p v-if="bankCardValid" class="valid-message">银行卡号验证通过！</p>
+      <p v-else-if="bankCard !== ''" class="invalid-message">请输入有效的银行卡号！</p>
+    </div>
+    <p v-if="error" class="error-message">{{ error }}</p>
+  </div>
+</template>
 
+<script>
+export default {
+  data() {
+    return {
+      idCard: '',
+      idCardValid: false,
+      bankCard: '',
+      bankCardValid: false,
+      loading: false,
+      error: ''
+    };
+  },
+  methods: {
+    verifyIdCard() {
+      this.loading = true;
+      // 模拟与后端接口通信
+      setTimeout(() => {
+        if (/^\d{17}[\dXx]$/.test(this.idCard)) {
+          this.idCardValid = true;
+          this.error = '';
+        } else {
+          this.idCardValid = false;
+          this.error = '请输入有效的身份证号！';
+        }
+        this.loading = false;
+      }, 1000); // 模拟1秒延迟
+    },
+    verifyBankCard() {
+      this.loading = true;
+      // 模拟与后端接口通信
+      setTimeout(() => {
+        if (/^\d{16,19}$/.test(this.bankCard)) {
+          this.bankCardValid = true;
+          this.error = '';
+        } else {
+          this.bankCardValid = false;
+          this.error = '请输入有效的银行卡号！';
+        }
+        this.loading = false;
+      }, 1000); // 模拟1秒延迟
+    }
+  }
+};
 </script>
 
-<template>
+<style scoped>
+.security-verification {
+  max-width: 600px;
+  margin: 0 auto;
+}
 
-</template>
+.verification-item {
+  margin-bottom: 20px;
+}
 
-<style scoped>
+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;
+}
+
+.valid-message {
+  color: #28a745;
+}
+
+.invalid-message {
+  color: #dc3545;
+}
 
-</style>
+.error-message {
+  color: #dc3545;
+}
+</style>