property/staff_ui/components/home/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 订单 -->
		<block v-if="type=='order'">
			<view class="odlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="odtop flexcj">
					<view class="tit">2024-11-26 10:00</view>
					<view class="txt">本单收入<text class="t">¥</text><text class="num">60</text></view>
				</view>
				<view class="odbox">
					<view class="lists flexcj">
						<view class="llists flex1">
							<view class="flext mb10">
								<view class="imgs"><image :src="hlista" class="imga"></image></view>
								<view class="oltit">单次深度清洁</view>
							</view>
							<view class="flext mb10">
								<view class="imgs"><image :src="hlistb" class="imgb"></image></view>
								<view class="oltit">安徽省合肥市蜀山区高新技术开发区幸福 大街88号幸福小区12#1403室 </view>
								<image :src="adrimg" class="adrimg"></image>
							</view>
							<view class="flext mb10">
								<view class="imgs"><image :src="hlistc" class="imga"></image></view>
								<view class="oltit">80m²以内</view>
							</view>
							<view class="flext mb10">
								<view class="imgs"><image :src="hlistd" class="imgc"></image></view>
								<view class="oltit">刘熙媛</view>
							</view>
							<block v-if="ite.zhanflag">
								<view class="flext mb10">
									<view class="imgs"><image :src="hliste" class="imgd"></image></view>
									<view class="oltit">18000185568</view>
								</view>
								<view class="flext mb10">
									<view class="imgs"><image :src="hlistf" class="imge"></image></view>
									<view class="oltit flexc">412588653126854369
										<view class="olbtn">复制</view>
									</view>
								</view>
								<view class="flext mb10">
									<view class="imgs"><image :src="hlistg" class="imge"></image></view>
									<view class="oltit">2024-11-25 18:23:56 <text class="coa">(接单时间)</text></view>
								</view>
								<view class="flext mb10">
									<view class="imgs"><image :src="hlisth" class="imgf"></image></view>
									<view class="oltit">2024-11-25 18:23:56 <text class="coa"> (上门时间)</text></view>
								</view>
								<view class="flext mb6">
									<view class="imgs"><image :src="hlisti" class="imga"></image></view>
									<view class="phos">
										<image :src="hlista"></image>
									</view>
								</view>
								<view class="flext mb10">
									<view class="imgs"><image :src="hlistj" class="imgg"></image></view>
									<view class="oltit">2024-11-25 18:23:56 <text class="coa"> (完成时间)</text></view>
								</view>
								<view class="flext mb6">
									<view class="imgs"><image :src="hlisti" class="imga"></image></view>
									<view class="phos">
										<image :src="hlista"></image>
									</view>
								</view>
								<view class="flext mb10">
									<view class="imgs"><image :src="hlistk" class="imgc"></image></view>
									<view class="oltit">个人原因：与已接单时间重叠</view>
								</view>
							</block>
						</view>
						<view class="rlist">接单</view>
						<view class="rlist btna">
							<view>我已</view>
							<view>完成</view>
						</view>
					</view>
					<view class="upbox flexcc" :class="ite.zhanflag?'':'act'" @click.stop="getZhan(idx)">
						{{ite.zhanflag?'折叠':'展开'}}<image :src="upimg"></image>
					</view>
					<!-- 接单 -->
					<view class="ohbtn" @click.stop="getBtnFn('tips')">接单</view>
					<!-- 接单后 -->
					<view class="flexcj">
						<view class="ohbtn btna" @click.stop="getBtnFn('cancel')">取消订单</view>
						<view class="ohbtn btnb" @click.stop="getBtnFn('addpho')">我已上门</view>
					</view>
				</view>
			</view>
		</block>
		<view class="shax">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>暂无数据</view>
	</view>
</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			topval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				hlista:require("@/static/images/home/hlista.png"),
				hlistb:require("@/static/images/home/hlistb.png"),
				hlistc:require("@/static/images/home/hlistc.png"),
				hlistd:require("@/static/images/home/hlistd.png"),
				hliste:require("@/static/images/home/hliste.png"),
				hlistf:require("@/static/images/home/hlistf.png"),
				hlistg:require("@/static/images/home/hlistg.png"),
				hlisth:require("@/static/images/home/hlisth.png"),
				hlisti:require("@/static/images/home/hlisti.png"),
				hlistj:require("@/static/images/home/hlistj.png"),
				hlistk:require("@/static/images/home/hlistk.png"),
				// hicob:require("@/health/static/health/hicob.png"),
				// man:require("@/work/static/people/man.png"),
				// woman:require("@/work/static/people/woman.png"),
				upimg:require("@/static/images/home/ups.png"),
				adrimg:require("@/static/images/home/adrimg.png"),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getAddFn(e){
				this.$emit('getAddFn',e)
			},
			getReadlist(e){
				this.$emit('getReadlist',e)
			},
			getBtnFn(e){
				this.$emit('getBtnFn',e)
			},
			getZhan(idx){
				console.log(idx,1)
				// var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
				// obj.zhanflag=!obj.zhanflag;
				// this.datainfo.splice(idx,1,obj);
				this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
			},
			getPreview(idx,arr) {
				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;}
.odlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.odtop{border-bottom: 2rpx solid #E5E5E5;min-height: 78rpx;box-sizing: border-box;padding:8rpx  24rpx;
		.tit{font-weight: bold;font-size: 32rpx;color: #272727;}
		.txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;
			.t{font-size:22rpx;color: #FF8213;}
			.num{font-size:30rpx;color: #FF8213;}
		}
	}
	.odbox{padding:28rpx 12rpx 28rpx;}
	.lists{padding:0rpx 16rpx 0rpx 24rpx;align-items: stretch;
		.llists{
			.imgs{width: 28rpx;height: 28rpx;display: flex;align-items: center;justify-content: center;margin-right: 12rpx;flex: 0 0 auto;margin-top: 4rpx;
				.imga{width: 26rpx;height: 24rpx;}
				.imgb{width: 20rpx;height: 24rpx;}
				.imgc{width: 24rpx;height: 24rpx;}
				.imgd{width: 20rpx;height: 28rpx;}
				.imge{width: 26rpx;height: 26rpx;}
				.imgf{width: 26rpx;height: 28rpx;}
				.imgg{width: 28rpx;height: 30rpx;}
			}
			.oltit{font-weight: bold;font-size: 26rpx;color: #272727;line-height: 36rpx;}
			.olbtn{font-size: 26rpx;color: #0156FE;padding: 0 12rpx;border-left: 2rpx solid #AAAAAA;margin-left: 12rpx;line-height: 1;}
			.adrimg{width: 54rpx;height: 54rpx;flex: 0 0 auto;margin-left: 40rpx;}
			.phos{
				image{width: 80rpx;height: 80rpx;margin: 0 24rpx 8rpx 0;}
			}
		}
		
		.rlist{border-radius: 20rpx;border: 2rpx solid #E6E6E6;flex: 0 0 auto;margin-left: 40rpx;width: 88rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;font-weight: bold;
font-size: 26rpx;color: #272727;
			&.btna{background: #1BDD95;color: #FFFFFF;flex-direction: column;}
		}
	}
	.upbox{font-weight: 500;font-size: 22rpx;color: #AAAAAA;padding: 2rpx 0;margin-bottom: 24rpx;
		image{width: 26rpx;height: 22rpx;margin-left: 14rpx;transition: all 0.3;}
		&.act{
			image{
				transform: rotate(-180deg);
			}
		}
	}
	.ohbtn{height: 88rpx;display: flex;align-items: center;justify-content: center;
background: #1BDD95;font-weight: bold;font-size: 26rpx;color: #FFFFFF;border-radius: 20rpx;
		&.btna{border: 2rpx solid #DADADA;background-color: #FFFFFF;width: 340rpx;color: #666666;}
		&.btnb{width: 340rpx;}
	}
}



// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
	
}
</style>