429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
||
<div class="page-content user">
|
||
<div class="content">
|
||
<div class="left-wrap">
|
||
<div class="user-wrap box-style">
|
||
<img class="bg" src="@imgs/user/bg.webp" alt="背景" />
|
||
<img class="avatar" src="@imgs/user/avatar.webp" alt="头像" />
|
||
<h2 class="name">{{ userInfo.username }}</h2>
|
||
<p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
|
||
|
||
<div class="outer-info">
|
||
<div>
|
||
<i class="iconfont-sys"></i>
|
||
<span>jdkjjfnndf@mall.com</span>
|
||
</div>
|
||
<div>
|
||
<i class="iconfont-sys"></i>
|
||
<span>交互专家</span>
|
||
</div>
|
||
<div>
|
||
<i class="iconfont-sys"></i>
|
||
<span>广东省深圳市</span>
|
||
</div>
|
||
<div>
|
||
<i class="iconfont-sys"></i>
|
||
<span>字节跳动－某某平台部－UED</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lables">
|
||
<h3>标签</h3>
|
||
<div>
|
||
<div v-for="item in lableList" :key="item">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <el-carousel class="gallery" height="160px"
|
||
:interval="5000"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item class="item" v-for="item in galleryList" :key="item">
|
||
<img :src="item"/>
|
||
</el-carousel-item>
|
||
</el-carousel> -->
|
||
</div>
|
||
<div class="right-wrap">
|
||
<div class="info box-style">
|
||
<h1 class="title">基本设置</h1>
|
||
|
||
<ElForm
|
||
:model="form"
|
||
class="form"
|
||
ref="ruleFormRef"
|
||
:rules="rules"
|
||
label-width="86px"
|
||
label-position="top"
|
||
>
|
||
<ElRow>
|
||
<ElFormItem label="姓名" prop="realName">
|
||
<el-input v-model="form.realName" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
<ElFormItem label="性别" prop="sex" class="right-input">
|
||
<ElSelect v-model="form.sex" placeholder="Select" :disabled="!isEdit">
|
||
<ElOption
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<ElRow>
|
||
<ElFormItem label="昵称" prop="nikeName">
|
||
<ElInput v-model="form.nikeName" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
<ElFormItem label="邮箱" prop="email" class="right-input">
|
||
<ElInput v-model="form.email" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<ElRow>
|
||
<ElFormItem label="手机" prop="mobile">
|
||
<ElInput v-model="form.mobile" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
<ElFormItem label="地址" prop="address" class="right-input">
|
||
<ElInput v-model="form.address" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<ElFormItem label="个人介绍" prop="des" :style="{ height: '130px' }">
|
||
<ElInput type="textarea" :rows="4" v-model="form.des" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
|
||
<div class="el-form-item-right">
|
||
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
|
||
{{ isEdit ? '保存' : '编辑' }}
|
||
</ElButton>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
|
||
<div class="info box-style" style="margin-top: 20px">
|
||
<h1 class="title">更改密码</h1>
|
||
|
||
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="top">
|
||
<ElFormItem label="当前密码" prop="password">
|
||
<ElInput v-model="pwdForm.password" type="password" :disabled="!isEditPwd" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="新密码" prop="newPassword">
|
||
<ElInput v-model="pwdForm.newPassword" type="password" :disabled="!isEditPwd" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="确认新密码" prop="confirmPassword">
|
||
<ElInput v-model="pwdForm.confirmPassword" type="password" :disabled="!isEditPwd" />
|
||
</ElFormItem>
|
||
|
||
<div class="el-form-item-right">
|
||
<ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
|
||
{{ isEditPwd ? '保存' : '编辑' }}
|
||
</ElButton>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useUserStore } from '@/store/modules/user'
|
||
import { ElForm, FormInstance, FormRules } from 'element-plus'
|
||
|
||
defineOptions({ name: 'UserCenter' })
|
||
|
||
const userStore = useUserStore()
|
||
const userInfo = computed(() => userStore.getUserInfo)
|
||
|
||
const isEdit = ref(false)
|
||
const isEditPwd = ref(false)
|
||
const date = ref('')
|
||
const form = reactive({
|
||
realName: 'John Snow',
|
||
nikeName: '皮卡丘',
|
||
email: '59301283@mall.com',
|
||
mobile: '18888888888',
|
||
address: '广东省深圳市宝安区西乡街道101栋201',
|
||
sex: '2',
|
||
des: 'Art Design Pro 是一款漂亮的后台管理系统模版.'
|
||
})
|
||
|
||
const pwdForm = reactive({
|
||
password: '123456',
|
||
newPassword: '123456',
|
||
confirmPassword: '123456'
|
||
})
|
||
|
||
const ruleFormRef = ref<FormInstance>()
|
||
|
||
const rules = reactive<FormRules>({
|
||
realName: [
|
||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||
{ min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||
],
|
||
nikeName: [
|
||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||
{ min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||
],
|
||
email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
||
mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
|
||
address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||
sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
|
||
})
|
||
|
||
const options = [
|
||
{
|
||
value: '1',
|
||
label: '男'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '女'
|
||
}
|
||
]
|
||
|
||
const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
|
||
|
||
onMounted(() => {
|
||
getDate()
|
||
})
|
||
|
||
const getDate = () => {
|
||
const d = new Date()
|
||
const h = d.getHours()
|
||
let text = ''
|
||
|
||
if (h >= 6 && h < 9) {
|
||
text = '早上好'
|
||
} else if (h >= 9 && h < 11) {
|
||
text = '上午好'
|
||
} else if (h >= 11 && h < 13) {
|
||
text = '中午好'
|
||
} else if (h >= 13 && h < 18) {
|
||
text = '下午好'
|
||
} else if (h >= 18 && h < 24) {
|
||
text = '晚上好'
|
||
} else if (h >= 0 && h < 6) {
|
||
text = '很晚了，早点睡'
|
||
}
|
||
|
||
date.value = text
|
||
}
|
||
|
||
const edit = () => {
|
||
isEdit.value = !isEdit.value
|
||
}
|
||
|
||
const editPwd = () => {
|
||
isEditPwd.value = !isEditPwd.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.user {
|
||
.icon {
|
||
width: 1.4em;
|
||
height: 1.4em;
|
||
overflow: hidden;
|
||
vertical-align: -0.15em;
|
||
fill: currentcolor;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
|
||
$box-radius: calc(var(--custom-radius) + 4px);
|
||
|
||
.box-style {
|
||
border: 1px solid var(--art-border-color);
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
|
||
.left-wrap {
|
||
width: 450px;
|
||
margin-right: 25px;
|
||
|
||
.user-wrap {
|
||
position: relative;
|
||
height: 600px;
|
||
padding: 35px 40px;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
background: var(--art-main-bg-color);
|
||
border-radius: $box-radius;
|
||
|
||
.bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.avatar {
|
||
position: relative;
|
||
z-index: 10;
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-top: 120px;
|
||
object-fit: cover;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.des {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.outer-info {
|
||
width: 300px;
|
||
margin-top: 30px;
|
||
text-align: left;
|
||
|
||
> div {
|
||
margin-top: 10px;
|
||
|
||
span {
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lables {
|
||
margin-top: 40px;
|
||
|
||
h3 {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: 15px;
|
||
|
||
> div {
|
||
padding: 3px 6px;
|
||
margin: 0 10px 10px 0;
|
||
font-size: 12px;
|
||
background: var(--art-main-bg-color);
|
||
border: 1px solid var(--art-border-color);
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gallery {
|
||
margin-top: 25px;
|
||
border-radius: 10px;
|
||
|
||
.item {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrap {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
border-radius: $box-radius;
|
||
|
||
.info {
|
||
background: var(--art-main-bg-color);
|
||
border-radius: $box-radius;
|
||
|
||
.title {
|
||
padding: 15px 25px;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
color: var(--art-text-gray-800);
|
||
border-bottom: 1px solid var(--art-border-color);
|
||
}
|
||
|
||
.form {
|
||
box-sizing: border-box;
|
||
padding: 30px 25px;
|
||
|
||
> .el-row {
|
||
.el-form-item {
|
||
width: calc(50% - 10px);
|
||
}
|
||
|
||
.el-input,
|
||
.el-select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.right-input {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.el-form-item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
|
||
.el-button {
|
||
width: 110px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: $device-ipad-vertical) {
|
||
.page-content {
|
||
.content {
|
||
display: block;
|
||
margin-top: 5px;
|
||
|
||
.left-wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
.right-wrap {
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|