care365/package/packagestat/pages/artboard/artboard.vue

<template>
	<view>
		<topnav title="陪护一览" @tohome='tohome'></topnav>
		<view class="content">
			<systabs :tabsarr="tabsarr" @tabChange="tabChange"></systabs>
			<block v-for="(info,pindex) in datalist">
				<view class="box">

					<boxtitle :title="info.building_name+'-'+info.name"> </boxtitle>
					<view class="boxContent">
						<block v-for="(item,index) in info.beds">
							<view class="boxItem" :class="(item.on_going_order!=null?'boxItemOn':'')">
								<view class="boxItemLeft">
									<view class="">
										<image src="/static/resources/pic-you.png" class="icon_peihu"
											v-if="item.on_going_order!=null">
										</image>
										<image src="/static/resources/pic-wu.png" class="icon_peihu" v-else></image>
									</view>
									<text class="icon_peihu_text">
										{{item.name}}
									</text>
								</view>
								<view class="boxItemRight">
									<text
										class="boxItemRightText">{{item.on_going_order!=null?item.on_going_order.paramedic_name:'无'}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");

	export default {
		data() {
			return {
				tabsarr: [{
					title: "陪护中",
					checked: true,
					value: "1"
				}, {
					title: "全部",
					checked: false,
					value: ""
				}],
				datalist: []
			}
		},
		onLoad: function() {
			this.loadPage(1);
		},
		onShow: function() {
			this.loadPage(1);
		},
		methods: {
			tohome:function(){
				uni.navigateTo({
					url:"../../../../pages/index/index"
				})
			},
			tabChange: function(val) {
				console.log(val)
				this.loadPage(val);
			},
			loadPage: function(hasorder) {
				var that = this;
				var currentProject = uni.getStorageSync('currentProject');
				util.request({
					bindThis: that,
					api: 'manager/statistics/beds',
					customLoading: false,
					data: {
						project_id: currentProject.id,
						has_ongoing_order: hasorder
					},
					utilSuccess: function(res) {
						that.datalist = res;
					},
					utilFail: function(res) {
						that.datalist = [];
					}
				});
			}
		}
	}
</script>

<style>
	page {
		padding-top: 210rpx;
	}

	.box {
		margin-top: 16rpx;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
	}

	.boxContent {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}

	.boxItem {
		display: flex;
		justify-content: space-between;
		align-items: center;

		background: rgba(102, 102, 102, 0.10);
		border-radius: 4rpx;
		padding: 12rpx 21rpx;

		box-sizing: border-box;
		width: 208rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.icon_peihu {
		width: 40rpx;
		height: 37rpx;
	}

	.boxItemLeft {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.icon_peihu_text {
		font-family: PingFangSC-Regular;
		font-size: 20rpx;
		color: #999999;
	}

	.boxItemRightText {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
	}

	.boxItemOn {
		background: rgba(13, 201, 158, 0.10);
	}

	.boxItemOn .boxItemRightText {
		color: #333333;
		text-align: center;
	}

	.boxItemOn .icon_peihu_text {

		color: #0DC99E;
	}
</style>