<template>
	<view class="">
		<view class="po-ra" v-if="orderType == 2">
			<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="settle-con" v-if="orderType == 1">
			<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>
</template>

<script>
	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"],
				},
			}
		},
		props:{ //1单个商品，2多个商品
			orderType:{
				type:Number,
				default:2,
			}
		},
		
	}
</script>

<style lang="scss" scoped>
.po-ra{
	 position: relative;
 }
 .settle-goods{
 	 width: auto; 
 }
 .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>