bc_wx_applet/pages/order/orderDetail/orderDetail.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">订单编号：M0000000000</view>
			</view>
			<uni-icons type="right" size="24" color="#FFF"></uni-icons>
		</view>
		<view class="gap"></view>
		<view class="padding-sm bg-main" @click="toaddr">
			<view class="dflex">
				<!-- <view class="iconfont icondizhi- margin-right ft-main"></view> -->
				<view class="addr-label">配送至</view>
				<view class="w-full dflex-wrap-w">
					<view>
						<text>张三</text>
						<text class="margin-left">18599999999</text>
					</view>
					<view class="margin-bottom-xs">
						<text> 广西壮族自治区-柳州市-鱼峰区 xxxx</text>
					</view>
				</view>
			</view>
			
			<!-- <view class="iconfont iconjiantou-01 fs-sm"></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="shop-name">店铺名称</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="bg-main">
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1">总金额</view>
				<view class=""><text style="font-size: 24rpx;">￥</text>46.32</view>
			</view>
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1">运费 (总重:4.960 kg )</view>
				<view class="ft-base">-￥10.00</view>
			</view>
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1">优惠金额</view>
				<view class="ft-base">0.00</view>
			</view>
			
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="margin-right-xl">备注</view>
				<input class="flex1 padding-sm" type="text" v-model="order_desc" placeholder="请填写买家备注"
					placeholder-class="placeholder" />
			</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 class="gap"></view>
		<view class="gap"></view>
		<view class="bar-space"></view>
		<view class="order-btn">确认收货</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;
	}
</style>