You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
8.2 KiB
336 lines
8.2 KiB
<template> |
|
<cs-page isCustom> |
|
<template #header> |
|
<view |
|
class="wd-flex wd-flex-row wd-items-center" |
|
style="gap: 8px" |
|
@click="goBack" |
|
> |
|
<view class="icon-box" v-if="form.audit"> |
|
<u-icon name="arrow-left" size="12"></u-icon> |
|
</view> |
|
<text class="wd-font-800 wd-text-16">编辑个人信息</text> |
|
</view> |
|
</template> |
|
<view class="container"> |
|
<!-- 我的头像 --> |
|
<view |
|
class="section wd-flex wd-flex-row wd-justify-between wd-items-center" |
|
> |
|
<text style="color: #99a1b7">我的头像</text> |
|
<button |
|
class="wd-flex wd-flex-row wd-items-center avatarBtn" |
|
style="gap: 8px" |
|
type="balanced" |
|
open-type="chooseAvatar" |
|
@chooseavatar="chooseAvatar" |
|
> |
|
<u-avatar :src="form.avatar"></u-avatar> |
|
<u-icon name="arrow-right"></u-icon> |
|
</button> |
|
</view> |
|
<!-- 真实姓名 --> |
|
<view |
|
class="section wd-flex wd-flex-row wd-justify-between wd-items-center" |
|
> |
|
<text style="color: #99a1b7">姓名</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<input |
|
class="wd-text-right" |
|
type="text" |
|
placeholder-class="txt" |
|
placeholder="请输入姓名" |
|
v-model="form.realName" |
|
placeholder-style="color:#99a1b7" |
|
/> |
|
<u-icon name="arrow-right" color="#99a1b7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 用户性别 --> |
|
<view |
|
class="section wd-flex wd-flex-row wd-justify-between wd-items-center" |
|
@click="showPicker('system_user_sex', 'sex')" |
|
> |
|
<text style="color: #99a1b7">性别</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<text v-if="form.sex"> |
|
{{ |
|
$dict.echoDicValue( |
|
dictMap.system_user_sex, |
|
form.sex.toString() |
|
) |
|
}} |
|
</text> |
|
<text class="placeholder" v-else>请选择性别</text> |
|
<u-icon name="arrow-right" color="#99a1b7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 手机号码 --> |
|
<view |
|
class="section wd-flex wd-flex-row wd-justify-between wd-items-center" |
|
> |
|
<text style="color: #99a1b7">手机号码</text> |
|
<view |
|
class="wd-flex wd-flex-row wd-items-center" |
|
style="gap: 16rpx" |
|
> |
|
<input |
|
class="wd-text-right" |
|
type="number" |
|
placeholder-class="txt" |
|
placeholder="请输入手机号码" |
|
v-model="form.mobile" |
|
placeholder-style="color:#99a1b7" |
|
/> |
|
<u-icon name="arrow-right" color="#99a1b7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 所属部门 --> |
|
<view |
|
class="section wd-flex wd-flex-row wd-justify-between wd-items-center" |
|
@click="showPicker('dept', 'deptId')" |
|
> |
|
<text style="color: #99a1b7">部门</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<text v-if="form.deptId"> |
|
{{ $dict.echoDicValue(dictMap.dept, form.deptId) }} |
|
</text> |
|
<text class="placeholder" v-else>请选择部门</text> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<view class="button-box"> |
|
<button class="button audit" v-if="form.audit == 1"> |
|
{{ $dict.echoDicValue(dictMap.user_audit_type, form.audit) }} |
|
</button> |
|
<button class="button submit" @click="submit" v-else>提交</button> |
|
</view> |
|
</view> |
|
<u-picker |
|
:show="picker.show" |
|
:columns="picker.data" |
|
@cancel="closePicker" |
|
closeOnClickOverlay |
|
keyName="label" |
|
ref="uPicker" |
|
@close="closePicker" |
|
@confirm="confirmPicker" |
|
></u-picker> |
|
</cs-page> |
|
</template> |
|
|
|
<script> |
|
import { getUserProfile, updateUserProfile } from '@/api/system/user.js' |
|
import { uploadFile } from '@/api/system/file.js' |
|
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js' |
|
export default { |
|
data() { |
|
return { |
|
dictMap: {}, |
|
deptTree: [], |
|
form: { |
|
avatar: undefined, |
|
realName: undefined, |
|
mobile: undefined, |
|
deptId: undefined, |
|
sex: undefined |
|
}, |
|
picker: { |
|
show: false, |
|
key: '', |
|
data: [] |
|
} |
|
} |
|
}, |
|
async onLoad(options) { |
|
if (options.audit) { |
|
this.form.audit = options.audit |
|
} |
|
await this.getDict() |
|
}, |
|
onShow() { |
|
this.init() |
|
}, |
|
methods: { |
|
showPicker(type, key) { |
|
this.picker.data.push(this.dictMap[type]) |
|
this.picker.key = key |
|
this.picker.show = true |
|
}, |
|
closePicker() { |
|
this.picker = { |
|
show: false, |
|
key: '', |
|
data: [] |
|
} |
|
}, |
|
init() { |
|
if (this.$store.getters.userId) { |
|
getUserProfile().then(res => { |
|
this.form = res.data |
|
}) |
|
} |
|
}, |
|
async getDict() { |
|
const dict = await getDictBatchByType({ |
|
type: ['system_user_sex', 'user_audit_type'].join(',') |
|
}) |
|
|
|
const dept = await getDeptTree() |
|
this.dictMap = { |
|
...dict.data, |
|
dept: dept.data.map(i => { |
|
return { |
|
...i, |
|
label: i.name, |
|
value: i.id |
|
} |
|
}) |
|
} |
|
}, |
|
chooseAvatar(e) { |
|
const data = { |
|
name: 'file', |
|
filePath: e.detail.avatarUrl |
|
} |
|
uploadFile(data).then(res => { |
|
this.form.avatar = res.data.url |
|
}) |
|
}, |
|
validateForm() { |
|
const requiredFields = [ |
|
{ |
|
key: 'avatar', |
|
message: '请上传头像' |
|
}, |
|
{ |
|
key: 'realName', |
|
message: '真实姓名不能为空' |
|
}, |
|
{ |
|
key: 'sex', |
|
message: '请选择性别' |
|
}, |
|
{ |
|
key: 'mobile', |
|
message: '手机号码不能为空' |
|
} |
|
// { |
|
// key: 'deptId', |
|
// message: '请选择所属部门' |
|
// } |
|
] |
|
|
|
for (const field of requiredFields) { |
|
if (!this.form[field.key]) { |
|
uni.showToast({ |
|
title: field.message, |
|
icon: 'none' |
|
}) |
|
return false |
|
} |
|
} |
|
|
|
const mobilePattern = /^1[3-9]\d{9}$/ // 中国手机号正则表达式 |
|
if (!mobilePattern.test(this.form.mobile)) { |
|
uni.showToast({ |
|
title: '请输入有效的手机号', |
|
icon: 'none' |
|
}) |
|
return false |
|
} |
|
|
|
return true |
|
}, |
|
submit() { |
|
uni.showLoading({ |
|
mask: true, |
|
title: '提交中...' |
|
}) |
|
if (!this.validateForm()) { |
|
uni.hideLoading() |
|
|
|
return |
|
} |
|
updateUserProfile(this.form).then(res => { |
|
setTimeout(function () { |
|
uni.hideLoading() |
|
}, 300) |
|
uni.showToast({ |
|
title: '操作成功', |
|
icon: 'success', |
|
duration: 500 |
|
}) |
|
this.init() |
|
}) |
|
}, |
|
confirmPicker(e) { |
|
const { value } = e |
|
this.form[this.picker.key] = value[0].value |
|
this.closePicker() |
|
}, |
|
goBack() { |
|
if (this.form.audit) { |
|
uni.switchTab({ |
|
url: '/pages/owner' |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
height: 100%; |
|
padding: 32rpx; |
|
position: relative; |
|
.section { |
|
border-radius: 16rpx; |
|
background: #fff; |
|
margin-bottom: 32rpx; |
|
padding: 24px; |
|
height: 140rpx; |
|
font-size: 30rpx; |
|
} |
|
.button-box { |
|
position: fixed; |
|
bottom: 116rpx; |
|
right: 10px; |
|
left: 10px; |
|
.button { |
|
width: 60vw; |
|
border-radius: 30px; |
|
font-size: 32rpx; |
|
font-weight: bold; |
|
height: 40px; |
|
line-height: 40px; |
|
box-sizing: border-box; |
|
} |
|
.submit { |
|
color: #fff; |
|
background: #17c653; |
|
} |
|
.audit { |
|
color: #17c653; |
|
background: #eafff1; |
|
} |
|
} |
|
.placeholder { |
|
color: #99a1b7; |
|
} |
|
button { |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
.avatarBtn { |
|
background-color: #fff; |
|
flex: 1; |
|
justify-content: flex-end; |
|
&::after { |
|
content: ''; |
|
display: none; |
|
} |
|
} |
|
} |
|
</style>
|
|
|