208 lines
3.8 KiB
Vue
208 lines
3.8 KiB
Vue
<template>
|
|
<view class="profile-container">
|
|
<!-- 编辑表单 -->
|
|
<view class="profile-content">
|
|
<!-- 昵称 -->
|
|
<view class="profile-item">
|
|
<text class="item-label">昵称</text>
|
|
<input
|
|
class="item-input"
|
|
v-model="nickname"
|
|
placeholder="请输入昵称"
|
|
maxlength="20"
|
|
/>
|
|
</view>
|
|
|
|
<view class="tip-text">
|
|
<text>💡 昵称将显示在个人中心和作品列表中</text>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<button class="save-btn" @click="saveProfile">保存</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { API_BASE } from '@/config/api.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
nickname: ''
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadProfile();
|
|
},
|
|
methods: {
|
|
loadProfile() {
|
|
const userInfo = uni.getStorageSync('userInfo');
|
|
if (userInfo) {
|
|
this.nickname = userInfo.nickname || '';
|
|
}
|
|
},
|
|
|
|
async saveProfile() {
|
|
if (!this.nickname.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
const userInfo = uni.getStorageSync('userInfo') || {};
|
|
const userId = userInfo.id || uni.getStorageSync('userId');
|
|
|
|
if (!userId) {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 调用API更新昵称
|
|
uni.showLoading({
|
|
title: '保存中...'
|
|
});
|
|
|
|
const token = uni.getStorageSync('token');
|
|
|
|
uni.request({
|
|
url: `${API_BASE}/api/users/profile/${userId}`,
|
|
method: 'PUT',
|
|
header: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
data: {
|
|
nickname: this.nickname.trim()
|
|
},
|
|
success: (res) => {
|
|
console.log('[EditProfile] API响应:', res.data);
|
|
|
|
if (res.statusCode === 200 && res.data.success) {
|
|
// 更新本地存储
|
|
userInfo.nickname = this.nickname;
|
|
uni.setStorageSync('userInfo', userInfo);
|
|
uni.setStorageSync('nickname', this.nickname);
|
|
uni.setStorageSync('userNickname', this.nickname);
|
|
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message || '保存失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.error('[EditProfile] 请求失败:', err);
|
|
uni.showToast({
|
|
title: '网络错误，请重试',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-container {
|
|
min-height: 100vh;
|
|
background: #FDF8F2;
|
|
}
|
|
|
|
/* 编辑内容 */
|
|
.profile-content {
|
|
padding: 30upx;
|
|
}
|
|
|
|
.profile-item {
|
|
background: white;
|
|
border-radius: 30upx;
|
|
padding: 30upx;
|
|
margin-bottom: 20upx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.08);
|
|
|
|
.item-label {
|
|
font-size: 28upx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
min-width: 120upx;
|
|
}
|
|
|
|
.item-value {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.value-text {
|
|
font-size: 28upx;
|
|
color: #666;
|
|
margin-right: 10upx;
|
|
}
|
|
}
|
|
|
|
.item-arrow {
|
|
font-size: 32upx;
|
|
color: #999;
|
|
}
|
|
|
|
.item-input {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
/* 提示文本 */
|
|
.tip-text {
|
|
padding: 0 30upx;
|
|
margin-top: 10upx;
|
|
margin-bottom: 40upx;
|
|
font-size: 24upx;
|
|
color: #999;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 保存按钮 */
|
|
.save-btn {
|
|
width: 100%;
|
|
padding: 36upx;
|
|
background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 32upx;
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
box-shadow: 0 12upx 32upx rgba(139, 115, 85, 0.3);
|
|
transition: all 0.3s;
|
|
margin-top: 20upx;
|
|
|
|
&:active {
|
|
transform: translateY(-2upx);
|
|
box-shadow: 0 16upx 40upx rgba(139, 115, 85, 0.4);
|
|
}
|
|
}
|
|
</style>
|