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.
310 lines
6.7 KiB
310 lines
6.7 KiB
<template> |
|
<view class="wrap"> |
|
<view class="form"> |
|
<!-- 我的头像 --> |
|
<view class="item"> |
|
<text>我的头像</text> |
|
<view class="right"> |
|
<button class="u-reset-button" open-type="chooseAvatar" @chooseavatar="getAvatar"> |
|
<image v-if="form.avatar" class="avatar" :src="form.avatar" mode="aspectFill"></image> |
|
<text v-else>点击获取</text> |
|
</button> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 真实姓名 --> |
|
<view class="item"> |
|
<text>真实姓名</text> |
|
<view class="right"> |
|
<input class="input" type="text" placeholder-class="txt" placeholder="请输入" |
|
v-model="form.realName" /> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 用户性别 --> |
|
<view class="item"> |
|
<text>用户性别</text> |
|
<view class="right"> |
|
<picker :range="vuex_sex" range-key="label" @change="onGenderChange"> |
|
<view :class="form.gender?'picker':'picker txt'"> |
|
{{ vuex_sex[form.gender].label || '请选择' }} |
|
</view> |
|
</picker> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 手机号码 --> |
|
<view class="item"> |
|
<text>手机号码</text> |
|
<view class="right"> |
|
<input class="input" type="number" placeholder-class="txt" placeholder="请输入" |
|
v-model="form.mobile" /> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 所属部门 --> |
|
<view class="item"> |
|
<text>所属部门</text> |
|
<view class="right"> |
|
<picker :range="vuex_dept" range-key="label" @change="onDepartmentChange"> |
|
<view :class="form.department?'picker':'picker txt'"> |
|
{{ vuex_dept[form.department].label || '请选择' }} |
|
</view> |
|
</picker> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="submit" @tap="submitForm"> |
|
<text>确认提交</text> |
|
</view> |
|
<view class="auditd"> |
|
<text>等待审核</text> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
avatar: '', |
|
realName: '', |
|
gender: '', |
|
mobile: '', |
|
department: '', |
|
} |
|
}; |
|
}, |
|
onLoad() { |
|
// 获取用户信息 |
|
if (this.vuex_dept) { |
|
this.form = { |
|
avatar: this.vuex_user.avatar, |
|
realName: this.vuex_user.realName, |
|
gender: this.vuex_user.sex, |
|
mobile: this.vuex_user.phonenumber, |
|
department: this.vuex_dept.findIndex(item => item.label === this.vuex_user.deptName) |
|
} |
|
} |
|
}, |
|
methods: { |
|
getAvatar(res) { |
|
console.log(res.detail.avatarUrl); |
|
this.form.avatar = res.detail.avatarUrl |
|
// this.uploadAvatar(res.detail.avatarUrl) |
|
}, |
|
uploadAvatar(tempAvatarPath) { |
|
uni.uploadFile({ |
|
url: 'https://your-server-api/upload', |
|
filePath: tempAvatarPath, |
|
name: 'file', |
|
header: { |
|
'Content-Type': 'multipart/form-data', |
|
}, |
|
success(res) { |
|
const data = JSON.parse(res.data); |
|
if (data.success) { |
|
this.form.avatar = data.url; |
|
console.log('头像上传成功', data.url); |
|
} else { |
|
console.error('头像上传失败', data.message); |
|
} |
|
}, |
|
fail(err) { |
|
console.error('上传失败', err); |
|
}, |
|
}); |
|
}, |
|
onGenderChange(e) { |
|
this.form.gender = e.target.value; |
|
}, |
|
onDepartmentChange(e) { |
|
this.form.department = e.detail.value |
|
}, |
|
validateForm() { |
|
const requiredFields = [{ |
|
key: 'avatar', |
|
message: '请上传头像' |
|
}, |
|
{ |
|
key: 'realName', |
|
message: '真实姓名不能为空' |
|
}, |
|
{ |
|
key: 'gender', |
|
message: '请选择性别' |
|
}, |
|
{ |
|
key: 'mobile', |
|
message: '手机号码不能为空' |
|
}, |
|
{ |
|
key: 'department', |
|
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; |
|
}, |
|
submitForm() { |
|
|
|
if (!this.validateForm()) return; |
|
// 提交表单逻辑 |
|
uni.$u.http.put('/register', { |
|
realName: this.form.realName, |
|
sex: this.vuex_sex[this.form.gender].value, |
|
phonenumber: this.form.mobile, |
|
deptId: this.vuex_dept[this.form.department].value, |
|
userType: '00' |
|
}, {}).then(res => { |
|
console.log(res); |
|
}).catch(err => { |
|
console.log('申请失败'); |
|
}) |
|
|
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.wrap { |
|
background-color: #F9F9F9; |
|
min-height: 100vh; |
|
|
|
.form { |
|
padding: 32rpx; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 32rpx; |
|
|
|
.item { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 0 48rpx; |
|
height: 140rpx; |
|
border-radius: 16rpx; |
|
background: #FFF; |
|
font-size: 30rpx; |
|
color: #252F4A; |
|
|
|
text { |
|
font-weight: bold; |
|
} |
|
|
|
.right { |
|
display: flex; |
|
align-self: center; |
|
justify-content: center; |
|
gap: 8rpx; |
|
|
|
.avatar { |
|
width: 72rpx; |
|
height: 72rpx; |
|
} |
|
|
|
.input { |
|
text-align: right; |
|
width: 400rpx; |
|
height: 80rpx; |
|
} |
|
|
|
.picker { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
width: 400rpx; |
|
height: 80rpx; |
|
} |
|
|
|
.txt { |
|
color: #99A1B7; |
|
font-size: 32rpx; |
|
} |
|
|
|
.u-reset-button { |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
width: 400rpx; |
|
height: 80rpx; |
|
|
|
text { |
|
color: #17C653; |
|
font-weight: normal; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.submit { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 116rpx; |
|
|
|
text { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 32rpx; |
|
font-weight: bold; |
|
color: #FFF; |
|
background: #17C653; |
|
padding: 32rpx 128rpx; |
|
border-radius: 100px; |
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1); |
|
} |
|
} |
|
|
|
.auditd { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 116rpx; |
|
|
|
text { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 32rpx; |
|
font-weight: bold; |
|
color: #17C653; |
|
background: #EAFFF1; |
|
padding: 32rpx 128rpx; |
|
border-radius: 100px; |
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1); |
|
} |
|
} |
|
} |
|
</style> |