yfs/pages/user/change.vue

<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="个人资料"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="user-avatar">
      <button
        class="avatar-wrapper"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
      >
        <image class="avatar" :src="avatarUrl"></image>
      </button>
      <text class="avatar-title">修改头像</text>
      <image
        class="camera-icon"
        :src="$img1('my/camera.png')"
        mode="aspectFill"
      ></image>
    </view>

    <view class="form-container">
      <view class="form-item">
        <view class="form-label">昵称:</view>
        <view class="form-input">
          <input
            type="nickname"
            v-model="nickname"
            placeholder="请输入您的昵称"
            @blur="getnickname"
          />
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">ID:</view>
        <view class="form-input">
          <input disabled :value="uid" />
        </view>
      </view>
    </view>

    <view class="submit-btn" @click="updateUserInfo">确认修改</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      avatarUrl: "",
      nickname: "",
      headimg_status: false,
      id: "",
      uid: "",
      imageBase64: "",
    };
  },

  onLoad() {
    this.initUserInfo();
  },

  methods: {
    /**
     * 初始化用户信息
     */
    initUserInfo() {
      const userInfo = uni.getStorageSync("userinfo");
      if (userInfo) {
        this.avatarUrl = userInfo.headimg || "";
        this.nickname = userInfo.nickname || "";
        this.id = userInfo.ID;
        this.uid = userInfo.uid;
      }
    },

    /**
     * 返回上一页
     */
    back() {
      uni.navigateBack();
    },

    /**
     * 获取昵称
     */
    getnickname(e) {
      this.nickname = e.detail.value;
    },

    /**
     * 选择头像
     */
    onChooseAvatar(e) {
      if (e && e.detail && e.detail.avatarUrl) {
        this.avatarUrl = e.detail.avatarUrl;
        this.headimg_status = true;
        this.convertToBase64(this.avatarUrl);
      }
    },

    /**
     * 将图片转换为Base64
     */
    convertToBase64(filePath) {
      uni.getFileSystemManager().readFile({
        filePath: filePath,
        encoding: "base64",
        success: (res) => {
          this.imageBase64 = "data:image/png;base64," + res.data;
        },
        fail: (err) => {
          console.error("读取文件失败:", err);
          uni.showToast({
            title: "图片处理失败",
            icon: "none",
          });
        },
      });
    },

    /**
     * 更新用户信息
     */
    updateUserInfo() {
      if (!this.nickname) {
        uni.showToast({
          title: "请输入昵称",
          icon: "none",
        });
        return;
      }

      const data = {
        nickname: this.nickname,
        headimg: this.avatarUrl,
        imagebase: this.imageBase64,
      };

      this.$request
        .post("update_userinfo", data)
        .then((res) => {
          if (res.status === 1) {
            // 更新本地存储的用户信息
            const userInfo = uni.getStorageSync("userinfo") || {};
            userInfo.nickname = this.nickname;
            userInfo.headimg = this.avatarUrl;
            uni.setStorageSync("userinfo", userInfo);

            uni.showToast({
              title: "修改成功",
              icon: "success",
            });

            // 延迟返回
            setTimeout(() => {
              uni.redirectTo({
                url: "./index",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg || "修改失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
          console.error(err);
        });
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.user-avatar {
  padding: 80rpx 0 60rpx 0;
  text-align: center;
  position: relative;

  .avatar-title {
    font-size: 30rpx;
    color: #ffffff;
    position: absolute;
    top: 280rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .avatar-wrapper {
    width: 165rpx;
    height: 165rpx;
    margin: auto;
    border-radius: 128rpx;
    overflow: hidden;
    border: 1rpx solid #fff;
    background-color: transparent;
    padding: 0;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
  }

  .camera-icon {
    width: 88rpx;
    height: 94rpx;
    position: relative;
    bottom: 60rpx;
    left: 60rpx;
  }
}

.form-container {
  width: 690rpx;
  margin: 0 auto;
}

.form-item {
  display: flex;
  padding: 30rpx 0;
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rpx;
    background: #666666;
  }

  .form-label {
    width: 120rpx;
    font-size: 32rpx;
    color: #ffffff;
  }

  .form-input {
    flex: 1;

    input {
      flex: 1;
      text-align: right;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

.submit-btn {
  width: 468rpx;
  height: 112rpx;
  background: #ff873a;
  border-radius: 50rpx;
  border: 2rpx solid #ffffff;
  font-size: 28rpx;
  color: #ffffff;
  margin: 200rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>