<template>
	<view class="wrap">
		<view class="content">
			<view class="userInfo">
				<view class="info">
					<image src="../../static/img/detail/d10.png" mode="aspectFill"></image>
					<view class="infoText">
						<text class="userName">{{userName}}</text>
						<text class="nickName">用户名：骆驼不死的祥子</text>
					</view>
				</view>
				<view class="service">
					<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="myOrder">
				<view class="orderHeader">
					<text>全部订单</text>
					<view class="btn" @click="toMyOrder">
						全部
						<image src="../../static/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="orderBody">
					<view class="item,waitPay">
						<image src="../../static/waitPay.png" mode="aspectFill"></image>
						<text>待付款</text>
					</view>
					<view class="item,waitDeliver">
						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
						<text>待发货</text>
					</view>
					<view class="item,waitReceive">
						<image src="../../static/waitReceive.png" mode="aspectFill"></image>
						<text>待收货</text>
					</view>
					<view class="item,service">
						<image src="../../static/service.png" mode="aspectFill"></image>
						<text>退换/售后</text>
					</view>
				</view>
			</view>
			<view class="recommend">
				<view class="title">
					<view class="line"></view>
					<view class="text">精选推荐</view>
					<view class="line"></view>
				</view>
				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="product-list">
						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
							<Card :goods = "goods"></Card>
						</view>
					</view>
					<view class="loading-text">{{loadingText}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Card from "../../components/Card/Card.vue"
	export default {
		components: {
			'Card':Card
			},
		data() {
			return {
				
				//商品数据
				goodsList:[
					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
				],
				headerphoto:'',
				userName:'Adam'
			}
		},
		onLoad() {

		},
		methods: {
			toMyOrder(){
				uni.navigateTo({
					url: '../myOrder/myOrder',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		font-size: 24rpx;
		background-color: #f2f2f2;
		height: 100vh;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F2F2F2;
	}
	.userInfo{
		background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
		width: 100%;
		height: 240rpx;
		color: #FFFFFF;
		padding: 60rpx 82rpx 80rpx 44rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		.info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			image{
				border-radius: 50rpx;
				height: 100rpx ;
				width: 100rpx;
				margin-right: 40rpx;
			}
			.infoText{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-scetart;
				.userName{
					font-size: 18px;
					color: #FFFFFF;
					margin-bottom: 8rpx;
				}
				.nickName{
					font-size: 12px;
					color: #FFFFFF;
				}
			}
		}
		.service{
			image{
				height: 36rpx;
				width: 36rpx;
			}
		}
	}
	.myOrder{
		width: 100%;
		height: 296rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.orderHeader{
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E9E9E9;;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			.btn{
				font-size: 12px;
				color: #999999;
				image{
					margin-left: 20rpx;
					height: 16rpx;
					width: 8rpx;
				}
			}
		}
		.orderBody{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 46rpx;
					height: 46rpx;
				}
				text{
					margin-top: 24rpx;
					font-size: 12px;
					color: #333333;
				}
			}
		}
	}
	.recommend{
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		.title{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			.line{
				width: 264rpx;
				height: 1rpx;
				border-bottom: 1px solid #EAEAEA;
			}
			.text{
				font-family: PingFangSC-Medium;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				text-align: justify;
				line-height: 24px;
			}
		}
		.goods-list{
			.loading-text{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				color: #979797;
				font-size: 12px;
			}
			.product-list{
				width: 92%;
				padding: 0 4% 3vw 4%; 
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.product{
					width: 48%;
					margin: 0 0 20rpx 0;
					background: #FFFFFF;
					border: 1px solid #F2F2F2;
				}
			}
		}
	}

</style>
