一、前期准备
1.个人主页页面需要添加插件组件名：uni-list
2.个人资料页面需要添加插件组件名：uni-popup
二、个人页面
2.1修改背景图片+头像操作效果
2.2在<template></template>添加以下内容
2.2.1上传背景图片代码
2.2.2上传头像代码
2.3在methods方法里面添加
2.3.1背景图片up()方法
up() {
uni.chooseImage({
//定义 选择的 数量
count: 1,
success: (res) => {
//获取 图片 链接
let imgUrl = res.tempFilePaths[0]
uni.request({
url: imgUrl,
//设置arraybuffer对象 类型
responseType: "arraybuffer",
success: (res) => {
if (res.statusCode === 200) {
let data = res.data
//转换成 base64编码
const base64 = uni.arrayBufferToBase64(data)
uni.request({
url: "替换成自己的url地址",
method: "post",
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换成自己的appkey值',
tokenString: this.token,
imgType: 'jpg',
serverBase64Img: base64
},
success(res) {
console.log('res', res);
},
fail(err) {
console.log('err', err)
}
})
this.back();
}
}
})
}
})
},2.3.1头像uppicture()方法
uppicture() {
uni.chooseImage({
//定义 选择的 数量
count: 1,
success: (res) => {
//获取 图片 链接
let imgUrl = res.tempFilePaths[0]
uni.request({
url: imgUrl,
//设置arraybuffer对象 类型
responseType: "arraybuffer",
success: (res) => {
if (res.statusCode === 200) {
let data = res.data
//转换成 base64编码
const base64 = uni.arrayBufferToBase64(data)
uni.request({
url: "替换为自己的url地址",
method: "post",
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
imgType: 'jpg',
serverBase64Img: base64
},
success(res) {
console.log('res', res);
},
fail(err) {
console.log('err', err)
}
})
this.back();
}
}
})
}
})
},三、个人资料页面
3.1 修改昵称+修改简介操作效果
3.2在<template></template>添加以下内容
3.2.1昵称和简介的弹出窗口代码
<uni-popup ref="popupNick" type="bottom" border-radius="10px 10px 0 0" >
<view class="register-box">
<view class="title-x">
<view class="title">修改昵称</view>
<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
</view>
<view class="from1">
<uv-form labelPosition="left" ref="form">
<uv-form-item label="昵称" labelWidth="80px" prop="userInfo.phone" borderBottom>
<uv-input v-model="newNickName" placeholder="输入新昵称" border="none">
</uv-input>
</uv-form-item>
</uv-form>
</view>
<view class="register1-btn" @click="confirmEdit('popupNick')">保存</view>
</view>
</uni-popup>
<uni-popup ref="popupDesc" type="bottom" border-radius="10px 10px 0 0">
<view class="register-box">
<view class="title-x">
<view class="title">修改简介</view>
<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
</view>
<view class="from1">
<uv-form labelPosition="left" ref="form">
<uv-form-item label="简介" labelWidth="80px" prop="userInfo.phone" borderBottom>
<uv-input v-model="newDesc" placeholder="输入新简介" border="none">
</uv-input>
</uv-form-item>
</uv-form>
</view>
<view class="register1-btn" @click="confirmEdit('popupDesc')">保存</view>
</view>
</uni-popup>3.2.2昵称和简介的表单代码
<view class="chat-item">
<view class="chat-content" @click="editNickName">
<text class="title">昵称</text>
</view>
<text class="information">{{alldata[0].nickName ||'Allen'}}</text>
</view>
<view class="separator"></view>
<view class="chat-item">
<view class="chat-content" @click="editDesc">
<text class="title">简介</text>
</view>
<text class="information">{{alldata[0].desc ||'这家伙很懒，什么都没有留下！'}}</text>
</view>3.3在methods方法里面添加
3.3.1提交昵称修改updateNickName()方法
// 提交昵称修改
updateNickName() {
uni.request({
url: '替换为自己的url地址',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
nickName: this.newNickName
},
// ...配置项...
success: (res) => {
if (res.data.code === 200) {
this.alldata[0].nickName = this.newNickName; // 更新昵称
this.$refs.popupNick.close(); // 关闭弹出层
} else {
uni.showToast({
title: res.data.msg || '修改失败',
icon: 'none'
});
}
}
});
},3.3.2提交简介修改updateDesc()方法
// 提交简介修改
updateDesc() {
uni.request({
url: '替换为自己的url地址',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
desc: this.newDesc
},
// ...配置项...
success: (res) => {
if (res.data.code === 200) {
this.alldata[0].desc = this.newDesc; // 更新简介
this.$refs.popupDesc.close(); // 关闭弹出层
} else {
uni.showToast({
title: res.data.msg || '修改失败',
icon: 'none'
});
}
}
});
},四、全部功能代码
4.1个人页面代码
<template>
<view class="my">
<image class="img" :src="myInfo.userBg" mode="widthFix" @click="up"></image>
<view class="personal">
<view class="name-profile">
<image class="head" :src="myInfo.userImg" mode="widthFix" @click="uppicture"></image>
<view class="info">
<view class="name">{{myInfo.nickName ||'Allen'}}</view>
<view class="profile">{{myInfo.desc ||'这家伙很懒，什么都没有留下！'}}</view>
</view>
</view>
<view class="from">
<uni-list :border="false">
<uni-list-item showArrow title="个人资料" to="../../pages/personaldata/personaldata"></uni-list-item>
<uni-list-item showArrow title="我的订单" to="../../pages/order/order"></uni-list-item>
<uni-list-item showArrow title="我的收藏" to="../../pages/myCollection/myCollection"></uni-list-item>
<uni-list-item showArrow title="地址管理" to="../../pages/addresslist/addresslist"></uni-list-item>
<uni-list-item showArrow title="安全中心"
to="../../pages/securitycenter/securitycenter"></uni-list-item>
</uni-list>
</view>
</view>
</view>
</template>
<script>
import {
getMy
} from '../../api/request.js'
export default {
data() {
return {
token: '',
myInfo: {}
}
},
onLoad() {
this.token = uni.getStorageSync('token');
getMy(this.token).then(res => {
this.myInfo = res.data.result[0]
console.log('this.myInfo: ', this.myInfo);
})
},
methods: {
uppicture() {
uni.chooseImage({
//定义 选择的 数量
count: 1,
success: (res) => {
//获取 图片 链接
let imgUrl = res.tempFilePaths[0]
uni.request({
url: imgUrl,
//设置arraybuffer对象 类型
responseType: "arraybuffer",
success: (res) => {
if (res.statusCode === 200) {
let data = res.data
//转换成 base64编码
const base64 = uni.arrayBufferToBase64(data)
uni.request({
url: "替换为自己的url地址",
method: "post",
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
imgType: 'jpg',
serverBase64Img: base64
},
success(res) {
console.log('res', res);
},
fail(err) {
console.log('err', err)
}
})
this.back();
}
}
})
}
})
},
up() {
uni.chooseImage({
//定义 选择的 数量
count: 1,
success: (res) => {
//获取 图片 链接
let imgUrl = res.tempFilePaths[0]
uni.request({
url: imgUrl,
//设置arraybuffer对象 类型
responseType: "arraybuffer",
success: (res) => {
if (res.statusCode === 200) {
let data = res.data
//转换成 base64编码
const base64 = uni.arrayBufferToBase64(data)
uni.request({
url: "替换为自己的url地址值",
method: "post",
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
imgType: 'jpg',
serverBase64Img: base64
},
success(res) {
console.log('res', res);
},
fail(err) {
console.log('err', err)
}
})
this.back();
}
}
})
}
})
},
back() {
uni.navigateBack({
delta: 1
})
},
},
}
</script>
<style lang="scss">
.img {
width: 100%;
}
.personal {
height: 600rpx;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));
/* 渐变透明白色背景 */
margin: 20rpx;
border-radius: 20rpx 20rpx 0 0;
margin-top: -100rpx;
position: relative;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
z-index: 10;
/* 确保高于其他元素 */
.name-profile {
padding: 35rpx;
display: flex;
align-items: flex-start;
position: relative;
.head {
margin-top: -10rpx;
/* 确保头像左边界紧贴容器左边 */
border-radius: 50%;
width: 150rpx;
height: 150rpx;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 50rpx;
}
.name {
font-size: 35rpx;
margin-top: -20rpx;
margin-bottom: 10rpx;
color: #0c34ba;
font-weight: 600;
}
.profile {
margin-top: 30rpx;
color: #646566;
font-size: 24rpx;
font-weight: 400;
}
}
.from {
color: #646566;
margin-top: 80rpx;
font-size: 40rpx;
}
}
</style>4.2个人资料页面代码
<template>
<view class="personaldata">
<view class="box-bg">
<uni-nav-bar dark color="#0c34ba" fixed :border="false" backgroundColor="#ffffff" shadow left-icon="left"
leftText="返回" @clickLeft="goto" title="个人资料" />
</view>
<view class="box"></view>
<view class="list-personal" v-for="(item,index) in alldata">
<view class="chat-item">
<view class="chat-content">
<text class="title">头像</text>
</view>
<image class="chat-avatar" :src="item.userImg" mode="aspectFit"></image>
</view>
<view class="separator"></view>
<view class="chat-item">
<view class="chat-content">
<text class="title">用户id</text>
</view>
<text class="information">{{item.userId}}</text>
</view>
<view class="separator"></view>
<view class="chat-item">
<view class="chat-content" @click="editNickName">
<text class="title">昵称</text>
</view>
<text class="information">{{alldata[0].nickName ||'Allen'}}</text>
</view>
<view class="separator"></view>
<view class="chat-item">
<view class="chat-content" @click="editDesc">
<text class="title">简介</text>
</view>
<text class="information">{{alldata[0].desc ||'这家伙很懒，什么都没有留下！'}}</text>
</view>
</view>
<uni-popup ref="popupNick" type="bottom" border-radius="10px 10px 0 0" >
<view class="register-box">
<view class="title-x">
<view class="title">修改昵称</view>
<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
</view>
<view class="from1">
<uv-form labelPosition="left" ref="form">
<uv-form-item label="昵称" labelWidth="80px" prop="userInfo.phone" borderBottom>
<uv-input v-model="newNickName" placeholder="输入新昵称" border="none">
</uv-input>
</uv-form-item>
</uv-form>
</view>
<view class="register1-btn" @click="confirmEdit('popupNick')">保存</view>
</view>
</uni-popup>
<uni-popup ref="popupDesc" type="bottom" border-radius="10px 10px 0 0">
<view class="register-box">
<view class="title-x">
<view class="title">修改简介</view>
<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
</view>
<view class="from1">
<uv-form labelPosition="left" ref="form">
<uv-form-item label="简介" labelWidth="80px" prop="userInfo.phone" borderBottom>
<uv-input v-model="newDesc" placeholder="输入新简介" border="none">
</uv-input>
</uv-form-item>
</uv-form>
</view>
<view class="register1-btn" @click="confirmEdit('popupDesc')">保存</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
search
} from "../../api/request.js"
export default {
data() {
return {
token: '',
alldata: [],
newNickName: '',
newDesc: '',
}
},
// 放在 onShow 中，因为它会在页面每次出现时被触发
onShow() {
//获取token值
this.token = uni.getStorageSync('token');
//首先判断用户是否登录 token是否存在 如果存在可以继续下一步
//如果不存在 让他跳转到登录页面
if (this.token == '') {
uni.navigateTo({
url: "/pages/login/login"
})
return //终止后面代码的运行
}
this.getpersonaldata();
},
methods: {
handleClose() {
// 确保关闭方法在适当的时候调用
this.$refs.myPopup.close();
},
confirmEdit(refName) {
if (refName === 'popupNick') {
this.updateNickName();
} else if (refName === 'popupDesc') {
this.updateDesc();
}
},
// 弹出编辑昵称窗口并清空输入框
editNickName() {
this.newNickName = this.alldata[0].nickName;
this.$refs.popupNick.open();
},
// 弹出编辑简介窗口并清空输入框
editDesc() {
this.newDesc = this.alldata[0].desc;
this.$refs.popupDesc.open();
},
// 提交昵称修改
updateNickName() {
uni.request({
url: '替换为自己的url地址值',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
nickName: this.newNickName
},
// ...配置项...
success: (res) => {
if (res.data.code === 200) {
this.alldata[0].nickName = this.newNickName; // 更新昵称
this.$refs.popupNick.close(); // 关闭弹出层
} else {
uni.showToast({
title: res.data.msg || '修改失败',
icon: 'none'
});
}
}
});
},
// 提交简介修改
updateDesc() {
uni.request({
url: '替换为自己的url地址值',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token,
desc: this.newDesc
},
// ...配置项...
success: (res) => {
if (res.data.code === 200) {
this.alldata[0].desc = this.newDesc; // 更新简介
this.$refs.popupDesc.close(); // 关闭弹出层
} else {
uni.showToast({
title: res.data.msg || '修改失败',
icon: 'none'
});
}
}
});
},
//获取个人信息的数据
getpersonaldata() {
uni.request({
url: '替换为自己的url地址值', //仅为示例，并非真实接口地址。
data: {
appkey: '替换为自己的appkey值',
tokenString: this.token
},
success: (res) => {
// 在这里打印从后端返回的数据
console.log('返回的数据:', res);
this.alldata = res.data.result;
},
fail: (err) => {
// 在请求失败时打印错误信息
console.error('请求失败:', err);
}
});
},
back() {
uni.navigateTo({
url: "/pages/personaldata/personaldata"
})
},
goto() {
uni.switchTab({
url: "/pages/my/my"
});
},
}
}
</script>
<style lang="scss">
$nav-height: 30px;
.personaldata {
flex-direction: column;
.box-bg {
background-color: #F5F5F5;
/deep/ .uni-nav-bar-text {
color: black !important;
font-size: 32rpx;
}
}
.box {
height: 200rpx;
background: #0c34ba;
}
.list-personal {
height: 450rpx;
flex-direction: column;
margin: 20rpx;
flex: 1;
border-radius: 20rpx 20rpx 0 0;
margin-top: -50rpx;
background: white;
display: flex;
flex-direction: column;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
.chat-item {
display: flex;
align-items: center;
padding: 20rpx 20rpx;
/* 调整内边距 */
}
.separator {
height: 1rpx;
width: 90%;
background-color: #f5f6f7;
margin-top: 10rpx;
margin-left: 30rpx;
}
.chat-content {
flex: 1;
margin-right: 20rpx;
/* 头像与内容的间隔 */
}
.title {
font-size: 28rpx;
/* 标题字号 */
color: #333;
/* 标题颜色 */
}
.chat-avatar {
width: 80rpx;
/* 头像宽度 */
height: 80rpx;
/* 头像高度 */
border-radius: 50%;
/* 如果需要圆形头像 */
margin-left: auto;
/* 使头像靠右 */
}
.information {
color: #969799;
font-size: 26rpx;
}
}
.register-box {
height: 400rpx;
background: white;
padding: 30rpx;
.title-x {
display: flex;
justify-content: space-between;
}
.title {
color: #646566;
font-weight: 600;
font-size: 52rpx;
}
.from1 {
margin-top: 70rpx;
}
.register1-btn {
height: 90rpx;
font-size: 30rpx;
text-align: center;
line-height: 90rpx;
color: white;
border-radius: 50rpx;
margin-top: 100rpx !important;
margin: 0 10rpx;
background: #1441cc;
}
}
}
</style>4.3 request.js代码
import http from './http.js'
// 导出一个值
let appkey = "替换成你的"
export const search = (data) => {
return http({
url: '/search',
method: 'get',
//get请求使用params post请求 使用data
params: {
appkey,
name: data
}
})
}
export const getMy = (params) => {
return http({
url: '/findMy',
method: 'get',
//get请求使用params post请求 使用data
params: {
appkey,
tokenString: params
}
})
}4.4http.js
import axios from "axios";
// 由于微信小程序和app 用并没有xmlhttpRequest 对象,需要设置对应的适配器,
// 实际上就是调用了 uni.request 方法
import {
UniAdapter
} from "uniapp-axios-adapter";
const http = axios.create({
// #ifdef H5
baseURL: "替换成你的",
// #endif
baseURL: "替换成你的",
timeout: 5000,
adapter: UniAdapter, // 指定适配器1
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
});
//添加一个axios请求之前拦截器
http.interceptors.request.use((config) => {
//config: 请求配置(请求头, 请求参数, 请求类型, 请求路径, ....)
let tokenString = localStorage.getItem('token');
let appkey = '替换成你的';
//启动加载提示
return config;
}, (err) => {
//关闭加载提示
return Promise.reject(err);
})
// 添加一个响应之前拦截器
http.interceptors.response.use((res) => {
//res: 服务器响应数据
//
//关闭加载提示
return res;
}, (err) => {
//关闭加载提示
return Promise.reject(err);
})
export default http;
五、点赞收藏评论
看完觉得有用的话希望你能点赞收藏评论！！！感谢！！！
扫一扫
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
