今天设计用户界面和用户基本信息设计页面，完成登录后用户的信息就会显示在此页面，然后进入修改页面后就可以对用户的对应信息进行修改。
<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.headshotthis.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>
