high-mini/pages/classify/order/order.vue

<template>
	<view class="pd-main backcor9">
		<!-- 售后处理完成 -->
		<view class="po-ra pd-main backcolorfff marb10 border-8r"   @click="goOrderDetail">
			<view class="font18 marb10 fcor666 pd10">
				售后处理完成
			</view>
			<view class="po-ra">
				<scroll-view class="settle-goods" scroll-x="true"  >
					<view class="settle-con">
						<view class="settle-img" v-for="item in goodsData.images">
							<image class="st-img" :src="item" mode="aspectFill"></image>
						</view>
						
					</view>
					
				</scroll-view>
				<view class="fix-soon fcor666">
					<view class="fix-price">
						<text class="fontwig6 fcor333 marb5"> ¥215</text> 
						<text>共{{goodsData.images.length}}件
							<!-- <text class="icon-ymt to-right font14 fcor666"></text> -->
						</text>
					</view>
					
				</view>
			</view>
			
			
			<view class="oneMoreTime">
				<view class="oneMore btn">
					再来一单
				</view>
			</view>
		</view>
		
		
		<!-- 已取消 -->
		<view class="po-ra pd-main backcolorfff marb10 border-8r">
			<view class="font18 marb10 fcor666 pd10">
				已取消
			</view>
			<view class="settle-con">
				<view class="settle-img" >
					<image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image>
				</view>
				<view class="settle-msg">
					<view class="settle-title marb5">
						<text>云南高山荷兰豆160g</text>
						<text class="font14 fcor666">共一件</text>
					</view>
					<view class="settle-title">
						<text>¥2.99</text>
						<text class="font14 fcor666">×1</text>
					</view>
				</view>
				
			</view>
			<view class="oneMoreTime">
				<view class="deleOrder btn">
					删除订单
				</view>
				<view class="oneMore btn">
					再来一单
				</view>
			</view>
		</view>	
		
		<!-- 待支付 -->
		<view class="po-ra pd-main backcolorfff marb10 border-8r">
			<view class="font18 marb10 fcor666 pd10">
				待支付
			</view>
			<view class="font14">
				订单将于<text class="fcorred"> 16:04 </text>分钟后自动取消
			</view>
			<view class="settle-con">
				<view class="settle-img" >
					<image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image>
				</view>
				<view class="settle-msg">
					<view class="settle-title marb5">
						<text>云南高山荷兰豆160g</text>
						<text class="font14 fcor666">共一件</text>
					</view>
					<view class="settle-title">
						<text>¥2.99</text>
						<text class="font14 fcor666">×1</text>
					</view>
				</view>
				
			</view>
			<view class="oneMoreTime">
				
				<view class="nowPay btn">
					立即支付
				</view>
			</view>
		</view>	
		
		
		<!-- <detailPopup ref="detailPopup"></detailPopup> -->
	</view>
</template>

<script>
	// import detailPopup from '@/pages/settleAccounts/detail-popup/detail-popup.vue'
export default {
	data(){
		return{
			goodsData:{
				"images": ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"],
			},
		}
	},
	components:{
		// detailPopup
	},
	methods:{
		goOrderDetail(){
			uni.navigateTo({
				// url:"@/pages/classify/order/orderDetail"
			})
		}
	}
}
	
</script>

<style lang="scss" scoped>
.po-ra{
	 position: relative;
 }
 .settle-goods{
	 width: auto; 
 }
 .pd10{
	 padding: 0 10px;
 }
 .order-top-title{
	 height: 30px;
	 line-height: 30px;
 }
 
 // 再来一单
 .oneMoreTime {
	 text-align: right;
	
	.btn{
		margin: 10px 10px 10px 0;
		display: inline-block;
		width: 100px;
		height: 30px;
		line-height: 30px;
		 border-radius: 15px;
		 text-align: center;
	}
	
	// 再来一单
	 .oneMore {	 
		 color: #FA253D;	
		 border:1px solid #FA253D;
		 
	 }
	 
	 // 立即支付
	 .nowPay{
		color: #ffffff;
		background-color:#FA253D;
		
	 }
	 
	 // 删除订单
	 .deleOrder{
		 color: #666666;
		 border:1px solid #666666;
	 }
 }
 
 .settle-con{
 		
 		 display: flex;
 		 justify-content: flex-start;
 		 align-items: center;
 		
 		 .settle-img{
 			  font-size: 0;
 			 margin-left: 10px;
 			 .st-img{
 				 width: 82px;
 				 height: 82px;
 			 }
 		 }
 		 
		 .settle-msg{
			 flex: 1;
			 padding: 0 10px;
			 .settle-title{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
			 }
		 }
 		 
 		 
 }
 .fix-soon{
	 			 position: absolute;
	 			 right: 0;
				 top:0;
	 			width: 82px ;
	 			height: 82px;
	 			// line-height: 82px;
	 			opacity: 0.8;
	 			background-color: #ffffff;
	 			text-align: center;
	 }

	 // 
.fix-price{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	&>text{
		width: 100%;
	}
}
</style>