From 1767a27da7612f954512bf3862525aa5fa27e9ef Mon Sep 17 00:00:00 2001
From: zcx <1078327420@qq.com>
Date: Fri, 10 May 2024 11:08:47 +0800
Subject: [PATCH] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit d83686a0121b3c28d5dca3681f595065459d055b
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 11:06:40 2024 +0800

    新界面

commit 977b40cd4f07c43cc1c76137bda1c82382d63ff7
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:44:28 2024 +0800

    新的页面代码

commit 548cc49c7d09fd8a1333515c92c1a91be57e884e
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:20:18 2024 +0800

    聊天界面初始版

commit ff3952859f3f26c3d0675ddbe509d8e284525c28
Merge: 7b44e8a c656856
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:15:56 2024 +0800

    Merge branch 'develop' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

    # Conflicts:
    #	doc/自由同行-软件需求构思及描述.docx

commit 7b44e8a34862a9e481bf0eade4c864d4afa50ecd
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:12:14 2024 +0800

    1

commit 5e48c1f463ef8e7aa9e7da5779f1722856434733
Merge: 167bb2d bfb34b1
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:10:13 2024 +0800

    Merge branch '曾晨曦_branch' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

    # Conflicts:
    #	doc/“自由同行”软件需求规格说明书.docx

commit 167bb2d2736df8c57737bb0c3a7429c911ece321
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:09:46 2024 +0800

    前端代码初始版

commit e5d34887348cb63335547c4bb7b81d541782d905
Author: zcx <1078327420@qq.com>
Date:   Sun Mar 31 11:48:46 2024 +0800

    更新

commit bfb34b10a2726c5bb01fe6a9624426e0425b5753
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:15:48 2024 +0800

    需求规格说明书

commit 26f7946e45493f75de5ebd84a9832ac213b2961f
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:08:14 2024 +0800

    1

commit 31f1339042f1c0e92afeaece7d2d0536858df570
Merge: 3671794 9d34b69
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:07:41 2024 +0800

    Merge branch 'develop' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

commit 36717942eb9c0ad9792a0d5156ba146ed7b6d86f
Author: zcx <1078327420@qq.com>
Date:   Thu Mar 21 15:50:06 2024 +0800

    用例图

# Conflicts:
#	src/前端/walktofree/src/components/SecurityVerification.vue
---
 src/前端/walktofree/src/components/Pay.vue  | 113 +++++++++++++++++
 .../src/components/SecurityVerification.vue   | 116 ++++++++++++++++++
 2 files changed, 229 insertions(+)
 create mode 100644 src/前端/walktofree/src/components/Pay.vue
 create mode 100644 src/前端/walktofree/src/components/SecurityVerification.vue

diff --git a/src/前端/walktofree/src/components/Pay.vue b/src/前端/walktofree/src/components/Pay.vue
new file mode 100644
index 0000000..009134c
--- /dev/null
+++ b/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>
diff --git a/src/前端/walktofree/src/components/SecurityVerification.vue b/src/前端/walktofree/src/components/SecurityVerification.vue
new file mode 100644
index 0000000..811c2f4
--- /dev/null
+++ b/src/前端/walktofree/src/components/SecurityVerification.vue
@@ -0,0 +1,116 @@
+<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>
+
+<style scoped>
+.security-verification {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.verification-item {
+  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;
+}
+
+.valid-message {
+  color: #28a745;
+}
+
+.invalid-message {
+  color: #dc3545;
+}
+
+.error-message {
+  color: #dc3545;
+}
+</style>