<template>
	<view class="">
		<view class="">
			<u-navbar title="卖家信息详情" @rightClick="rightClick" :autoBack="true">
			</u-navbar>
		</view>
		<!-- 顶部轮播图 -->
		<view class="swiper">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="true"
				indicatorStyle="right: 20px" height="375" radius="0rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 页面内容 -->
		<view class="main">
			<view class="content">
				<view class="name">玉米</view>
				<view class="numCard flexA">
					<view class="yieldCard flexC">
						<view class="yieldCardtitle">预计作物产量</view>
						<view class="yieldCardnum">100公斤/亩</view>
					</view>
					<view class="yieldCardB flexC">
						<view class="yieldCardtitle">种植面积</view>
						<view class="yieldCardnum">100亩</view>
					</view>
				</view>
				<view class="flexJ">
					<view class="flexA">
						<view class="ftitle">秸秆是否出售：</view>
						<view class="btitle">是</view>
					</view>
					<view class="flexA" style="margin-right: 32rpx;">
						<view class="ftitle">秸秆状态：</view>
						<view class="btitle">已打包</view>
					</view>
				</view>
				<view class="flexA time">
					<view class="ftitle">收获时间：</view>
					<view class="btitle">2022-09-21</view>
				</view>
				<view class="flexA">
					<view class="fimg">
						<img src="/static/ic_10@2x.png" alt="">
					</view>
					<view class="ftitle">手机：</view>
					<view class="btitle">156****0180</view>
				</view>
				<view class="flexA address">
					<view class="fimg">
						<img src="/static/ic_12@2x.png" alt="">
					</view>
					<view class="ftitle">地址：</view>
					<view class="btitle">天津市西青区花苑鑫茂科技园C1座</view>
				</view>
			</view>
		</view>
			<!-- 按钮  1审核中 2 审核通过 3申请查看手机号 4申请未通过 -->
		<view class="but flexC" @click="changeMask" v-if="status==3">
			<view class="buttitle">
				申请查看卖家手机号
			</view>
		</view>
		<view class="but flexC" v-if="status==1">
			<view class="butImg">
				<img src="/static/312312@2x.png" alt="">
			</view>
			<view class="buttitle">
				审核中
			</view>
		</view>
		<view class="but flexC" v-if="status==2">
			<view class="butImg">
				<img src="/static/312312@2x.png" alt="">
			</view>
			<view class="buttitle">
				审核通过
			</view>
		</view>
		<view class="flexA Submit" v-if="status==4">
			<view class="suBut flexC">
				重新提交
			</view>
			<view class="suButt flexC">
				<view class="suButtimg">
					<img src="/static/ic-close@2x.png" alt="">
				</view>
				<view class="">
					审核未通过
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="Mask" v-if="isMask==true">
			<view class="card">
				<view class="cardName">申请查看卖家手机号</view>
				<view class="flexJ cardItem">
					<view class="cardtitle">您的姓名</view>
					<view class="inp">
						<input type="text" placeholder="请输入2-6位汉字" maxlength="6">
					</view>
				</view>
				<view class="flexJ cardItem">
					<view class="cardtitle">您的年龄</view>
					<view class="inp">
						<input type="number" placeholder="请输入您的年龄">
					</view>
				</view>
				<view class="flexJ cardItem">
					<view class="cardtitle">身份证号</view>
					<view class="inp">
						<input type="number" placeholder="请输入您的18位身份证号码" maxlength="18">
					</view>
				</view>
				<view class="agreement flexA">
					<view class="agreementImgt" v-if="agShow==true" @click="changeAgShow">
						<img src="/static/ic-error@2x.png" alt="">
					</view>
					<view class="agreementImg" v-else @click="changeAgShow">
						<img src="/static/ic-error@2x.png" alt="">
					</view>
					<view class="agreementTitle">
						同意<text @click="toDetail">《用户协议》</text>和<text @click="toDetailB">《隐私协议》</text>
					</view>
				</view>
				<view class="butSubmit flexC" @click="changeMask">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				status:1,
				isMask:false,  // 遮罩判断
				agShow:false,  //是否同意协议
				// current:1,
				currentNum:'',  //轮播图
				list6: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				]
			}
		},
		onLoad(e) {
			this.status = e.status
			console.log(this.status);
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:`/pages/mine/detail?type=${this.type}`
				})
			},
			toDetailB() {
				uni.navigateTo({
					url:'/pages/mine/detail'
				})
			},
			// 返回上一页
			rightClick() {
				uni.navigateBack({})
			},
			// 控制遮罩
			changeMask () {
				this.isMask = !this.isMask
			},
			// 控制同意协议显示
			changeAgShow(){
				this.agShow = !this.agShow
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	// 修改顶部nav背景颜色
	.u-navbar__content.data-v-75dad532 {
		background-color:transparent!important;
	}
	.u-status-bar {
		background-color:transparent!important;
	}
	.u-navbar__content__title {
		color: #fff !important;
	}
	.u-icon__icon {
		color: #fff !important;
	}
	// 轮播图
	 .indicator-num {
	        padding: 2px 0;
	        background-color: rgba(0, 0, 0, 0.35);
	        border-radius: 100px;
	        width: 35px;
	        @include flex;
	        justify-content: center;
	
	        &__text {
	             color: #FFFFFF;
	             font-size: 12px;
	         }
	    }
	.swiper {
		// z-index: 999;
	}
	.main {
		width: 686rpx;
		margin: 32rpx auto;
	}
	.name {
		 color: rgba(0,0,0,0.9);
		 font-size: 44rpx;
		 font-weight: 700;
	}
	.numCard {
		margin: 32rpx 0rpx;
	}
	.yieldCard {
		width: 336rpx;
		// height: 192rpx;
		padding: 56rpx 0;
		border-radius: 16rpx;
		opacity: 1;
		background: rgba(247,255,255,1);
		margin-right: 14rpx;
		flex-direction: column;
	}
	.yieldCardB {
		width: 336rpx;
		height: 192rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: rgba(254,248,245,1);
		flex-direction: column;
	}
	.yieldCardtitle {
		 color: rgba(0,0,0,0.4);
		 font-size: 24rpx;
	}
	.yieldCardnum {
		 color: rgba(230,61,39,1);
		 font-size: 32rpx;
		 font-weight: 700;
		 margin-top: 4rpx;
	}
	.ftitle {
		 color: rgba(0,0,0,0.4);
		 font-size: 28rpx;
	}
	.btitle {
		 color: rgba(0,0,0,0.9);
		 font-size: 28rpx;
	}
	.time {
		margin: 32rpx 0rpx;
		
	}
	.fimg>img{
		width: 21.35rpx;
		height: 21.35rpx;
		opacity: 1;
	}
	.address {
		margin-top: 32rpx;
	}
	.but {
		position: fixed;
		bottom: 68rpx;
		left: 32rpx;
		width: 686rpx;
		height: 88rpx;
		border-radius: 28rpx;
		opacity: 1;
		background: linear-gradient(90deg, rgba(25,204,205,1) 0%, rgba(99,217,218,1) 100%);
	}
	.butImg>img{
		width: 22.67rpx;
		height: 26.67rpx;
		opacity: 1;
	}
	.buttitle {
		 color: rgba(255,255,255,1);
		 font-size: 32rpx;
		 font-weight: 700;
		 margin-left: 4rpx;
	}
	.Mask {
		position: fixed;
		top: 0;
		left:0;
		width: 750rpx;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		z-index: 10;
	}
	.card {
		margin: 432rpx auto;
		width: 622rpx;
		height: 544rpx;
		border-radius: 32rpx;
		opacity: 1;
		background: rgba(255,255,255,1);
		// padding: 48rpx 0 36rpx;
	}
	.cardName {
		padding-top: 48rpx;
		margin: 0rpx auto;
		width: 294rpx;
		// height: 44rpx;
		color: rgba(0,0,0,0.9);
		font-size: 32rpx;
		font-weight: 700;
	}.cardItem {
		margin: 12rpx 48rpx;
		padding-top: 24rpx;
	}
	.cardtitle {
		 color: rgba(0,0,0,0.9);
		 font-size: 28rpx;
	}
	.inp>input{
		text-align: right;
	}
	.agreement {
		padding: 38rpx 48rpx;
	}
	.agreementImg {
		width: 32rpx;
		height: 32rpx;
	}
	.agreementImgt {
		width: 32rpx;
		height: 32rpx;
	}
	.agreementImgt>img {
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
		background-color: #62CDCE;
		border-radius: 50%;
	}
	.agreementImg>img {
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
	}
	.agreementTitle {
		 color: rgba(0,0,0,0.6);
		 font-size: 24rpx;
		 margin-left: 12rpx;
	}
	.agreementTitle>text {
		color: rgba(33,83,213,1);
	}
	.butSubmit {
		width: 514rpx;
		height: 76rpx;
		border-radius: 90rpx;
		opacity: 1;
		background: rgba(98,205,206,1);
		margin: 0rpx auto;
		 color: rgba(255,255,255,1);
		 font-size: 28rpx;
		 font-weight: 700;
	}
	.Submit {
		position: fixed;
		bottom: 68rpx;
		left: 32rpx;
		width: 686rpx;
		height: 88rpx;
	}
	.suBut {
		width: 328rpx;
		height: 88rpx;
		border-radius: 28rpx;
		opacity: 1;
		background: linear-gradient(90deg, rgba(25,204,205,1) 0%, rgba(99,217,218,1) 100%);
		 color: rgba(255,255,255,1);
		 font-size: 32rpx;
		 font-weight: 700;
	}
	.suButt {
		width: 328rpx;
		height: 88rpx;
		border-radius: 28rpx;
		opacity: 1;
		border: 2rpx solid #62CDCE;
		color: rgba(98,205,206,1);
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 30rpx;
	}
	.suButtimg{
		height: 32rpx;
	}
	.suButtimg>img {
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
		background: rgba(255,255,255,0.01);
	}
</style>