yuanqu_ui/components/order/list.vue

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 预约 -->
		<block v-if="type==1">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<view class="ytop">
					<image :src="topbg" class="ytbg"></image>
					<view class="ytime flexc"><view class="flex0">预约时间：</view>
						<view class="lh18">{{ite.visitDate}} {{typeFn(ite.visitTime)}}</view>
						<view class="ytype" v-if="ite.reservatType==1">团体</view>
						<view class="ytype" v-if="ite.reservatType==2">散客</view>
					</view>
					<view class="ytip">
						<block v-if="ite.visitStatus==1&&ite.reservatType==2">
							<image :src="dbg"></image>
							<view >待参观</view>
						</block>
						<block v-if="ite.visitStatus==1&&ite.reservatType==1&&ite.visitType==3">
							<image :src="dbg"></image>
							<view>待参观</view>
						</block>
						<block v-if="ite.visitStatus==1&&ite.reservatType==1&&ite.visitType!=3">
							<view class="tsbtn co1" v-if="ite.visitType==1">待审核</view>
							<view class="tsbtn co3" v-if="ite.visitType==2">已拒绝</view>
						</block>
						<block v-if="ite.visitStatus==2">
							<image :src="ybg"></image>
							<view>已参观</view>
						</block>
					</view>
				</view>
				<view class="ybox">
					<view class="yblist w50" v-if="ite.reservatType==1"><text>单位名称：</text>{{ite.visitUnitName||''}}</view>
					<view class="yblist w50"><text>参观人数：</text>{{ite.visitNum||''}}人</view>
					<view class="yblist w50"><text>联系人：</text>{{ite.visitName||''}}</view>
					<view class="yblist w50"><text>联系电话：</text>{{ite.visitPhone||''}}</view>
					<view class="yblist">
						<view class="line"></view>
					</view>
					<view class="yblist w50"><text>是否接待：</text>{{ite.isReception=='Y'?'是':'否'||''}}</view>
					<view class="yblist w50" v-if="ite.isReception=='Y'"><text>接待人：</text>{{ite.receptionName||''}}</view>
					<view class="yblist w50" v-if="ite.isReception=='Y'"><text>接待电话：</text>{{ite.receptionPhone||''}}</view>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</view>
	<block v-else>
		<no-data></no-data>
	</block>
  </view>
</template>

<script>
	import noData from "@/components/nodata/nodata.vue"
  export default {
	props:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			topbg:require("@/static/images/order/staffs/topbg.png"), 
			dbg:require("@/static/images/order/staffs/dbg.png"), 
			dsbg:require("@/static/images/order/staffs/dsbg.png"), 
			ybg:require("@/static/images/order/staffs/ybg.png"), 
		}
	},
	onLoad: function() {
	},
	methods:{
		getDetail(e){
			this.$emit('getDetail',e)
		},
		typeFn(data){
			if(data){
				var newArr=[]
				var astr=data.split('-')
				astr.forEach(ite=>{
					var a=ite.substring(0,5);
					newArr.push(a)
				})
				return newArr.join('-')
			}else{
				return ''
			}
			
			
		},
	},
	
  }
</script>

<style lang="scss" scoped>
// 预约
.ylist{background: #FFFFFF;box-shadow: 0px 2rpx 4rpx 0px rgba(205,205,205,0.8);border-radius: 14rpx;margin-bottom: 20rpx;
	.ytop{position: relative;
		.ytbg{width: 100%;height: 76rpx;}
		.ytime{padding: 4rpx 100rpx 4rpx 36rpx;font-size: 28rpx;font-weight: bold;box-sizing: border-box;
color: #161616;position: absolute;left: 0;right: 0;bottom: 0;top: 0;
			.ytype{min-width: 56rpx;padding: 0 12rpx;flex:0 0 auto;
height: 40rpx;color: #FE5A0E;font-size: 18rpx;text-align: center;box-sizing: border-box;line-height: 36rpx;
background: #FFFFFF;
border: 2rpx solid #FE5A0E;
border-radius: 20rpx;margin-left: 16rpx;}
}
		.ytip{width: 88rpx;height: 66rpx;position: absolute;right: 0;top:0;
			image{width: 100%;height: 100%;}
			view{font-size: 24rpx;font-weight: 500;
color: #FFFFFF;text-align: center;margin-top: 10rpx;position: absolute;left: 0;top: 0;bottom: 0;right: 0;}
			.tsbtn{min-width: 90rpx;height: 36rpx;border-radius: 4rpx;box-sizing: border-box;font-size: 24rpx;line-height: 36rpx;margin-top: 20rpx;
				&.co1{background: #FFEDDF;color: #E19301;}
				&.co2{background: #D3F7E5;color: #24D725;}
				&.co3{background: #FDE2E3;color: #EC1134;}
			}
		}
	}
	.ybox{
		padding: 22rpx 32rpx;display: flex;flex-wrap: wrap;
		.yblist{display: flex;font-size: 30rpx;font-weight: 400;color: #161616;width: 100%;line-height: 40rpx;padding: 4rpx 0;
		text{font-weight: normal;color: #aaa;flex: 0 0 auto;}
		}
		.line{width: 56rpx;
height: 2rpx;
background: #CDCDCD;margin: 32rpx auto 24rpx;}
	}

}

</style>