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.
325 lines
6.6 KiB
325 lines
6.6 KiB
<template>
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "changeNickname",
|
|
data() {
|
|
return {
|
|
nickname: "",
|
|
originalNickname: "", // 保存原始昵称
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 如果有传入昵称参数，则使用传入的昵称
|
|
if (options.nickname) {
|
|
this.nickname = decodeURIComponent(options.nickname);
|
|
this.originalNickname = this.nickname;
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取微信昵称
|
|
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: "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>
|
|
|
|
<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;
|
|
}
|
|
|
|
// 输入区域
|
|
.input-section {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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>
|
|
|