<template>
	<view>

		<swiper :indicator-dots="false" :autoplay="false" :duration="500" style="height: 100vh;" :current="containerIndex">
			<!-- 商品 -->
			<swiper-item>
				<view class="" style="position: relative;">
					<view class="back" @tap="back">
						<text class="cuIcon-home" v-if="type=='share'"></text>
						<text class="cuIcon-back" v-else></text>
					</view>
					<scroll-view scroll-y="true" style="height: 100vh;">
						<view>
							<view class="loading" v-if="showLoading">
								<view class="flex justify-center" style="padding-top: 300rpx;">
									<u-loading color="red"></u-loading>
								</view>
							</view>
							<view class="" v-else>
								<view style="position: relative;">
									<swiper class="swiper-box screen-swiper" :current="current" :circular="true" :autoplay="true" interval="3000"
									 duration="500" @change="swiperChange">
										<swiper-item v-for="(item,index) in goodsDetail.mainPhotos" :key="index">
											<image :src="IMAGE_URL+item.url" mode="aspectFill"></image>
										</swiper-item>
									</swiper>
									<view class="dots-box"><text style="font-size: 32rpx;">{{current+1}}</text>/{{goodsDetail.mainPhotos.length}}</view>
								</view>

								<view class="banner-con bg-img" :style="'background-image: url('+IMAGE_URL+'/photo/FhNoUtBF0LtApK3LnX9k6RE9FK5v.png);'">
									<view class="pic-con">
										<view class="flex quan-top">
											<view class="quan">20元优惠券</view>
											<view class="price">
												{{goodsDetail.price.min.originalPrice}}
												<template v-if="goodsDetail.price.min.originalPrice!=goodsDetail.price.max.originalPrice">
													~{{goodsDetail.price.max.originalPrice}}
												</template>
											</view>
										</view>

										<view class="price-box text-white" style="font-size: 28rpx;">
											<text style="color: #FFD380;font-size: 28rpx;">券后价</text>
											<text>￥</text>
											<text style="font-size: 48rpx;">
												{{goodsDetail.price.min.discountPrice}}
												<template v-if="goodsDetail.price.min.discountPrice!=goodsDetail.price.max.discountPrice">
													~{{goodsDetail.price.max.discountPrice}}
												</template>
											</text>
											<text style="padding: 0 10rpx;">/</text>
											<text>
												赚{{goodsDetail.price.min.commission}}
												<template v-if="goodsDetail.price.min.commission!=goodsDetail.price.max.commission">
													~{{goodsDetail.price.max.commission}}
												</template>
											</text>
										</view>
									</view>
								</view>

								<view class="goods-msg-box bg-white" style="margin-bottom: 25rpx;padding-top: 20rpx;">
									<view class="flex goods-name-box justify-between align-start">
										<view class="goods-name flex-sub">{{goodsDetail.goodsName}}</view>
										<button class="text-center share-btn" type="default" open-type="share"><text class="cuIcon-share" style="margin-right: 5rpx;"></text>分享</button>
									</view>
									<view class="tip" style="padding: 0 20rpx;color: #CCCCCC;line-height: 50rpx;font-size: 28rpx;">{{goodsDetail.description}}</view>
									<view class="flex justify-between text-center goods-tips" @tap="tipModel(true)">
										<view class="flex">
											<text class="cuIcon-roundcheck text-red"></text>全球精品
										</view>
										<view class="flex">
											<text class="cuIcon-roundcheck text-red"></text>正品保障
										</view>
										<view class="flex">
											<text class="cuIcon-roundcheck text-red"></text>一件包邮
										</view>
										<view class="flex">
											<text class="cuIcon-roundcheck text-red"></text>售后无忧
										</view>
									</view>
								</view>

								<view class="box bg-white">
									<view class="item flex justify-between">
										<view class="span">领券</view>
										<view class="text-hidden flex-sub txt">暂无优惠券</view>
									</view>
									<view class="item flex justify-between" @tap="specModel(true)">
										<view class="span">规格</view>
										<view class="text-hidden flex-sub txt">{{checkedSku}}</view>
										<text class="cuIcon-right"></text>
									</view>
								</view>
								<view class="box bg-white">
									<view class="item flex justify-between">
										<view class="span">参数</view>
										<view class="text-hidden flex-sub txt">品牌 工艺...</view>
										<text class="cuIcon-right"></text>
									</view>
									<view class="item flex justify-between">
										<view class="span">服务</view>
										<view class="text-hidden flex-sub txt">正品保证 | 售后无忧</view>
										<text class="cuIcon-right"></text>
									</view>
								</view>

								<view class="box bg-white">
									<view class="item flex justify-between">
										<view class="txt flex text-black" style="font-size: 28rpx;">用户评价<text style="color: #AAAAAA;">(0)</text></view>
										<view class="flex text-red">查看全部<text class="cuIcon-right"></text></view>
									</view>
								</view>


								<!-- 店铺信息 -->
								<view class="box bg-white" style="padding-top: 0;">
									<navigator :url="'/pages/search/search?brandId='+goodsDetail.brand.id" class="shop-box flex justify-between">
										<view class="shop-logo bg-img" v-if="goodsDetail.brand.logoUrl" :style="'background-image: url('+IMAGE_URL+goodsDetail.brand.logoUrl+');'"></view>
										<view class="shop-con flex-sub">
											<view class="shop-name">{{goodsDetail.brand.name}}</view>
											<view class="shop-count">全部商品：{{goodsDetail.brand.goodsCount}}</view>
										</view>

										<view class="shop-right flex flex-direction justify-center">
											<view class="flex" style="line-height: 50rpx;">
												<view class="text-gray">进入品牌</view>
												<text class="cuIcon-right"></text>
											</view>
										</view>
									</navigator>

									<!-- 店铺商品推荐 -->
									<view class="recommend">
										<view class="text-black" style="line-height: 80rpx;font-size: 28rpx;">为你推荐</view>
										<scroll-view scroll-x="true">
											<view class="rec-con flex">
												<view class="rec-item" v-for="(item,index) in goodsDetail.recommends" :key="index">
													<navigator class="item-image bg-img" :url="'/pages/goodsDetail/goodsDetail?id='+item.goodsId" open-type="redirect"
													 :style="'background-image: url('+IMAGE_URL+item.mainPhotoUrl+');'"></navigator>
													<view class="item-name two-line">{{item.goodsName}}</view>
													<view class="text-black">￥{{item.price}}</view>
												</view>
											</view>
										</scroll-view>
									</view>

								</view>


								<!-- 商品详情 -->
								<view class="box bg-white">
									<view class="goods-detail">
										<view class="text-black" style="line-height: 80rpx;font-size: 28rpx;padding: 0 20rpx;">图文详情</view>
										<view class="video" v-if="goodsDetail.video">
											<video :src="IMAGE_URL+goodsDetail.video.url" style="width: 100%;display: block;" controls></video>
										</view>
										<view class="detail-pics">
											<image :src="IMAGE_URL+item.url" v-for="(item,index) in pictures" :key="index" style="width: 100%;" mode="widthFix"></image>
										</view>
									</view>
								</view>




								<!-- 底部导航 -->
								<view class="" style="height: 100rpx;"></view>
								<view class="detail-bottom bg-white shadow flex justify-between align-center">
									<view class="flex text-center flex-sub justify-around">
										<navigator open-type="switchTab" url="/pages/cart/cart" style="width: 100rpx;text-align: center;">
											<text class="cuIcon-cart" style="font-size: 48rpx;"></text>
											<view style="font-size: 20rpx;">购物车</view>
										</navigator>
										<template v-if="goodsDetail.isFavorite">
											<view class="text-red" @tap="setFavorite" style="width: 100rpx;text-align: center;">
												<text class="cuIcon-likefill" style="font-size: 48rpx;"></text>
												<view style="font-size: 20rpx;">已收藏</view>
											</view>
										</template>
										<template v-else>
											<view @tap="setFavorite" style="width: 100rpx;text-align: center;">
												<text class="cuIcon-like" style="font-size: 48rpx;"></text>
												<view style="font-size: 20rpx;">收藏</view>
											</view>
										</template>
									</view>
									<view class="buy-btns flex text-white text-center">

										<template v-if="goodsDetail.inventory==0">
											<view class="flex-sub cannot-buy">该商品已售罄</view>
										</template>

										<template v-else>
											<button class="btn-item left-btn" open-type="share">
												<view>分享</view>
												<view style="font-size: 20rpx;">赚￥{{goodsDetail.price.min.commission}}</view>
											</button>
											<button class="btn-item right-btn" @tap="specModel(true)">
												<view>自购</view>
												<view style="font-size: 20rpx;">省￥{{goodsDetail.price.min.commission}}</view>
											</button>
										</template>

									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>


			<!-- 发现 -->
			<swiper-item>
				<view class="flex flex-direction" style="position: relative;height: 100vh;">
					<u-navbar :custom-back="back" title="发现" :is-fixed="false" :background="{background:'#fff'}"></u-navbar>
					<scroll-view class="flex-sub" scroll-y="true" >
						<dynamics :list="dynamics"></dynamics>
					</scroll-view>
					<navigator :url="'../makeDynamic/makeDynamic?goodsId='+id" v-if="showBtn" class="release-btn bg-red shadow">我要发布</navigator>
				</view>
			</swiper-item>
		</swiper>


		<!-- 服务说明介绍弹框 -->
		<u-popup v-model="showTip" mode="bottom" border-radius="20" :closeable="true">
			<view class="text-center text-black" style="line-height: 100rpx;font-size: 32rpx;font-weight: 900;">服务保障</view>
			<view class="tip-box">
				<view class="tip-item">
					<view class="flex item-top">
						<text class="cuIcon-roundcheck text-red"></text>
						<view class="">正品保证</view>
					</view>
					<view class="txt">本商品由海外认证的供应商或品牌商直供货源，保证100%正品</view>
				</view>
				<view class="tip-item">
					<view class="flex item-top">
						<text class="cuIcon-roundcheck text-red"></text>
						<view class="">发货&售后</view>
					</view>
					<view class="txt">由平台认证供应商或者品牌商直接发货，也可直接在瑞库客门店提货；由认证供应商或者品牌商提供售后服务</view>
				</view>
				<view class="tip-item">
					<view class="flex item-top">
						<text class="cuIcon-roundcheck text-red"></text>
						<view class="">售后无忧</view>
					</view>
					<view class="txt">瑞库客购无忧，售后更无忧，您的售后，由瑞库客平台客服全力护航</view>
				</view>
				<view class="tip-item">
					<view class="flex item-top">
						<text class="cuIcon-roundcheck text-red"></text>
						<view class="">支持七天无理由退换货</view>
					</view>
					<view class="txt">该商品支持七天无理由退货(未使用)</view>
				</view>
			</view>
			<view class="tip-btn text-center text-white">
				<view @tap="tipModel(false)">完成</view>
			</view>
		</u-popup>

		<!-- 规格弹框 -->
		<u-popup v-model="showSpecs" mode="bottom" border-radius="20" :closeable="true">
			<view class="spec-box">
				<view class="spec-top flex">
					<view class="goods-pic bg-img" :style="'background-image: url('+IMAGE_URL+checkedSkuMsg.picUrl+');'"></view>
					<view class="goods-msg flex-sub">
						<view class="text-black">
							<text>￥<text style="font-size: 36rpx;font-weight: 700;">{{checkedSkuMsg.discountPrice}}</text></text>
							<text style="padding:0 5rpx;">/</text>
							<text class="text-red" style="font-size: 24rpx;">赚{{checkedSkuMsg.commission}}</text>
						</view>
						<view style="font-size: 24rpx;color: #AAAAAA;margin: 10rpx 0;">库存 {{checkedSkuMsg.inventory}}件</view>
						<view style="font-size: 24rpx;">已选择:{{checkedSku}}</view>
					</view>
				</view>
				<view class="spec-con">
					<view v-for="(attr,index1) in goodsDetail.attributes" :key="index1">
						<view class="spec-title text-black">{{attr.name}}</view>
						<view class="flex flex-wrap">
							<view class="spec-item" :class="[item.isShow?'':'noneActive',subIndex[index1]==index2?'spec-checked':'']" v-for="(item,index2) in attr.children"
							 :key="index2" @tap="chooseAttr(index1,index2,item.id,item.value)">{{item.value}}</view>
						</view>
					</view>
				</view>
				<view class="goods-num-box flex align-center justify-between">
					<view class="">数量</view>
					<u-number-box v-model="buyNum" :min="1" :input-width="72" :size="24" @change="changeNum"></u-number-box>
				</view>
			</view>
			<view class="spec-btn-box flex justify-center text-white text-center">
				<template v-if="goodsDetail.inventory==0">
					<view class="flex-sub cannot-buy">该商品已售罄</view>
				</template>
				<template v-else>
					<view class="flex-sub" style="margin-right: 3rpx;" @tap="addcart">加入购物车</view>
					<view class="flex-sub buy-now" @tap="createOrder">立即购买</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: true,
				showTip: false,
				showSpecs: false,
				id: null,
				current: 0,
				goodsDetail: null,
				IMAGE_URL: this.IMAGE_URL,
				pictures: [],
				buyNum: 1, //购买数量
				selectArr: [], //存放被选中的值
				selectName: [], //存放被选中的值
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				checkedSkuMsg: {}, //选中的规格的全部信息
				checkedSku: "", //选中的规格的名称拼接
				sku_id: 0,
				type: null,
				containerIndex: 0,
				dynamics: [], //动态列表,
				showBtn: false //是否显示发布按钮
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (uni.getStorageSync("auth")) {
				this.showBtn = true
			}
			this.id = parseInt(options.id)
			this.getGoodsDetail()
			this.getList()
		},
		methods: {
			back() {
				if (this.type == "share") {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack()
				}
			},
			changeNum() {
				// if(this.buyNum>this.skuStoreCount){
				// 	this.$u.toast(res.data.msg);
				// }
				return
			},

			// 获取该商品发圈素材列表
			getList() {
				this.$u.post("/api/v1/goods/detail/moments_copy/list", {
					goodsID: this.id
				}).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					this.dynamics = res.data.data
				})
			},
			//点击收藏
			setFavorite() {
				this.goodsDetail.isFavorite = !this.goodsDetail.isFavorite
				let reqUrl = ""
				if (this.goodsDetail.isFavorite) {
					reqUrl = "/api/v1/goods/favorites/add"
				} else {
					reqUrl = "/api/v1/goods/favorites/cancel"
				}
				this.$u.post(reqUrl, {
					userID: uni.getStorageSync("userInfo").id,
					goodsID: this.id
				}).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
				})
			},
			swiperChange(e) {
				// console.log(e)
				this.current = e.detail.current
			},
			tipModel(flag) {
				this.showTip = flag
			},
			specModel(flag) {
				this.showSpecs = flag
			},

			// 获取商品详情信息
			getGoodsDetail() {
				this.$u.post('/api/v1/goods/detail/summary', {
					GoodsID: this.id
				}).then(res => {
					console.log(res.data);
					this.showLoading = false
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					this.goodsDetail = res.data.data
					this.getPictures()
					this.initData()
				})
			},

			//初始化商品规格sku信息
			initData() {
				// console.log(this.goodsDetail)
				this.checkedSkuMsg = this.goodsDetail.sku[0]
				this.skuPrice = this.goodsDetail.sku[0].discountPrice || ''
				this.skuPhoto = this.IMAGE_URL + this.goodsDetail.sku[0].picUrl
				this.skuStoreCount = this.goodsDetail.sku[0].inventory
				this.checkedSku = "请选择规格"
				for (let i in this.goodsDetail.sku) {
					this.shopItemInfo[this.goodsDetail.sku[i].combineId.split(",").reverse().join(",")] = this.goodsDetail.sku[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
				}
				// console.log(this.shopItemInfo)
				this.checkItem();
			},

			//获取商品详情图片
			getPictures() {
				this.$u.post('/api/v1/goods/detail/photo', {
					GoodsID: this.id
				}).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					this.pictures = res.data.data.list
				});
			},


			//添加购物车
			addcart() {
				console.log(this.sku_id)
				if (!this.sku_id) {
					this.$u.toast("请选择商品规格")
					return
				}
				this.$u.post('/api/v1/goods/shopping_trolley/add', {
					UserID: uni.getStorageSync("userInfo").id,
					GoodsID: this.id,
					SkuID: this.sku_id,
					Quantity: this.buyNum
				}).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					uni.showToast({
						title: "已加入购物车"
					})
					this.specModel(false)
				})

			},
			//创建预购单
			createOrder() {
				console.log(this.checkedSku)
				if (!this.sku_id) {
					this.$u.toast("请选择商品规格")
					return
				}
				let sendData = {
					UserID: uni.getStorageSync("userInfo").id,
					SkuID: this.sku_id,
					SkuName: this.selectName.join('+'),
					Quantity: this.buyNum
				}
				if (this.parentId) {
					sendData.ParentID = this.parentId
				}
				// 此时创建普通订单预览
				this.$u.post('/api/v1/order_preview/create', sendData).then(res => {
					console.log(res);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					let preViewMsg = res.data.data
					this.$store.commit('updatePreOrderMsg', preViewMsg);
					uni.navigateTo({
						url: "/pages/confirmOrder/confirmOrder"
					})
					this.specModel(false)
				});
			},

			//选择规格
			chooseAttr(i1, i2, id, name) {
				if (this.selectArr[i1] != id) {
					this.selectName[i1] = name
					this.selectArr[i1] = id
					this.subIndex[i1] = i2
				} else {
					this.selectName[i1] = ""
					this.selectArr[i1] = ""
					this.subIndex[i1] = -1 //去掉选中的颜色
				}
				// console.log(this.selectArr,this.subIndex,this.selectName)
				this.checkedSku = this.selectName.join(",")
				this.checkItem();
			},
			checkItem() {
				let option = this.goodsDetail.attributes
				let result = [] //定义数组储存被选中的值
				for (let i in option) {
					result[i] = this.selectArr[i] ? this.selectArr[i] : '';
				}
				// console.log(result)
				for (let i in option) {
					let last = result[i]; //把选中的值存放到字符串last去
					for (let k in option[i].children) {
						result[i] = option[i].children[k].id; //赋值，存在直接覆盖，不存在往里面添加id
						option[i].children[k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
				}
				// console.log(result)

				if (this.shopItemInfo[result]) {
					this.checkedSkuMsg = this.shopItemInfo[result]
					this.sku_id = this.shopItemInfo[result].id
				} else {
					this.sku_id = 0
				}
				this.$forceUpdate(); //重绘
			},
			isMay(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				// console.log(this.shopItemInfo[result])
				return this.shopItemInfo[result].inventory == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
			},
			//下载发圈素材图片
			downloadPic(pics) {
				console.log(pics)
				for (let i = 0; i < pics.length; i++) {
					this.downloadSave(this.IMAGE_URL + pics[i].url)
				}
			},
			downloadSave(url) {
				console.log(url)
				uni.downloadFile({
					url: url, //网络路径不支持
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res.tempFilePath)
							console.log('下载成功');
							let localPicUrl = res.tempFilePath
							uni.saveImageToPhotosAlbum({
								filePath: localPicUrl,
								success: function() {
									console.log('save success');
								},
								fail: (err) => {
									this.$u.toast(err);
								}
							});
						}
					},
					fail: (err) => {
						this.$u.toast(err);
					}
				});
			},
			//复制文字
			copyWords(words) {
				uni.setClipboardData({
					data: words,
					success: (res) => {
						console.log("success")
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: "我在买" + this.goodsDetail.goodsName + ",快来看看吧！",
				path: '/pages/goodsDetail/goodsDetail?id=' + this.id + "&type=share",
				imageUrl: this.IMAGE_URL + this.goodsDetail.mainPhotos[0].url
			}
		}
	}
</script>

<style lang="scss">
	.back {
		position: absolute;
		top: 80rpx;
		left: 30rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 50%;
		font-size: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.swiper-box {
		height: 750rpx;
		position: relative;
	}

	.dots-box {
		position: absolute;
		right: 20rpx;
		top: 600rpx;
		line-height: 40rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 0, 0, 0.3);
		width: 80rpx;
		text-align: center;
	}

	.banner-con {
		position: relative;
		margin-top: -80rpx;
		height: 212rpx;
		background-color: transparent;
		.pic-con {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;

			.quan-top {
				line-height: 46rpx;
				margin-bottom: 20rpx;

				.quan {
					border-radius: 25rpx;
					padding: 0 20rpx;
					margin-right: 20rpx;
					overflow: hidden;
					background-image: linear-gradient(to right, #e9ce87, #ca9d59);
					color: #FFFFFF;
				}
			}


			.price {
				text-decoration: line-through;
				font-size: 32rpx;
				color: rgba(255, 255, 255, 0.5);
			}
		}
	}


	.goods-msg-box {
		.goods-name {
			color: #000;
			font-size: 32rpx;
			line-height: 45rpx;
			padding: 0 20rpx;
			font-weight: 700;
		}

		.share-btn {
			background-color: #eee;
			color: #aaa;
			white-space: nowrap;
			border-radius: 0;
			font-size: 28rpx;
			border-bottom-left-radius: 25rpx;
			border-top-left-radius: 25rpx;
			line-height: 50rpx;
		}

		.goods-tips {
			padding: 30rpx 20rpx 20rpx;
			color: #333;
			line-height: 50rpx;
		}

	}

	.detail-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;

		.buy-btns {
			height: 80rpx;
			width: 520rpx;

			.btn-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				border-radius: 0;
				color: #FFFFFF;
				line-height: normal;
				font-size: 30rpx;

				&::after {
					content: none;
				}

				&.left-btn {
					background-image: linear-gradient(to right, #787978, #5d5e5d);
					border-top-left-radius: 40rpx;
					border-bottom-left-radius: 40rpx;
					margin-right: 2rpx;
				}

				&.right-btn {
					background-image: linear-gradient(to right, #c6193d, #ff3456);
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
				}
			}
		}
	}

	.tip-box {
		padding: 0 30rpx 20rpx;

		.tip-item {
			margin-bottom: 20rpx;

			.item-top {
				line-height: 60rpx;
				font-size: 32rpx;
				color: #000000;

				.cuIcon-roundcheck {
					width: 50rpx;
					font-size: 36rpx;
					color: red;
				}
			}

			.txt {
				padding-left: 50rpx;
				color: #666666;
				font-size: 28rpx;
			}
		}

	}

	.tip-btn {
		padding: 15rpx 30rpx;
		box-shadow: 0 0 10rpx 1rpx #f1f1f1;

		view {
			line-height: 80rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to right, #FF311D, #D5101A);
		}

	}

	.spec-box {
		padding: 30rpx;

		.spec-top {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.goods-pic {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
		}

		.spec-con {
			.spec-title {
				line-height: 80rpx;
			}

			.spec-item {
				border: 2rpx solid transparent;
				background-color: #f1f1f1;
				color: #000;
				border-radius: 8rpx;
				margin: 10rpx 0;
				margin-right: 20rpx;
				padding: 0 25rpx;
				font-size: 26rpx;
				line-height: 50rpx;
			}

			.spec-checked {
				background-color: rgba(201, 34, 25, 0.05);
				color: red;
				border: 2rpx solid red;
			}

			.noneActive {
				background-color: #f9f9f9;
				color: #ddd;
				border: 2rpx solid transparent;
				pointer-events: none;
			}
		}

		.goods-num-box {
			height: 100rpx;
			margin-top: 50rpx;
		}
	}

	.spec-btn-box {
		padding: 20rpx 30rpx;
		font-size: 32rpx;

		view {
			height: 80rpx;
			line-height: 80rpx;

			&:first-child {
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				background-image: linear-gradient(to right, #787978, #5d5e5d);
			}

			&:last-child {
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				background-image: linear-gradient(to right, #c6193d, #ff3456);
			}
		}
	}

	.cannot-buy {
		border-radius: 40rpx;
		background-color: #f1f1f1;
		line-height: 80rpx;
		color: #AAAAAA;
	}

	.box {
		margin-top: 20rpx;
		padding: 15rpx 0;

		.cuIcon-right {
			font-size: 32rpx;
			color: #DDDDDD;
		}

		.item {
			padding: 0 20rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #AAAAAA;

			.span {
				margin-right: 40rpx;
			}

			.txt {
				color: #333333;
			}
		}

		.shop-box {
			padding: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.shop-logo {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.shop-name {
				font-size: 30rpx;
				color: #333333;
			}

			.shop-count {
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 15rpx;
			}
		}

		.recommend {
			padding: 0 20rpx;

			.rec-item {
				margin-right: 20rpx;
				width: 200rpx;

				&:last-child {
					margin-right: 0;
				}

				.item-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}

				.item-name {
					color: #AAAAAA;
					font-size: 24rpx;
					line-height: 35rpx;
					margin-top: 10rpx;
					height: 70rpx;
				}
			}
		}
	}

	.release-btn {
		position: absolute;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 50rpx;
		line-height: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	button {
		font-weight: normal;
	}

	button::after {
		content: none;
		border-radius: 0;
	}

	
</style>
