Appearance
我的页面
🍓 接下来我们就进行我的页面开发
基础搭建
☞ 先进行一个基础的搭建
JS
<template>
<view>{{data}}</view>
</template>
<script setup>
import {ref,onMounted} from "vue";
import request from '@/utils/request.js'; //引入我们的请求
const data=ref('我的界面')
</script>获取用户信息
☞ 获取我们的用户信息
JS
import request from '@/utils/request.js';
onMounted(() => {
getUserData();
})
const getUserData = () => {
let userId = uni.getStorageSync('userId');
console.log(userId, 'userId');
request({
url: '/user/' + userId, // 这里的 url 会自动加上 /api 前缀
method: 'get',
}).then((res) => {
console.log('🚀 → res -> 请求成功:', res);
if (res.code == 200) {
userInfo.value = res.data;
}
}).catch((error) => {
console.log('请求失败:', error);
});
}搭建反馈信息
接下来我们在我的页面添加一个反馈信息的界面,反馈的信息界面也非常的简单
JS
<template>
<view class="page-feedback feedbackcont">
<view class="feedbackcontform">
<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="220rpx">
<view class="feedbackcontli">
<uni-forms-item label="问题描述">
</uni-forms-item>
<textarea placeholder-style="font-size:26rpx;" v-model="formData.describe" class="textarea1"
placeholder="详细描述问题或建议" />
</view>
<view class="feedbackcontli">
<uni-forms-item label="联系方式">
</uni-forms-item>
<input class="feedbackcontinput" v-model="formData.phone" type="text" placeholder="手机号码"
placeholder-style="color:#ccc" />
</view>
</uni-forms>
<button @click="submit" class="feedbackbtn">提交</button>
</view>
</view>
</template>
<script setup>
// 参加活动信息等
import {
ref,
onMounted
} from "vue";
import request from '@/utils/request.js';
import {
navigatepage,
switchpage,
relunchpage,
navigateBack
} from '@/utils/methods.js';
const formData = ref({
detail: '',
describe: '',
phone: '',
email: '',
type: '1',
userId: '',
})
const rules = ref({
describe: {
rules: [{
required: true,
erro组件注册使用rMessage: '请输入',
},
]
},
// 对email字段进行必填验证
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
})
const submit = () => {
console.log(formData);
if (!formData.value.describe) {
uni.showToast({
title: '请输入详细描述问题或建议',
icon: "none"
});
return
}
let userId = uni.getStorageSync('userId');
console.log(userId, 'userId');
formData.value.userId=userId;
request({
url: '/feedback', // 这里的 url 会自动加上 /api 前缀
method: 'post',
data:formData.value,
}).then((res) => {
console.log('🚀 → res -> 请求成功:', res);
uni.showToast({
title: res.message,
icon: "none"
});
if (res.code == 200) {
setTimeout(()=>{
navigateBack(1);
},2000)
}else{
}
}).catch((error) => {
console.log('请求失败:', error);
});
}
</script>
<style>
.feedbackcont {
width: 100%;
padding:0 40rpx;
box-sizing: border-box;
}
.feedbackcontli {
width: 100%;
background: #FFFFFF;
border-radius: 10rpx;
padding: 0rpx 20rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
}
.feedbackimgkuang {
width: 180rpx;
float: left;
margin: 0 245rpx;
position: relative;
}
.feedbackcontform {
width: 100%;
float: left;
margin-top: 30rpx;
}
.feedbackimg {
width: 190rpx;
height: 190rpx;
/* float: left; */
/* border-radius: 100rpx; */
margin-right: 20rpx;
}
.feedbackzhanweiimg {
width: 190rpx;
height: 190rpx;
/* float: left; */
/* border-radius: 100rpx; */
}
.feedbackimgpian {
width: 62rpx;
height: 62rpx;
float: right;
margin-top: -60rpx;
}
.feedbackimgkuangname {
width: 100%;
float: left;
text-align: center;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-top: 30rpx;
}
.feedbackcontliname {
width: 100%;
font-size: 34rpx;
font-family: PingFangSC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
}
.feedbackcontform .uni-forms-item {
/* border-bottom: 1rpx solid #DDDDDD; */
margin-bottom: 0;
}
.feedbackcontformps .uni-forms-item {
border-bottom: 1rpx solid #DDDDDD;
margin-bottom: 0;
}
.feedbackcontinput {
border: none;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
height: 110rpx;
line-height: 110rpx;
}
.feedbackcontform .uni-forms-item__label {
height: 110rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 42rpx;
}
.feedbackcontform .uni-data-checklist .checklist-group {
margin-top: 30rpx;
}
.feedbackcontform .uni-date-x--border {
border: none;
margin-top: 20rpx;
}
.feedbackcontform .uni-select {
border: none;
margin-top: 20rpx;
}
.feedbackcontform .uni-date .uni-icons {
display: none;
}
.feedbackcontform .uni-date__x-input {
color: #ccc;
}
.feedbackcontform .uni-forms-item__error {
display: none;
}
.feedbackbtn {
width: 670rpx;
height: 100rpx;
background: #8F41E9;
border-radius: 20rpx;
font-size: 36rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 100rpx;
text-align: center;
margin-top: 60rpx;
}
.textarea1 {
border: none;
border-radius: 14rpx;
height: 100rpx;
width: 100%;
padding: 20rpx 14rpx;
box-sizing: border-box;
}
</style>重载用户信息
用户每次信息更新以后都需要重新加载用户信息，这里我们更改一下写法
👉加载放到我们的onShow中
js
import { onLoad, onShow } from '@dcloudio/uni-app'
onShow(()=>{
console.log('页面激活');
getUserData(); // 刷新用户数据
})用户信息获取
用户具体的信息部分这里也非常简单，填个表单，加载一下用户信息即可
JS
onMounted(() => {
if (props.userId) {
userId.value = props.userId;
console.log(userId.value, 'userId.value');
}
if (userId.value) {
getUser(userId.value);
} else {
uni.showToast({
title: '缺少信息,请联系管理员',
duration: 2000
});
setTimeout(() => {
uni.go(-1);
}, 2000)
}
})上传用户头像
需要注意的是我们这里的上传头像部分，用uniapp提供的上传
js
<view class="userimgkuang" @click="upload">上传</view>👉 上传函数 上传使用uni.chooseImage选择图片，然后使用uni.uploadFile上传即可
JS
// 定义上传函数
const upload = async () => {
console.log('上传');
try {
const token = uni.getStorageSync('token') || '';
// 选择图片
const res = await uni.chooseImage({
count: 1,
});
// 上传文件
const uploadFileRes = await uni.uploadFile({
url: `${config.baseURL}/upload/image`,
filePath: res.tempFilePaths[0],
name: 'file', // 文件对应的 key
header: {
'Authorization': `XX ${token}`,
'Content-Type': 'multipart/form-data', // 设置请求头
},
formData: {
'file': res.tempFilePaths,
},
});
if (json.code === 200) {
form.value.avatar = json.imgurl; // 更新上传后的图片链接
} else {
uni.showToast({
title: json.msg,
icon: 'none',
});
}
} catch (error) {
console.log(error, '上传失败');
}
};