317 lines
6.3 KiB
Vue
317 lines
6.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<uni-nav-bar left-icon="left" title="个人资料" color="#000000" backgroundColor="transparent" :fixed="true"
|
||
:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>
|
||
|
||
<view class="user-avatar">
|
||
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
|
||
@click="onClickAvatar">
|
||
<image class="avatar" :src="avatarUrl"></image>
|
||
</button>
|
||
<text class="avatar-title">修改头像</text>
|
||
<image class="camera-icon" :src="$img1('my/camera.png')" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<view class="form-container">
|
||
<view class="form-item">
|
||
<view class="form-label">昵称:</view>
|
||
<view class="form-input">
|
||
<input type="nickname" v-model="nickname" placeholder="请输入您的昵称" @blur="getnickname" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">UID:</view>
|
||
<view class="form-input">
|
||
<input disabled :value="uid" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="submit-btn" @click="updateUserInfo">确认修改</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { updateUserInfo } from '@/common/server/user.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
avatarUrl: "",
|
||
nickname: "",
|
||
headimg_status: false,
|
||
id: "",
|
||
uid: "",
|
||
imageBase64: "",
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
this.initUserInfo();
|
||
},
|
||
|
||
methods: {
|
||
onClickAvatar() {
|
||
//#ifdef APP
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ["album"],
|
||
success: async (res) => {
|
||
console.log(res);
|
||
// this.
|
||
this.avatarUrl = res.tempFilePaths[0];
|
||
this.headimg_status = true;
|
||
const rrrrr = await this.imageToBase64Plus(this.avatarUrl);
|
||
console.log(rrrrr, "rrrrr");
|
||
this.imageBase64 = rrrrr;
|
||
// this.convertToBase64(this.avatarUrl);
|
||
}
|
||
})
|
||
//#endif
|
||
|
||
|
||
},
|
||
/**
|
||
* 初始化用户信息
|
||
*/
|
||
initUserInfo() {
|
||
const userInfo = uni.getStorageSync("userinfo");
|
||
if (userInfo) {
|
||
this.avatarUrl = userInfo.headimg || "";
|
||
this.nickname = userInfo.nickname || "";
|
||
// 使用小写 id，兼容新版 .NET API
|
||
this.id = userInfo.id || userInfo.ID;
|
||
this.uid = userInfo.uid;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 返回上一页
|
||
*/
|
||
back() {
|
||
uni.navigateBack();
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取昵称
|
||
*/
|
||
getnickname(e) {
|
||
this.nickname = e.detail.value;
|
||
},
|
||
|
||
/**
|
||
* 选择头像
|
||
*/
|
||
onChooseAvatar(e) {
|
||
if (e && e.detail && e.detail.avatarUrl) {
|
||
this.avatarUrl = e.detail.avatarUrl;
|
||
this.headimg_status = true;
|
||
this.convertToBase64(this.avatarUrl);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 将图片转换为Base64
|
||
*/
|
||
convertToBase64(filePath) {
|
||
console.log(filePath);
|
||
uni.getFileSystemManager().readFile({
|
||
filePath: filePath,
|
||
encoding: "base64",
|
||
success: (res) => {
|
||
this.imageBase64 = "data:image/png;base64," + res.data;
|
||
},
|
||
fail: (err) => {
|
||
console.error("读取文件失败:", err);
|
||
uni.showToast({
|
||
title: "图片处理失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
imageToBase64Plus(filePath) {
|
||
return new Promise((resolve, reject) => {
|
||
//#ifdef APP
|
||
plus.io.resolveLocalFileSystemURL(filePath, entry => {
|
||
entry.file(file => {
|
||
const fileReader = new plus.io.FileReader();
|
||
fileReader.onloadend = function(e) {
|
||
const base64 = e.target.result;
|
||
resolve(base64);
|
||
};
|
||
fileReader.readAsDataURL(file);
|
||
}, reject);
|
||
}, reject);
|
||
//#endif
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 更新用户信息
|
||
*/
|
||
async updateUserInfo() {
|
||
if (!this.nickname) {
|
||
uni.showToast({
|
||
title: "请输入昵称",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
nickname: this.nickname,
|
||
headimg: this.avatarUrl,
|
||
imagebase: this.imageBase64,
|
||
};
|
||
|
||
try {
|
||
const res = await updateUserInfo(data);
|
||
if (res.status === 1) {
|
||
// 更新本地存储的用户信息
|
||
const userInfo = uni.getStorageSync("userinfo") || {};
|
||
userInfo.nickname = this.nickname;
|
||
userInfo.headimg = this.avatarUrl;
|
||
uni.setStorageSync("userinfo", userInfo);
|
||
|
||
uni.showToast({
|
||
title: "修改成功",
|
||
icon: "success",
|
||
});
|
||
|
||
// 延迟返回
|
||
setTimeout(() => {
|
||
this.$customRouter.navigateTo("./index", {}, 'redirectTo');
|
||
}, 1000);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || "修改失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: "网络请求失败",
|
||
icon: "none",
|
||
});
|
||
console.error(err);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.user-avatar {
|
||
padding: 80rpx 0 60rpx 0;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
.avatar-title {
|
||
font-size: 24rpx;
|
||
color: #8A8A8A;
|
||
position: absolute;
|
||
top: 280rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.avatar-wrapper {
|
||
width: 165rpx;
|
||
height: 165rpx;
|
||
margin: auto;
|
||
border-radius: 128rpx;
|
||
overflow: hidden;
|
||
border: 1rpx solid #F3F3F3;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
line-height: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
.avatar {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.camera-icon {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
position: relative;
|
||
bottom: 40rpx;
|
||
left: 60rpx;
|
||
}
|
||
}
|
||
|
||
.form-container {
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
padding: 30rpx 0;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #F3F3F3;
|
||
}
|
||
|
||
.form-label {
|
||
width: 120rpx;
|
||
font-size: 24rpx;
|
||
color: #8A8A8A;
|
||
}
|
||
|
||
.form-input {
|
||
flex: 1;
|
||
|
||
input {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 244rpx;
|
||
height: 72rpx;
|
||
background: #03D8F4;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #404040;
|
||
margin: 200rpx auto 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style> |