care365/components/orderinfo/orderinfo.vue

<template>
	<view>
		<view class="orderBox">
			<view class="orderHeader">
				<text class="orderNo">订单编号：{{info.serial}}</text>
				<text class="orderStatus">{{info.status_name}}</text>
			</view>

			<view class="orderBody">
				<view class="orderLine">
					<text class="iconfont iconLocation icon">&#xe62d;</text>
					<text class="orderTxt">{{info.project.name}}</text>
					<text class="orderGe">|</text>
					<text class="orderTxt">{{info.bed.building_name}}-{{info.bed.area_name}}-{{info.bed.room_name}}-{{info.bed.name+'床'}}</text>
				</view>
				<view class="orderLine">
					<text class="iconfont iconLocation icon">&#xe606;</text>
					<text class="orderTxt">{{info.patient.name}}</text>
					<text class="orderGe">|</text>
					<text class="orderTxt">{{info.patient.sex==null?'男':info.patient.sex}}</text>
					<text class="orderGe">|</text>
					<text class="orderTxt">{{info.mobile}}</text>
				</view>
				<view class="orderLine">
					<text class="iconfont iconLocation icon">&#xe603;</text>
					<text class="orderTxt">{{info.from_date}} ～ {{info.to_date}} 共预约{{info.days}}天</text>
				</view>
				<view class="orderLine" style="padding-left: 43rpx;">
					<block v-for="(m,i) in info.factorjson">
						<view class="orderTag tagBox1">
							<text class="orderTagTxt tag1">{{m.factor_item_name}}</text>
						</view>
					</block>
					<view class="orderTag tagBox2" v-if="info.product_item!=null">
						<text class="orderTagTxt tag2">{{info.product_item.name}}</text>
					</view>
					<view class="orderTag tagBox3" v-if="info.paramedic_level!=null">
						<text class="orderTagTxt tag3">{{info.paramedic_level.name}}</text>
					</view>
				</view>
			</view>
			<view class="orderPrice">
				<view class="priceBox">
					<text class="priceTitle">合计:</text>
					<text class="priceInfo">￥{{info.total}}</text>
				</view>
				<view class="priceBox">
					<text class="priceTitle">已扣:</text>
					<text class="priceInfo">￥{{info.paid_total}}</text>
				</view>
				<view class="priceBox">
					<text class="priceTitle">余额:</text>
					<text class="priceInfo">￥{{info.customer.balance}}</text>
				</view>
				<view class="priceBox" v-if="info.paramedic">
					<text class="priceTitle">护工:</text>
					<text class="priceInfo">{{info.paramedic?info.paramedic.name:''}}</text>
				</view>
			</view>

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

<script>
	export default {
		name: "orderinfo",
		props: {
			info: {
				type: Object
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	view{
		display: flex;
		flex-direction: column;
		
	}
	.orderLine {
		flex-direction: row;
		margin-top: 16rpx;
		align-items: center;
	}

	.orderTxt {
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.iconback {
		width: 40rpx;
		height: 40rpx;
	}

	.navTab {
		background: #FAFAFA;
		box-shadow: 0 1px 0 0 #E6E6E6;
		flex-direction: row;
		justify-content: space-around;
		top: 140rpx;
		left: 0;
		position: fixed;
		z-index: 999;
		width: 750rpx;
	}

	.tabItem {
		align-items: center;
		position: relative;
	}

	.orderGe {
		color: #D8D8D8;
		margin-left: 16rpx;
		margin-right: 16rpx;
		font-size: 28rpx;
	}

	.tabTxt {
		font-size: 28rpx;
		color: #666666;
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.tabItemOn {
		color: #0DC99E;
	}

	.tabItemOnLine {
		background: #0DC99E;
		height: 4rpx;
		width: 100rpx;
		position: absolute;
		bottom: -2rpx;
		left: 0;
	}

	.orderBox {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background: #ffffff;
		margin-top: 20rpx;
	}

	.orderHeader {
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #E4E4E4;
		align-items: center;
	}

	.orderBody {

		border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 16rpx;
	}

	.orderStatus {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #FD8C30;
		text-align: left;
		line-height: 40rpx;
	}

	.orderNo {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
	}

	.orderTag {
		background: rgba(13, 201, 158, 0.10);
		border-radius: 2px;
		width: 100rpx;
		padding: 4rpx 10rpx;
		margin-right: 10rpx;
	}

	.orderTagTxt {
		font-family: SourceHanSansCN-Normal;
		font-size: 20rpx;
		text-align: center;
	}

	.tag1 {
		color: #0DC99E;
	}

	.tag2 {
		color: #4A90E2;
	}

	.tag3 {
		color: #FD8C30;
	}

	.tagBox1 {}

	.tagBox2 {
		background: rgba(60, 145, 245, 0.10);
	}

	.tagBox3 {
		background: rgba(253, 140, 48, 0.10);
	}

	.orderPrice {
		flex-direction: row;
		margin-top: 16rpx;
		border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 16rpx;
	}

	.priceBox {
		margin-right: 30rpx;
		flex-direction: row;
		align-items: center;
	}

	.priceTitle {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.priceInfo {
		font-family: Roboto-Medium;
		font-size: 24rpx;
		color: #333333;
		text-align: left;
		line-height: 40rpx;
	}

	.orderFooter {
		margin-top: 16rpx;
		padding-bottom: 16rpx;
		flex-direction: row;
		justify-content: flex-end;
	}

	.btn {
		border-radius: 27rpx;
		width: 108rpx;
		margin-left: 20rpx;
	}

	.btnCancel {
		background: #FFFFFF;
		border: 1rpx solid #0DC99E;
		align-items: center;
	}

	.btnTxt {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
	}

	.btnCancelTxt {
		color: #0DC99E;
	}

	.btnConfirm {
		background: #0DC99E;
		border: 1rpx solid #0DC99E;
		align-items: center;
	}


	.btnConfirmTxt {
		color: #FFFFFF;
	}

	.iconBack {}

	.icon {

		color: #52D5A6;
		margin-right: 12rpx;
		font-size: 28rpx;
	}

	.iconLocation {}

	.navRight {
		flex-direction: row;
	}
</style>