uniapp 实现个人信息的修改

今天设计用户界面和用户基本信息设计页面，完成登录后用户的信息就会显示在此页面，然后进入修改页面后就可以对用户的对应信息进行修改。

<template>
  <view class="container">
    <view class="profile">
      <image :src="userInfo.headshot || defaultAvatar" class="avatar" @dblclick="toLogin()"></image>
      <text class="username">{{ userInfo.username || '用户名未设置' }}</text>
      <view v-if="showDetails" class="details-container" ref="details" @dblclick="changeInfo">
        <view class="detail-item">
          <text class="detail-label">手机号：</text>
          <text class="detail-value">{{ userInfo.phone || '暂无' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">性别：</text>
          <text class="detail-value">{{ userInfo.gender || '暂无' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">生日：</text>
          <text class="detail-value">{{ userInfo.birthday || '暂无' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">位置：</text>
          <text class="detail-value">{{ userInfo.location || '暂无' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">账号：</text>
          <text class="detail-value">{{ userInfo.account || '暂无' }}</text>
        </view>
      </view>
      <text v-if="!showDetails" class="details-hint" @click="toggleDetails">查看详细信息</text>
      <text v-else class="details-hint" @click="toggleDetails">收起</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
        isPopupVisible: false,
        showDetails: false,
        userInfo: {},
        defaultAvatar:'/static/logo.png'
    };
  },
    onShow() {
     // 页面显示时调用的方法
     console.log('页面显示了');
    // 获取存储的数据
    this.userInfo = uni.getStorageSync('userInfo');//读取登录成功后的存入的信息

    // 检查存储的数据是否存在
    if (this.userInfo) {
        // 存储的数据存在，您可以在这里使用它
        console.log(this.userInfo===null);
    } else {
        // 如果存储的数据不存在，则可能出现错误或者之前没有存储任何数据
        console.log("没有找到存储的数据");
        console.log(this.userInfo===null);
    }

    },
    methods: {
    changeInfo(){
        console.log(this.userInfo===null)
        if(this.userInfo)
        {
            uni.navigateTo({
                url:"/pages/userinformation/changeinfo/changeinfo"
            })

        }
        else{
            uni.showToast({
                title:"请登陆后再试",
                icon:"none",
            })
            uni.navigateTo({
                    url:"/pages/userinformation/login/login"
            })
        }
    },
    toLogin()//登录或切换账号
    {
        uni.navigateTo({
                url:"/pages/userinformation/login/login"
        })
    },
    toggleDetails() {
      this.showDetails = !this.showDetails;
    },

    },
}
</script>

<style >
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 页面内容置于顶部 */
    align-items: center;
    background-color: #f0f0f0; /* 设置页面背景颜色 */
  }
  .container {
    width: 80%;
    max-width: 800px;
    height: auto; /* 让容器高度自适应内容 */
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px; /* 上方留出一些空白 */
    background-color: white; /* 设置容器背景颜色 */
  }

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.profile:hover {
  background-color: #f0f0f0;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  font-size: 20px;
}

.details-hint {
  font-size: 14px;
  color: #ccc; /* 浅一点的颜色 */
  margin-top: 10px;
}

.details-container {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-item {
  margin-bottom: 10px;
}

.detail-label {
  font-weight: bold;
}

.detail-value {
  margin-left: 10px;
  color: #666;
}
</style>

未登录时：

 登录完成后：

 

 然后进入修改页面

<template>
  <view class="container">
    <view class="header">
      <text class="title">用户信息</text>
    </view>
    <view class="avatar">
      <image class="avatar-img" :src="userInfo.headshot || defaultAvatar" mode="aspectFill" @tap="changeAvatar"></image>
    </view>
    <view class="form-group">
      <text class="label">用户名:</text>
      <input class="input" type="text" v-model="userInfo.username" placeholder="未填写用户名" />
    </view>
    <view class="form-group">
      <text class="label">手机号:</text>
      <input class="input" type="tel" v-model="userInfo.phone" placeholder="手机号" disabled/>
    </view>
    <view class="form-group">
      <text class="label">账号:</text>
      <input class="input" type="text" v-model="userInfo.account" disabled />
    </view>
    <view class="form-group">
      <text class="label">性别:</text>
      <picker class="input" mode="selector" :range="genderOptions" @change="handleGenderChange">
        <text>{{ userInfo.gender||'未填写' }}</text>
      </picker>
    </view>
    <view class="form-group">
      <text class="label">生日:</text>
      <picker class="input" mode="date" @change="handleDateChange">
        <view>{{ userInfo.birthday||'未填写' }}</view>
      </picker>
    </view>
    <view class="form-group">
      <text class="label">位置:</text>
      <input class="input" type="text" v-model="userInfo.location" placeholder="未填写位置" />
    </view>
    <view class="form-group">
      <text class="label">个人简介:</text>
      <input class="input" type="text" v-model="userInfo.message" placeholder="这个人很懒，什么都没有留下" />
    </view>
    <view class="form-group">
      <button class="btn" @click="updateUserInfo">更新信息</button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
        genderOptions: ['男', '女', '其他'], // 性别选项列表
        defaultAvatar:'/static/logo.png',
        username:"",
        message:"",
        location:"",
        userInfo: {
      },
    };
  },
  onShow() {
   // 页面显示时调用的方法
   console.log('页面显示了');
  // 获取存储的数据
  this.userInfo = uni.getStorageSync('userInfo');
  this.gender+=this.userInfo.gender;
  // 检查存储的数据是否存在
  if (this.userInfo) {
      // 存储的数据存在，您可以在这里使用它
      console.log(this.userInfo);
  } else {
      // 如果存储的数据不存在，则可能出现错误或者之前没有存储任何数据
      console.log("没有找到存储的数据");
  }
  
  },
  methods: {
    handleGenderChange(event) {
      const index = event.detail.value; // 获取选择的索引
      this.userInfo.gender = this.genderOptions[index]; // 更新性别
      // 在这里可以添加其他逻辑，例如将选择的性别发送到后端或执行其他操作
    },
    handleDateChange(event) {
      // 处理日期选择器变化事件
      this.userInfo.birthday = event.detail.value;
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // 选择成功后将头像地址赋给userInfo.headshot
          this.defaultAvatar = res.tempFilePaths[0];
          uni.uploadFile({
                    url: this.$BASE_URL.BASE_URL+'/upload',
                    name: 'file',
                    filePath: this.defaultAvatar,
                    success: function(uploadRes) {
                      console.log(uploadRes.data);
                        this.defaultAvatar=uploadRes.data;
                    uni.setStorageSync('headshot', this.defaultAvatar);
                    console.log(this.defaultAvatar)
                    
                    },
                    fail(){
                      uni.showToast({
                          title:"请检查网络设置",
                          icon:"none"
                      })
                    }
          })
        },
      });
    },
    updateUserInfo() {
        console.info(this.userInfo)
        this.username+=this.userInfo.username;
        this.message+=this.userInfo.message;
        this.location+=this.userInfo.location;
        console.log(this.defaultAvatar)
        this.userInfo.headshot=uni.getStorageSync('headshot', this.defaultAvatar);
        console.log(this.userInfo);
        if(this.username.length>20)
        {
            uni.showToast({
                title:"用户名长度应小于20位",
                icon:"none"
            })
            return;
        };
        if(this.location.length>50)
        {
            uni.showToast({
                title:"位置信息长度应小于20位",
                icon:"none"
            })
            return;
        };
        if(this.message.length>200)
        {
            uni.showToast({
                title:"个人简介长度应小于200位",
                icon:"none"
            })
            return;
        }
        uni.request({
            url:this.$BASE_URL.BASE_URL+'/updata/user',
            method:"POST",
            data:this.userInfo,
            success: (res) => {
                if(res.data.code===1)
                {
                    uni.showToast({
                        title:"信息修改成功",
                    })
                    uni.setStorageSync('userInfo', this.userInfo);
                    uni.redirectTo({
                        url:"/pages/userinformation/userinformation"
                    })
                }
                else{
                    uni.showToast({
                        title:"信息修改失败",
                        icon:"none"
                    })
                }
            }
        })
    }, 
  },
};
</script>

<style>
.error {
  color: #ff0000;
  font-size: 12px;
}
.container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.avatar {
  text-align: center;
  margin-bottom: 20px;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.btn-edit-avatar {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  margin-right: 10px;
}

.input {
  flex: 1;
  padding: 5px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
</style>