Small_goose_Vue3/pages/mine/profile.vue

<template>
  <view class="profile-container">
    <view class="profile-header">个人信息</view>
    <view class="profile-list">
      <!-- 头像 -->
      <view class="profile-item" @click="chooseAvatar">
        <view class="item-label">头像</view>
        <image class="avatar" :src="avatarUrl" mode="aspectFill" />
        <text class="arrow">›</text>
      </view>
      <!-- 昵称 -->
      <view class="profile-item" @click="editNickname">
        <view class="item-label">昵称</view>
        <view class="item-value">{{ nickname }}</view>
        <text class="arrow">›</text>
      </view>
      <!-- 更换手机号 -->
      <view class="profile-item" @click="goToChangePhone">
        <view class="item-label">更换手机号</view>
        <view class="item-value">{{ phone }}</view>
        <text class="arrow">›</text>
      </view>
      <!-- 微信绑定（可选） -->
      <view class="profile-item" @click="goToUnbindWechat">
        <view class="item-label">解绑微信</view>
        <image src="/static/wechat.png" class="wechat-icon" />
        <view class="item-value">{{ wechatName }}</view>
        <text class="arrow">›</text>
      </view>
      <!-- 设置密码 -->
      <view class="profile-item" @click="goToSetPassword">
        <view class="item-label">设置密码</view>
        <text class="arrow">›</text>
      </view>
      <!-- 账号注销 -->
      <view class="profile-item" @click="goToCancelAccount">
        <view class="item-label">账号注销</view>
        <text class="arrow">›</text>
      </view>
    </view>
    <!-- 昵称编辑弹窗 -->
    <view v-if="showNicknamePopup" class="popup-mask">
      <view class="popup-content">
        <input v-model="editNicknameValue" placeholder="请输入新昵称" />
        <view class="popup-btns">
          <button @click="showNicknamePopup=false">取消</button>
          <button @click="saveNickname">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '',
      nickname: '',
      phone: '',
      wechatName: '',
      editNicknameValue: '',
      showNicknamePopup: false
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const uid = uni.getStorageSync('uid')
      const res = await uni.request({
        url: `http://localhost:9527/api/getUid?uid=${uid}`,
        method: 'GET'
      })
      if (res.statusCode === 200 && res.data.code === 200) {
        const data = res.data.data
        this.avatarUrl = data.avatarUrl
        this.nickname = data.nickname
        this.phone = data.phone
        this.wechatName = data.wechatName || ''
      }
    },
    // 选择并上传头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        success: async (chooseRes) => {
          const filePath = chooseRes.tempFilePaths[0]
          // 这里假设你有后端/OSS直传接口
          const uploadRes = await uni.uploadFile({
            url: '你的OSS上传接口', // TODO: 替换为你的OSS上传接口
            filePath,
            name: 'file'
          })
          // 上传成功后，更新头像
          const avatarUrl = JSON.parse(uploadRes.data).url
          await uni.request({
            url: 'http://localhost:9527/api/updateUser',
            method: 'POST',
            data: { uid: uni.getStorageSync('uid'), avatarUrl }
          })
          this.avatarUrl = avatarUrl
          uni.showToast({ title: '头像已更新', icon: 'success' })
        }
      })
    },
    // 编辑昵称
    editNickname() {
      this.editNicknameValue = this.nickname
      this.showNicknamePopup = true
    },
    async saveNickname() {
      await uni.request({
        url: 'http://localhost:9527/api/updateUser',
        method: 'POST',
        data: { uid: uni.getStorageSync('uid'), nickname: this.editNicknameValue }
      })
      this.nickname = this.editNicknameValue
      this.showNicknamePopup = false
      uni.showToast({ title: '昵称已更新', icon: 'success' })
    },
    // 跳转更换手机号
    goToChangePhone() {
      uni.navigateTo({ url: '/pages/mine/changePhone' })
    },
    // 跳转设置密码
    goToSetPassword() {
      uni.navigateTo({ url: '/pages/mine/setPassword' })
    },
    // 跳转账号注销
    goToCancelAccount() {
      uni.navigateTo({ url: '/pages/mine/cancelAccount' })
    },
    // 跳转解绑微信
    goToUnbindWechat() {
      uni.navigateTo({ url: '/pages/mine/unbindWechat' })
    }
  }
}
</script>

<style scoped>
.profile-container {
  background: #f7f8fa;
  min-height: 100vh;
}
.profile-header {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  padding: 40rpx 0 20rpx 0;
  background: #fff;
}
.profile-list {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}
.profile-item {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  height: 100rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.profile-item:last-child {
  border-bottom: none;
}
.item-label {
  flex: 0 0 180rpx;
  color: #333;
  font-size: 30rpx;
}
.item-value {
  flex: 1;
  color: #666;
  font-size: 28rpx;
  text-align: right;
  margin-right: 16rpx;
}
.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-left: auto;
  margin-right: 8rpx;
  background: #eee;
}
.wechat-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}
.arrow {
  color: #bbb;
  font-size: 36rpx;
  margin-left: 8rpx;
}
.popup-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  min-width: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-content input {
  width: 300rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 24rpx;
}
.popup-btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.popup-btns button {
  flex: 1;
  margin: 0 8rpx;
  background: #409EFF;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 0;
  font-size: 28rpx;
}
</style>