ydd_front/mer_uniapp/components/riderOrder/index.vue

<template>
	<view class="order-item">
		<view class="order-top">
			<view>
				<text class="bold-size">配送费：￥ {{orderInfo.cost}}</text>
			</view>
			<view>
				<text class="onBold-size">期望时间：{{orderInfo.time}} 前送达</text>
			</view>
		</view>
		<view class="order-content">
			<view style="margin-bottom: 39rpx;">
				<view class="box-item">
					<view class="bold-size">
						<text class="order-icon">取</text>{{orderInfo.shopName}}
					</view>
					<view class="order-dis">{{orderInfo.shopDistance}} m</view>
				</view>
				<text class="onBold-size"><text class="order-icon" style="opacity: 0">取</text>{{orderInfo.shopAddress}}</text>
			</view>
			<view>
				<view class="box-item">
					<view class="bold-size">
						<text class="order-icon">送</text>{{orderInfo.userAddress}}
					</view>
					<view class="order-dis">{{orderInfo.userDistance}} m</view>
				</view>
				<text class="onBold-size"><text class="order-icon" style="opacity: 0">送</text>备注：{{orderInfo.userRemarks}}</text>
			</view>
		</view>
		<view class="order-bottom" v-if="isButton">
			<view class="bottom-but">
				<button class="sub" @tap="formSubmit">接单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderInfo: {
				type: Object,
				default: {}
			},
			isButton: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">

	.order-item {
		background-color: #fff;
		border-radius: 23rpx;
		padding: 19rpx 38rpx;
	}

	.order-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10rpx;
		border-bottom: 2rpx dashed #D6D7DC;
	}

	.bold-size {
		font-weight: 500;
		font-size: 27rpx;
		color: #141414;
	}

	.onBold-size {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
	}

	.order-content {
		padding: 45rpx 0;

		.box-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;
		}
	}

	.order-dis {
		font-weight: 400;
		font-size: 23rpx;
		color: #141414;
	}

	.order-icon {
		display: inline-block;
		margin-left: 10rpx;
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
		font-weight: 400;
		font-size: 23rpx;
		color: #FFFFFF;
		border-radius: 50%;
		background-color: $bg-color-primary;
	}

	.order-bottom {
		border-top: 2rpx dashed #D6D7DC;

		.bottom-but {
			padding: 39rpx 67rpx;

			.sub {
				width: 100%;
				background-color: $bg-color-primary;
				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
				padding: 17rpx 0;
			}
		}
	}
</style>