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>