Djyos/lock_Maintenance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成了我的维修和首页页面

This commit is contained in:
周添峰 2024-08-30 18:02:45 +08:00
parent efbda4407f
commit 986937ba05
11 changed files with 452 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/Cp_Bg.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<!--背景组件直接使用即可-->
<view class="container">
<slot></slot>
</view>
</template>
<script>
export default {
name:"Cp_Bg",
data() {
return {
};
}
}
</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;
}
</style>

68
components/Cp_Nav.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<!--导航栏组件-->
<view class="nav">
<view class="tabs">
<view class="tab" v-for="item in activeList" :key="item.index" @click="updateActive(item.index)">
<view style="width: 130rpx;" :class="{active: item.index === active}">{{item.text}}</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
// 插槽接收语法
const props = defineProps({
activeList: Array,
modelValue: {
type: Number,
default: 1
}
});
const active = ref(1)
const emit = defineEmits(['update:modelValue']);
const updateActive = (index) => {
emit('update:modelValue', index);
active.value = index
};
</script>
<style lang="scss" scoped>
$globalWidth: 650rpx;
$buttonColor: #0e7ff5;
.nav {
width: 100%;
background-color: white;
height: 80rpx;
transition: all 0.3s;
.tabs {
width: 100%;
height: 100%;
display: flex;
}
.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;
}
}
</style>

5
manifest.json
View File

@ -50,11 +50,12 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "", "appid" : "wx68a8dd4e31c57729",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false
}, },
"usingComponents" : true "usingComponents" : true,
"permission" : {}
}, },
"mp-alipay" : { "mp-alipay" : {
"usingComponents" : true "usingComponents" : true

18
pages.json
View File

@ -1,23 +1,28 @@
{ {
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/Workbench/Workbench",
"style": {
"navigationBarTitleText": "工作台"
}
},{
"path": "pages/Repair/Repair", "path": "pages/Repair/Repair",
"style": { "style": {
"navigationBarTitleText": "报修管理" "navigationBarTitleText": "报修管理"
} }
},{ },{
"path" : "pages/Me/MyRepair",
"style" :
{
"navigationBarTitleText" : "我的报修"
}
}, {
"path": "pages/login/login", "path": "pages/login/login",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/Workbench/Workbench",
"style": {
"navigationBarTitleText": "工作台"
}
},
{
"path": "pages/Me/Me", "path": "pages/Me/Me",
"style": { "style": {
"navigationBarTitleText": "我的" "navigationBarTitleText": "我的"
@ -61,6 +66,7 @@
"navigationBarTitleText" : "报修详情" "navigationBarTitleText" : "报修详情"
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

7
pages/Me/Me.vue
View File

@ -13,6 +13,7 @@
<view class="container-operate"> <view class="container-operate">
<view class="info-list"> <view class="info-list">
<view class="info-item" @click="info">个人资料<image class="arrow-icon" src="../../static/right.png" mode=""></image></view> <view class="info-item" @click="info">个人资料<image class="arrow-icon" src="../../static/right.png" mode=""></image></view>
<view class="info-item" @click="myRepair">我的报修<image class="arrow-icon" src="../../static/right.png" mode=""></image></view>
<view class="info-item" @click="deposit">我的押金<image class="arrow-icon" src="../../static/right.png" mode=""></image></view> <view class="info-item" @click="deposit">我的押金<image class="arrow-icon" src="../../static/right.png" mode=""></image></view>
<view class="info-item" @click="deposit">我的维修<image class="arrow-icon" src="../../static/right.png" mode=""></image></view> <view class="info-item" @click="deposit">我的维修<image class="arrow-icon" src="../../static/right.png" mode=""></image></view>
</view> </view>
@ -30,6 +31,12 @@
url:"/pages/Me/informatiuon" url:"/pages/Me/informatiuon"
}) })
} }
const myRepair = ()=>{
uni.navigateTo({
url:"/pages/Me/MyRepair"
})
}
</script> </script>
<style lang="scss"> <style lang="scss">

174
pages/Me/MyRepair.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<CpBg>
<view class="container-nav">
<CpNav :activeList="activeList" v-model:modelValue="active"></CpNav>
</view>
<view class="container-card">
<view class="container-card-item" @click="handleJump">
<view class="container-top">
<view class="container-bh">BX1356351685</view>
<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>
<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>
<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>
</view>
</view>
</CpBg>
</template>
<script setup>
import CpNav from '@/components/Cp_Nav.vue';
import CpBg from '@/components/Cp_Bg.vue';
import {
ref,
watch
} from 'vue';
// 状态
const active = ref(1)
// 文字显示
const statusText = (item) => {
switch (item) {
case 1:
return '未处理';
case 2:
return '已处理';
case 3:
return '已取消';
}
}
const activeList = [{
"index": 1,
"text": "未处理"
},
{
"index": 2,
"text": "已处理"
},
{
"index": 3,
"text": "已取消"
}
]
const handleChangeActive = () => {
console.log(active.value)
}
const handleJump = () => {
uni.navigateTo({
url: '/pages/Repair/RepairDetail'
})
}
</script>
<style lang="scss">
$globalWidth: 650rpx;
$buttonColor: #0e7ff5;
.container-nav {
width: 100%;
}
.tab {
width: 33% !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;
justify-content: space-between;
}
.container-tag {
color: white;
width: 120rpx;
text-align: center;
}
.container-body {
margin-top: 40rpx;
}
.container-body-item {
display: flex;
font-size: 25rpx;
margin-bottom: 10rpx;
.container-body-left {
color: #7c8191;
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>

61
pages/Repair/Repair.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<view class="container"> <CpBg>
<view class="container-nav"> <view class="container-nav">
<view class="container-tabs"> <CpNav :activeList="activeList" v-model:modelValue="active"></CpNav>
<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>
<view class="container-card"> <view class="container-card">
@ -13,8 +9,8 @@
<view class="container-top"> <view class="container-top">
<view class="container-tag" style="background-color: #f5ab4c;" v-if="active==1">未处理</view> <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: #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: #ff5842;" v-else>已取消</view>
<view class="container-tag" style="background-color: #0e7ff5" v-else>已完工</view>
<view class="container-bh">BX1356351685</view> <view class="container-bh">BX1356351685</view>
</view> </view>
<view class="container-body"> <view class="container-body">
@ -46,10 +42,12 @@
</view> </view>
</view> </view>
</view> </view>
</view> </CpBg>
</template> </template>
<script setup> <script setup>
import CpNav from '@/components/Cp_Nav.vue';
import CpBg from '@/components/Cp_Bg.vue';
import { import {
ref, ref,
watch watch
@ -104,54 +102,10 @@
$globalWidth: 650rpx; $globalWidth: 650rpx;
$buttonColor: #0e7ff5; $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 { .container-nav {
width: 100%; 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 { .container-card {
width: 100%; width: 100%;
margin-top: 40rpx; margin-top: 40rpx;
@ -169,6 +123,7 @@
.container-top { .container-top {
display: flex; display: flex;
} }
.container-tag { .container-tag {

124
pages/Workbench/Workbench.vue
View File

@ -1,37 +1,115 @@
<template> <template>
<view class="container"> <CpBg>
<view class="container-top">
<image src="@/static/backgroup.png"></image>
</view> </view>
<view class="container-dict">
<view class="container-dict-title" style="margin-left: 20rpx;">这是条公告消息，提升城市管理水平。</view>
</view>
<view class="container-card">
<view class="container-info">报修信息</view>
<view class="container-card-body">
<view class="container-card-body-item" v-for="_ in 8">
<image src='@/static/logo.png'></image>
<view>日程安排</view>
</view>
</view>
</view>
<view class="container-card">
<view class="container-info">投诉建议</view>
<view class="container-card-body">
<view class="container-card-body-item" v-for="_ in 8">
<image src='@/static/logo.png'></image>
<view>日程安排</view>
</view>
</view>
</view>
<view class="container-card">
<view class="container-info">园区管理</view>
<view class="container-card-body">
<view class="container-card-body-item" v-for="_ in 4">
<image src='@/static/logo.png'></image>
<view>日程安排</view>
</view>
</view>
</view>
</CpBg>
</template> </template>
<script> <script setup>
export default { import CpBg from '@/components/Cp_Bg.vue';
data() {
return {
}
},
methods: {
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.container{
overflow-y: scroll;
}
$globalWidth: 600rpx; $globalWidth: 600rpx;
$buttonColor: #0e7ff5; $buttonColor: #0e7ff5;
.container { .container-top {
display: flex; margin-top: 50rpx;
background: -webkit-linear-gradient(270deg,
rgba(227, 239, 249, 1) 0%, image {
rgba(245, 245, 247, 1) 100%); width: $globalWidth;
flex-direction: column; height: 300rpx;
/* align-items: center; */ }
width: 100%; }
height: 100vh;
.container-dict {
margin-top: 50rpx;
width: $globalWidth;
height: 80rpx;
background-color: rgba(247, 251, 254, 1);
line-height: 80rpx;
}
.container-card {
width: 560rpx;
border-radius: 20rpx;
background-color: white;
padding: 20rpx;
margin-top: 40rpx;
align-items: center;
} }
// 报修信息
.container-info{
font-size: 35rpx;
margin-bottom: 10rpx;
width: 140rpx;
height: 35rpx;
border-bottom: 10rpx solid #b6d8fc;
}
.container-card-body{
display: flex;
width: 100%;
flex-wrap: wrap;
.container-card-body-item{
flex: 1 1 25%; /* 每个子项占父容器的 25% 宽度 */
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
margin-top: 20rpx;
image{
width: 80rpx;
height:80rpx;
}
}
}
</style> </style>

28
project.config.json Normal file
View File

@ -0,0 +1,28 @@
{
"appid": "wx68a8dd4e31c57729",
"compileType": "miniprogram",
"libVersion": "3.5.5",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}

7
project.private.config.json Normal file
View File

@ -0,0 +1,7 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "OM",
"setting": {
"compileHotReLoad": true
}
}

BIN
static/backgroup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB