174 lines
3.3 KiB
Vue
174 lines
3.3 KiB
Vue
<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> |