This commit is contained in:
Chester.X 2024-07-03 01:30:40 +08:00
parent 46237d6283
commit e9c59574c5

View File

@ -2,20 +2,20 @@
<div class="profile-wrapper"> <div class="profile-wrapper">
<div class="profile-container"> <div class="profile-container">
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<el-tab-pane label="User Information" name="userInformation"></el-tab-pane> <el-tab-pane label="用户信息" name="userInformation"></el-tab-pane>
<el-tab-pane label="Profile" name="profile"></el-tab-pane> <el-tab-pane label="信息修改" name="profile"></el-tab-pane>
<el-tab-pane label="Change Password" name="changePassword"></el-tab-pane> <el-tab-pane label="更改密码" name="changePassword"></el-tab-pane>
</el-tabs> </el-tabs>
<div v-if="activeTab === 'userInformation'"> <div v-if="activeTab === 'userInformation'">
<h2>User Information</h2> <h2>用户信息</h2>
<div class="user-info"> <div class="user-info">
<div class="user-details"> <div class="user-details">
<p>Username: {{ user.username }}</p> <p>用户名: {{ user.username }}</p>
<p>Email: {{ user.email }}</p> <p>电子邮箱: {{ user.email }}</p>
<p>Phone Number: {{ user.phoneNumber }}</p> <p>电话号码: {{ user.phoneNumber }}</p>
<p>Company: {{ user.company }}</p> <p>所属企业: {{ user.company }}</p>
<p>Created Date: {{ user.createdDate }}</p> <p>创建日期: {{ user.createdDate }}</p>
</div> </div>
<div class="user-avatar"> <div class="user-avatar">
<img src= '@assets/avatar.jpg' alt="User Avatar" /> <img src= '@assets/avatar.jpg' alt="User Avatar" />
@ -24,40 +24,40 @@
</div> </div>
<div v-if="activeTab === 'profile'"> <div v-if="activeTab === 'profile'">
<h1>Profile</h1> <h2>信息修改</h2>
<el-form @submit.prevent="updateProfile" label-width="120px" class="profile-form"> <el-form @submit.prevent="updateProfile" label-width="120px" class="profile-form">
<el-form-item label="Username:"> <el-form-item label="用户名:">
<el-input v-model="user.username" id="username" disabled /> <el-input v-model="user.username" id="username" disabled />
</el-form-item> </el-form-item>
<el-form-item label="Email:"> <el-form-item label="电子邮箱:">
<el-input v-model="user.email" id="email" /> <el-input v-model="user.email" id="email" />
</el-form-item> </el-form-item>
<el-form-item label="Phone Number:"> <el-form-item label="电话号码:">
<el-input v-model="user.phoneNumber" id="phoneNumber" /> <el-input v-model="user.phoneNumber" id="phoneNumber" />
</el-form-item> </el-form-item>
<el-form-item label="Company:"> <el-form-item label="所属企业:">
<el-input v-model="user.company" id="company" /> <el-input v-model="user.company" id="company" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" native-type="submit">Update Profile</el-button> <el-button type="primary" native-type="submit">更新</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div v-if="activeTab === 'changePassword'"> <div v-if="activeTab === 'changePassword'">
<h2>Change Password</h2> <h2>更改密码</h2>
<el-form @submit.prevent="changePassword" label-width="120px" class="password-form"> <el-form @submit.prevent="changePassword" label-width="120px" class="password-form">
<el-form-item label="Old Password:"> <el-form-item label="旧密码:">
<el-input v-model="passwords.oldPassword" id="oldPassword" type="password" /> <el-input v-model="passwords.oldPassword" id="oldPassword" type="password" />
</el-form-item> </el-form-item>
<el-form-item label="New Password:"> <el-form-item label="新密码:">
<el-input v-model="passwords.newPassword" id="newPassword" type="password" /> <el-input v-model="passwords.newPassword" id="newPassword" type="password" />
</el-form-item> </el-form-item>
<el-form-item label="Confirm Password:"> <el-form-item label="再次确认:">
<el-input v-model="passwords.confirmPassword" id="confirmPassword" type="password" /> <el-input v-model="passwords.confirmPassword" id="confirmPassword" type="password" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" native-type="submit">Change Password</el-button> <el-button type="primary" native-type="submit">更改</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>