1054425342@qq.com
2 months ago
5 changed files with 746 additions and 464 deletions
@ -1,89 +1,325 @@ |
|||||
<template> |
<template> |
||||
<view class="bg"> |
<view class="change-nickname-container"> |
||||
<view class="nickname-box"> |
<!-- 页面标题 --> |
||||
<input v-model="nickname" type="text" placeholder="请输入内容" /> |
<view class="page-header"> |
||||
</view> |
<text class="page-title">修改昵称</text> |
||||
<view class="btn" @click="save">保存</view> |
</view> |
||||
</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> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "changeNickname", |
name: "changeNickname", |
||||
data: function() { |
data() { |
||||
return { |
return { |
||||
nickname: "" |
nickname: "", |
||||
} |
originalNickname: "", // 保存原始昵称 |
||||
}, |
}; |
||||
methods: { |
}, |
||||
save: function() { |
onLoad(options) { |
||||
if (!this.nickname) { |
// 如果有传入昵称参数，则使用传入的昵称 |
||||
uni.showToast({ |
if (options.nickname) { |
||||
title: '请输入昵称', |
this.nickname = decodeURIComponent(options.nickname); |
||||
icon: 'none' |
this.originalNickname = this.nickname; |
||||
}) |
} |
||||
return; |
}, |
||||
} |
methods: { |
||||
this.Post({ |
// 获取微信昵称 |
||||
nickname: this.nickname |
getWechatNickname() { |
||||
}, '/api/user/profile').then(res => { |
// #ifdef MP-WEIXIN |
||||
console.log(res) |
uni.getUserProfile({ |
||||
if (res.code == 1 || res.code == 200) { |
desc: "用于完善用户资料", |
||||
uni.showModal({ |
success: (res) => { |
||||
title: '提示', |
console.log("获取用户信息成功:", res); |
||||
content: '保存成功！', |
if (res.userInfo && res.userInfo.nickName) { |
||||
success: res => { |
this.nickname = res.userInfo.nickName; |
||||
if (res.confirm) { |
uni.showToast({ |
||||
this.goBack() |
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; |
||||
|
} |
||||
|
|
||||
|
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: "昵称保存成功！", |
||||
|
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> |
</script> |
||||
|
|
||||
<style scoped> |
<style lang="scss" scoped> |
||||
.bg { |
.change-nickname-container { |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
padding-top: 50rpx; |
background-color: #f5f5f5; |
||||
} |
padding-bottom: env(safe-area-inset-bottom); |
||||
|
} |
||||
.nickname-box { |
|
||||
display: flex; |
// 页面标题 |
||||
padding: 10rpx 0 30rpx; |
.page-header { |
||||
margin: 0 30rpx; |
background-color: #fff; |
||||
align-items: center; |
padding: 20rpx 30rpx; |
||||
background: white; |
border-bottom: 1rpx solid #f0f0f0; |
||||
margin-bottom: 100rpx; |
} |
||||
font-size: 30rpx; |
|
||||
height: 70rpx; |
.page-title { |
||||
border-bottom: 1rpx solid #D8D8D8; |
font-size: 32rpx; |
||||
} |
font-weight: 600; |
||||
|
color: #333; |
||||
.nickname-box span { |
} |
||||
flex-shrink: 0; |
|
||||
} |
// 输入区域 |
||||
|
.input-section { |
||||
.nickname-box input { |
margin-top: 20rpx; |
||||
flex: 1; |
} |
||||
font-size: 30rpx; |
|
||||
display: block; |
.input-card { |
||||
} |
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
.btn { |
margin: 0 30rpx; |
||||
color: black; |
border-radius: 16rpx; |
||||
margin: 0 auto; |
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
line-height: 80rpx; |
} |
||||
position: relative; |
|
||||
font-size: 34rpx; |
.input-label { |
||||
text-align: center; |
font-size: 28rpx; |
||||
width: 333rpx; |
color: #333; |
||||
height: 80rpx; |
font-weight: 600; |
||||
background: #C3282E; |
margin-bottom: 20rpx; |
||||
border-radius: 40rpx; |
} |
||||
color: #FFFFFF; |
|
||||
} |
.input-wrapper { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.nickname-input { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 30rpx; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
// 快捷操作区域 |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.action-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 4rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.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> |
</style> |
||||
Loading…
Reference in new issue