feat(用户中心): 添加项目存档页面及用户中心功能
- 新增项目存档页面，包含项目列表展示和筛选功能 - 完善用户中心页面，添加用户信息展示和导航功能 - 配置路由信息，支持项目存档页面跳转
This commit is contained in:
parent
3fe788ec23
commit
7c0685ef44
|
|
@ -57,6 +57,13 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ArchivesRoom/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目存档",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
<!-- 项目存档 -->
|
||||
<template>
|
||||
<view class="PageBox">
|
||||
<view class="TopBox">
|
||||
<view class="iconBox">
|
||||
<u-icon name="arrow-leftward" size="30rpx" color="#333" @click="GoBack"></u-icon>
|
||||
</view>
|
||||
<view class="titleBox">项目归档</view>
|
||||
<view class="BtnBox"> </view>
|
||||
</view>
|
||||
<view class="SearchBox">
|
||||
<u-input placeholder="请输入项目名称">
|
||||
<template #suffix>
|
||||
<view class="SelectBox">
|
||||
<u-select :current="TypeValue" :options="TypeList" placeholder="请选择工单类型" size="large"
|
||||
showOptionsLabel @update:current="TypeValue = $event"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<view class="ListBox">
|
||||
<u-virtual-list :list-data="dataSource" :item-height="200" height="100%">
|
||||
<template #default="{ item, index }">
|
||||
<view class="CardBox">
|
||||
<view class="FlexBox">
|
||||
<view class="Title">{{ item.name }}</view>
|
||||
<view class="DetailBtn">
|
||||
<u-button plain :text="item.status" :type="item.status === '通过' ? 'success' : 'error'"
|
||||
size="small"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="CodeTxt">施工单位：{{ item.company }}</view>
|
||||
<view class="CodeTxt">完工时间：{{ item.completeTime }}</view>
|
||||
<view class="btnBox">
|
||||
<u-button text="查看详情" plain type="primary" @click="GoDetail(item.id)"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-virtual-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const TypeValue = ref('1') // 工单类型
|
||||
// 类型列表
|
||||
const TypeList = ref([
|
||||
{ name: '全部', id: '1' },
|
||||
{ name: '近三个月', id: '2' },
|
||||
{ name: '近六个月', id: '3' },
|
||||
])
|
||||
|
||||
// 项目列表
|
||||
const dataSource = ref([
|
||||
{ id: 1, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-01', status: '通过' },
|
||||
{ id: 2, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-02', status: '未通过' },
|
||||
{ id: 3, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-03', status: '通过' },
|
||||
{ id: 4, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-04', status: '通过' },
|
||||
{ id: 5, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-05', status: '通过' },
|
||||
{ id: 6, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-06', status: '通过' },
|
||||
{ id: 7, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-07', status: '通过' },
|
||||
])
|
||||
|
||||
// 跳转项目详情
|
||||
const GoDetail = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ProgectDetails/index?id=' + id
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const GoBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.FlexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.SelectBox {
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
|
||||
.u-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.PageBox {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
|
||||
.SearchBox {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.TopBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.titleBox {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.ListBox {
|
||||
padding: 20rpx 0px;
|
||||
margin-top: 20rpx;
|
||||
height: calc(100% - 200rpx);
|
||||
overflow: hidden;
|
||||
|
||||
.CardBox {
|
||||
width: calc(100% - 30rpx);
|
||||
height: calc(100% - 30rpx);
|
||||
margin: 0 auto;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08), 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: auto;
|
||||
|
||||
.Title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.DetailBtn {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.CodeTxt {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.BtnList {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,94 @@
|
|||
<!-- 个人中心 -->
|
||||
<template>
|
||||
<div>用户中心</div>
|
||||
<view class="PageBox">
|
||||
<view class="CardBox">
|
||||
<view class="imgBox">
|
||||
<u-image src="https://img95.699pic.com/photo/60054/8564.jpg_wh300.jpg" shape="circle" width="100rpx"
|
||||
height="100rpx" />
|
||||
</view>
|
||||
<view class="usrInfoBox">
|
||||
<view class="FlexBox Title">{{ userInfo.name }}-{{ userInfo.position }} </view>
|
||||
<view class="FlexBox">所属单位：{{ userInfo.unit }} </view>
|
||||
<view class="FlexBox">联系方式：{{ userInfo.phone }} </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="CardBox">
|
||||
<u-icon name="bell-fill" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">消息中心</view>
|
||||
</view>
|
||||
<view class="CardBox" @click="toArchivesRoom">
|
||||
<u-icon name="file-text-fill" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">项目存档</view>
|
||||
</view>
|
||||
<view class="CardBox">
|
||||
<u-icon name="arrow-leftward" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
const userInfo = ref({
|
||||
id: '123456', // 用户ID
|
||||
name: '张三', // 用户名
|
||||
phone: '13800138000', // 手机号
|
||||
email: 'zhangsan@example.com', // 邮箱
|
||||
position: '现场监理工程师', // 职位
|
||||
unit: '中国建筑集团有限公司', // 所属单位
|
||||
})
|
||||
|
||||
|
||||
// 跳转到项目存档页面
|
||||
const toArchivesRoom = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ArchivesRoom/index',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.FlexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.PageBox {
|
||||
background-color: #fff;
|
||||
height: calc(100vh - 120rpx);
|
||||
overflow: hidden;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.CardBox {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 20rpx;
|
||||
background-color: #F9FAFB;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue