null/pages/order/detail.vue

<template>
	<view class="page">
		<view class="p-header flex-col items-center">
			<image src="/static/odetail-status.png" class="image_4" />
			<!-- 进行中 
			<text class="text_2">待取货</text>
			<view class="flex-col items-center text-wrapper"><text class="text_3">3154</text></view>
			-->
			<!-- 已完成 -->
			<text class="text_2">已完成</text>
			<text class="tips">
				感谢您的支持，欢迎下次光临
			</text>
		</view>
		<view class="p-division"></view>
		<!-- 进行中 待取货 -->
		<view class="p-time flex-col">
			<text class="text_4">取货时间：今天15:00~22:00</text>
			<view class="group_8"><text class="text_5">请您在有效时间内来取货，超时将订单失效，且无法退款哦，具体请联系商家</text></view>
		</view>
		<view class="p-division"></view>
		<view class="p-shop flex-col">
			<view class="flex-row justify-between items-start">
				<view class="flex-row">
					<image src="/static/temp/pro.png" class="image_12" mode="aspectFill" />
					<view class="flex-col items-start group_15">
						<text class="text_7 clamp">幸福西饼万达店</text>
						<text class="text_8 clamp2">河东区万达广场1F东门入口</text>
					</view>
				</view>
				<view class="flex-row group_16">
					<view class="flex-col items-center image-wrapper"><image src="/static/mangd-loc.png" class="image_13" mode="aspectFill" /></view>
					<view class="section_5"><!--*--></view>
					<view class="flex-col items-center image-wrapper view_3"><image src="/static/mang-phone.png" class="image_14" mode="aspectFill" /></view>
				</view>
			</view>
			<view class="group_17">
				<text class="text_9">距离您</text>
				<text class="text_10">864m</text>
			</view>
		</view>
		<view class="p-pro ">
			<pro />
			<view class="p-border"></view>
		</view>
		<view class="p-price">
			<view class="price-wrap align-center justify-between">
				 <text class="text_16">商品总价</text>
				  <text class="text_17">￥80.40</text>	
			</view>
		</view>
		<view class="p-total align-center justify-end">
			共1件商品，合计￥80.40
		</view>
		<view class="p-division"></view>
		<view class="p-info flex-col">
			  <text class="text_20">订单信息</text>
			  <view class="flex-row group view_8">
			    <text class="text_21">下单时间</text>
			    <text class="text_22">07/25 14:35</text>
			  </view>
			  
			  <view class="flex-row group view_8">
			    <text class="text_21">取货码</text>
			    <text class="text_22">3154</text>
			  </view>
			  <view class="flex-row group view_8">
			    <text class="text_21">订单编号</text>
			    <text class="text_22">0021215481102131202</text>
			  </view>
			  <view class="flex-row group view_8">
			    <text class="text_21">备注信息</text>
			    <text class="text_22">无</text>
			  </view>
		</view>
		<!-- 进行中 -->
		<safe-area height="128rpx">
			<template v-slot:btn>
				<view class="btn-wrap align-center justify-end">
					<view class="btn">
						申请退款
					</view>
					<view class="btn full">
						确认收货
					</view>
				</view>
			</template>
		</safe-area>
	</view>
</template>

<script>
import pro from './components/pro.vue'
export default {
	components:{
		pro
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.p-header {
	padding: 94rpx 0 51rpx;
	.image_4 {
		width: 86rpx;
		height: 95rpx;
	}
	.text_2 {
		margin-top: 23rpx;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFang;
	}
	.text-wrapper {
		margin-top: 23rpx;
		padding: 23rpx 20rpx 22rpx;
		background-color: #92b99c;
		border-radius: 10rpx;
		min-width: 180rpx;
	}
	.text_3 {
		color: #ffffff;
		font-size: 48rpx;
		font-family: PingFang;
	}
	.tips{
		margin-top: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 37rpx;
		text-align: center;
		height: 82rpx;
	}
}
.p-division {
	background-color: #0000000a;
	height: 16rpx;
}
.p-time {
	padding: 29rpx 41rpx 21.5rpx 42rpx;
	.text_4 {
		align-self: flex-start;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
	}
	.group_8 {
		margin-top: 12.5rpx;
		line-height: 37rpx;
	}
	.text_5 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 37rpx;
	}
}
.p-shop {
	padding: 40rpx 30rpx 41rpx;
	border-bottom: 2rpx solid #eee;
	.image_12 {
		margin-top: 5rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 68rpx;
	}
	.group_15 {
		margin-left: 16rpx;
	}
	.text_7 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 420rpx;
	}
	.text_8 {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		max-width: 420rpx;
		line-height: 36rpx;
	}
	.group_16 {
		margin-right: 20rpx;
		margin-top: 37rpx;
	}
	.image-wrapper {
		align-self: center;
		width: 28rpx;
	}
	.image_13 {
		width: 28rpx;
		height: 33rpx;
	}
	.section_5 {
		margin-left: 41rpx;
		background-color: #0000001a;
		width: 1rpx;
		height: 65rpx;
	}
	.view_3 {
		margin-left: 40rpx;
	}
	.image_14 {
		width: 28rpx;
		height: 28rpx;
	}
	.group_17 {
		margin-left: 3rpx;
		align-self: flex-start;
		line-height: 23rpx;
		margin-top: 10rpx;
	}
	.text_9 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_10 {
		color: #92b99c;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
}
.p-border{
	margin-top: 40rpx;
	border-bottom: 2rpx solid #eee;
}
.p-price {
  padding: 0 30rpx;
  .price-wrap{
	  height: 109rpx;
	  border-bottom: solid 2rpx #0000000a;
  }
	.text_16 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	}
	.text_17 {
	  margin: 3rpx 0;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	}  
}
.p-total{
	height: 100rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	padding: 0 30rpx;
}
.p-info{
	padding: 40rpx 42rpx 47rpx;
	.text_20 {
	  align-self: flex-start;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	}
	.group {
	  padding: 0 29rpx;
	}
	.view_8 {
	  margin-top: 34rpx;
	}
	.text_21 {
	  color: #999999;
	  font-size: 28rpx;
	  font-family: PingFang;
	  width: 187rpx;
	  flex-shrink: 0;
	   line-height: 36rpx;
	}
	.text_22 {
	  color: #999999;
	  font-size: 28rpx;
	  line-height: 36rpx;
	  font-family: PingFang;
	}
}
.btn-wrap{
	height: 128rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0,0,0,0.1);
	padding: 0 20rpx;
	.btn{
		width: 228rpx;
		height: 76rpx;
		border: 2rpx solid $base-color;
		border-radius: 38rpx;
		text-align: center;
		line-height: 72rpx;
		
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: $base-color;
		margin-left: 12rpx;
		
		
		&.full{
			color:#fff;
			border: none;
			background: $base-color;
		}
	}
	
}
</style>