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

commit ee7d59566aa9dd58d81f4d9a7ade17d22bac7266
Author: zcx <1078327420@qq.com>
Date:   Wed May 15 10:18:52 2024 +0800

    修改上传文件结构

commit c143d6695789eea4dd11f36d84addab8880866c9
Author: zcx <1078327420@qq.com>
Date:   Wed May 15 10:12:58 2024 +0800

    1

commit d4b226f46ce33f8ccea6f52f707ef5ade672385a
Author: zcx <1078327420@qq.com>
Date:   Wed May 15 09:39:59 2024 +0800

    1

commit 18119839d90ceccd48f0bf9a23683e13ee27b2f1
Author: zcx <1078327420@qq.com>
Date:   Wed May 15 09:08:06 2024 +0800

    修改

commit 4ca319060a4750ce1c4b5937f859c3f790a667f1
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 21:41:25 2024 +0800

    1

commit 420c9925aa7e0edce937e031b50ca18e494369ba
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 21:00:08 2024 +0800

    修改文件结构

commit dece352494a0e93f3fd927b3dd31fc3f1e3bd0c3
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 19:47:44 2024 +0800

    1

commit c4de9ccc45f534c19f7a93e7b3ecb4ba3ce429e1
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 19:36:07 2024 +0800

    1

commit 05aefb2d5513312fb3e67747694a6988dca96507
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 19:28:09 2024 +0800

    1

commit 2991a0288ef452759322f6b875e990528b042786
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 19:24:16 2024 +0800

    1

commit f0a01dc52ae4f5b9116cf37645e7a165126ae287
Author: zcx <1078327420@qq.com>
Date:   Sun May 12 19:14:07 2024 +0800

    1

commit 103b91481dd79a631b6c7562405031171bdb11e7
Merge: 3f241a6 d73c814
Author: zcx <1078327420@qq.com>
Date:   Sat May 11 16:10:15 2024 +0800

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

# Conflicts:
#	src/前端/walktofree/src/components/new_file.vue
#	src/前端/walktofree/src/main.js
#	src/前端/walktofree/src/pages/Communication.vue
#	src/前端/walktofree/src/pages/Login.vue
#	src/前端/walktofree/src/pages/Pay.vue
#	src/前端/walktofree/src/pages/Register.vue
#	src/前端/walktofree/src/pages/SecurityVerification.vue
#	src/前端/walktofree/src/pages/addDemand.vue
#	src/前端/walktofree/src/pages/mine.vue
#	src/前端/walktofree/src/router/index.js
---
 .../walktofree/src/components/new_file.vue    |  45 +++++
 src/前端/walktofree/src/main.js             |   4 +-
 .../walktofree/src/pages/Communication.vue    | 122 +++++++++++
 src/前端/walktofree/src/pages/Login.vue     | 110 ++++++++++
 src/前端/walktofree/src/pages/Pay.vue       | 113 +++++++++++
 src/前端/walktofree/src/pages/Register.vue  | 118 +++++++++++
 .../src/pages/SecurityVerification.vue        | 116 +++++++++++
 src/前端/walktofree/src/pages/addDemand.vue |   8 +-
 src/前端/walktofree/src/pages/mine.vue      | 190 ++++++++++++++++++
 src/前端/walktofree/src/router/index.js     |  12 +-
 10 files changed, 830 insertions(+), 8 deletions(-)
 create mode 100644 src/前端/walktofree/src/components/new_file.vue
 create mode 100644 src/前端/walktofree/src/pages/Communication.vue
 create mode 100644 src/前端/walktofree/src/pages/Login.vue
 create mode 100644 src/前端/walktofree/src/pages/Pay.vue
 create mode 100644 src/前端/walktofree/src/pages/Register.vue
 create mode 100644 src/前端/walktofree/src/pages/SecurityVerification.vue
 create mode 100644 src/前端/walktofree/src/pages/mine.vue

diff --git a/src/前端/walktofree/src/components/new_file.vue b/src/前端/walktofree/src/components/new_file.vue
new file mode 100644
index 0000000..8862541
--- /dev/null
+++ b/src/前端/walktofree/src/components/new_file.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { format } from 'date-fns'
+const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
+const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
+watchEffect(() => {
+  console.log('startDateValue:', startDateValue.value)
+  console.log('endDateValue:', endDateValue.value)
+})
+</script>
+<template>
+	<VueDatePicker
+		placeholder="请选择预计出发日期"
+		:min-date="new Date()"
+		format="yyyy-MM-dd"
+		v-model="startDateValue" />
+	<VueDatePicker
+	  placeholder="请选择预计返回日期"
+	  :min-date="new Date()"
+	  format="yyyy-MM-dd"
+	  v-model="endDateValue" />
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { format } from 'date-fns'
+const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
+const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
+watchEffect(() => {
+  console.log('startDateValue:', startDateValue.value)
+  console.log('endDateValue:', endDateValue.value)
+})
+</script>
+<template>
+	<VueDatePicker
+		placeholder="请选择预计出发日期"
+		:min-date="new Date()"
+		format="yyyy-MM-dd"
+		v-model="startDateValue" />
+	<VueDatePicker
+	  placeholder="请选择预计返回日期"
+	  :min-date="new Date()"
+	  format="yyyy-MM-dd"
+	  v-model="endDateValue" />
+</template>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/main.js b/src/前端/walktofree/src/main.js
index e31ac65..afcb891 100644
--- a/src/前端/walktofree/src/main.js
+++ b/src/前端/walktofree/src/main.js
@@ -1,10 +1,10 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-import ElementPlus from 'element-plus';  
+import ElementPlus from 'element-plus';
 import 'element-plus/theme-chalk/index.css'; 
 import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css'
+import '@vuepic/vue-datepicker/dist/main.css';
 
 const app = createApp(App);
 app.use(ElementPlus);
diff --git a/src/前端/walktofree/src/pages/Communication.vue b/src/前端/walktofree/src/pages/Communication.vue
new file mode 100644
index 0000000..5626e2c
--- /dev/null
+++ b/src/前端/walktofree/src/pages/Communication.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="chat-container">
+    <div class="chat">
+      <h2 class="title">聊天室</h2>
+      <div class="chat-box">
+        <div v-for="(message, index) in messages" :key="index" class="message">
+          <span class="sender">{{ message.sender }}：</span>
+          <span class="content">{{ message.content }}</span>
+        </div>
+      </div>
+      <div class="input">
+        <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">
+        <button @click="sendMessage">发送</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      messages: [],
+      newMessage: '',
+    };
+  },
+  methods: {
+    async fetchMessages() {
+      try {
+        const response = await axios.get('http://example.com/messages');
+        this.messages = response.data;
+      } catch (error) {
+        console.error('Error fetching messages:', error);
+      }
+    },
+    async sendMessage() {
+      try {
+        await axios.post('http://example.com/messages', {
+          content: this.newMessage,
+          sender: 'Me', // You can replace 'Me' with the sender's name
+        });
+        this.newMessage = ''; // Clear the input field after sending
+        // You might want to fetch messages again here to update the UI with the latest messages
+      } catch (error) {
+        console.error('Error sending message:', error);
+      }
+    },
+    // WebSocket logic to receive messages
+    setupWebSocket() {
+      const ws = new WebSocket('ws://example.com/socket');
+      ws.onmessage = (event) => {
+        const message = JSON.parse(event.data);
+        this.messages.push(message);
+      };
+    },
+  },
+  created() {
+    this.fetchMessages(); // Fetch messages when the component is created
+    this.setupWebSocket(); // Setup WebSocket connection
+  },
+};
+</script>
+
+<style>
+.chat-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.chat {
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Ensure the chat box takes up the entire height */
+}
+
+.title {
+  margin-top: 0;
+}
+
+.chat-box {
+  flex: 1; /* Allow the chat box to grow and take up remaining space */
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.message {
+  margin-bottom: 10px;
+}
+
+.input {
+  display: flex;
+  margin-top: 10px;
+}
+
+.input input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.input button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.input button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/Login.vue b/src/前端/walktofree/src/pages/Login.vue
new file mode 100644
index 0000000..28ceb62
--- /dev/null
+++ b/src/前端/walktofree/src/pages/Login.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="login-container">
+    <h1>登录</h1>
+    <form @submit.prevent="login" class="login-form">
+      <label for="phone">手机号：</label>
+      <input type="text" id="phone" v-model="phone" class="input-field">
+      <br>
+      <label for="password">密码：</label>
+      <input type="password" id="password" v-model="password" class="input-field">
+      <br>
+      <button type="submit" class="submit-button">登录</button>
+      <button @click="goToRegister" class="register-button">注册</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #28a7a3;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.input-field {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #003f3f;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.register-button {
+  padding: 10px 20px;
+  background-color: #ff6347;
+  color: #003f3f;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>
+
+<script>
+import { login } from '../api/auth'
+import axios from "axios";
+
+export default { 
+  data() {
+    return {
+      phone: '',
+      password: ''
+    }
+  },
+  methods: {
+    login() {
+      console.log("手机号：", this.phone);
+      console.log("密码：", this.password);
+
+      axios.post('http://106.52.218.118:12607/Login/login', {
+        // 在请求体中传递用户名和密码字段
+        phone: this.phone,
+        password: this.password
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {   
+              if (response.data == 1) {  
+				sessionStorage.setItem('phone', this.phone);
+                // 登录成功，跳转到主页面  
+                this.$router.push('/home');   
+              }
+			  else if (response.data == 2) {
+			    alert('登录失败：账号或密码错误' );   
+			  } 
+			  else if(response.data == 3){  
+                alert('登录失败：账号未注册');  
+              }  
+			  else if(response.data == 0) {
+			    alert('登录失败：未知原因');  
+			  }
+			  else  {
+			    alert('登录失败：未知原因');  
+			  }
+            })  
+            .catch(error => {  
+              console.error(error);  
+              // 处理网络错误或服务器错误等  
+              alert('登录失败：网络错误或服务器错误');  
+            });  
+          },  
+    goToRegister() {
+      this.$router.push('/register'); // 跳转到注册页面
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/Pay.vue b/src/前端/walktofree/src/pages/Pay.vue
new file mode 100644
index 0000000..009134c
--- /dev/null
+++ b/src/前端/walktofree/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>
diff --git a/src/前端/walktofree/src/pages/Register.vue b/src/前端/walktofree/src/pages/Register.vue
new file mode 100644
index 0000000..f451a0b
--- /dev/null
+++ b/src/前端/walktofree/src/pages/Register.vue
@@ -0,0 +1,118 @@
+<template>  
+  <div class="register-container">  
+    <h1>注册</h1>  
+    <form @submit.prevent="register" class="register-form">  
+      <label for="phone">手机号：</label>  
+      <input type="phone" id="phone" v-model="phone" class="input-field">  
+      <br>  
+      <label for="password">密码：</label>  
+      <input type="password" id="password" v-model="password" class="input-field">  
+      <br>
+	  
+	  <label for="name">姓名：</label>
+	  <input type="name" id="name" v-model="name" class="input-field">  
+	  <br>
+	  
+	  <label for="IDcard">身份证号：</label>
+	  <input type="IDcard" id="IDcard" v-model="IDcard" class="input-field">  
+	  <br>  
+      
+	  <label for="nickname">昵称：</label>
+	  <input type="nickname" id="nickname" v-model="nickname" class="input-field">  
+	  <br>
+	  
+      <button type="submit" class="submit-button">注册</button>
+	  <button class="return-button" @click="gotoLogin()">返回登录</button>   
+    </form>  
+  </div>  
+</template>  
+  
+<style scoped>  
+.register-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 1px solid #cccc7b;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.input-field {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  background-color: #28a7a3;
+  color: #abd4ee;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.return-button {  
+  padding: 10px 20px;  
+  background-color: #ff6347; /* 例如，设置为红色 */  
+  color: white;  
+  border: none;  
+  border-radius: 5px;  
+  cursor: pointer;  
+  margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */  
+}  
+</style>
+
+<script>
+import { register } from '../api/auth'
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      phone: '',
+      password: '',
+	  name:'',
+	  nickname:'',
+	  IDcard:''
+    }
+  },
+  methods: {
+    register() {
+      console.log("：", this.phone);
+      console.log("密码：", this.password);
+	  console.log("姓名：",this.name);
+	  console.log("身份证号：",this.IDcard);
+	  console.log("昵称：",this.nickname);
+	  
+      axios.post('http://106.52.218.118:12607/Login/register', {
+        // 在请求体中传递用户名和密码字段
+        phone: this.phone,
+        password: this.password,
+		name:this.name,
+		IDCard:this.IDcard,
+		nickname:this.nickname
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+          .then(response => {
+            console.log(response.data)
+            // 处理注册成功后的逻辑
+            alert("注册成功");
+          })
+          .catch(error => {
+            console.error(error)
+            // 处理注册失败后的逻辑
+            alert("已注册");
+          })
+    },
+	gotoLogin(){
+		this.$router.push('/login');
+	},
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/SecurityVerification.vue b/src/前端/walktofree/src/pages/SecurityVerification.vue
new file mode 100644
index 0000000..811c2f4
--- /dev/null
+++ b/src/前端/walktofree/src/pages/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>
diff --git a/src/前端/walktofree/src/pages/addDemand.vue b/src/前端/walktofree/src/pages/addDemand.vue
index 121d1d6..e05152e 100644
--- a/src/前端/walktofree/src/pages/addDemand.vue
+++ b/src/前端/walktofree/src/pages/addDemand.vue
@@ -19,15 +19,15 @@ const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDa
 // 获取到JSON数据
 const getProvinceList = async () => {  
   const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')  
-  provinceList.value = res.data  
-  console.log(provinceList.value)  
+  provinceList.value = res.data;
+  console.log(provinceList.value);
 }
 const publish = () => {  
 // 在这里编写发布时需要执行的逻辑  
 	if(city.value!=''){
 		axios.post(`http://106.52.218.118:12607/users/pupdate`,{city:city.value,time:rangeValue.value,remark:remark.value})
 	    .then(response => {
-	      alert("发布成功")
+	      alert("发布成功");
 	    })
 	    .catch(error => {
 	      console.error('发布失败', error);
@@ -37,7 +37,7 @@ const publish = () => {
 	}
 };
 onBeforeMount(async()=>{
-  getProvinceList()
+  getProvinceList();
 })
 
 watchEffect(() => {
diff --git a/src/前端/walktofree/src/pages/mine.vue b/src/前端/walktofree/src/pages/mine.vue
new file mode 100644
index 0000000..ee48ea2
--- /dev/null
+++ b/src/前端/walktofree/src/pages/mine.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="profile">
+    <h2>个人主页</h2>
+	
+	<div v-if="showNicknameInput">
+	  <label for="nickname">昵称：</label>
+	  <input type="nickname" id="nickname" v-model="nickname" class="input-field">
+	  <button @click="updateNickname">保存</button>
+	</div>
+	<div v-else>
+	  <p>昵称：{{ user.nickname }}</p>
+	  <button @click="toggleNicknameInput">更换</button>
+	</div>
+	
+	
+    <div v-if="showEmailInput">
+      <label for="email">邮箱：</label>
+      <input type="email" id="email" v-model="email" class="input-field">
+      <button @click="updateEmail">保存</button>
+    </div>
+    <div v-else>
+      <p>邮箱：{{ user.email }}</p>
+      <button @click="toggleEmailInput">编辑</button>
+    </div>
+
+    <div v-if="showPhoneInput">
+      <label for="PhoneNumber">手机号：</label>
+      <input type="phone" id="phone" v-model="phone" class="input-field">
+      <button @click="updatePhone">保存</button>
+    </div>
+    <div v-else>
+      <p>手机号：{{ user.phone }}</p>
+      <button @click="togglePhoneInput">更换</button>
+    </div>
+	
+	<div class="footer-nav">
+	  <button @click="gotohome()">首页</button>  
+	  <button @click="gotomessage()">消息</button>  
+	  <button>我的</button>  
+	</div>
+	
+  </div>
+</template>
+
+<style scoped>
+/* 在这里添加样式 */
+.profile {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.input-field {
+  margin-bottom: 10px;
+}
+
+button {
+  margin-top: 10px;
+}
+
+.home-container {  
+    /* 添加你的样式 */  
+    text-align: center;  
+    padding: 20px;  
+    /* 可能需要为内容添加一些底部空间以容纳底部导航 */  
+    padding-bottom: 50px;  
+}  
+    
+.footer-nav {  
+    /* 定义底部导航的样式 */  
+    position: fixed;  
+    bottom: 0;  
+    left: 0;  
+    right: 0;  
+    display: flex;  
+    justify-content: space-around;  
+    padding: 10px;  
+    background-color: #f5f5f5; /* 示例背景色 */  
+}  
+    
+.footer-nav button {  
+    /* 定义按钮的样式 */  
+    flex: 1;  
+    border: none;  
+    padding: 10px;  
+    background-color: #ccc;  
+    color: #333;  
+    cursor: pointer;  
+}  
+    
+.footer-nav button:hover {  
+    /* 按钮点击时的样式 */  
+    background-color: #bbb;  
+}
+</style>
+
+<script>
+import axios from 'axios';
+
+
+export default {
+  data() {
+    return {
+      user: {},
+	  nickname:'',
+	  showNicknameInput: false,
+      email: '',
+      showEmailInput: false,
+      phone:sessionStorage.getItem('phone') || '',
+      showPhoneInput: false,
+      IDCard: '',
+      createtime: '',
+	  status: 0,
+    };
+  },
+  /*computed: {  
+      ...mapGetters(['getPhone']) 
+    },*/
+  created() {
+    this.fetchUser(this.phone);
+  },
+  methods: {
+    fetchUser(phone) {
+      // 从后端 API 请求
+      axios.get(`http://106.52.218.118:12607/users/getByPhone?phone=${phone}`)
+          .then(response => {
+            this.user = response.data;
+          })
+          .catch(error => {
+            console.error('Error fetching user:', error);
+          });
+    },
+	
+	toggleNicknameInput(){
+	  this.showNicknameInput = !this.showNicknameInput;
+	  this.nickname = this.user.nickname;
+	},
+	updateNickname(){
+		this.user.nickname = this.nickname;
+		axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+	      .then(response => {
+	        this.user.nickname = this.nickname;
+	        this.toggleNicknameInput(); // 切换回展示模式
+	      })
+	      .catch(error => {
+	        console.error('Error updating nickname:', error);
+	      });
+	},
+    toggleEmailInput() {
+      this.showEmailInput = !this.showEmailInput;
+      this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
+    },
+    updateEmail() {
+      // 这里发送请求更新用户邮箱
+	  this.user.email = this.email;
+      axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+          .then(response => {
+            this.user.email = this.email;
+            this.toggleEmailInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating email:', error);
+          });
+    },
+    togglePhoneInput(){
+      this.showPhoneInput = !this.showPhoneInput;
+      this.phone = this.user.phone;
+    },
+    updatePhone(){
+		this.user.phone = this.phone;
+      axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+          .then(response => {
+			sessionStorage.setItem('phone', this.phone);
+            this.user.phone = this.phone;
+            this.togglePhoneInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating phone:', error);
+          });
+    },
+	gotohome() {
+	  this.$router.push('/home'); 
+	},
+	gotomessage() {
+	  this.$router.push('/message'); 
+	},
+  }
+};
+</script>
+
diff --git a/src/前端/walktofree/src/router/index.js b/src/前端/walktofree/src/router/index.js
index d3cad07..afc07c4 100644
--- a/src/前端/walktofree/src/router/index.js
+++ b/src/前端/walktofree/src/router/index.js
@@ -4,9 +4,13 @@ import Register from '../pages/Register.vue';
 import Home from '../pages/HomePage.vue'; 
 import Mine from '../pages/mine.vue';
 import SearchPage from '../pages/searchPage.vue';
-import AddDemand from '../pages/addDemand.vue';
 import Test from '../pages/test.vue'
 import Communication from '../pages/Communication.vue'
+import Pay from "@/pages/Pay.vue";
+import addDemand from "@/pages/addDemand.vue";
+import DemandList from "@/pages/DemandList.vue";
+import Evaluation from "@/pages/Evaluation.vue";
+import SecurityVerification from "@/pages/SecurityVerification.vue";
 
 const routes = [  
     { path: '/', redirect: '/login' },  // 重定向到/login路径  
@@ -15,9 +19,13 @@ const routes = [
     { path: '/home', component: Home },
 	{ path: '/mine', component: Mine },
 	{ path: '/searchPage', component: SearchPage },
-	{ path: '/addDemandPage', component: AddDemand },
+	{ path: '/addDemandPage', component: addDemand },
 	{ path: '/test', component: Test },
 	{ path: '/message', component: Communication },
+    { path: '/pay', component:Pay},
+    { path: '/demandlist', component:DemandList},
+    { path: '/evaluation', component:Evaluation},
+    { path: '/SecurityVerification', component:SecurityVerification}
 ];  
   
 const router = createRouter({