<template>
	<view class="content bg" style="background-image: url('@@:static/details_bg.png');">

		<view class="back" @click="toBack()">
			<image src="@@:static/ic_back.png" mode=""></image>
		</view>

		<view class="title bg myZt-500w" style=" background-image: url('@@:static/title_bg.png');">
			<text>坂本日常 吧唧</text>
		</view>

		<view class="v_fun">
			<image src="@@:static/bags.png" mode=""></image>

			<image src="@@:static/details.png" @click="openDetailsPop()" mode="">
			</image>

			<image src="@@:static/share.png" mode=""></image>
		</view>


		<!-- ip背景 -->
		<view class="ipBg bg" style="background-image: url('@@:static/goods_bg.png');">

			<!-- 轮播图 -->
			<view class="" style="width: 100%; height: 448.61rpx;margin-top: 54.86rpx;">
				<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
			</view>


			<view class="tip myZt-500w">
				<image src="@@:static/ic_prompt.png" style="width: 513.89rpx; height: 51.39rpx; position: absolute;">
				</image>
				<text style="position: absolute; font-size: 20.83rpx; color: #8C8574;">运费10元 满100包邮 3-5个工作日发货</text>
			</view>


			<!-- 购买按钮 -->
			<view class="pay" @click="openPayPop()">
				<image src="@@:static/ic_pay.png" mode=""></image>
				<view class="price">
					<text class="myZt-600w">￥20</text>
				</view>
			</view>

			<image class="join" src="@@:static/ic_join.png" mode=""></image>

		</view>

		<!-- 详情弹窗 -->
		<uni-popup ref="detailsPop" type="bottom" :safe-area='false'>
			<view class="detailsPop bg" style="background-image: url('@@:static/specifics_bg.png');">
				<view class="popTitle">
					<view style="width: 30rpx;"></view>
					<text class="myZt-600w" style="font-size: 31.25rpx; color: #695C4E;">商品详情</text>
					<view class="popClose" style="" @click="closeDetailsPop()">
						<image src="@@:static/ic_close.png" style="" mode=""></image>
					</view>
				</view>

				<image class="detailsImg" src="" mode="">
				</image>

				<text class="detailsBrand myZt-600w">品牌：</text>
				<text class="detailsSize myZt-600w">尺寸：直径约56mm</text>
			</view>
		</uni-popup>


		<!-- 购买弹窗 -->
		<uni-popup ref="payPop" type="bottom" :safe-area='false'>
			<view class="payPop bg myZt-500w" style=" background-image: url('@@:static/pay_pop_bg.png');">

				<view class="popTitle">
					<view style="width: 30rpx;"></view>
					<text style="font-size: 22.22rpx; color: #8C8574;">本商品不可退换 未成年人请谨慎购买</text>
					<view class="popClose" @click="closePayPop()()">
						<image src="@@:static/ic_close.png" mode=""></image>
					</view>
				</view>


				<!-- 地址 -->
				<view class="payPopAddress" @click="toAddress()">

					<image class="image1" src="@@:static/ic_address.png" mode=""></image>

					<text>某某 河南省河南省河南省河南省</text>

					<image class="image2" src="@@:static/ic_right_arrow.png" mode=""></image>

				</view>

				<!-- 商品信息 -->
				<view class="payPopInfo">

					<image class="goodsImg" src="" mode=""></image>

					<text class="goodsTitle">坂本日常 吧唧</text>

					<text class="goodsName">坂本</text>


					<view class="goodsPrice">
						<text class="text1">￥20</text>
						<text class="text2">库存紧张</text>
					</view>

					<!-- 加减数量 -->
					<view class="addSub">
						<image src="@@:static/ic_minus.png" @click="decrease(index)"
							style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
						<text
							style="width: 70.83rpx; font-size: 29.17rpx; color: #6E5B51; text-align: center;">{{goodsNum}}</text>
						<image src="@@:static/ic_add.png" @click="increase(index)"
							style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
					</view>


				</view>

				<!-- 支付方式 -->

				<view class="payPopPayment">
					<text style="margin-left: 20.14rpx;">支付方式</text>
					<text style="margin-right: 20.14rpx;">微信支付</text>
				</view>
				<!-- 优惠券 -->
				<view class="payPopPayment">
					<text style="margin-left: 20.14rpx;">优惠券</text>
					<text style="margin-right: 20.14rpx;">无可用 ›</text>
				</view>

				<!-- 消费说明 -->
				<view class="payExplain">

				</view>

				<view class="payAgreement">
					<image src="@@:static/ic_check.png" style="width: 23.61rpx; height: 23.61rpx;" mode=""></image>
					<text style="color: #8C8574; margin-left: 10rpx;">同意 <text style="color: #FCAD6F;"> 《用户协议》</text>
					</text>
				</view>
				<image class="conPay" src="@@:static/confirm_pay.png" mode=""></image>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import specialBanner from '../../components/specialBanner.vue'
	export default {
		components: {
			specialBanner
		},
		onLoad(options) {
			console.log(options.id);
		},
		data() {
			return {
				goodsNum: 1,
				bannerList: [{
					picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
					path: ''
				}, {
					picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
					path: ''
				}, {
					picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
					path: ''
				}, {
					picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
					path: ''
				}],
				swiperConfig: {
					indicatorDots: false,
					indicatorColor: 'rgba(255, 255, 255, .4)',
					indicatorActiveColor: 'rgba(255, 255, 255, 1)',
					autoplay: false,
					interval: 3000,
					duration: 300,
					circular: true,
					previousMargin: '58rpx',
					nextMargin: '58rpx'
				}
			}
		},
		methods: {
			toBack() {
				uni.navigateBack();
			},

			openDetailsPop() {
				this.$refs.detailsPop.open()
			},
			closeDetailsPop() {
				this.$refs.detailsPop.close()
			},

			openPayPop() {
				this.$refs.payPop.open()
			},
			closePayPop() {
				this.$refs.payPop.close()
			},

			// 增加数量
			increase(index) {
				this.goodsNum++;
			},

			// 减少数量
			decrease(index) {
				if (this.goodsNum > 1) {
					this.goodsNum--;
				}

			},

			//地址
			toAddress() {
				uni.navigateTo({
					url: '/pages/me/address-page'
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.back {
		width: 40rpx;
		height: 40rpx;
		position: fixed;
		top: 118.06rpx;
		left: 30.56rpx;

		image {
			width: 14.58rpx;
			height: 27.08rpx;
		}
	}

	.title {
		width: 550rpx;
		height: 93.06rpx;
		margin-top: 225.69rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 23.61rpx;
			color: #6E5B51;
		}
	}

	.v_fun {
		width: 550rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 31.94rpx;

		image {
			width: 111.81rpx;
			height: 81.94rpx;
		}
	}

	.ipBg {
		width: 100%;
		height: 1118.75rpx;
		margin-top: 76.39rpx;
		display: flex;
		flex-direction: column;
	}

	.tip {
		margin: 120rpx auto 0;
		width: 513.89rpx;
		height: 51.39rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay {
		margin: 59.03rpx auto 0;
		position: relative;
		width: 561.81rpx;
		height: 161.11rpx;
		display: flex;
		justify-content: center;

		image {
			width: 561.81rpx;
			height: 161.11rpx;
			position: absolute;
		}

		.price {
			width: 150rpx;
			height: 40rpx;
			position: absolute;
			bottom: 38rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 27.78rpx;
				color: #FFFFFF;
			}
		}

	}

	.join {
		width: 561.81rpx;
		height: 122.92rpx;
		margin: 0 auto 0;
	}

	.popTitle {
		width: 688.88rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 36.11rpx;
		align-items: center;
	}

	.detailsPop {
		width: 100%;
		height: 819.44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;



		.detailsImg {
			width: 447.92rpx;
			height: 447.92rpx;
			background-color: white;
			margin-top: 85.42rpx;
		}

		.detailsBrand {
			font-size: 25rpx;
			color: #695C4E;
			width: 100%;
			margin-left: 38.19rpx;
			margin-top: 81.94rpx;
		}

		.detailsSize {
			font-size: 25rpx;
			color: #695C4E;
			width: 100%;
			margin-left: 38.19rpx;
			margin-top: 19.44rpx;
		}
	}

	.popClose {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 19.44rpx;
			height: 19.44rpx;
		}

	}


	.payPop {
		width: 100%;
		height: 1002.78rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.payPopAddress {
			width: 690.28rpx;
			height: 62.5rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 22.92rpx;
			display: flex;
			align-items: center;
			position: relative;


			.image1 {
				width: 19.44rpx;
				height: 22.92rpx;
				position: absolute;
				left: 19.44rpx;
			}

			text {
				font-size: 22.22rpx;
				color: #6E5B51;
				left: 52.08rpx;
				position: absolute;
			}

			.image2 {
				width: 13.19rpx;
				height: 22.92rpx;
				position: absolute;
				right: 26.39rpx;
			}

		}

		.payPopInfo {
			width: 690.28rpx;
			height: 161.81rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 22.92rpx;
			display: flex;
			align-items: center;
			position: relative;


			.goodsImg {
				width: 120.83rpx;
				height: 120.83rpx;
				background-color: #AAAAAA;
				border-radius: 50%;
				position: absolute;
				left: 20.14rpx;
			}

			.goodsTitle {
				font-size: 23.61rpx;
				color: #6E5B51;
				position: absolute;
				left: 163.19rpx;
				top: 28.47rpx;
			}

			.goodsName {
				font-size: 19.44rpx;
				color: #8C8574;
				position: absolute;
				left: 163.19rpx;
				top: 64.58rpx;
			}

			.goodsPrice {
				display: flex;
				flex-direction: row;
				position: absolute;
				left: 160.58rpx;
				bottom: 22.22rpx;

				.text1 {
					font-size: 29.17rpx;
					color: #6E5B51;
				}

				.text2 {
					font-size: 19.44rpx;
					color: #8C8574;
					margin-left: 10rpx;
					margin-top: 10rpx;
				}
			}

			.addSub {
				display: flex;
				flex-direction: row;
				position: absolute;
				bottom: 23.61rpx;
				right: 23.61rpx;
				align-items: center;
			}
		}

		.payPopPayment {
			width: 690.28rpx;
			height: 62.5rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			margin-top: 15.28rpx;
			flex-direction: row;
			justify-content: space-between;
			font-size: 22.22rpx;
			color: #8C8574;
		}

		.payExplain {
			width: 689.58rpx;
			height: 204.17rpx;
			background-color: #FFFFFF;
			margin-top: 15.28rpx;
		}

		.payAgreement {
			width: 689.58rpx;
			margin: 15.28rpx auto 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 22.22rpx;
		}

		.conPay {
			width: 561.81rpx;
			height: 161.11rpx;
			margin: 30.56rpx auto 0;
		}


	}
</style>