bc_wx_applet/pages/order/orderDetails/orderDetails.vue

<template>
	<view class="order-detail">
		<topNavBar title="订单详情" />
		<view class="order-state padding-sm dflex-b w-full">
			<view class="state-left">
				<view class="state-info">等待商家接单</view>
				<view class="order-code">预计 09:59 分钟后接单</view>
			</view>
			<uni-icons type="right" size="24" color="#FFF"></uni-icons>
		</view>
		<view class="gap"></view>
		<view class="padding-sm dflex-b bg-main" @click="show = true">
			<view class="dflex">
				<view class="w-full dflex-wrap-w send-label">
					取餐时间
				</view>
			</view>
			<u-icon slot="icon" size="20" name="arrow-right" label="04:00" labelPos="left"></u-icon>
		</view>
		<view class="gap"></view>
		<view class="padding-sm dflex-b bg-main">
			<view class="dflex">
				<view class="w-full dflex-wrap-w send-label">
					取餐方式
				</view>
			</view>
			<view>
				<radio style="transform: scale(0.85)" value="r1" :checked="true" color="#ff0000" class="radio">店内用餐
				</radio>
			</view>
		</view>

		<view class="gap"></view>
		<view class="goods-order-list padding-lr-sm">
			<view class="shop dflex-b ">
				<view class="shop-check">
					<text class="send-label">店铺名称</text>
				</view>
				<view class="total-goods">共计2件商品</view>
			</view>
			<view class="goods-cart">
				<view class="goods-cont dflex-b padding-tb-16">
					<view class="goods-cart-info dflex-b">
						<view class="pic"></view>
						<view class="goods-cart-right">
							<view class="cart-title">商品名称商品名称</view>
							<view class="order-spec">
								<text>500g</text>
							</view>
							<view class="cart-row-info dflex-s">
								<view class="cart-price">
									￥<text>12.30</text>
								</view>
								<view class="goods-num">×1</view>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-cont dflex-b padding-tb-16">
					<view class="goods-cart-info dflex-b">
						<view class="pic"></view>
						<view class="goods-cart-right">
							<view class="cart-title">商品名称商品名称</view>
							<view class="order-spec">
								<text>500g</text>
							</view>
							<view class="cart-row-info dflex-s">
								<view class="cart-price">
									￥<text>12.30</text>
								</view>
								<view class="goods-num">×1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gap"></view>
		<!-- 金额明细 -->
		<view class="bg-main">
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1 send-label">总金额</view>
				<view class=""><text style="font-size: 24rpx;">￥</text>46.32</view>
			</view>
			<view class="gap"></view>
			<view class="w-full padding-sm order-info">
				<view class="row-cell dflex-b">
					<text>订单编号</text>
					<text class="cell-right">M0000000000</text>
				</view>
				<view class="row-cell dflex-b">
					<text>下单时间</text>
					<text class="cell-right">2024-03-25 12:23:36</text>
				</view>
			</view>
		</view>
		<view class="gap"></view>
		<view class="bar-space"></view>
		<view class="order-btn background-gradient">取消订单</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.order-state {
		background-color: #F96C22;
		box-sizing: border-box;
		color: #FFF;

		.state-info {
			font-size: 14px;
			padding-bottom: 4px;
		}

		.order-code {
			font-size: 12px;
		}
	}

	.addr-label {
		padding: 6upx 0;
		border-radius: 3px;
		background-color: #F6390D;
		color: #fff;
		width: 120upx;
		text-align: center;
		flex-shrink: 0;
		margin-right: 14upx;
	}

	.order-spec {
		padding-bottom: 10upx;
	}

	.shop {
		padding-top: 20upx;
	}

	.goods-num {
		font-size: 16px;
		padding-left: 20upx;
	}

	.sub-coupon {
		padding-top: 20upx;
		padding-bottom: 0;
		color: #000;

		.coupon-name {
			font-weight: normal;
		}

		.mj-tag {
			background-color: #F6390D;

			>text {
				color: #FFF;
			}
		}
	}

	.total-goods {
		font-size: 12px;
		color: #999;
	}

	.submit-bar {
		height: 100upx;
		width: 100%;
		background-color: #FFF;
		position: fixed;
		left: 0;
		bottom: 0;

		.submit-total {
			font-size: 16px;
			font-weight: 700;
			color: #F6390D;
		}

		.submit-btn {
			background-image: $base-bg-gradient-color;
			height: 70upx;
			width: 200upx;
			color: #FFF;
			font-size: 14px;
			font-weight: 700;
			border-radius: 35upx;
		}
	}

	.order-btn {
		height: 76upx;
		border-radius: 38px;
		background-image: $base-bg-gradient-color;
		text-align: center;
		line-height: 76upx;
		color: #FFF;
		font-size: 14px;
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 30upx;
		z-index: 99;
	}

	.order-info {
		background-color: #FFF;
		box-sizing: border-box;
	}

	.row-cell {
		padding-bottom: 20upx;

		.cell-right {
			font-size: 12px;
			color: #999;
		}
	}

	.row-cell:last-child {
		padding-bottom: 0;
	}

	.pic {
		margin-right: 20upx;
		height: 160rpx;
		width: 160rpx;
		background-color: #EEE;
	}

	.send-label {
		font-size: 14px;
		font-weight: 700;
	}
</style>