370 lines
7.2 KiB
Vue
370 lines
7.2 KiB
Vue
<template>
|
||
<view class="profile-page">
|
||
|
||
|
||
<!-- 用户信息区域 -->
|
||
<view class="user-info">
|
||
<view class="name-edit">
|
||
<view class="edit-wapper">
|
||
<view class="nav_img">
|
||
<image src="/static/imgs/index/nav.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="name" @click="showEditModal = true">
|
||
樱桃小丸子
|
||
<u-icon name="edit-pen" color="#2e2e2e" size="34" ></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <image class="edit-icon" src="/static/images/edit.png" mode="aspectFit"></image> -->
|
||
</view>
|
||
<view class="description">
|
||
<view class="title">个人简介</view>
|
||
<view class="content">这家伙很懒，什么都没有写~</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能按钮区域 -->
|
||
<view class="function-buttons">
|
||
<view class="button-row" v-for="(row,rowIndex) in groupedButtons" :key="rowIndex">
|
||
<view class="button-item"
|
||
v-for="(item, index) in row"
|
||
:key="index"
|
||
@click="goPage(item.pageUrl)"
|
||
>
|
||
<image class="icon" :src='item.url' mode="aspectFit"></image>
|
||
<view class="label">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- u-modal 弹窗 -->
|
||
<u-modal :show="showEditModal"
|
||
title="修改用户信息"
|
||
:show-confirm-button="true"
|
||
:show-cancel-button="true"
|
||
@confirm="handleSubmit"
|
||
@cancel="handleCancel">
|
||
<view class="modal-content">
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 头像上传 -->
|
||
<view class="avatar-section">
|
||
<text>头像：</text>
|
||
<u-upload :file-list="avatarList" :max-count="1" @afterRead="handleAvatarUpload"
|
||
@delete="handleAvatarDelete"></u-upload>
|
||
</view>
|
||
|
||
<!-- 姓名输入 -->
|
||
<view class="input-section">
|
||
<text>姓名：</text>
|
||
<u-input v-model="formData.name" placeholder="请输入姓名"></u-input>
|
||
</view>
|
||
|
||
<!-- 简介输入 -->
|
||
<view class="input-section">
|
||
<text>简介：</text>
|
||
<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"></u-input>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<Footer></Footer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '@/components/footer_common.vue';
|
||
|
||
export default {
|
||
components: {
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
// 个人资料修改
|
||
showEditModal: false,
|
||
avatarList: [], // 头像文件列表
|
||
formData: {
|
||
name: "", // 用户姓名
|
||
bio: "", // 用户简介
|
||
},
|
||
choseList: [{
|
||
key: 1,
|
||
url: "/static/imgs/service/service_list.png",
|
||
name: '全部工单',
|
||
pageUrl:'myTickets'
|
||
},
|
||
{
|
||
key: 2,
|
||
url: "/static/imgs/service/service_help.png",
|
||
name: '我的求助',
|
||
pageUrl:'mySeekHelp'
|
||
},
|
||
{
|
||
key: 3,
|
||
url: "/static/imgs/service/service_service.png",
|
||
name: '周边服务',
|
||
pageUrl:'neighbor'
|
||
},
|
||
{
|
||
key: 4,
|
||
url: "/static/imgs/service/service_friend.png",
|
||
name: '邻里圈',
|
||
pageUrl:'neighbor'
|
||
},
|
||
{
|
||
key: 5,
|
||
url: "/static/imgs/service/service_notice.png",
|
||
name: '社区公告',
|
||
pageUrl:'serviceNoticeList'
|
||
},
|
||
{
|
||
key: 6,
|
||
url: "/static/imgs/service/service_phone.png",
|
||
name: '联系社区',
|
||
},
|
||
],
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
groupedButtons() {
|
||
const rows = [];
|
||
for (let i = 0; i < this.choseList.length; i += 3) {
|
||
rows.push(this.choseList.slice(i, i + 3));
|
||
}
|
||
return rows;
|
||
},
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
// 处理头像上传
|
||
handleAvatarUpload(event) {
|
||
const {
|
||
file
|
||
} = event;
|
||
this.avatarList = [{
|
||
url: file.url
|
||
}]; // 更新头像文件列表
|
||
},
|
||
|
||
// 处理头像删除
|
||
handleAvatarDelete() {
|
||
this.avatarList = []; // 清空头像文件列表
|
||
},
|
||
|
||
// 提交表单
|
||
handleSubmit() {
|
||
const {
|
||
name,
|
||
bio
|
||
} = this.formData;
|
||
const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||
|
||
// 模拟提交数据
|
||
console.log("提交的数据：", {
|
||
name,
|
||
bio,
|
||
avatarUrl,
|
||
});
|
||
|
||
// 关闭弹窗
|
||
this.showEditModal = false;
|
||
|
||
// TODO: 调用 API 提交数据到服务器
|
||
},
|
||
|
||
// 取消操作
|
||
handleCancel() {
|
||
this.showEditModal = false; // 关闭弹窗
|
||
},
|
||
|
||
// 跳转详情页面
|
||
goPage(page){
|
||
console.log('page',page)
|
||
if(page){
|
||
uni.navigateTo({
|
||
url: `/pages/${page}/index`,
|
||
// url: '/pages/helpInfo/index',
|
||
success: () => {
|
||
console.log('切换到tabBar页面成功');
|
||
},
|
||
fail: (err) => {
|
||
console.error('切换到tabBar页面失败:', err);
|
||
}
|
||
});
|
||
}else{
|
||
console.error('切换到tabBar页面失败:', err);
|
||
}
|
||
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.profile-page {
|
||
background-color: #f8faff;
|
||
padding: 20rpx;
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.edit-button {
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border: 1rpx solid #ccc;
|
||
}
|
||
|
||
.avatar {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.settings-icon {
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
// background-color: #fff;
|
||
padding: 20rpx;
|
||
margin-top: 140rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.name-edit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.edit-wapper {
|
||
width: 50%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
|
||
.nav_img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 26rpx;
|
||
color: #2e2e2e;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.edit-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
text-align: left;
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
|
||
.title {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
font-weight: 500;
|
||
|
||
}
|
||
|
||
.content {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.function-buttons {
|
||
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
|
||
.button-row {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.button-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 30%;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
|
||
|
||
.icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #2e2e2e;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-content{
|
||
width: 100%;
|
||
|
||
text{
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</style> |