1054425342@qq.com
2 months ago
5 changed files with 746 additions and 464 deletions
@ -1,89 +1,325 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="nickname-box"> |
|||
<input v-model="nickname" type="text" placeholder="请输入内容" /> |
|||
<view class="change-nickname-container"> |
|||
<!-- 页面标题 --> |
|||
<view class="page-header"> |
|||
<text class="page-title">修改昵称</text> |
|||
</view> |
|||
|
|||
<!-- 昵称输入区域 --> |
|||
<view class="input-section"> |
|||
<view class="input-card"> |
|||
<view class="input-label">昵称</view> |
|||
<view class="input-wrapper"> |
|||
<input |
|||
v-model="nickname" |
|||
type="nickname" |
|||
placeholder="请输入昵称" |
|||
maxlength="20" |
|||
class="nickname-input" |
|||
/> |
|||
<view class="char-count">{{ nickname.length }}/20</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 保存按钮 --> |
|||
<view class="save-section"> |
|||
<button |
|||
class="save-btn" |
|||
:class="{ 'save-btn-active': nickname.trim() }" |
|||
@click="saveNickname" |
|||
:disabled="!nickname.trim()" |
|||
> |
|||
保存 |
|||
</button> |
|||
</view> |
|||
<view class="btn" @click="save">保存</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "changeNickname", |
|||
data: function() { |
|||
data() { |
|||
return { |
|||
nickname: "" |
|||
nickname: "", |
|||
originalNickname: "", // 保存原始昵称 |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
// 如果有传入昵称参数，则使用传入的昵称 |
|||
if (options.nickname) { |
|||
this.nickname = decodeURIComponent(options.nickname); |
|||
this.originalNickname = this.nickname; |
|||
} |
|||
}, |
|||
methods: { |
|||
save: function() { |
|||
if (!this.nickname) { |
|||
// 获取微信昵称 |
|||
getWechatNickname() { |
|||
// #ifdef MP-WEIXIN |
|||
uni.getUserProfile({ |
|||
desc: "用于完善用户资料", |
|||
success: (res) => { |
|||
console.log("获取用户信息成功:", res); |
|||
if (res.userInfo && res.userInfo.nickName) { |
|||
this.nickname = res.userInfo.nickName; |
|||
uni.showToast({ |
|||
title: '请输入昵称', |
|||
icon: 'none' |
|||
}) |
|||
title: "已获取微信昵称", |
|||
icon: "success", |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.log("获取用户信息失败:", err); |
|||
uni.showToast({ |
|||
title: "获取微信昵称失败", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
}); |
|||
// #endif |
|||
|
|||
// #ifndef MP-WEIXIN |
|||
uni.showToast({ |
|||
title: "请在微信小程序中使用此功能", |
|||
icon: "none", |
|||
}); |
|||
// #endif |
|||
}, |
|||
|
|||
// 保存昵称 |
|||
saveNickname() { |
|||
const trimmedNickname = this.nickname.trim(); |
|||
|
|||
if (!trimmedNickname) { |
|||
uni.showToast({ |
|||
title: "请输入昵称", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (trimmedNickname.length < 2) { |
|||
uni.showToast({ |
|||
title: "昵称至少2个字符", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
this.Post({ |
|||
nickname: this.nickname |
|||
}, '/api/user/profile').then(res => { |
|||
console.log(res) |
|||
|
|||
if (trimmedNickname === this.originalNickname) { |
|||
uni.showToast({ |
|||
title: "昵称未修改", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
uni.showLoading({ |
|||
title: "保存中...", |
|||
}); |
|||
|
|||
this.Post( |
|||
{ |
|||
nickname: trimmedNickname, |
|||
}, |
|||
"/api/user/profile" |
|||
) |
|||
.then((res) => { |
|||
uni.hideLoading(); |
|||
console.log("保存昵称结果:", res); |
|||
|
|||
if (res.code == 1 || res.code == 200) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '保存成功！', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.goBack() |
|||
title: "提示", |
|||
content: "昵称保存成功！", |
|||
showCancel: false, |
|||
success: (modalRes) => { |
|||
if (modalRes.confirm) { |
|||
// 返回上一页并传递新昵称 |
|||
const pages = getCurrentPages(); |
|||
if (pages.length > 1) { |
|||
const prevPage = pages[pages.length - 2]; |
|||
// 如果上一页有更新昵称的方法，则调用 |
|||
if (prevPage.updateNickname) { |
|||
prevPage.updateNickname(trimmedNickname); |
|||
} |
|||
} |
|||
}) |
|||
uni.navigateBack(); |
|||
} |
|||
}, |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || "保存失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
uni.hideLoading(); |
|||
console.error("保存昵称失败:", err); |
|||
uni.showToast({ |
|||
title: "保存失败，请重试", |
|||
icon: "none", |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.change-nickname-container { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 页面标题 |
|||
.page-header { |
|||
background-color: #fff; |
|||
padding: 20rpx 30rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.page-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
padding-top: 50rpx; |
|||
// 输入区域 |
|||
.input-section { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.nickname-box { |
|||
display: flex; |
|||
padding: 10rpx 0 30rpx; |
|||
.input-card { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin: 0 30rpx; |
|||
border-radius: 16rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.input-label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input-wrapper { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
background: white; |
|||
margin-bottom: 100rpx; |
|||
} |
|||
|
|||
.nickname-input { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
padding: 0 20rpx; |
|||
font-size: 30rpx; |
|||
height: 70rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
color: #333; |
|||
background-color: #f8f9fa; |
|||
border: 2rpx solid #e9ecef; |
|||
border-radius: 12rpx; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.nickname-input:focus { |
|||
border-color: #ff4757; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.nickname-box span { |
|||
flex-shrink: 0; |
|||
.char-count { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background-color: rgba(255, 255, 255, 0.9); |
|||
padding: 4rpx 8rpx; |
|||
border-radius: 6rpx; |
|||
} |
|||
|
|||
.nickname-box input { |
|||
// 快捷操作区域 |
|||
.quick-actions { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.action-card { |
|||
background-color: #fff; |
|||
margin: 0 30rpx; |
|||
padding: 30rpx; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background-color: #f8f9fa; |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
|
|||
.action-icon { |
|||
margin-right: 20rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
background-color: rgba(7, 193, 96, 0.1); |
|||
border-radius: 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.action-content { |
|||
flex: 1; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.action-title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 4rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.btn { |
|||
color: black; |
|||
margin: 0 auto; |
|||
line-height: 80rpx; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
width: 333rpx; |
|||
height: 80rpx; |
|||
background: #C3282E; |
|||
border-radius: 40rpx; |
|||
color: #FFFFFF; |
|||
.action-desc { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
display: block; |
|||
} |
|||
|
|||
.action-arrow { |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
// 保存按钮区域 |
|||
.save-section { |
|||
margin-top: 60rpx; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.save-btn { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background-color: #e9ecef; |
|||
color: #999; |
|||
border: none; |
|||
border-radius: 44rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
transition: all 0.3s ease; |
|||
|
|||
&.save-btn-active { |
|||
background-color: #ff4757; |
|||
color: #fff; |
|||
} |
|||
|
|||
&:active { |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue