<template>
	<view class="">
		  <u-sticky bgColor="#fff">
			<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 style=" color: rgba(0,0,0,0.4);font-size: 24rpx;">
							已退回
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="botBtn flexA">
					<view class="flexC" @click="showBuyer=true">买家信息</view>
					<!-- <view class="flexC">上传转赠证明</view>
					<view class="flexC">已发货</view> 
					<view class="flexC yellow" @click="show=true">查看交易证明</view>-->
					<view class="flexC yellow">重新上传证明</view>
				</view>
			</view>
		</view>
			<u-popup :show="show" mode="center"  :round="15"  @close="close" @open="open">
		        <view class="centerBox">
					<view class="popTitle">
						转赠证明
					</view>
					<image class="popImage" src="/static/logo.png" mode=""></image>
					<view class="popBtn flexC">
						<view class="btn flexC" @click="show=false">确定</view>
					</view>
		        </view>
			</u-popup>
			
			<u-popup bgColor="transparent"  :show="showBuyer" mode="center"  :round="15"  @close="close" @open="open">
			    <view class="buyerInfo">
					<view class="buyerTitle">
						买家信息
					</view>
					<view class="list flexA">
						<view class="left"><text style="color: #FC4338;">*</text>接收账户：</view>
						<view class="right flexA">
							<view class="fw700">123456ML</view>
							<view style="margin-left: 16rpx;color:  rgba(0,0,0,0.4);">复制</view>
						</view>
					</view>
					<view class="list flexA">
						<view class="left"><text style="color: #FC4338;">*</text>微信号：</view>
						<view class="right flexA">
							<view class="fw700">123456ML</view>
							<view style="margin-left: 16rpx;color:  rgba(0,0,0,0.4);">复制</view>
						</view>
					</view>
					<view class="list flexA">
						<view class="left">联系人：</view>
						<view class="right flexA">
							<view class="fw700">奥特曼</view>
						</view>
					</view>
					<view class="list flexA">
						<view class="left">联系电话：</view>
						<view class="right flexA">
							<view class="fw700">187190458966</view>
							<view style="margin-left: 16rpx;">
								<image src="/static/phone.png" mode=""></image>
							</view>
						</view>
					</view>
			    </view>
				<view class="close" @click="showBuyer=false">
					<image class="wh100" src="/static/close.png" mode=""></image>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [{
					name: '全部',
				}, {
					name: '待接收',
				}, {
					name: '待确定'
				}, {
					name: '已完成'
				}],
				show:false,
				showBuyer:true
			}
		},
	}
</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 {
			text-align: center;
			 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;
			padding: 12rpx 36rpx;
			// 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%);
			}
		}
	}
	.buyerInfo {
		padding: 32rpx 32rpx;
		box-sizing: border-box;
		width: 622rpx;
		height: 392rpx;
		border-radius: 24rpx;
		background: rgba(255,255,255,1);
		.buyerTitle {
			text-align: center;
			color: rgba(0,0,0,0.9);
			 font-size: 32rpx;
			 font-weight: 700;
			 margin-bottom: 24rpx;
		}
		.list {
			margin-bottom: 24rpx;
			 color: rgba(0,0,0,0.9);
			 font-size: 28rpx;
			justify-content: space-between;
			.right {
				image {
					margin-top: 5rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.close {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}
</style>