Delivery-merchant/components/OrderInfo.vue

<template>
	<view class="order-info" @click="navigateTo('/pages/Storesdetails?status=' + status)">
		<view class="order-top">
			<view class="status">接单中</view>
			<text class="time">{{ status ? '2021-05-20 07:52' : '剩余50分钟' }}</text>
		</view>
		<view class="products">
			<view class="address">
				<view class="name">{{ status ? '用户信息' : '配送地址' }}</view>
				<view>
					<view class="name" v-if="!status">南京**江宁校区-4号宿舍楼</view>
					<view class="name name1">奶盖 18789898888</view>
				</view>
			</view>
			<view class="content">
				<view class="text1">{{ status ? '用户要求' : '自取时间' }}</view>
				<view class="text2">08:50送达</view>
			</view>
			<view class="content" v-if="!status">
				<view class="text1">买家留言</view>
				<view class="text2">麻烦送到宿舍楼下的桌子上</view>
			</view>
			<view class="content content2">
				<view class="text1">买家已支付:</view>
				<view class="text3">¥34</view>
			</view>
		</view>
		<view class="btn1">
			<u-button block type="primary" @click="submit">接单</u-button>
			<u-button block class="btn2" @click="submit2">联系买家</u-button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'OrderInfo',
	props: {
		status: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods:{}
};
</script>

<style lang="scss" scoped>
.order-info {
	background: #ffffff;
	border-radius: 12px;
	padding: 16px 12px;
}
/deep/ .u-btn {
	width: 80px;
	height: 36px;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	color: #ffffff;
	border-radius: 4px;
}
.order-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 1px solid #f5f7fa;
	.status {
		font-size: 14px;
		font-weight: bold;
		color: $u-type-primary;
		line-height: 24px;
	}
	.time {
		font-size: 14px;
		color: #c8c9cc;
		line-height: 24px;
	}
}
.btn1 {
	display: flex;
	align-items: center;
	place-content: flex-end;
	margin-top: 10px;
	.btn2 {
		color: #214bbe;
		margin-left: 16px;
	}
}
.products {
	.address {
		height: 78px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f5f7fa;
		.name {
			font-size: 14px;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			&.name1{
				text-align: right;
			}
		}
	}
	.content {
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f5f7fa;
		&.content2{
			border: 0;
		}
		.text1 {
			font-size: 13px;
			font-weight: 400;
			color: #939599;
			line-height: 24px;
		}
		.text2 {
			font-size: 14px;
			font-weight: 400;
			color: #ff7f1f;
			line-height: 24px;
		}
		.text3 {
			font-size: 16px;
			font-weight: bold;
			color: #000000;
			line-height: 24px;
		}
	}
}
</style>