2024/05/23(团队开发)
今天设计用户界面和用户基本信息设计页面,完成登录后用户的信息就会显示在此页面,然后进入修改页面后就可以对用户的对应信息进行修改。
<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>