|
|
@@ -1,138 +1,135 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, computed} from 'vue';
|
|
|
- import {userInfo, userInfoUpdate} from '../../api/user.ts'
|
|
|
+import {ref, computed} from 'vue';
|
|
|
+import {userInfo, userInfoUpdate} from '../../api/user.ts'
|
|
|
import {router} from '../../router'
|
|
|
import {UserFilled} from "@element-plus/icons-vue";
|
|
|
|
|
|
- const name = ref('')
|
|
|
- const tel = ref('')
|
|
|
- const address = ref('')
|
|
|
- const regTime = ref()
|
|
|
+const name = ref('')
|
|
|
+const tel = ref('')
|
|
|
+const address = ref('')
|
|
|
+const regTime = ref()
|
|
|
|
|
|
- const displayInfoCard = ref(false)
|
|
|
+const displayInfoCard = ref(false)
|
|
|
|
|
|
- const password = ref('')
|
|
|
- const confirmPassword = ref('')
|
|
|
+const password = ref('')
|
|
|
+const confirmPassword = ref('')
|
|
|
|
|
|
- const hasPasswordInput = computed(() => password.value != '');
|
|
|
- const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
|
|
|
- const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
|
|
|
+const hasPasswordInput = computed(() => password.value != '');
|
|
|
+const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
|
|
|
+const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
|
|
|
|
|
|
- const isCustomer = ref('true')
|
|
|
- const isStaff = ref('false')
|
|
|
+const isCustomer = ref('true')
|
|
|
+const isStaff = ref('false')
|
|
|
|
|
|
+userInfo()
|
|
|
+ .then(res => {
|
|
|
+ console.log(res)
|
|
|
|
|
|
- userInfo()
|
|
|
- .then(res => {
|
|
|
- console.log(res)
|
|
|
+ name.value = res.result.name
|
|
|
+ tel.value = res.result.phone
|
|
|
+ address.value = res.result.address
|
|
|
+ regTime.value = parseTime(res.result.createTime)
|
|
|
|
|
|
- name.value = res.result.name
|
|
|
- tel.value = res.result.phone
|
|
|
- address.value = res.result.address
|
|
|
- regTime.value = res.result.createTime
|
|
|
-
|
|
|
- isCustomer.value = (res.result.role == 'CUSTOMER')
|
|
|
- isStaff.value = (res.result.role == 'STAFF')
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.error(e.message)
|
|
|
- //todo: 处理错误
|
|
|
- })
|
|
|
+ isCustomer.value = (res.result.role == 'CUSTOMER')
|
|
|
+ isStaff.value = (res.result.role == 'STAFF')
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.error(e.message)
|
|
|
+ //todo: 处理错误
|
|
|
+ })
|
|
|
|
|
|
+function updateInfo() {
|
|
|
|
|
|
+ const payload = {
|
|
|
+ name: name.value,
|
|
|
+ password: null,
|
|
|
+ address: address.value,
|
|
|
+ }
|
|
|
|
|
|
- function updateInfo() {
|
|
|
-
|
|
|
- const payload = {
|
|
|
- name: name.value,
|
|
|
- password: null,
|
|
|
- address: address.value,
|
|
|
- }
|
|
|
-
|
|
|
- userInfoUpdate(payload)
|
|
|
- .then(() => {
|
|
|
- ElMessage({
|
|
|
- customClass: 'customMessage',
|
|
|
- type: 'success',
|
|
|
- message: '更新成功!',
|
|
|
- })
|
|
|
+ userInfoUpdate(payload)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage({
|
|
|
+ customClass: 'customMessage',
|
|
|
+ type: 'success',
|
|
|
+ message: '更新成功!',
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- console.error(e.message)
|
|
|
- ElMessage({
|
|
|
- customClass: 'customMessage',
|
|
|
- type: 'error',
|
|
|
- message: '更新失败!',
|
|
|
- })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.error(e.message)
|
|
|
+ ElMessage({
|
|
|
+ customClass: 'customMessage',
|
|
|
+ type: 'error',
|
|
|
+ message: '更新失败!',
|
|
|
})
|
|
|
- .finally(() =>{
|
|
|
- userInfo().then(res => {
|
|
|
- name.value = res.result.name
|
|
|
- })
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ userInfo().then(res => {
|
|
|
+ name.value = res.result.name
|
|
|
})
|
|
|
- }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- function updatePassword() {
|
|
|
+function updatePassword() {
|
|
|
|
|
|
- const payload = {
|
|
|
- name: null,
|
|
|
- password: password.value,
|
|
|
- address: null
|
|
|
- }
|
|
|
+ const payload = {
|
|
|
+ name: null,
|
|
|
+ password: password.value,
|
|
|
+ address: null
|
|
|
+ }
|
|
|
|
|
|
- userInfoUpdate(payload)
|
|
|
- .then(() => {
|
|
|
+ userInfoUpdate(payload)
|
|
|
+ .then(() => {
|
|
|
|
|
|
- ElMessageBox.alert(
|
|
|
- `请重新登录`,
|
|
|
- '修改成功',
|
|
|
- {
|
|
|
- customClass: "customDialog",
|
|
|
- confirmButtonText: '跳转到登录',
|
|
|
- type: "success",
|
|
|
- showClose: false,
|
|
|
- roundButton: true,
|
|
|
- center: true
|
|
|
+ ElMessageBox.alert(
|
|
|
+ `请重新登录`,
|
|
|
+ '修改成功',
|
|
|
+ {
|
|
|
+ customClass: "customDialog",
|
|
|
+ confirmButtonText: '跳转到登录',
|
|
|
+ type: "success",
|
|
|
+ showClose: false,
|
|
|
+ roundButton: true,
|
|
|
+ center: true
|
|
|
|
|
|
- }).then(() => router.push({ path: "/login" }))
|
|
|
+ }).then(() => router.push({path: "/login"}))
|
|
|
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.error(e.message)
|
|
|
+ ElMessage({
|
|
|
+ customClass: 'customMessage',
|
|
|
+ type: 'error',
|
|
|
+ message: '更新失败!',
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- console.error(e.message)
|
|
|
- ElMessage({
|
|
|
- customClass: 'customMessage',
|
|
|
- type: 'error',
|
|
|
- message: '更新失败!',
|
|
|
- })
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- password.value = ''
|
|
|
- confirmPassword.value = ''
|
|
|
- })
|
|
|
- }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ password.value = ''
|
|
|
+ confirmPassword.value = ''
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
+function parseTime(time) {
|
|
|
+ let times = time.split(/T|\./)
|
|
|
+ return times[0] + " " + times[1]
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <el-main class="main-container">
|
|
|
-
|
|
|
-
|
|
|
- <el-card class="aside-card">
|
|
|
-
|
|
|
- <div class="avatar-area">
|
|
|
- <el-avatar :icon="UserFilled" :size="80">
|
|
|
- </el-avatar>
|
|
|
-
|
|
|
- <span class="avatar-text"> 欢迎您,{{name}}</span>
|
|
|
- </div>
|
|
|
+ <el-main class="main-container">
|
|
|
+ <el-card class="aside-card">
|
|
|
+ <div class="avatar-area">
|
|
|
+ <el-avatar :icon="UserFilled" :size="80">
|
|
|
+ </el-avatar>
|
|
|
+ <span class="avatar-text"> 欢迎您,{{ name }}</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-divider></el-divider>
|
|
|
+ <el-divider></el-divider>
|
|
|
|
|
|
- <el-descriptions
|
|
|
+ <el-descriptions
|
|
|
:column="1"
|
|
|
border
|
|
|
title="个人信息"
|
|
|
- >
|
|
|
+ >
|
|
|
<template #extra>
|
|
|
<el-button type="primary"
|
|
|
@click="displayInfoCard = displayInfoCard === false;">
|
|
|
@@ -141,88 +138,89 @@ import {UserFilled} from "@element-plus/icons-vue";
|
|
|
</el-button>
|
|
|
</template>
|
|
|
|
|
|
- <el-descriptions-item label="身份">
|
|
|
- <el-tag v-if="isCustomer">顾客</el-tag>
|
|
|
- <el-tag v-else-if="isStaff">工作人员</el-tag>
|
|
|
- </el-descriptions-item>
|
|
|
-
|
|
|
- <el-descriptions-item label="联系电话">
|
|
|
- {{tel}}
|
|
|
- </el-descriptions-item>
|
|
|
-
|
|
|
- <el-descriptions-item label="地址">
|
|
|
- {{address}}
|
|
|
- </el-descriptions-item>
|
|
|
-
|
|
|
- <el-descriptions-item label="注册时间">
|
|
|
- {{regTime}}
|
|
|
- </el-descriptions-item>
|
|
|
-
|
|
|
- </el-descriptions>
|
|
|
+ <el-descriptions-item label="身份">
|
|
|
+ <el-tag v-if="isCustomer">顾客</el-tag>
|
|
|
+ <el-tag v-else-if="isStaff">工作人员</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
|
|
|
+ <el-descriptions-item label="联系电话">
|
|
|
+ {{ tel }}
|
|
|
+ </el-descriptions-item>
|
|
|
|
|
|
+ <el-descriptions-item label="地址">
|
|
|
+ {{ address }}
|
|
|
+ </el-descriptions-item>
|
|
|
|
|
|
- </el-card>
|
|
|
+ <el-descriptions-item label="注册时间">
|
|
|
+ {{ regTime }}
|
|
|
+ </el-descriptions-item>
|
|
|
|
|
|
+ </el-descriptions>
|
|
|
|
|
|
- <el-card v-if="displayInfoCard" class="change-card">
|
|
|
|
|
|
- <template #header>
|
|
|
- <div class="card-header">
|
|
|
- <span>个人信息</span>
|
|
|
- <el-button @click="updateInfo">更新</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </el-card>
|
|
|
|
|
|
|
|
|
- <el-form>
|
|
|
- <el-form-item>
|
|
|
- <label for="name" >昵称</label>
|
|
|
- <el-input type="text" id="name" v-model="name" />
|
|
|
- </el-form-item>
|
|
|
+ <el-card v-if="displayInfoCard" class="change-card">
|
|
|
|
|
|
- <el-form-item>
|
|
|
- <label for="phone" >手机号</label>
|
|
|
- <el-input id="phone" v-model="tel" disabled />
|
|
|
- </el-form-item>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>个人信息</span>
|
|
|
+ <el-button @click="updateInfo">更新</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <el-form-item>
|
|
|
- <label for="address" >收货地址</label>
|
|
|
- <el-input id="address" type="textarea"
|
|
|
- rows="4"
|
|
|
- v-model="address" placeholder="中华门"></el-input>
|
|
|
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <label for="name">昵称</label>
|
|
|
+ <el-input type="text" id="name" v-model="name"/>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
+ <el-form-item>
|
|
|
+ <label for="phone">手机号</label>
|
|
|
+ <el-input id="phone" v-model="tel" disabled/>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-card v-if="!displayInfoCard" class="change-card">
|
|
|
+ <el-form-item>
|
|
|
+ <label for="address">收货地址</label>
|
|
|
+ <el-input id="address" type="textarea"
|
|
|
+ rows="4"
|
|
|
+ v-model="address" placeholder="中华门"></el-input>
|
|
|
|
|
|
- <template #header>
|
|
|
- <div class="card-header">
|
|
|
- <span >修改密码</span>
|
|
|
- <el-button @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">修改</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
|
|
|
- <el-form>
|
|
|
- <el-form-item>
|
|
|
- <label for="password">密码</label>
|
|
|
- <el-input type="password" id="password" v-model="password" placeholder="•••••••••" required />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <label v-if="!hasConfirmPasswordInput" for="confirm_password" >确认密码</label>
|
|
|
- <label v-else-if="!isPasswordIdentical" for="confirm_password" class="error-warn">密码不一致</label>
|
|
|
- <label v-else for="confirm_password" >确认密码</label>
|
|
|
|
|
|
- <el-input type="password" id="confirm_password" v-model="confirmPassword"
|
|
|
- :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}" placeholder="•••••••••" required />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <el-card v-if="!displayInfoCard" class="change-card">
|
|
|
|
|
|
- </el-card>
|
|
|
- </el-main>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>修改密码</span>
|
|
|
+ <el-button @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">修改
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <label for="password">密码</label>
|
|
|
+ <el-input type="password" id="password" v-model="password" placeholder="•••••••••" required/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <label v-if="!hasConfirmPasswordInput" for="confirm_password">确认密码</label>
|
|
|
+ <label v-else-if="!isPasswordIdentical" for="confirm_password" class="error-warn">密码不一致</label>
|
|
|
+ <label v-else for="confirm_password">确认密码</label>
|
|
|
+
|
|
|
+ <el-input type="password" id="confirm_password" v-model="confirmPassword"
|
|
|
+ :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}"
|
|
|
+ placeholder="•••••••••" required/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-main>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
@@ -259,7 +257,7 @@ import {UserFilled} from "@element-plus/icons-vue";
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- gap:30px;
|
|
|
+ gap: 30px;
|
|
|
}
|
|
|
|
|
|
.avatar-text {
|