<!--
 * @Author: ch
 * @Date: 2022-03-22 10:58:24
 * @LastEditors: ch
 * @LastEditTime: 2022-03-26 14:27:34
 * @Description: file content
-->
<template>
	<view>
		<view class="tabs">
			<text class="tabs__active">全部</text>
			<text>待付款</text>
			<text>待发货</text>
			<text>待收货</text>
			<text>待评价</text>
		</view>
		<BsEmpty tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
			<ui-button slot="btn" type="line">去逛逛</ui-button>
		</BsEmpty>

		<view class="orders" v-for="item in 10" :key="item">
			<view class="orders--title">
				<text class="orders--name">官方自营</text>
				<text class="orders--status" :class="item % 2 == 0 && 'orders--status__warn'">待收货</text>
			</view>
			<view class="orders--item" v-for="i in 2" :key="i">
				<image class="orders--item-image" mode="widthFix" src="http://static.yoshop.xany6.com/2018071717370507f183424.jpg" />
				<view >
					<view class="orders--item-con">
						<text class="orders--item-title">商品标题商品标题商品标题商品标题商品标题</text>
						<text class="orders--item-pirce">￥1922.00</text>
					</view>
					<view class="orders--item-desc">
						<view>
							<text class="orders--item-desc-item">试听课</text>
							<text class="orders--item-desc-item">试课</text>
							<text class="orders--item-desc-item">试听</text>
							<text class="orders--item-desc-item">听课</text>
						</view>
						<text class="orders--item-num">x1</text>
					</view>
				</view>
			</view>
			<view class="orders--total">
				<text>合计</text>
				<text class="orders--total__amount">￥1000.00</text>
				<text class="orders--total__pay">应付</text>
				<text class="orders--total__amount orders--total__pay">￥1000.00</text>
			</view>
			<view class="orders--footer">
				<button class="orders--footer-btn">查看物流</button>
				<button class="orders--footer-btn orders--footer-btn__red">确认收货</button>
			</view>
		</view>
	</view>
</template>
<script>
import BsEmpty from '../../../components/BsEmpty.vue'
import UiButton from '../../../components/UiButton.vue'
export default {
	components: { BsEmpty, UiButton },
	
}
</script>
<style lang="scss" scoped>
page{
	background: #f8f8f8;
	overflow: hidden;
}
.tabs{
	height: 100rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	font-size: 28rpx;
	color: #666;
	&__active{
		color: #FF875B;
		position: relative;
		&::after{
			display: block;
			content: '';
			height: 4rpx;
			background: #FF875B;
			border-radius: 4rpx;
			position: absolute;
			bottom: -20rpx;
			left: 45%;
			width: 50%;
			transform: translateX(-50%);
		}
	}
}

.orders{
	background: #fff;
	padding: 30rpx;
	margin: 20rpx 0;
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&--name{
		font-size: 32rpx;
		color: #333;
	}
	&--status{
		font-size: 24rpx;
		color: #999;
		&__warn{
			color: #FF875B;
		}
	}
	&--item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 0;
	}

	&--item-image{
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}
	&--item-con{
		width: 510rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		line-height: 39rpx;
	}
	&--item-title{
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	&--item-pirce{
		font-size: 22rpx;
		margin-left: 60rpx;
	}
	&--item-desc{
		width: 510rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
		line-height: 39rpx;
		display: flex;
		justify-content: space-between;
		&-item{
			background: #F8F8F8;
			padding: 0 15rpx;
			height: 32rpx;
			line-height: 32rpx;
			display: inline-block;
			margin: 0 10px 10rpx 0;
		}
	}
	&--item-num{
		font-size: 28rpx;
		margin-left: 60rpx;
	}

	&--total{
		font-size: 24rpx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: end;
		margin-top: 30rpx;
		&__amount{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		&__pay{
			color: #333;
		}
	}
	&--footer{
		display: flex;
		justify-content: end;
		align-items: center;
		margin-top: 30rpx;
		&-btn{
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			margin: 0 0 0 30rpx;
			border: 1px solid #333;
			color: #333;
			background: none;
			font-size: 26rpx;
			&__red{
				background: linear-gradient(270deg, #FF7F39 0%, #FFA35B 100%);
				color: #fff;
				border: 0;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		
	}
}

	
// 空数据按钮

</style>