tiantian-care-wx/components/orderbox/orderbox.vue

<template>
	<view>
		<view class="box orderBox flex-col">
			<view class="orderHeader flex-row justify-between">
				<text>订单编号: {{order.serial}}</text>
				<text>{{order.bed.building.name}}-{{order.bed.room.name}}-{{order.bed.name}}</text>
			</view>
			<view class="orderBody flex-col ">
				<view class="boxLine flex-row justify-between" style="font-size: 28rpx;">
					<view class="flex-row">
						<text class="orange">{{order.project.name}}</text>
						<text>{{order.product.name}}</text>
					</view>
					<view class="">
						<text>{{order.patient.name}}</text>
					</view>
				</view>
				<view class="boxLine flex-row justify-between">
					<view class="">
						<text class="gray">预约: {{order.from_date}}</text>
					</view>
					<view class="">
						<text class="gray">X{{order.days}}</text>
					</view>
				</view>
				<view class="boxLine flex-row justify-between">
					<view class="">
						<text class="gray">合计:￥{{order.total}} 已扣:￥{{order.paid_total}}</text>
					</view>
					<view class="">
						<text class="gray">余额：￥{{order.customer.balance}} </text>
					</view>
				</view>
				<view class="boxLine flex-row justify-between">
					<view class="">
						<text class="orange" v-for="(mod,i) of order.factorsJson">{{mod.factor_item_name}}</text>

					</view>
					<view class=""></view>
				</view>
			</view>
			<view class="orderFooter"></view>
		</view>

		<view class="box">
			<view class="boxHeader">
				<text style="font-size: 28rpx;">订单详情</text>
			</view>
			<view class="boxBody" style="max-height: 200rpx;overflow-y: auto;">
				<view class="boxItem flex-col" v-for="(item,index) of order.order_items">
					<view class="boxLine flex-row justify-between">
						<text>护工：{{item.paramedic?item.paramedic.name:""}}</text>
						<text class="gray">服务时间: {{item.service_date}} </text>
					</view>
					<view class="boxLine  flex-row justify-between">
						<view>
							<text>费用：</text>
							<text class="orange">￥{{item.total}}</text>
						</view>
						<text class="orange">{{item.paid_at?"已服务":"未服务"}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			order: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		methods: {

		}
	};
</script>
<style scoped>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.box {

		width: 689rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 0rpx 10rpx 0rpx #56626D;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 20rpx auto;
		padding: 15rpx 20rpx;
	}

	.box .boxItem .boxLine {
		margin-bottom: 15rpx;
		margin-top: 15rpx;
	}

	.orderBox {}


	.orderHeader {
		background: rgba(229, 229, 230, 0.2);
		height: 60rpx;
	}

	.orderBody {}

	.orderBody .boxLine {
		padding: 10rpx;
		font-size: 24rpx;
	}

	.orderHeader text {
		font-family: PingFangTC;
		font-size: 22rpx;
		color: #838180;
	}

	text.orange {
		color: rgba(247, 114, 63, 1);
		margin-right: 10rpx;
	}

	text.gray {
		color: rgba(131, 129, 128, 1);
	}

	text.green {
		color: #0FE2BA;
	}
</style>