<!--
 * @Author: ch
 * @Date: 2022-05-14 14:00:14
 * @LastEditors: ch
 * @LastEditTime: 2022-05-14 15:57:30
 * @Description: file content
-->
<template>
	<view class="order" @click="handleDetail">
		<view class="order--status">{{orderInfo.orderStatusDesc}}</view>
		<view class="order--con">
			<image class="order--con-img" :src="orderInfo.productImageUrl" mode="aspectFit"/>
			<view class="order--con-right">
				<view class="order--con-title">{{orderInfo.productName}}</view>
				<UiMoney class="order--con-price" :money="orderInfo.payAmount" float prefix suffix></UiMoney>
			</view>
		</view>
		<view class="order--footer">订单编号{{orderInfo.orderNo}}</view>
	</view>
</template>
<script>
import UiButton from '../../../../../components/UiButton.vue'
import UiMoney from '../../../../../components/UiMoney.vue'
export default {
	components: { UiMoney, UiButton },
	props : {
		orderInfo : {
			type : Object,
			default : ()=>({})
		},
		// 显示位置 footer 底部 msg消息框
		position : {
			type : String,
			default : 'footer'
		}
	},
	methods : {
		handleDetail(){
			this.$Router.push(`/orderDetail?id=${this.orderInfo.orderId}`)
		}
	}
}
</script>
<style lang="scss" scoped>
.order { 
	background: #fff;
	border-radius: 16rpx;
	&--status{
		font-size: 28rpx;
		padding: 30rpx 	0 20rpx 30rpx;
	}
	
	&--con{
		display: flex;
		padding: 0 30rpx;
		&-img{
			width: 140rpx;
			height: 140rpx;
		}
		&-right{
			width: 300rpx;
			margin-left: 30rpx;
		}
		&-title{
			font-size: 28rpx;
			line-height: 36rpx;
			@include ellipses(2);
		}
		&-price{
			margin-top: 36rpx;
		}
		
	}
	&--footer{
		color: #999;
		border-top: 1px solid #eee;
		padding: 20rpx 30rpx;
		margin-top: 26rpx;
	}
}
/deep/{
	.order--con-price{
		text{
			color: #FF512B;
			font-size: 24rpx;
		}
		.ui-money--price{
			font-size: 32rpx;
		}
		
	}
}
</style>