EpicSoul/subPackages/user/changeNickname.vue

<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>