tqApp-webView/pages/realtimeWatch/module/vehList.vue

<template>
    <u-popup :show="isShow" @close="close" mode="bottom" :closeOnClickOverlay="false" round="10"
		:customStyle="{
			overflow: 'hidden'
		}"
	>
		<view class="page-container">
			<scroll-view
				scroll-y style="height: 90vh;" enable-back-to-top
			>
				<view v-for="(item,index) in vehList" :key="index"
					class="box"
				>
					<view class="item">
						<view class="label">车牌：</view>
						<view class="value">{{renderItem(item,'plate','--')}}</view>
					</view>
					
					<view class="item">
						<view class="label">等待时间：</view>
						<view class="value">{{renderItem(item,'waitTime','--')}}</view>
					</view>
					
					
					<view class="item-btn">
						<view class="u-button" @click="handleTask(item)" v-if="!intercomState">
						    <image class="icon" src="@/static/icon/voice.png" mode=""></image>
						    对讲
						</view>
						<view class="u-button intercom" @click="handleTask(item)" v-if="intercomState">
						    <image class="icon" src="@/static/icon/voice-close.png" mode=""></image>
						    挂断
						</view>
					</view>
				</view>
				
				<view
					v-if="vehList.length==0"
					style="display: flex;align-items: center;justify-content: center;height: 100%;"
					
				>
					<u-empty
					    mode="data"
					>
					</u-empty>
				</view>
				
			</scroll-view>
		
			<view class="page-footer">
				<u-row style="">
					<u-col :span="12">
						<u-button type="info" shape="" :hairline="false"
							:custom-style="{
								width: '100%',
								borderRadius: '0',
								background: '#FFF',
								height: '100rpx',
								fontSize: '32rpx',
								fontWeight: '500',
							  }" @click="close">取消
						</u-button>
					</u-col>	
				</u-row>
			</view>
		</view>
		
		<intercom ref="intercom" @oNstate="(e)=>intercomState=e"></intercom>
	</u-popup>
</template>

<script>
import {copyProps,clearProps} from '@/utils/gdtq.js'
import {isArray,isEmpty} from 'lodash'
import Intercom from '@/components/Intercom'

export default {
	components: {
	    Intercom
	},
    data() {
        return {
			intercomState:false,//对接状态
			
			isShow: false,
			vehList: [
				// {plate: 'test', waitTime: '1小时30分钟', driverName: '黎曼',deviceId: 12232332},
			],
        }
    },

	mounted() {
		
	},
	
	onReady() {
		
	},
	
    methods: {

		show(e) {
			// console.log(e,'eeeee')
			let {vehList} = e
			this.vehList = vehList
			this.isShow= true;	
			
		},
		close() {
		    this.isShow = false
		},
		handleTask(item) {
		   this.$refs.intercom.toIntercom(item.deviceId);
		},
    }

}
</script>

<style lang="scss" scoped>
	
	.blue {
		color: #0075F7 !important;
	}
	
	
	
	.page-container {
		min-width: 600rpx;
		font-size: 28rpx;
		min-height: 100%;

		.box {
			margin: 24rpx 24rpx 0;
			border-radius: 20rpx;
			padding: 16rpx 20rpx;
			background: rgba(0,117,247,0.03);
			
			// 展示
			.item {
				display: flex;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
				margin: 20rpx;
				.label {
					font-size: 14px;
					font-weight: 700;
					color: #303133;
				}
				.value {
					flex: 1;
				}
			}
			
			.item-btn {
			    display: flex;
			
			    .u-button {
			        display: flex;
			        align-items: center;
			        justify-content: center;
			        width: 100%;
			        height: 60rpx;
			        background: #4573FC;
			        border-radius: 34rpx;
			        color: #fff;
			        &:not(:last-child) {
			            margin-right: 20rpx;
			        }
			        .icon{
			            width: 48rpx;
			            height: 48rpx;
			            margin-right: 2rpx;
			        }
			    }
			    .intercom{
			        background: #EB4141;
			    }
			}
		}
		
		
		.page-head {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 14rpx 0 28rpx;
		}
		
		.page-body {
			padding-bottom: 120rpx;
		}
		.page-footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	}
	
	
	::v-deep {
		.u-cell-group {
			.u-radio+.u-radio {
				margin-left: 30rpx;
			}
			.u-cell__title-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			
			.u-form-item__body__right__content__slot {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				
				.u-input__content__field-wrapper__field {
					font-family: PingFangSC, PingFang SC !important;
					font-weight: 400 !important;
					font-size: 26rpx !important;
					color: #333333 !important;
				}
			}
		}
		
		.u-textarea {
			background: none;
		}
		
		.u-form-item__body {
			padding: 0;
		}
		.hidde-cell-title {
			
			.u-cell__body__content {
				width: auto;
				flex: none;
				
			}
			.u-cell__body {
				.value {
					flex: 1;
				}
			}
			
		}
	}
		
</style>