<template>
	<view class="">
		  <u-sticky bgColor="#fff">
			  <!-- :itemStyle="{background:'#fff',height:'44px'}" -->
			<u-tabs :list="list2"  lineColor="#FED000" :scrollable="false" @click="click"></u-tabs>
		  </u-sticky>
		<view class="group">
			<view class="item" v-for="(item,idx) in 20" :key="idx">
				<view class="top flexA">
					<view class="left flexA"> 
						<image src="/static/order.png" mode=""></image>
						<view>订单号：</view>
						<view style="margin: 0 16rpx 0 8rpx">123456789</view>
						<view style="color:#2153D4;">复制</view>
					</view>
					<view class="right">
						待接收
					</view>
				</view>
				<view class="bot flexA">
					<view class="left flexA">
						<image src="/static/logo.png" mode=""></image>
						<view class="">
							<view class="title">比特币20个</view>
							<view class="time">2022-06-21 15：31</view>
							<view class="name">卖方：张小萌</view>
						</view>
					</view>
					<view class="right">
						<text style="font-size: 20rpx;">¥</text>30.88
					</view>
				</view>
				<view class="line"></view>
				<view class="botBtn flexA">
					<view class="flexC yellow">交易证明</view>
					<view class="flexC">已收货</view>
					<view class="flexC">未收货</view>
				</view>
			</view>
		</view>
			<u-popup :show="show" mode="center"  :round="15"  @close="show=false" >
		        <view class="centerBox">
					<view class="popTitle">
						转赠证明
					</view>
					<image class="popImage" src="/static/logo.png" mode=""></image>
					<view class="popBtn flexA">
						<view class="btn flexC" @click="show=false">未接收</view>
						<view class="btn flexC" @click="show=false">已接收</view>
					</view>
		        </view>
			</u-popup>
	</view>
</template>

<script>
	import { buyerOrderList } from '@/api/order.js'
	export default {
		data() {
			return {
				list2: [{
					name: '全部',
				}, {
					name: '待接收',
				}, {
					name: '待确定'
				}, {
					name: '已完成'
				}],
				show:true,
				page:1,
				num:10
			}
		},
		onLoad() {
			this.buyerOrderList()
		},
		methods: {
			async buyerOrderList(){
			  try {
			    const res = await buyerOrderList(this.page,this.num)
			    console.log('buyerOrderList', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('buyerOrderList', err)
			  }
			},
		},
	}
</script>

<style lang="less">
	page {
		background: #f6f6f6;
	}
	.u-tabs__wrapper__nav__item {
		background: #fff !important;
	}
	.u-tabs__wrapper__nav {
		background: #fff !important;
	}
	.group {
		padding: 16rpx 24rpx;
		.item {
			padding: 32rpx;
			margin-bottom: 24rpx;
			border-radius: 24rpx;
			opacity: 1;
			background: rgba(255,255,255,1);
		}
	}
	.u-sticky {
		top: 0 !important;
	}
	.top {
		justify-content: space-between;
		.left {
			 color: rgba(50,50,51,1);
			 font-size: 26rpx;
			image {
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.right {
			 color: rgba(0,0,0,0.6);
			 font-size: 26rpx;
		}
	}
	.bot {
		margin-top: 26rpx;
		justify-content: space-between;
		image {
			margin-right: 20rpx;
			width: 144rpx;
			height: 144rpx;
			border-radius: 16rpx;
		}
		.left {
			.title {
				 font-size: 28rpx;
				 font-weight: 700;
			}
			.time {
				 color: rgba(0,0,0,0.6);
				 font-size: 26rpx;
			}
			.name {
				 color: rgba(0,0,0,0.6);
				 font-size: 26rpx;
			}
		}
		.right {
			 font-size: 30rpx;
			 font-weight: 700;
		}
		
	}
	.line{
		margin: 32rpx 0 24rpx;
		width: 100%;
		background: #f6f6f6;
		height: 2rpx;
	}
	.botBtn {
		justify-content: flex-end;
		view {
			margin-right: 24rpx;
			 color: rgba(0,0,0,0.6);
			 font-size: 24rpx;
			width: 144rpx;
			height: 56rpx;
			border-radius: 12rpx;
			opacity: 1;
			border: 2rpx solid #f6f6f6;
			font-weight: 700;
		}
		.yellow {
			background: rgba(254,208,0,1);
			border-color: rgba(254,208,0,1);
			 color: rgba(0,0,0,0.9);
		}
	}
	.centerBox {
		padding: 48rpx 32rpx 24rpx;
		box-sizing: border-box;
		width: 622rpx;
		height: 962rpx;
		background: #fff;
		border-radius: 15rpx;
		.popTitle {
			text-align: center;
			 color: rgba(0,0,0,0.9);
			 font-size: 32rpx;
			 font-weight: 700;
		}
		.popImage {
			margin-top: 44rpx;
			width: 100%;
			height: 654rpx;
			border-radius: 16rpx;
		}
		.popBtn {
			margin-top: 72rpx;
			justify-content: space-evenly;
			.btn {
				width: 264rpx;
				height: 76rpx;
				border-radius: 84rpx;
				opacity: 1;
				background: rgba(245,245,245,1);
				 color: rgba(0,0,0,0.9);
				 font-size: 28rpx;
				 font-weight: 700;
			}
			.btn:nth-child(2){
				background: linear-gradient(134.8deg, rgba(255,232,100,1) 0%, rgba(255,216,0,1) 100%);
			}
		}
	}
</style>