wechat_yxcl/pages/operatingStatements/detail.vue

<template>
	<view class="page-card" v-if="!isLoading">
		<view class="head-card" v-show="pageMsg.Serverpart_Name" @tap="toTrend">
			<view class="uni-flex jc-between ai-center text-strong">
				<view class=""> {{ pageMsg.Serverpart_Name }} </view>
				<view class=""> ¥{{ $util.fmoney(pageMsg.Serverpart_Revenue, 2) }} </view>
			</view>
			<view class="uni-flex jc-between ai-center">
				<text class=""> {{ pageMsg.Serverpart_S || '南/东区' }} &nbsp;
					&nbsp;¥{{ $util.fmoney(pageMsg.Serverpart_RevenueS, 2) }}</text>
				<text class=""> {{ pageMsg.Serverpart_N || '北/西区' }} &nbsp;
					&nbsp;¥{{ $util.fmoney(pageMsg.Serverpart_RevenueN, 2) }}</text>
			</view>
		</view>
		<view class="page-list" v-if="pageMsg.ShopList && pageMsg.ShopList.length > 0">
			<!--			<view v-for="(dateItem,i) in pageMsg.revenueReportDetilsDates" :key="i">-->
			<!--				<text class="list-date"> {{// $util.cutDate(dateItem.Statistics_Date,'MM.DD')}}</text>-->
			<view class="cell-body uni-flex ai-center" v-for="(item, i) in pageMsg.ShopList" :key="i">
				<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'" mode="aspectFit">
				</image>
				<view class="">
					<view class="uni-flex ai-center jc-between">
						<text>{{ item.BusinessType_Name }}</text>
						<text class="shop-total">＋ ¥{{ $util.fmoney(item.BusinessType_Revenue, 2) }}</text>
					</view>
					<view class="uni-flex ai-center jc-between">
						<text style="display: inline-block;width: 20%" class="type-text"
							:class="{ 'scan': item.Upload_Type == 1, 'port': item.Upload_Type == 2 }">
							<template v-if="item.Upload_Type == 1">
								扫码上传
							</template>
							<template v-else-if="item.Upload_Type == 2">
								接口传输
							</template>
							<template v-else>
								自动上传
							</template>
							<!-- <text class="type-text scan" v-if="item.Upload_Type==1" >扫码上传</text>
								<text class="type-text port" >接口传输</text>
								<text v-else>自动上传</text> -->
						</text>
						<view class="uni-flex ai-center" style="display: inline-block;width: 80%">
							<div style="display: inline-block;width: 48%;text-align: left;margin-right: 4%"
								class="text-coast">
								<text style="display: inline-block;width: 40px;text-align: left">
									{{ item.Serverpart_RevenueS === 0 || item.Serverpart_RevenueS ?
										`${item.Serverpart_S}：
									`: '' }}
								</text>
								<text style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
									{{ item.Serverpart_RevenueS === 0 || item.Serverpart_RevenueS ?
										`¥${$util.fmoney(item.Serverpart_RevenueS, 2)}` : '' }}
								</text>
							</div>
							<div style="display: inline-block;width: 48%;text-align: right" class="text-coast">
								<text style="display: inline-block;width: 40px;text-align: left">
									{{ item.Serverpart_RevenueN === 0 || item.Serverpart_RevenueN ?
										`${item.Serverpart_N}：
									`: '' }}
								</text>
								<text style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
									{{ item.Serverpart_RevenueN === 0 || item.Serverpart_RevenueN ?
										`¥${$util.fmoney(item.Serverpart_RevenueN, 2)}` : '' }}
								</text>
							</div>
						</view>
					</view>

				</view>
			</view>
			<!--			</view>-->
		</view>
		<view class="" v-if="!isLoading && !pageMsg.Serverpart_Name">
			<noFound nodata="true" :text="noDataText" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: true,
			pageMsg: {},
			pageOption: {},
			noDataText: '抱歉，没有数据，请稍后重试'
		}
	},
	methods: {
		toTrend() {
			this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?name=' + this.pageMsg.Serverpart_Name + '&time=' + this.pageOption.et + '&id=' + this.pageOption.id + '&ProvinceCode=' + this.pageOption.pcode)
		},
		getDetail(obj) {
			let _this = this
			uni.showLoading({
				title: '正在加载...',
				mask: true
			})

			const req = {
				provinceCode: obj.pcode,
				serverpartId: obj.id,
				startTime: obj.st,
				endTime: obj.et,
			}

			_this.$request.$webGet('CommercialApi/Revenue/GetRevenueReportDetil', req).then((res) => {
				console.log('dadasda', res);

				if (res.Result_Code == 100) {
					_this.pageMsg = res.Result_Data

				} else {
					_this.noDataText = res.Result_Desc
				}
				uni.hideLoading()
				_this.isLoading = false
			})


			// _this.$request.$webGet('WeChat/GetRevenueReportDetils',{
			// 	startTime: obj.st,
			// 	endTime: obj.et,
			// 	Serverpart_Id: obj.id,
			// 	pushProvinceCode: obj.pcode
			// }).then(res=>{

			// 	if(res.Result_Code==100) {
			// 		_this.pageMsg = res.Result_Data

			// 	}else{
			// 		_this.noDataText = res.Result_Desc
			// 	}
			// 	uni.hideLoading()
			// 	_this.isLoading = false
			// })
		},

	},
	onLoad(op) {
		this.pageOption = op
		this.getDetail(op)
	}
}
</script>

<style>
page {
	background-color: #fff;
}

.page-card {
	margin: 30rpx 20rpx;

}

.head-card {
	padding: 30rpx 35rpx;
	background: linear-gradient(to left, #f7f6f8 0%, #eceaeb 100%);
	border-radius: 12rpx 12rpx 0 0;
}

.head-card>view+view {
	margin-top: 16rpx;
}

.text-strong {
	font-weight: bolder;
}

.head-card>view>text {
	font-size: 24rpx;
	color: #333;
}

.list-date {
	font-size: 22rpx;
	background-color: #f8f8f8;
	border-radius: 4rpx;
	padding: 4rpx 12rpx;
	margin-top: 20rpx;
}

.page-list {
	border: 1rpx solid #F0F0F0;
	border-radius: 0 0 12rpx 12rpx;
	overflow: hidden;

	padding: 30rpx 16rpx 30rpx 16rpx;
}

.cell-body {
	position: relative;
	padding: 20rpx 20rpx 20rpx 0;
}

.cell-body image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}

.cell-body>view {
	flex: 1;
}

.page-list text {
	font-size: 22rpx;
	color: #2E2E2E;
}

text.shop-total {
	font-size: 24rpx;
}

text.type-text {
	color: #DFBE9F;
	display: flex;
	align-items: center;
}

text.type-text.scan::before,
text.type-text.port::before {
	content: '';
	width: 21rpx;
	height: 23rpx;
	margin-right: 8rpx;
}

text.type-text.scan::before {
	background: url(/static/images/revenue/scan-up.png) no-repeat center;
	background-size: contain;
}

text.type-text.port::before {
	background: url(/static/images/revenue/port.png) no-repeat center;
	background-size: contain;
}

text.type-text.port {
	color: #95BAF2;
}

text.text-coast {
	color: #848484;
	width: 184rpx;

}

text.text-coast+text.text-coast {
	text-align: right;
}
</style>