<template>
<view>
<!-- 第一种样式 人员管理-->
<block v-if="datainfo.length>0">
<!-- 报修管理 步骤条-->
<block v-if="type=='warranty'">
<!-- @click.stop="getDetail(ite.repairId)" -->
<view class="bxlists" v-for="(ite,idx) in datainfo" :key="ite.repairId" >
<view class="bxtop">
<swiper v-if="ite.repairImages" class="swiper" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplay">
<swiper-item v-for="(aite,aidx) in ite.repairImages" :key="aidx">
<image :src="baseUrl+aite" @click="getPreviewImage(ite.repairImages,aidx)"></image>
</swiper-item>
</swiper>
<view class="toptit mb10">{{ite.repairDetails}}</view>
<view class="walist"><view class="tit">项目</view>：{{kaType(ite.maintenanceCategory,bxlbList)}}</view>
<view class="walist"><view class="tit">报修门户</view>：{{ite.houseAddress}}</view>
<view class="walist"><view class="tit">报修时间</view>：{{ite.repairTime}}</view>
<!-- <view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：{{ite.completionTime}}</view> -->
<view class="btns">
<view class="btn btna" v-if="checkPermi(['wuYe:repair:remove'])&&ite.repairStatus<2" @click.stop="getDelFn(ite.repairId)">删除</view>
<!-- <view class="btn btnb" v-if="checkPermi(['wuYe:repair:assign'])&&ite.repairStatus==1">指派</view> -->
</view>
</view>
<view class="bxsteps">
<uni-collapse ref="collapse" v-model="value">
<uni-collapse-item title-border="none">
<template v-slot:title>
<view class="chtop flexc" >
<view class="line"></view>
<view>流程记录</view>
<view class="flex1"></view>
<!-- <image :src="upimg" class="upimg"></image> -->
</view>
</template>
<view class="hfstep">
<view class="hfslist flex" v-if="ite.repairStatus>3">
<view class="limg flexccc">
<image :src="cira" class="imga"></image>
</view>
<view class="flex1">
<view class="hfstit co01">已完成 <text>{{ite.completionTime}}</text></view>
<view class="hfstxt">【{{ite.staffName}} {{ite.staffPhone}}】已完成报修业务</view>
<view class="hfimgs flexcw">
<image :src="cira"></image>
</view>
</view>
</view>
<view class="hfslist flex" v-if="ite.repairStatus>2">
<view class="limg flexccc">
<image :src="cira" class="imga" v-if="ite.repairStatus==3"></image>
<image :src="cirb" class="imgb" v-else></image>
</view>
<view class="flex1">
<view class="hfstit">处理中 <text>{{ite.visitTime}}</text></view>
<view class="hfstxt">【{{ite.staffName}} {{ite.staffPhone}}】已上门处理中</view>
</view>
</view>
<view class="hfslist flex" v-if="ite.repairStatus>1">
<view class="limg flexccc">
<image :src="cira" class="imga" v-if="ite.repairStatus==2"></image>
<image :src="cirb" class="imgb" v-else></image>
</view>
<view class="flex1">
<view class="hfstit">待上门 <text>{{ite.assignTime}}</text></view>
<view class="hfstxt">您的报修申请已派于【{{ite.staffName}} {{ite.staffPhone}}】处理</view>
</view>
</view>
<view class="hfslist flex" >
<view class="limg flexccc">
<image :src="cira" class="imga" v-if="ite.repairStatus==1"></image>
<image :src="cirb" class="imgb" v-else></image>
</view>
<view class="flex1">
<view class="hfstit">待指派 <text>{{ite.repairTime}}</text></view>
<view class="hfstxt">您的报修申请已提交，请耐心等待</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
</block>
<!-- 报修管理 不需要了-->
<block v-if="type=='bxylwarranty'">
<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getPut(ite.repairId,ite.repairStatus)"
:data-idx="idx"
@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
>
<view class="delleft">
<view class="watop ">
<view class="watit">
<view class="tit">{{ite.repairTitle}}</view>
<view class="txt co01":class="{'co01':ite.repairStatus=='1','coa':ite.repairStatus=='3','co28':ite.repairStatus=='3'}">{{kaType(ite.repairStatus,bxztList)}}</view>
</view>
<!-- <view class="walist"><view class="tit">小区名称</view>：{{ite.communityName}}</view> -->
<view class="walist"><view class="tit">项目</view>：{{kaType(ite.maintenanceCategory,bxlbList)}}</view>
<view class="walist"><view class="tit">报修门户</view>：{{ite.houseAddress}}</view>
<view class="walist"><view class="tit">报修时间</view>：{{ite.repairTime}}</view>
<view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：{{ite.completionTime}}</view>
</view>
<view class="wabtn" @click.stop="getDetail(ite.repairId)">
<view>查看详情</view>
<image :src="rimg"></image>
</view>
</view>
<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:repair:remove'])&&ite.repairStatus<4" @click.stop="getDelFn(ite.repairId)">撤销</view>
</view>
</block>
<!-- 访客 -->
<block v-if="type=='visitor'">
<view class="pr mb12" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.reservRecordId)" :data-idx="idx"
@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'">
<view class="vislist pr" style="z-index: 1;margin-bottom: 0;">
<view class="vistop flexc mb12">
<view class="tit flex0">{{ite.name}}</view>
<view class="btns flex0" v-if="ite.isCar=='Y'">驾车</view>
<view class="flex1"></view>
<view class="txt flex0" :class="{'co01':ite.status==1,'coa':ite.status==2,'cof4':ite.status==3,}">{{kaType(ite.status,fkztList)}}</view>
</view>
<view class="vlist flexcw">
<view>来访人数：{{ite.num}}人</view>
<view>来访事由：{{ite.reason}}</view>
<view>车牌号码：{{ite.plateNumber}}</view>
<view>手机号码：{{ite.mobileNumber}}</view>
<view>来访时间：{{ite.visitorTime}}</view>
</view>
</view>
<view class="spdel" v-if="ite.right>0" @click.stop="getDelFn(ite.reservRecordId)">删除</view>
</view>
</block>
<!-- 历史账单 -->
<block v-if="type=='moneybill'">
<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx">
<view class="ctop flexc" style="padding: 26rpx 24rpx 24rpx;">
<image :src="time" class="imgs"></image>
<view class="tit">2024/01 -2024/12</view>
<view class="btn btnbgb" v-if="ite.type==1">已缴费</view>
<view class="btn btnbgc" v-else>未缴费</view>
<view class="flex1"></view>
<view class="txta">1号楼3单元1102</view>
</view>
<view class="clists flexc">
<view class="mlistl">
<view class="mltit">应缴总额 /元</view>
<view class="mltxt">4307.20</view>
</view>
<view class="mlistr">
<view class="clist"><view class="tit">物业费用：</view>3247.20元</view>
<view class="clist"><view class="tit">车位费用：</view>960.00元</view>
<view class="clist"><view class="tit">能耗费用：</view>100.00元</view>
</view>
</view>
</view>
</block>
<view class="shax" v-if="wtdt">{{wtdt}}</view>
</block>
<!-- 无数据 -->
<view class="nodata" v-else>
<image :src="noiconpimg"></image>
<view>
暂无数据
</view>
</view>
</view>
</template>
<script>
import config from '@/config'
import {selectDictValue} from "@/utils/common.js"
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
export default{
props:{
datainfo: {
type: Array,
default () {
return []
}
},
wtdt:{
type:String,
default () {
return ''
}
},
type:{
type:String,
default () {
return 0
}
},
bxztList:{
type:Array,
default () {
return []
}
},
fkztList:{
type:Array,
default () {
return []
}
},
bxlbList:{
type:Array,
default () {
return []
}
}
},
data(){
return{
noiconpimg:require("@/static/images/nodata.png"),
rimg:require('@/static/images/rimg.png'),
cira:require('@/news/static/complaint/cira.png'),
cirb:require('@/news/static/complaint/cirb.png'),
upimg:require('@/work/static/manage/up.png'),
baseUrl:config.baseUrl,
delBtnWidth:66,//左滑默认宽度
value:[],
autoplay:false,
incolorh:'#C0C3C3',
activecolorh:'#FFFFFF',
indicatorDotsh: true,
}
},
mounted() {
},
methods:{
checkPermi,checkRole,
kaType(data, list) {
return selectDictValue(list, data);
},
getDetail(e){
this.$emit('getDetail',e)
},
getPut(e,type){
if(type>1){
this.$emit('getDetail',e)
}else{
this.$emit('getPut',e)
}
},
getDelFn(id){
var that=this;
uni.showModal({
title: '确认删除',
content: "是否确认删除",
cancelText: '取消',
confirmText: '确认',
success: function(res) {
if (res.confirm) {
that.$emit('getDelFn',id)
} else if (res.cancel) {
}
}
});
},
getPreviewImage(arr,idx){
var newArr=[];
arr.forEach(ite=>{
var ds=this.baseUrl+ite
newArr.push(ds)
})
uni.previewImage({
urls: newArr,
current:idx,
success: function(data) {
},
fail: function(err) {
}
});
},
//开始触摸滑动
drawStart(e) {
// console.log("开始触发");
var touch = e.touches[0];
this.startX = touch.clientX;
},
//触摸滑动
drawMove(e) {
// console.log("滑动");
for (var index in this.datainfo) {
// this.csListArrl[index].right=0
this.$set(this.datainfo[index],'right',0);
}
var idx=e.currentTarget.dataset.idx
var touch = e.touches[0];
var item = this.datainfo[idx];
var disX = this.startX - touch.clientX;
if (disX >= 20) {
if (disX > this.delBtnWidth) {
disX = this.delBtnWidth;
}
// this.csListArrl[idx].right=disX
this.$set(this.datainfo[idx],'right',disX);
} else {
// this.csListArrl[idx].right=0
this.$set(this.datainfo[idx],'right',0);
}
},
//触摸滑动结束
drawEnd(e) {
// console.log("滑动结束");
var idx=e.currentTarget.dataset.idx
var item = this.datainfo[idx];
if (item.right >= this.delBtnWidth / 2) {
// this.datainfo[idx].right=this.delBtnWidth
this.$set(this.datainfo[idx],'right',this.delBtnWidth);
} else {
this.datainfo[idx].right=0
}
},
}
}
</script>
<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
// 报修
.walists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx; position: relative;
.watop{
padding: 0 36rpx 8rpx 38rpx;
.watit{padding: 24rpx 0;margin-bottom: 4rpx;display: flex;
.tit{font-weight: bold;font-size: 28rpx;color: #272727;flex: 1;
.cir{width: 14rpx;margin-left: 8rpx;margin-bottom: 10rpx;height: 14rpx;display: inline-block;background: #FF6969;border-radius: 8rpx;}
}
.txt{font-weight: bold;font-size: 26rpx;flex: 0 0 auto;
}
}
}
.walist{display: flex;font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;
.tit{min-width: 100rpx;text-align-last: justify}
}
.wabtn{display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #E5E5E5;height: 80rpx;padding: 0 38rpx;
view{font-weight: 500;font-size: 24rpx;color: #666666;}
image{width: 16rpx;height: 28rpx;}
}
}
.vislist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 26rpx 38rpx 12rpx;
.vistop{
.tit{font-size: 28rpx;color: #272727;font-weight: bold;}
.btns{min-width: 70rpx;font-weight: 500;
font-size: 20rpx;padding: 0 8rpx;box-sizing: border-box;text-align: center;margin-left: 18rpx;color: #00B861;border-radius: 16rpx;border: 2rpx solid #0AC86E;}
.txt{font-weight: bold;font-size: 26rpx;margin-left: 18rpx;}
}
.vlist{
view{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;flex: 0 1 auto;min-width: 50%;}
}
}
.carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
.carltop{min-height: 154rpx;border-bottom: 2rpx solid #E5E5E5;
.tit{font-weight: bold;font-size: 32rpx;}
.txt{font-weight: 500;font-size: 26rpx;color: #272727;}
.txtbtn{min-width: 82rpx;
height: 32rpx;font-weight: 500;font-size: 20rpx;color: #45CB99;
border-radius: 16rpx;border: 1px solid #45CB99;margin-left: 12rpx;}
.cara{flex: 0 0 auto;width: 232rpx;height: 74rpx;margin-right: 40rpx;}
.carb{flex: 0 0 auto;width: 278rpx;height: 130rpx;}
}
.carlf{padding:26rpx 0 10rpx;
.clflist{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;}
}
.ctop{border-bottom: 2rpx solid #E5E5E5;padding:26rpx 24rpx;
.imgs{width: 40rpx;height: 42rpx;margin-right: 30rpx;}
.tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
.txt{font-weight: 500;font-size: 26rpx;
&.ca{color: #3565ED;}
&.cb{color: #FE5A0E;}
&.cc{color: #28C529;}
}
.txta{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
.num{font-size: 24rpx;color: #AAAAAA;}
}
.btn{height: 34rpx;border-radius: 18rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;font-size: 22rpx;margin-right: 24rpx;
&.btna{border: 2rpx solid #06C770;color: #06C770;}
&.btnb{border: 2rpx solid #3565ED;color: #3565ED;}
&.btnc{border: 2rpx solid #FE5A0E;color: #FE5A0E;}
&.btnbga{border: 1px solid #0156FE;color: #3565ED;background: #DFEAFF;height: 36rpx;}
&.btnbgb{border: 1px solid #C1C1C1;color: #666666;background: #F1F1F1;height: 36rpx;}
&.btnbgc{border: 1px solid #FE5A0E;color:#FE5A0E;background:#FFEEE6;height: 36rpx;}
}
.clists{padding: 24rpx 24rpx 8rpx;
.clist{font-weight: 500;margin-bottom: 16rpx;
font-size: 26rpx;color: #272727;display: flex;line-height: 34rpx;
.tit{font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;margin-right: 16rpx;min-width: 108rpx;text-align-last: justify;}
.imgas{display: flex;align-items: center;flex-wrap: wrap;
image{width: 142rpx;height: 142rpx;margin-right: 30rpx;margin-top: 8rpx;}
}
}
.w50{
.clist{width: 50%;}
}
}
}
// 物业费
.mlistl{width: 40%;display: flex;flex-direction: column;align-items: center;flex: 0 0 auto;
.mltit{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 18rpx;}
.mltxt{font-weight: bold;font-size: 32rpx;color: #0156FE;}
}
//报修步骤条
.bxlists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;position: relative;
.bxtop{padding: 30rpx 24rpx;position: relative;
.swiper{width: 100%;height: 280rpx;border-radius: 20rpx;box-sizing: border-box;margin-bottom: 28rpx;overflow: hidden;
image{width: 100%;height: 100%;}
}
.toptit{font-weight: bold;font-size: 28rpx;color: #161616;}
.walist{display: flex;font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;
.tit{min-width: 100rpx;text-align-last: justify}
}
.btns{position: absolute;right: 26rpx;bottom: 20rpx;}
.btn{min-width: 120rpx;height: 54rpx;border-radius: 26rpx;font-weight: 500;font-size: 26rpx;text-align: center;line-height: 54rpx;padding: 0 10rpx;box-sizing: border-box; margin-bottom: 14rpx;
&.btna{border: 2rpx solid #FF6969;background: #FFF8F8;color: #FF6969;}
&.btnb{background: #0256FD;color: #FFFFFF;}
}
}
.bxsteps{border-top: 2rpx solid #E6E6E6;padding: 30rpx 0;
.chtop{padding-right: 48rpx;
.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
view{font-weight: bold;font-size: 28rpx;color: #272727;}
.upimg{width: 22rpx;height: 14rpx;flex: 0 0 auto;margin-left: 12rpx;transform: rotate(180deg);transition: all 0.3s;}
}
.hfstep{padding: 0 32rpx 30rpx 36rpx;margin-top: 24rpx;
.hfslist{padding-bottom: 20rpx;position: relative;
&:first-child{
.hfstit{color: #0156FE;}
}
&::before{content: '';position: absolute;left: 14rpx;top:14rpx;height: 100%;width: 2rpx;background: #E6E6E6;}
.limg{width: 30rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top:3rpx;
.imga{width: 30rpx;height: 30rpx;}
.imgb{width: 18rpx;height: 18rpx;}
}
.hfstit{font-weight: bold;font-size: 30rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;
text{font-size: 26rpx;margin-left: 12rpx;}
}
.hfstxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;}
.hfimgs{padding-top: 2rpx;
image{width: 84rpx;height: 84rpx;border-radius: 20rpx;margin-right: 40rpx;margin-bottom: 10rpx;}
}
}
}
}
}
.bxlists /deep/ .uni-swiper-dots-horizontal{left: 26rpx;transform: translate(0);}
.bxlists /deep/ .uni-swiper-dot{width: 10rpx;height: 10rpx;}
.bxlists /deep/ .uni-swiper-dot-active{width: 24rpx;height: 10rpx;}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
image{width: 440rpx;height: 440rpx;}
view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>