ccy_DIB/pages/everdayRenven/components/listUnit.vue

<template>
	<div>
	<div class="analysis-cell" @tap="toggleShow" :class="{'active':item.show}">
		<div class="shop-title">
			<span> {{( i>8 ? i+1: '0'+(i+1) ) + ' '+item.SHOPNAME}}</span>
			<p>
				<span v-show="item.UNACCOUNT_SIGN">￥</span>
				<span class="cell-price" :style="{'padding-right':!item.UNACCOUNT_SIGN ? '36rpx':'0','font-size':!item.UNACCOUNT_SIGN ? '24rpx':'36rpx'}">{{item.UNACCOUNT_SIGN ? $util.fmoney(item.CASHPAY_TOTAL,2): '无结账信息'}}</span>
				<image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'></image>
				<!-- <text class="uni-icon uni-icon-checkmarkempty"  v-if='item.SHOWDEAL_SIGN'></text> -->
				
			</p>
		</div>
		<p v-if=" item.detail.length>0" style="line-height: 1.2;">
			<span v-for="(child,index) in item.detail" :key="index" class="atribute-tag">{{child}} </span>
		</p>
	</div>
	<div class="analysis-detail" v-show="item.show">
		<div class="detail-unit" v-for="(unit,o) in item.ShopEndAccountList" :key="o">
			<div class="uni-inline-flex">
				<span class="detail-title">结账时间：</span>
				<div style="flex: 1;text-align: left;">
					<div>起 {{unit.ENDACCOUNT_STARTDATE}}</div>
					<div>止 {{unit.ENDACCOUNT_DATE}}</div>
				</div>	
				<span style="color:#EE7941;margin-right:50rpx;padding-top: 42rpx;">{{getHour(unit.ENDACCOUNT_STARTDATE,unit.ENDACCOUNT_DATE)}}小时</span>
			</div>
			<block v-if="unit.DESCRIPTION_DATE">
				
				<div class="detail-title">日结校验：{{unit.DESCRIPTION_DATE}}</div>
				<p><span class="detail-title">{{unit.DESCRIPTION_STAFF}}：</span><span>{{unit.DIFFERENCE_REASON}}</span></p>
			</block>
			<block v-if="unit.APPROVE_DATE">
				<div><span class="detail-title">日结审核：{{unit.APPROVE_DATE}}</span></div>
				<p><span class="detail-title">{{unit.APPROVE_STAFF}}：</span><span>{{unit.APPROVED_INFO}}</span></p>
			</block>
			<div>
				<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE">单品报表：<text class="uni-icon uni-icon-checkmarkempty"  ></text></p>
				<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE">香烟数据：<span class="uni-icon uni-icon-checkmarkempty"></span></p>
			</div>
			<div><span class="detail-title detail-short-info">稽核次数：{{unit.CHECK_COUNT}} 次</span><span class="detail-short-info">长短款额：{{$util.fmoney(unit.DIFFERENT_PRICE)}} 元</span></div>
			<div>
				<span class="detail-title detail-short-info">现金缴款：{{$util.fmoney(unit.CASHPAY_DOWNLORD)}} 元</span>
				<span class="detail-short-info">移动支付：{{$util.fmoney(unit.MOBILEPAYMENT)}} 元</span>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			},
			i: {
				type: Number,
				required: true
			}
		},
		data () {
			return {
				
				
			}
		},
		computed: {
			
		},
		methods: {
			getHour(start,end){
				return parseInt((new Date(end) - new Date(start)) / (1000 * 3600)) 
			},
			
			toggleShow () {
				this.$emit('toggleShow', this.i)
			}
		}
	}
</script>

<style scoped>
	.analysis-cell {
		/* height: 1140rpx; */
		background-color: #ffffff;
		border-bottom: 2rpx solid #F8F8F8;
		padding: 24rpx 20rpx 18rpx 30rpx;
		display: flex;
		flex-direction: column;
	}
	
	.analysis-cell .shop-title {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-left: 20rpx;
		font-size: 26rpx;
		height: 100%;
		align-items: center;
	}
	
	.analysis-cell .shop-title:before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background: url(/static/images/revenue/select.png) no-repeat center;
		background-size: contain;
		left: -32rpx;
		
	}
	
	.analysis-cell.active .shop-title:before {
		background: url(/static/images/revenue/select_active.png) no-repeat center;
		background-size: contain;
	}
	.shop-title image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 16rpx;
		vertical-align: text-bottom;
	}
	.analysis-cell .cell-price {
		color: #565656;
		font-family: Bahnschrift Regular;
		font-size: 38rpx;
	}
	
	.analysis-detail {
		background-color: #fff;
		position: relative;
	}
	.analysis-detail span, .analysis-detail view{
		color: #333 ;
		font-size: 24rpx ;
	}
	.uni-icon-checkmarkempty, .analysis-detail span.uni-icon-checkmarkempty {
		color: #4F8E24;
		font-size: 36rpx;
	}
	.analysis-detail::before {
		content: '';
		width: 24rpx;
		height: 12rpx;
		background: url(/static/images/revenue/bg-s.png) no-repeat center;
		background-size: contain;
		display: block;
		position: absolute;
		top: -12rpx;
		left: 48rpx;
	}
	.analysis-detail .detail-unit {
		background-color: #F8F8F8;
		line-height: 2;
		padding: 20rpx 10rpx 20rpx 50rpx;
	}
	
	.analysis-detail .detail-unit>div {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}
	
	.analysis-detail .detail-unit>p {
		margin-top: 12rpx;
	}
	.analysis-detail .detail-unit+.detail-unit {
		margin-top: 20rpx;
	}
	
	.analysis-cell .atribute-tag {
		color: #EE7941;
		margin-left: 10rpx;
		font-size: 24rpx;
	}
	
	.analysis-detail span {
		display: inline-block;
		vertical-align: middle;
	}
	
	.analysis-detail .detail-title {
		min-width: 120rpx;
	}
	
	.analysis-detail .detail-short-info {
		width: 50%;
	}
</style>