完成订单详情页UI

pages.json

@@ -872,6 +872,13 @@
 				"navigationBarTitleText": "支付收银台",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/order/newdetail/newdetail",
+			"style" : {
+				"navigationBarTitleText": "订单详情",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/order/newdetail/newdetail.vue

@@ -0,0 +1,114 @@
+<template>
+	<view>
+		<lf-nav title="订单详情" :showIcon="true"></lf-nav>
+		<view class="card goods">
+			<view>
+				<text class="lf-iconfont icon-Group- lf-font-30"></text>
+				<text class="shop-name">精品超市</text>
+				<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
+			</view>
+			<view class="lf-flex lf-m-t-20">
+				<image class="goods-img"></image>
+				<view class="info">
+					<view class="lf-font-26 lf-color-333 lf-line-1">爱他美较大婴儿配方奶粉较大配方奶粉较2段 </view>
+					<view class="lf-font-24 lf-color-777">500g</view>
+					<view class="lf-row-between" style="line-height: 1;">
+						<text class="price">¥385</text>
+						<text class="lf-font-28 lf-color-777">x 2</text>
+					</view>
+				</view>
+			</view>
+			<view class="order-num">
+				<text>商品订单号</text>
+				<text>7863465293852482642934</text>
+			</view>
+		</view>
+		<view class="card">
+			<view class="lf-row-between lf-font-28">
+				<text class="lf-color-777">订单总价</text>
+				<text class="lf-color-222">¥385</text>
+			</view>
+			<view class="lf-row-between lf-font-28 lf-m-t-30">
+				<text class="lf-color-777">优惠券</text>
+				<text style="color: #F63434;">-¥20</text>
+			</view>
+		</view>
+		<view class="card">
+			<view class="lf-row-between lf-font-28">
+				<text class="lf-color-777">订单编号</text>
+				<text class="lf-color-222">75894375395739345</text>
+			</view>
+			<view class="lf-row-between lf-font-28 lf-m-t-30">
+				<text class="lf-color-777">创建时间</text>
+				<text class="lf-color-222">2021-09-07 10:21:38</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F8F8F8;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.card{
+		height: max-content;
+		width: 750rpx;
+		padding: 30rpx 32rpx;
+		background-color: #FFFFFF;
+		&:nth-child(n+2){
+			margin-top: 20rpx;
+		}
+	}
+	.goods{
+		.shop-name{
+			font-size: 28rpx;
+			color: #222222;
+			font-weight: bold;
+			margin: 0 15rpx;
+		}
+		.goods-img{
+			width: 130rpx;
+			height: 130rpx;
+			border-radius: 4rpx;
+			margin-right: 15rpx;
+			background-color: #EEEEEE;
+		}
+		.info{
+			width: 540rpx;
+			height: 130rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			.price{
+				font-size: 32rpx;
+				color: #F63434;
+				font-weight: bold;
+			}
+		}
+		.order-num{
+			font-size: 24rpx;
+			color: #999999;
+			display: flex;
+			justify-content: space-between;
+			margin-top: 28rpx;
+		}
+	}
+</style>