|
|
|
|
@ -1,339 +1,45 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="mine">
|
|
|
|
|
<h2>个人主页</h2>
|
|
|
|
|
<h1>{{ user.name }}</h1>
|
|
|
|
|
<!-- <h1>用户姓名</h1>-->
|
|
|
|
|
<p>创建时间：{{user.createtime}}</p>
|
|
|
|
|
<p>账号: {{ username }}</p>
|
|
|
|
|
<p>身份证号：{{user.IDCard}}</p>
|
|
|
|
|
<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 { ref, onMounted } from 'vue';
|
|
|
|
|
// 假设我们使用Axios进行HTTP请求
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Mine',
|
|
|
|
|
props: ['username'],
|
|
|
|
|
setup(props) {
|
|
|
|
|
const user = ref({}); // 使用ref替代data函数中的对象
|
|
|
|
|
const email = ref('');
|
|
|
|
|
const showEmailInput = ref(false);
|
|
|
|
|
const phone = ref('');
|
|
|
|
|
const showPhoneInput = ref(false);
|
|
|
|
|
|
|
|
|
|
// 使用onMounted替代created钩子
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
fetchUser(props.username);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 模拟fetchUser方法，使用Axios从服务器获取用户数据
|
|
|
|
|
async function fetchUser(username) {
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.get(`/api/users/${username}`);
|
|
|
|
|
user.value = response.data; // 假设服务器返回的用户数据格式与user对象匹配
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error fetching user:', error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 其他方法
|
|
|
|
|
function gotohome() {
|
|
|
|
|
router.push('/home');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotomessage() {
|
|
|
|
|
router.push('/message');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fetchUser(username) {
|
|
|
|
|
// 从后端 API 请求
|
|
|
|
|
axios.post(`http://192.168.254.35:8080/user/${username}`)
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.user = response.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error fetching user:', error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
toggleEmailInput() {
|
|
|
|
|
this.showEmailInput = !this.showEmailInput;
|
|
|
|
|
this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
|
|
|
|
|
},
|
|
|
|
|
updateEmail() {
|
|
|
|
|
// 这里发送请求更新用户邮箱
|
|
|
|
|
axios.put(`http://192.168.254.35:8080/user/${this.username}/email`, { email: this.email })
|
|
|
|
|
.then(response => {
|
|
|
|
|
alert(this.email);
|
|
|
|
|
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(){
|
|
|
|
|
axios.put(`http://192.168.254.35:8080/user/${this.username}/phone`, { phone: this.phone })
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.user.phone = this.phone;
|
|
|
|
|
this.togglePhoneInput(); // 切换回展示模式
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error updating phone:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
user,
|
|
|
|
|
email,
|
|
|
|
|
showEmailInput,
|
|
|
|
|
phone,
|
|
|
|
|
showPhoneInput,
|
|
|
|
|
gotohome,
|
|
|
|
|
gotomessage,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<div class="mine">
|
|
|
|
|
<h2>个人主页</h2>
|
|
|
|
|
<h1>{{ user.name }}</h1>
|
|
|
|
|
<!-- <h1>用户姓名</h1>-->
|
|
|
|
|
<p>创建时间：{{user.createtime}}</p>
|
|
|
|
|
<p>账号: {{ username }}</p>
|
|
|
|
|
<p>身份证号：{{user.IDCard}}</p>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Mine',
|
|
|
|
|
props: ['username'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
user: {}, // 初始化为空对象
|
|
|
|
|
email: '',
|
|
|
|
|
showEmailInput: false,
|
|
|
|
|
phone: '',
|
|
|
|
|
showPhoneInput: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.fetchUser(this.username);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
gotohome() {
|
|
|
|
|
this.$router.push('/home');
|
|
|
|
|
},
|
|
|
|
|
gotomessage() {
|
|
|
|
|
this.$router.push('/message');
|
|
|
|
|
},
|
|
|
|
|
fetchUser(username) {
|
|
|
|
|
// 从后端 API 请求
|
|
|
|
|
axios.post(`http://192.168.254.35:8080/user/${username}`)
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.user = response.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error fetching user:', error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
toggleEmailInput() {
|
|
|
|
|
this.showEmailInput = !this.showEmailInput;
|
|
|
|
|
this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
|
|
|
|
|
},
|
|
|
|
|
updateEmail() {
|
|
|
|
|
// 这里发送请求更新用户邮箱
|
|
|
|
|
axios.put(`http://192.168.254.35:8080/user/${this.username}/email`, { email: this.email })
|
|
|
|
|
.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(){
|
|
|
|
|
axios.put(`http://192.168.254.35:8080/user/${this.username}/phone`, { phone: this.phone })
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.user.phone = this.phone;
|
|
|
|
|
this.togglePhoneInput(); // 切换回展示模式
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error updating phone:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<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>
|
