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.
473 lines
11 KiB
473 lines
11 KiB
<template>
|
|
<view class="user-info-container" :style="{ minHeight: containerHeight + 'rpx' }">
|
|
<!-- 内容区域 -->
|
|
<view class="content">
|
|
<!-- 头像区域 -->
|
|
<view class="avatar-section">
|
|
<view class="app-info">
|
|
<image class="app-logo" :src="configParamImage('app_logo')" mode="aspectFit"></image>
|
|
<text class="app-name">{{ configParamText('app_name') }}</text>
|
|
<text class="app-subname">申请获取您的头像，昵称</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-section">
|
|
<!-- 头像 -->
|
|
<view class="form-item">
|
|
<text class="form-label">头像</text>
|
|
<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image
|
|
class="avatar-image"
|
|
:src="userInfo.headImage || '/static/默认图片.png'"
|
|
mode="aspectFill"
|
|
></image>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 昵称 -->
|
|
<view class="form-item">
|
|
<text class="form-label">昵称</text>
|
|
<input
|
|
class="form-input"
|
|
type="nickname"
|
|
v-model="userInfo.nickName"
|
|
placeholder="请输入昵称"
|
|
@blur="onNicknameBlur"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="form-item">
|
|
<text class="form-label">手机号</text>
|
|
<view class="phone-container" v-if="!userInfo.phone">
|
|
<button
|
|
class="get-phone-btn"
|
|
open-type="getPhoneNumber"
|
|
@getphonenumber="getPhoneNumber"
|
|
>
|
|
获取手机号
|
|
</button>
|
|
</view>
|
|
<text class="form-label" v-else>{{ userInfo.phone }}</text>
|
|
</view>
|
|
|
|
<!-- 所在部门 -->
|
|
<view class="form-item">
|
|
<text class="form-label">所在部门</text>
|
|
<view class="department-container" @click="showDepartmentPicker">
|
|
<text class="department-text" :class="{ 'active': userInfo.department.title }">{{ userInfo.department.title || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="20" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item ">
|
|
<text class="form-label">备注<text class="form-remark">(非必填)</text></text>
|
|
<input
|
|
class="form-input"
|
|
v-model="userInfo.remark"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 确定按钮 -->
|
|
<view class="submit-section">
|
|
<view class="submit-btn" @click="submitUserInfo">
|
|
<text class="submit-text">确定</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 部门选择器 -->
|
|
<uv-picker
|
|
confirm-color="#C70019"
|
|
ref="departmentPicker"
|
|
:columns="departmentColumns"
|
|
keyName="title"
|
|
@confirm="confirmDepartment"
|
|
@cancel="cancelDepartment"
|
|
></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'UserInfo',
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
headImage: '',
|
|
nickName: '',
|
|
phone: '',
|
|
department: {
|
|
title: '',
|
|
id: ''
|
|
},
|
|
remark: ''
|
|
},
|
|
showDepartmentSheet: false,
|
|
// 部门选择器数据
|
|
}
|
|
},
|
|
async onLoad() {
|
|
this.calculateContainerHeight();
|
|
await this.getUserInfo();
|
|
},
|
|
computed: {
|
|
// 部门选择器数据格式转换
|
|
departmentColumns() {
|
|
if (!this.$store.state.departmentList || this.$store.state.departmentList.length === 0) {
|
|
return [[]]
|
|
}
|
|
|
|
const departmentNames = this.$store.state.departmentList.map(item => {
|
|
return {
|
|
title: item.title,
|
|
id: item.id
|
|
}
|
|
})
|
|
return [departmentNames]
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取微信用户信息
|
|
async getWechatUserInfo() {
|
|
const { result } = await this.$api.user.queryUser()
|
|
this.userInfo.nickName = result.nickName
|
|
this.userInfo.headImage = result.headImage
|
|
this.userInfo.phone = result.phone
|
|
},
|
|
|
|
// 提交表单
|
|
async getUserInfo(){
|
|
const { result:info } = await this.$api.user.queryUser()
|
|
this.userInfo.nickName = info.nickName
|
|
this.userInfo.headImage = info.headImage
|
|
this.userInfo.phone = info.phone
|
|
},
|
|
|
|
// 选择头像并上传到OSS
|
|
async onChooseAvatar(e) {
|
|
console.log('选择头像回调', e);
|
|
if (e.detail.avatarUrl) {
|
|
try {
|
|
// 显示上传中提示
|
|
uni.showLoading({ title: '上传头像中...' });
|
|
|
|
// 构造文件对象
|
|
const file = {
|
|
path: e.detail.avatarUrl,
|
|
tempFilePath: e.detail.avatarUrl
|
|
};
|
|
|
|
// 上传到OSS
|
|
const uploadResult = await this.$utils.uploadImage(file);
|
|
|
|
uni.hideLoading();
|
|
|
|
if (uploadResult.success) {
|
|
// 上传成功，更新头像URL
|
|
this.userInfo.headImage = uploadResult.url;
|
|
console.log('头像上传成功', uploadResult.url);
|
|
uni.showToast({
|
|
title: '头像上传成功',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
|
|
}
|
|
} catch (error) {
|
|
uni.hideLoading();
|
|
console.error('头像上传异常:', error);
|
|
// 异常情况下使用本地头像
|
|
this.userInfo.headImage = e.detail.avatarUrl;
|
|
uni.showToast({
|
|
title: '头像处理异常，使用本地头像',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '头像选择失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
// 昵称输入失焦
|
|
onNicknameBlur() {
|
|
if (!this.userInfo.nickName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 显示部门选择器
|
|
showDepartmentPicker() {
|
|
this.$refs.departmentPicker.open();
|
|
},
|
|
|
|
// 确认部门选择
|
|
confirmDepartment(e) {
|
|
this.userInfo.department = e.value[0];
|
|
},
|
|
|
|
// 取消部门选择
|
|
cancelDepartment() {
|
|
// 取消操作
|
|
},
|
|
|
|
// 选择部门（保留原方法以防其他地方使用）
|
|
selectDepartment(item) {
|
|
this.userInfo.department = item.value;
|
|
this.showDepartmentSheet = false;
|
|
},
|
|
|
|
// 获取手机号
|
|
async getPhoneNumber(e) {
|
|
console.log('获取手机号回调', e);
|
|
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
|
// 获取成功，可以通过e.detail.code发送到后端换取手机号
|
|
console.log('获取手机号成功', e.detail);
|
|
const res = await this.$api.login.bindPhone({
|
|
phoneCode: e.detail.code
|
|
})
|
|
const str = JSON.parse(res.result);
|
|
this.userInfo.phone = str.phone_info.phoneNumber
|
|
uni.showToast({
|
|
title: '手机号获取成功',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
// 如果失败了就申请开启权限
|
|
uni.showToast({
|
|
title: '手机号获取失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 提交用户信息
|
|
async submitUserInfo() {
|
|
if (!this.userInfo.nickName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!this.userInfo.phone.trim()) {
|
|
uni.showToast({
|
|
title: '请获取手机号',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!this.userInfo.department.title.trim()) {
|
|
uni.showToast({
|
|
title: '请选择所在部门',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
console.log('提交用户信息', this.userInfo);
|
|
|
|
try {
|
|
// 提交用户信息
|
|
await this.$api.user.updateUser({
|
|
nickName: this.userInfo.nickName,
|
|
phone: this.userInfo.phone,
|
|
headImage: this.userInfo.headImage,
|
|
department: this.userInfo.department.id,
|
|
remark: this.userInfo.remark
|
|
});
|
|
|
|
uni.showToast({
|
|
title: '信息保存成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 跳转到首页
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/index/home'
|
|
});
|
|
}, 1000);
|
|
} catch (error) {
|
|
console.error('保存用户信息失败:', error);
|
|
uni.showToast({
|
|
title: '保存失败，请重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-info-container {
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 66rpx;
|
|
}
|
|
|
|
.avatar-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 90rpx;
|
|
margin-top: 192rpx;
|
|
.app-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 22rpx;
|
|
.app-logo {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
// border-radius: 20rpx;
|
|
// margin-bottom: 23rpx;
|
|
}
|
|
|
|
.app-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.app-subname {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
// background: green;
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-bottom: 30rpx;
|
|
height: 114rpx;
|
|
justify-content: space-between;
|
|
|
|
&:last-child {
|
|
margin-bottom: 45rpx;
|
|
}
|
|
|
|
.form-label {
|
|
// width: 120rpx;
|
|
// flex: 1;
|
|
font-size: 32rpx;
|
|
color: $primary-text-color;
|
|
// font-weight: 500;
|
|
}
|
|
|
|
.form-input {
|
|
// flex: 1;
|
|
// height: 80rpx;
|
|
// padding: 0 20rpx;
|
|
// border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
border: none;
|
|
background-color: transparent;
|
|
text-align: right;
|
|
}
|
|
.form-remark {
|
|
margin-left: 16rpx;
|
|
color: $secondary-text-color;
|
|
}
|
|
|
|
.department-container{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22rpx;
|
|
color: $secondary-text-color;
|
|
|
|
.department-text.active {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 头像按钮
|
|
.avatar-button {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border: 2rpx solid #cccccc;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
// border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
|
|
// background: white;
|
|
.get-phone-btn {
|
|
// margin-left: auto;
|
|
width: 176rpx;
|
|
height: 76rpx;
|
|
background-color: $primary-color;
|
|
color: white;
|
|
border-radius: 38rpx;
|
|
font-size: 22rpx;
|
|
line-height: 76rpx;
|
|
border: none;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
.submit-section {
|
|
width: 594rpx;
|
|
height: 94rpx;
|
|
margin: 0 auto;
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 94rpx;
|
|
background-color: $primary-color;
|
|
border-radius: 41rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.submit-text {
|
|
font-size: 32rpx;
|
|
// font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|