<template>
	<view class="content">
		<u-empty :show="pageList && pageList.length == 0" mode="list"
			icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		<view class="orderModel" v-for="(item, index) in pageList" :key="index">
			<view class="orderTop">
				<view class="orderTime">
					{{item.created_at}}
				</view>
				<view class="orderStatus">
					{{item.status_txt}}
				</view>
			</view>
			<view class="orderBaseInfo" v-for="(jtem,jndex) in item.og" :key="jndex">
				<view class="orderImg">
					<image class="init_image" :src="jtem.goods_img" mode=""></image>
				</view>
				<view class="orderInfo">
					<view class="orderName">
						{{jtem.goods_name}}
					</view>
					<view class="orderNorms">
						<span>{{jtem.goods_attr}}</span>
						<span>x{{jtem.goods_number}}</span>
					</view>
					<view class="orderPrice">
						<span>¥</span>{{jtem.goods_price}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList: [],
				pageNum: 1,
				totalPage: 0,
				current: 1,
				total: 0
			}
		},
		onLoad(option) {
			this.getOrderList(option.id)
		},
		onShow() {},
		methods: {
			//获取我的订单
			getOrderList(id) {
				console.log(id)
				this.$request('/my-member-orderlist', 'POST', {
					user_id: id
				}).then(res => {
					console.log(res.data)
					this.pageList = res.data;
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		overflow-y: scroll;
		background: #F7F8FA;
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		margin-bottom: 0rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderTop {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ECECEC;
		margin-bottom: 20rpx;

		.orderTime {
			width: 50%;
			font-size: 24rpx;
			color: #666666;
		}

		.orderStatus {
			width: 50%;
			font-size: 24rpx;
			color: #333333;
			text-align: right;
		}
	}

	.orderBtnList {
		width: 100%;
		height: 60rpx;
		padding-top: 20rpx;
		line-height: 60rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #E9799F;
		background-color: #E9799F;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		line-height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderBaseInfo {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.orderInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}
</style>