<template>
<view class="page">
<u-navbar title="报修单" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='36'></u-navbar>
<view class="top">
<view class="search_box">
<view class="search_center">
<input type="text" class="ips" v-model="code" placeholder="编码/报修单号" placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
</view>
<view class="search_right">
搜索
</view>
</view>
<view class="tap">
<view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
全部
</view>
<view class="tap_cont" :class="curtitidx==1?'act1':''" @click="changeidx(1)">
换电工单
</view>
<view class="tap_cont" :class="curtitidx==2?'act1':''" @click="changeidx(2)">
维修工单
</view>
<view class="tap_cont" :class="curtitidx==3?'act1':''" @click="changeidx(3)">
已完成
</view>
</view>
</view>
<view class="warp_box">
<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' @change="swiperchange" next-margin='-20rpx'>
<swiper-item>
<view class="swiper-item ">
<view class="card" v-for="(item,index) in listData" :key="index" v-if="item.status!=1" @click="todetail(item.id)">
<view class="card_top">
<view class="card_top_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
电单车
</view>
<view class="card_top_right">
{{item.createTime}}
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
报修单号
</view>
<view class="cont_info_right">
{{item.orderNo}}
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
设备编号
</view>
<view class="cont_info_right">
{{item.sn}}
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
故障部位
</view>
<view class="cont_info_right">
{{item.faultTypeStr}}
</view>
</view>
<view class="card_bot">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
{{item.address}}
<view class="stause" v-if="item.status==4" >
已完成
</view>
<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
待换电
</view>
<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
待维修
</view>
<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
换电中
</view>
<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
维修中
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item ">
<view class="card" v-for="(item,index) in eledata" :key="index" v-if="item.status!=1" @click="todetail(item.id)">
<view class="card_top">
<view class="card_top_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
电单车
</view>
<view class="card_top_right">
{{item.createTime}}
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
报修单号
</view>
<view class="cont_info_right">
2126459452821387
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
设备编号
</view>
<view class="cont_info_right">
DS-21674651
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
故障部位
</view>
<view class="cont_info_right">
【车把】【刹车】
</view>
</view>
<view class="card_bot">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
嵛山岛芦竹村三沙路68号
<view class="stause" v-if="item.status==4">
已完成
</view>
<view class="stause" v-if="item.status==2&&item.type==2">
待换电
</view>
<view class="stause" v-if="item.status==2&&item.type==1">
待维修
</view>
<view class="stause" v-if="item.status==3&&item.type==2">
换电中
</view>
<view class="stause" v-if="item.status==3&&item.type==1">
维修中
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item ">
<view class="card" v-for="(item,index) in fixdata" :key="index" v-if="item.status!=1" @click="todetail(item.id)">
<view class="card_top">
<view class="card_top_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
电单车
</view>
<view class="card_top_right">
{{item.createTime}}
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
报修单号
</view>
<view class="cont_info_right">
2126459452821387
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
设备编号
</view>
<view class="cont_info_right">
DS-21674651
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
故障部位
</view>
<view class="cont_info_right">
【车把】【刹车】
</view>
</view>
<view class="card_bot">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
嵛山岛芦竹村三沙路68号
<view class="stause" v-if="item.status==4">
已完成
</view>
<view class="stause" v-if="item.status==2&&item.type==2">
待换电
</view>
<view class="stause" v-if="item.status==2&&item.type==1">
待维修
</view>
<view class="stause" v-if="item.status==3&&item.type==2">
换电中
</view>
<view class="stause" v-if="item.status==3&&item.type==1">
维修中
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item ">
<view class="card" v-for="(item,index ) in alreadyList" :key="index" @click="todetail(item.id)">
<view class="card_top">
<view class="card_top_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
电单车
</view>
<view class="card_top_right">
2024-03-24 22:28:51
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
报修单号
</view>
<view class="cont_info_right">
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
设备编号
</view>
<view class="cont_info_right">
DS-21674651
</view>
</view>
<view class="cont_info">
<view class="cont_info_left">
故障部位
</view>
<view class="cont_info_right">
【车把】【刹车】
</view>
</view>
<view class="card_bot">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
嵛山岛芦竹村三沙路68号
<view class="stause" v-if="item.status==4">
已完成
</view>
<view class="stause" v-if="item.status==2&&item.type==2">
待换电
</view>
<view class="stause" v-if="item.status==2&&item.type==1">
待维修
</view>
<view class="stause" v-if="item.status==3&&item.type==2">
换电中
</view>
<view class="stause" v-if="item.status==3&&item.type==1">
维修中
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
code:'',
curtitidx:0,
swiperHeight:408,
fixdata: [],
eledata: [],
listData: [],
alreadyList:[]
}
},
watch: {
curtitidx(newValue, oldValue) {
// 处理userId变化的逻辑
console.log('userId 发生变化', newValue, oldValue);
if(newValue==0){
this.swiperHeight=(this.listData.length*440)
}else if(newValue==1){
this.swiperHeight=this.eledata.length*440
}else if(newValue==1){
this.swiperHeight=this.fixdata.length*440
}
}
},
onShow() {
this.getmarks()
},
methods: {
todetail(id){
uni.navigateTo({
url:'/page_fix/repair/repair_detail?id='+id
})
},
changeidx(idx){
this.curtitidx=idx
},
swiperchange(e){
this.curtitidx=e.detail.current
console.log(e,'eeeeeeeee');
},
getmarks() {
this.$u.get(`/appVerify/adminOrder/list?adminId=` + 2).then((res) => {
if (res.code == 200) {
console.log('调用了');
this.listData = res.rows;
res.rows.forEach(item => {
if (item.type == 1&&item.status!=4) {
this.fixdata.push(item);
console.log(this.fixdata, 'this.fixdata');
} else if (item.type == 2&item.status!=4) {
this.eledata.push(item);
}else if(item.status==4){
this.alreadyList.push(item) }
// 可以在这里执行其他针对每个项的操作
});
this.swiperHeight=(this.listData.length*440)
// this.markers = markers;
} else {
// 处理接口返回错误的情况
}
}).catch(error => {
// 处理接口请求失败的情况
});
},
}
}
</script>
<style lang="scss" >
page{
background-color: #F3F3F3;
}
.page{
width: 750rpx;
.tip_box {
position: fixed;
left: 72rpx;
top: 628rpx;
width: 610rpx;
height: 282rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
z-index: 110;
.top {
padding: 52rpx 38rpx 42rpx 36rpx;
.txt {
width: 100%;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
}
.bot {
border-top: 2rpx solid #D8D8D8;
display: flex;
flex-wrap: nowrap;
height: 100%;
.bot_left {
width: 50%;
height: 98rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
}
.bot_right {
width: 50%;
height: 98rpx;
display: flex;
align-items: center;
justify-content: center;
border-left: 2rpx solid #D8D8D8;
font-weight: 500;
font-size: 36rpx;
color: #4C97E7;
}
}
}
.top{
width: 750rpx;
background: #fff;
padding-top: 26rpx;
.tap{
margin-top: 24rpx;
width: 750rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.tap_cont{
text-align: center;
padding-bottom: 15rpx;
width: 140rpx;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
border-bottom: 6rpx solid #fff ;
}
.act1{
border-bottom: 6rpx solid #4C97E7 ;
color: #4C97E7;
}
}
.search_box{
margin:0 auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 680rpx;
height:68rpx ;
border: 2rpx solid #4C97E7;
border-radius: 20rpx;
// .search_left{
// image{
// width: 56rpx;
// height: 56rpx;
// }
// }
.search_center{
margin-left: 40rpx;
width: 490rpx;
}
.search_right{
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 112rpx;
height: 68rpx;
background: #4C97E7;
border: 2rpx solid #4C97E7;
border-radius:0 20rpx 20rpx 0;
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
}
}
}
.warp_box{
.swiper{
.swiper-item{
.card{
margin: 16rpx auto;
width: 752rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
.card_top{
padding: 32rpx 38rpx 28rpx 38rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.card_top_left{
display: flex;
flex-wrap: nowrap;
align-items: center;
image{
width: 42rpx;
height: 42rpx;
margin-right: 18rpx;
}
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
.card_top_right{
margin-left: auto;
font-weight: 400;
font-size: 28rpx;
color: #808080;
}
}
.cont_info{
margin-left: 38rpx;
margin-bottom: 28rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.cont_info_left{
margin-right: 44rpx;
font-weight: 400;
font-size: 28rpx;
color: #808080;
}
.cont_info_right{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.card_bot{
display: flex;
align-items: center;
border-top: 2rpx dashed #D8D8D8;
height: 102rpx;
image{
margin-left: 40rpx;
margin-right: 18rpx;
width: 41.66rpx;
height: 48rpx;
}
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
.stause{
display: flex;align-items: center;
justify-content: center;
margin-left: auto;
margin-right: 38rpx;
width: 132rpx;
height: 54rpx;
background: #979797;
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
border-radius: 8rpx;
}
}
}
}
}
}
}
</style>