<template>
	<!-- 购买弹窗 -->
	<view class="">
		<!-- 底部按钮弹出成 -->
		<u-popup :show="show" mode="bottom" :closeable="true" round="18" @close="close" @open="open">
			<view class="popBox" :class="isIos?'':'btom'">
				<!-- 价格 -->
				<view class="topBox flexA">
					<image :src="formList.spec_image ? formList.spec_image : shopDetailes.image" mode=""></image>
					<view class="price">
						<text>￥</text>{{formList.goods_price ? formList.goods_price : shopDetailes.spec[0].goods_price}}
					</view>
				</view>
				<!-- 选择收货 -->
				<view class="adressBox flexJ" v-if="shopAddress==null" @click="checkAderess">
					<view class="left flexA">
						<image src="/static/adressIc.png" mode=""></image>
						请选择收货地址
					</view>
					<image src="/static/carIc/rights.png" mode=""></image>
				</view>
				<!-- 收货位置 -->
				<view class="adressInfo flexJ" v-else @click="checkAderess">
					<view class="infoBox">
						<view class="adresInfo flexA">
							<image src="/static/carIc/postion.png" mode=""></image>
							{{shopAddress.zone}}{{shopAddress.address}}
						</view>
						<view class="phone">
							{{shopAddress.name}}<text>{{shopAddress.mobile.slice(0,3) + '****' + shopAddress.mobile.slice(-4) }}</text>
						</view>
					</view>
					<image src="/static/carIc/rights.png" mode=""></image>
				</view>
				<!-- 商品规格 -->
				<view v-for="(item,index) in speList" :key="item.group_id" style="margin-bottom: 44rpx;">
					<view class="specificationsTile">
						{{item.group_name}}
					</view>
					<view class="colorBox">
						<view class="item" v-for="(it,idx) in item.spec_items" :key="it.item_id"
							:class="idx == indexList[index].curIndex?'checked':''" @click="checkSpec(index,it,idx)">
							{{it.spec_value}}
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="line"></view>
				<!-- 数量加减 -->
				<view class="numBox flexJ">
					<view class="rightTitle flexA">
						购买数量 <view v-if="formList.stock_num" class="surplus">剩余：{{formList.stock_num}}件</view>
					</view>
					<view class="and flexA">
						<image src="/static/reduce.png" mode="" @click="numBtn(0)"></image>
						<view class="num flexC">{{num}}</view>
						<image src="/static/add.png" mode="" @click="numBtn(1)"></image>
					</view>
				</view>
				<!-- 加入购物车按钮 -->
				<view v-if="btnType==1" class="popBtn flexC" @click="addBuy" :class="checkAll?'checkA':''">
					加入购物车
				</view>
				<!-- 立即购买按钮 -->
				<view v-else class="popBtn1 flexC" @click="payBtn" :class="formList.stock_num==0?'notHave':''">
					{{formList.stock_num==0?'缺货':'立即支付'}}
					<view v-if="payMoney>0" class="payMoney flexA"><text>￥</text>{{payMoney}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	
</script>

<style lang="scss">
	.popBox {
		padding: 30rpx 24rpx 0;
	
		.topBox {
			margin-left: 8rpx;
	
			image {
				border-radius: 12rpx;
				margin-right: 24rpx;
				width: 134rpx;
				height: 138rpx;
			}
	
			.price {
				font-size: 36rpx;
				font-weight: 700;
				color: #E9422C;
	
				text {
					font-size: 28rpx;
					color: #E9422C;
				}
			}
		}
	
		.adressBox {
			padding: 42rpx 24rpx;
			box-sizing: border-box;
			width: 702rpx;
			height: 120rpx;
			border-radius: 16rpx;
			background: #f5f5f5ff;
			margin: 24rpx 0;
	
			.left {
				color: #000000e6;
				font-size: 28rpx;
				font-weight: 700;
	
				image {
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
	
			image {
				width: 16rpx;
				height: 32rpx;
			}
		}
	
		.adressInfo {
			border-radius: 16rpx;
			background: #f5f5f5ff;
			padding: 20rpx 24rpx 22rpx;
			box-sizing: border-box;
			margin: 24rpx 0;
	
			.infoBox {
				.adresInfo {
					margin-bottom: 9rpx;
					color: #323233ff;
					font-size: 28rpx;
					font-weight: 700;
	
					image {
						margin-right: 8rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
	
				.phone {
					color: #646566ff;
					font-size: 24rpx;
					margin-left: 40rpx;
	
					text {
						margin-left: 16rpx;
					}
				}
			}
	
			image {
				width: 16rpx;
				height: 32rpx;
			}
		}
	
		.specificationsTile {
			color: #00000099;
			font-size: 28rpx;
			margin-bottom: 16rpx;
			border: 1rpx solid transparent;
		}
	
		.colorBox {
			display: flex;
			flex-wrap: wrap;
	
			.item {
				margin-right: 16rpx;
				padding: 8rpx 32rpx;
				border-radius: 46rpx;
				color: #000;
				font-size: 24rpx;
				background: #1918330f;
				border: 1rpx solid transparent;
			}
	
			.checked {
				color: #f43736ff;
				font-size: 24rpx;
				border-radius: 46rpx;
				border: 1rpx solid #f43736ff;
				background: #fff1efff;
			}
		}
	
		.line {
			margin: 44rpx auto 34rpx;
			width: 702rpx;
			height: 2rpx;
			background: #F5F5F5;
		}
	
		.numBox {
			margin-bottom: 54rpx;
	
			.rightTitle {
				color: #00000099;
				font-size: 28rpx;
	
				.surplus {
					margin-left: 12rpx;
					color: #ec3323ff;
					font-size: 24rpx;
				}
			}
	
			.and {
				image {
					width: 56rpx;
					height: 56rpx;
				}
	
				.num {
					width: 64rpx;
					height: 56rpx;
					color: #333333ff;
					font-size: 28rpx;
					background: #f2f3f5ff;
					margin: 0 4rpx;
				}
			}
		}
	
		.textarea {
			position: relative;
	
			textarea {
				padding: 24rpx 16rpx 16rpx 24rpx;
				box-sizing: border-box;
				width: 702rpx;
				height: 148rpx;
				border-radius: 16rpx;
				background: #f5f5f5ff;
				color: #000;
				font-size: 28rpx;
			}
	
			.count {
				position: absolute;
				color: #00000066;
				font-size: 24rpx;
				right: 16rpx;
				bottom: 16rpx;
			}
		}
	
		.payBox {
			margin-top: 48rpx;
	
			.payMode {
				color: #000000e6;
				font-size: 28rpx;
	
				image {
					margin-right: 12rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
	
			.yue {
				color: #F33F2E;
				font-size: 30rpx;
				font-weight: 700;
	
				text {
					margin-top: 5rpx;
					color: #F33F2E;
					font-size: 24rpx;
				}
			}
		}
	
		.popBtn {
			margin: 50rpx auto 0;
			width: 686rpx;
			height: 88rpx;
			border-radius: 80rpx;
			color: #ffffffff;
			font-size: 32rpx;
			font-weight: 700;
			background: #00000029;
		}
	
		.checkA {
			background: linear-gradient(-89.3deg, #ffc24aff 0%, #ffab07ff 100%);
		}
	
		.popBtn1 {
			margin: 50rpx auto 0;
			width: 686rpx;
			height: 88rpx;
			border-radius: 96rpx;
			opacity: 1;
			color: #ffffffff;
			font-size: 32rpx;
			font-weight: 700;
			background: linear-gradient(-88deg, #ff5e2bff 0%, #ec3323ff 100%);
	
			.payMoney {
				color: #ffffffff;
				font-size: 36rpx;
				font-weight: 700;
	
				text {
					font-size: 24rpx;
					margin: 8rpx 3rpx 0;
				}
			}
		}
	
		.notHave {
			background: #ffd5d1ff;
		}
	}
</style>