完成了消息通知页面
This commit is contained in:
parent
a4be21a565
commit
bd19dfbd5a
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--tabs-bottom-bar-color:blue
|
||||||
|
}
|
||||||
32
pages.json
32
pages.json
|
|
@ -1,10 +1,14 @@
|
||||||
{
|
{
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
{
|
||||||
"path" : "pages/login/login",
|
"path": "pages/Repair/Repair",
|
||||||
"style" :
|
"style": {
|
||||||
{
|
"navigationBarTitleText": "报修管理"
|
||||||
"navigationStyle":"custom"
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/login/login",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -30,8 +34,16 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "个人资料"
|
"navigationBarTitleText": "个人资料"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/Repair/RepairDetail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "报修详情"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|
@ -44,14 +56,18 @@
|
||||||
"selectedColor": "#03A8F6",
|
"selectedColor": "#03A8F6",
|
||||||
"borderStyle": "black",
|
"borderStyle": "black",
|
||||||
"backgroundColor": "#FFFFFF",
|
"backgroundColor": "#FFFFFF",
|
||||||
"list": [
|
"list": [{
|
||||||
{
|
|
||||||
"pagePath": "pages/Workbench/Workbench",
|
"pagePath": "pages/Workbench/Workbench",
|
||||||
"iconPath": "static/tabbar/workbench.png",
|
"iconPath": "static/tabbar/workbench.png",
|
||||||
"selectedIconPath": "static/tabbar/workbench._select.png",
|
"selectedIconPath": "static/tabbar/workbench._select.png",
|
||||||
"text": "工作台"
|
"text": "工作台"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"pagePath": "pages/Repair/Repair",
|
||||||
|
"iconPath": "static/tabbar/message.png",
|
||||||
|
"selectedIconPath": "static/tabbar/message_select.png",
|
||||||
|
"text": "报修"
|
||||||
|
}, {
|
||||||
"pagePath": "pages/Message/Message",
|
"pagePath": "pages/Message/Message",
|
||||||
"iconPath": "static/tabbar/message.png",
|
"iconPath": "static/tabbar/message.png",
|
||||||
"selectedIconPath": "static/tabbar/message_select.png",
|
"selectedIconPath": "static/tabbar/message_select.png",
|
||||||
|
|
@ -66,4 +82,4 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"uniIdRouter": {}
|
"uniIdRouter": {}
|
||||||
}
|
}
|
||||||
|
|
@ -5,16 +5,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="container-nav">
|
||||||
|
<view class="container-tabs">
|
||||||
|
<view class="container-tab" v-for="item in activeList" :key="item.index" @click="active=item.index">
|
||||||
|
<view style="width: 130rpx;" :class="{active:item.index==active}">{{item.text}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="container-card">
|
||||||
|
<view class="container-card-item" @click="handleJump">
|
||||||
|
<view class="container-top" >
|
||||||
|
<view class="container-tag" style="background-color: #f5ab4c;" v-if="active==1">未处理</view>
|
||||||
|
<view class="container-tag" style="background-color: #06cc76;" v-else-if="active==2">处理中</view>
|
||||||
|
<view class="container-tag" style="background-color: #ff5842;" v-else-if="active==3">已取消</view>
|
||||||
|
<view class="container-tag" style="background-color: #0e7ff5" v-else>已完工</view>
|
||||||
|
<view class="container-bh">BX1356351685</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-body">
|
||||||
|
<view class="container-body-item">
|
||||||
|
<view class="container-body-left">报修人：</view>
|
||||||
|
<view class="container-body-right">张三三</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-body-item">
|
||||||
|
<view class="container-body-left">保修内容：</view>
|
||||||
|
<view class="container-body-right">机器故障</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-body-item">
|
||||||
|
<view class="container-body-left">维修人员：</view>
|
||||||
|
<view class="container-body-right">张三三</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-body-item">
|
||||||
|
<view class="container-body-left">维修单号：</view>
|
||||||
|
<view class="container-body-right">wu15654185652</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<image src="@/static/line.svg" class="container-line"></image>
|
||||||
|
|
||||||
|
<view class="container-bottom">
|
||||||
|
<view class="container-bottom-left">2023.08.08 22:40:23</view>
|
||||||
|
<view class="container-bottom-right" v-if="active==1">去指派</view>
|
||||||
|
<view class="container-bottom-right" v-else-if="active==2">中止任务</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
watch
|
||||||
|
} from 'vue';
|
||||||
|
// 状态
|
||||||
|
const active = ref(1)
|
||||||
|
// 文字显示
|
||||||
|
|
||||||
|
const statusText = (item) => {
|
||||||
|
switch (item) {
|
||||||
|
case 1:
|
||||||
|
return '未处理';
|
||||||
|
case 2:
|
||||||
|
return '处理中';
|
||||||
|
case 3:
|
||||||
|
return '已取消';
|
||||||
|
case 4:
|
||||||
|
return '已完成';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const activeList = [{
|
||||||
|
"index": 1,
|
||||||
|
"text": "未处理"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"index": 2,
|
||||||
|
"text": "处理中"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"index": 3,
|
||||||
|
"text": "已取消"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"index": 4,
|
||||||
|
"text": "已完成"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleChangeActive = () => {
|
||||||
|
console.log(active.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleJump = ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/Repair/RepairDetail'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$globalWidth: 650rpx;
|
||||||
|
$buttonColor: #0e7ff5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
background: -webkit-linear-gradient(270deg,
|
||||||
|
rgba(227, 239, 249, 1) 0%,
|
||||||
|
rgba(245, 245, 247, 1) 100%);
|
||||||
|
flex-direction: column;
|
||||||
|
/* align-items: center; */
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-nav {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
height: 80rpx;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
.container-tabs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-tab {
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 4rpx solid transparent;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: $buttonColor;
|
||||||
|
border-bottom: 4rpx solid $buttonColor !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container-card {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.container-card-item {
|
||||||
|
width: $globalWidth;
|
||||||
|
min-height: 300rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-top {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-tag {
|
||||||
|
color: white;
|
||||||
|
width: 120rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container-bh {
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body-item {
|
||||||
|
display: flex;
|
||||||
|
font-size: 25rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
.container-body-left {
|
||||||
|
color: #ccc;
|
||||||
|
width: 140rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-line {
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-bottom {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
font-size: 25rpx;
|
||||||
|
|
||||||
|
height: 50rpx;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.container-bottom-right {
|
||||||
|
width: 150rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
color: white;
|
||||||
|
background-color: $buttonColor;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="container-card">
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">设备类型</view>
|
||||||
|
<view class="container-card-item-right">设备类型1</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">维修状态</view>
|
||||||
|
<view class="container-card-item-right" style="color: #F5AB4C;">未处理</view>
|
||||||
|
<view class="container-card-item-right" style="color: #06cc76;">处理中</view>
|
||||||
|
<view class="container-card-item-right" style="color: #FF5842;">已取消</view>
|
||||||
|
<view class="container-card-item-right" style="color: #0e7ff5 ;">已完工</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">设备编号</view>
|
||||||
|
<view class="container-card-item-right">ST1234845465</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">故障现象</view>
|
||||||
|
<view class="container-card-item-right">瓷砖破损</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">保修时间</view>
|
||||||
|
<view class="container-card-item-right">2023-08-05</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">报修人</view>
|
||||||
|
<view class="container-card-item-right">张三三</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="container-card">
|
||||||
|
<view class="container-info">报修信息</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">报修单号</view>
|
||||||
|
<view class="container-card-item-right">873783783</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">指定维修人员</view>
|
||||||
|
<view class="container-card-item-right">请选择
|
||||||
|
<image src="@/static/right.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">维修单号</view>
|
||||||
|
<view class="container-card-item-right">873783783</view>
|
||||||
|
</view>
|
||||||
|
<view class="container-card-item" style="display: block;">
|
||||||
|
<view class="container-card-item-left">中止原因</view>
|
||||||
|
<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="container-card">
|
||||||
|
<view class="container-info">处理信息</view>
|
||||||
|
<view class="container-card-item">
|
||||||
|
<view class="container-card-item-left">处理时间</view>
|
||||||
|
<view class="container-card-item-right">873783783</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="container-card-item" style="display: block;">
|
||||||
|
<view class="container-card-item-left">处理意见</view>
|
||||||
|
<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="container-bottom">
|
||||||
|
<view class="container-finish">完成</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$globalWidth: 650rpx;
|
||||||
|
$buttonColor: #0e7ff5;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
background: -webkit-linear-gradient(270deg,
|
||||||
|
rgba(227, 239, 249, 1) 0%,
|
||||||
|
rgba(245, 245, 247, 1) 100%);
|
||||||
|
flex-direction: column;
|
||||||
|
/* align-items: center; */
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 150rpx);
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-card{
|
||||||
|
width: $globalWidth;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 报修信息
|
||||||
|
.container-info{
|
||||||
|
font-size: 35rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
border-bottom: 10rpx solid #b6d8fc;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-card-item{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 80rpx;
|
||||||
|
font-size: 25rpx;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.container-card-item-right{
|
||||||
|
color: #7E848F;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
image{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-card-item-stop{
|
||||||
|
background-color: #F0F7FF;
|
||||||
|
word-wrap: break-word;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-bottom{
|
||||||
|
height: 150rpx;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
background-color: white;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.container-finish{
|
||||||
|
width: $globalWidth;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80rpx;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
background: $buttonColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="322px" height="2px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -27 -291 )">
|
||||||
|
<path d="M 27 291.5 L 348 291.5 " stroke-width="0.5" stroke="#e2e8f1" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
Loading…
Reference in New Issue
Block a user