<template>
	<view class="">
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="商品详情" bgColor="red"></z-nav-bar>
		</view>
		<view class="swiperBox">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height: 100%;">
				<swiper-item v-for="(item,index) in swiperlist" :key="index" style="width: 100%;height: 100%;">
					<image :src="item" mode="aspectFit" style="width: 100%;height: 100%;" @click="previewImage(item)">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="commodityContent">
			<view class="commodityPrice" v-if="productInfo.activityPrice && productInfo.activityPrice > 0">
				<span style="font-size: 28rpx;">￥</span><em>{{productInfo.activityPrice}}</em>
				<span class="oldPrice ">原价<span
						style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.price}}</span>
			</view>
			<view class="commodityPrice" v-else>
				<span style="font-size: 28rpx;">￥</span><em>{{productInfo.price}}</em>
			</view>
			<view class="commodityyName">
				{{productInfo.productName}}
				<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
				<view><text class="SoldNumber">已售<span
							style="padding-left:10rpx;">{{productInfo.sumSales}}</span>件</text></view>
			</view>
			<view class="pingjia" v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
				<view class="">
					<view style="font-weight: 600;margin-bottom: 30rpx;">商品列表</view>
					<!-- <view class="icon-del rotate"></view> -->
				</view>
				<!-- 商品包含 -->
				<view v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
					<view class="spbh" v-for="(item, index) in linkProducts" :key="item.id">
						<view class="flexbox aligncenter" @click="previewProduct(item,index)">
							<view class="spbhimg">
								<image :src="item.productImages" mode="aspectFit"></image>
							</view>
							<text class="username nowrap ">{{item.productName}}</text>
							<text class="price"
								v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
							<text class="price" v-else>￥{{item.price}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="quesheng" v-else>
					<text>暂无关联商品~</text>
				</view> -->
			</view>

			<view class="contentButton">
				<u-tabs :scrollable="false" :list="contentButtonList" @click="contentButtonClick" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						fontSize: '28rpx'
					}" :inactiveStyle="{
						color: '#606266',
						fontSize: '28rpx'
					}"></u-tabs>
			</view>
			<!-- 详情 + 评价1 -->
			<view v-if="contentShow == 0">
				<view class="pingjia">
					<!-- <h4></h4> -->
					<view class="" v-if="listenList.length > 0 && listenList[0]" style="margin:0rpx 0rpx 30rpx;">
						<view class="">
							<view style="font-weight: 700;margin-bottom: 30rpx;color:#71d5a1;">赠送听书权益</view>
						</view>
						<view class="item flexbox aligncenter" v-for="item in listenList" :key="item.id"
							style="padding-bottom:10rpx;">
							<view class="spbhimg" @click="previewImage(item.images)">
								<image :src="item.images" mode="aspectFit"></image>
							</view>
							<text style="padding-right: 10rpx;">{{item.name}}</text>
							<u-icon v-if="item.canListen == true" name="volume" color="#71d5a1" size="24"
								@click="goToListen(item.id)"></u-icon>
							<u-icon v-else name="volume" color="#71d5a1" size="24"
								@click="goToListenNone(item.id)"></u-icon>
						</view>
					</view>
					<view class="">
						<view style="font-weight: 700;margin:0rpx 0rpx 30rpx;">商品详情</view>
					</view>
					<view class="bookInfo">
						<u-row customStyle="margin-bottom: 10px">
							<u-col><span>书名：{{productInfo.productName}}</span></u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 10px">
							<u-col v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="12"
								v-if="productInfo.publisher"><span>出版社：{{productInfo.publisher}}</span></u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="12"
								v-if="productInfo.pubDate"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="6" v-if="productInfo.format"><span>开本：{{productInfo.format}}</span></u-col>
							<u-col span="6" v-if="productInfo.pageNum"><span>页数：{{productInfo.pageNum}}</span></u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="6"
								v-if="productInfo.quality"><span>内文用纸材质：{{productInfo.quality}}</span></u-col>
						</u-row>
					</view>
					<!-- <view class="commodityIntroduce" v-html="productInfo.productDetails"> -->
					<view class="commodityIntroduce">
						<view v-if="productInfo.productDetails">
							<rich-text v-if="productInfo.productDetails" class="xiangqing" @itemclick="showImg"
								:nodes="productInfo.productDetails|formatRichText"></rich-text>
						</view>
					</view>
				</view>
				<!-- <view class="pingjia quesheng" v-else>
					<text>暂无详情~</text>
				</view> -->
			</view>
			<view class="pingjia" v-else>
				<view class="">
					<view style="font-weight: 700;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})
					</view>
					<!-- <view class="icon-del rotate"></view> -->
				</view>
				<!-- 商品评价 -->
				<view class="" v-if="commentsList && commentsList.length > 0">
					<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
						<view class="flexbox aligncenter">
							<view class="touxiang">
								<image :src="item.avatar" mode="aspectFit"></image>
								<text class="username nowrap ">{{item.name}}</text>
							</view>
							<view class="mb30" style="padding: 6rpx 0rpx 0rpx 20rpx;">
								<span :class="['star',item.starlevel >= 1 ? 'starLight':'starGray']"></span>
								<span :class="['star',item.starlevel >= 2 ? 'starLight':'starGray']"></span>
								<span :class="['star',item.starlevel >= 3 ? 'starLight':'starGray']"></span>
								<span :class="['star',item.starlevel >= 4 ? 'starLight':'starGray']"></span>
								<span :class="['star',item.starlevel >= 5 ? 'starLight':'starGray']"></span>
							</view>
						</view>
						<view class="contentBox">
							<div class="pjimgs flexbox">
								<view class="item" v-for="(item1,index) in item.images">
									<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1"
										mode="aspectFill" style="width:100%; height: 50px;"></image>
								</view>
							</div>
							<view class="content" v-html="item.phtml"></view>
							<text class="time">{{item.createdate}}</text>
						</view>
						<!-- 显示追平 -->
						<view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 60rpx;">
							<h5 style="color: #dbdbdb;padding: 30rpx 10rpx 10rpx 0rpx;">追评内容：</h5>
							<view class="flexbox">
								<view class="contentBox">
									<view class="content" v-html="item.zphtml"></view>
									<text class="time">{{item.followUpdate}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="quesheng" v-else>
					<text>暂无评价~</text>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="" v-if="upoShow">
			<u-popup :show="upoShow" :round="10" @close="closeUpo" style="z-index: 2;">
				<view class="tanchu">
					<view class="list">
						<view class="imgBox">
							<image v-if="linkimg == ''" src="../../static/icon/wufeng.jpg" mode="aspectFit"
								style="width: 100%; height: 100%;"></image>
							<image v-else :src="linkimg" mode="aspectFit" style="width: 100%; height: 100%;"
								@click="previewImage(linkimg)"></image>
							<view class="xiangxi" v-if="productId != linkProducts[linkCur].productId"
								@click="gotoDetail(linkProducts[linkCur])">
								<text>查看详情</text>
							</view>
						</view>
						<view :class="['spbh', linkCur == index ? 'cur' :'']" v-for="(item, index) in linkProducts"
							:key="item.id">
							<view class="flexbox aligncenter" @click="previewProduct(item,index)">
								<view class="spbhimg">
									<image :src="item.productImages" mode="aspectFit"></image>
								</view>
								<text class="username nowrap ">{{item.productName}}</text>
								<text class="price"
									v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
								<text class="price" v-else>￥{{item.price}}</text>
							</view>
						</view>
					</view>
					<uni-goods-nav style="left: 0;" class="goods_nav" :fill="true" :options="options"
						:buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClickLink" />
				</view>
			</u-popup>
		</view>
		<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
		<music-play :playData="playData"></music-play>
	</view>
</template>
<script>
	import musicPlay from '@/components/music.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	import loginVue from '../user/login.vue';
	export default {
		data() {
			return {
				linkimg: '', // 选中的关联商品图片
				playData: {},
				contentShow: 0,
				options: [{
					icon: 'cart',
					text: '购物车'
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				contentButtonList: [{
						name: '商品详情'
					},
					{
						name: '商品评价'
					}
				],
				// 轮播图数据
				swiperlist: [],
				// 商品详情数据
				productInfo: {},
				productAmount: 1, // 商品数量
				cartList: [], // 购物车列表
				commentsList: [], // 评论列表
				productId: null, // 商品评论
				listenList: [], // 关联得听书
				linkProducts: [], // 关联的商品,
				upoShow: false, // 显示底部购买选项
				linkCur: 0, // 当前选中的关联项				
			}
		},
		onLoad(e) {
			this.productId = e.id
			this.getProDetail(e)
			this.getComments()
			this.getLinkPros(this.productId)
			// console.log(emojiList1,'emojiList1')
		},
		computed: {
			...mapState(['userInfo']),
		},
		components: {
			musicPlay
		},
		methods: {
			showImg(e) {
				// console.log(e,'点击的内容')
				// let contentimg = e.target.dataset.nodes;
				this.previewImage(e.target.node.attrs.src)
			},

			gotoDetail(item) {
				//	console.log(item,'gotoDetail')
				uni.navigateTo({
					url: '../bookShop/commodityDetail?id=' + item.productId
				});
			},
			closeUpo() {
				console.log('关闭弹窗')
				this.upoShow = false
			},
			// 点击其他套餐
			previewProduct(item, index) {
				console.log(item, 'item')
				this.linkimg = item.productImages
				this.upoShow = true
				this.linkCur = index
			},
			// 获取商品关联商品
			getLinkPros(id) {
				this.$http
					.post('book/shopproduct/getGlProductList', {
						'productId': id
					})
					.then(res => {
						console.log('关联商品', res)
						if (res.code == 0) {
							if (res.result.length > 0) {
								this.linkProducts = res.result
								this.linkimg = this.linkProducts[0].productImages
								this.linkCur = 0
							} else {
								this.linkProducts = []
							}
						}
					})
					.catch(e => {
						console.log(e, 'e')
					})
			},
			goToListen(id) {
				// 跳转到听书
				uni.navigateTo({
					url: "../listen/listen?bookid=" + id
				});
			},
			// 放大图片
			previewImage(url) {
				console.log(url)
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['很抱歉，暂不支持保存图片到本地'],
						success: function(res) {
							// console.log(res,'+++++')
						}
					}
				});
			},
			// 获取html格式的评论1
			getHtmlComment(comment) {
				// 格式化html
				//	 console.log(comment,'comment')
				// 这里处理 链接   换行符
				let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					// console.log(item, index)
					var indexss = emojiList1.findIndex(item1 => item1.alt === item)
					// console.log(indexss, 'indexss')
					return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
						'" width="18rpx">';
				});
				// console.log(replacedStr,'replacedStr')
				return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');


			},
			// 获取评价
			getComments() {
				$http.request({
						url: "buy/record/All",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档1
						data: {
							'bookid': this.productId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							console.log(res.list, 'res.list')
							this.commentsList = res.list.map(item => {
								var imgList = []
								if (item.images !== null) {
									imgList = item.images.split(',')
									item.images = imgList
									return item
								} else {
									return item
								}
							})
							// 评论格式化							
							var newarr = []
							this.commentsList.forEach((item1) => {
								var pjstr = ''
								var zpstr = ''
								pjstr = this.getHtmlComment(item1.content)
								item1.followUpcontent == '' ? zpstr = '' : zpstr = this.getHtmlComment(item1
									.followUpcontent)
								//console.log(pjstr,'99999999999----------')
								item1.phtml = pjstr
								item1.zphtml = zpstr
								newarr.push(item1)

							})
							this.commentsList = newarr
							// console.log(this.commentsList,'评价+++++')							
							// this.commentsList = res.list
						}
					})
			},
			getProDetail(e) {
				// 获取商品详情
				uni.showLoading({
					title: '加载中'
				});
				console.log(e.id, 'e.id')
				this.$http
					.post('/book/shopproduct/info/' + e.id)
					.then(res => {
						console.log('shopproduct', res)
						this.productInfo = res.shopProduct
						this.listenList = res.shopProduct.bookidsimages
						if (this.productInfo.productImageList == null || this.productInfo.productImageList == '') {
							this.swiperlist.push(this.productInfo.productImages)
						} else {
							let imgList = this.productInfo.productImageList.split(",")
							// if(this.productInfo.productDetails != null){
							// 	let info = this.formatRichText(this.productInfo.productDetails)
							// }
							// this.productInfo.productDetails = info						
							for (var i = 0; i < imgList.length; i++) {
								this.swiperlist.push(imgList[i])
							}
						}
						uni.hideLoading();
					}).catch(e => {
						console.log(e, 'e')
						uni.hideLoading();
						if (e.msg == '该商品不存在，看看其他商品吧') {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000)
						}


					})
			},

			contentButtonClick(e) {
				this.contentShow = e.index
			},
			// 点击购物车
			onClick(e) {
				console.log(e.content.text)
				uni.navigateTo({
					url: '../peanut/shopping'
				});
			},
			// 关联商品点击按钮组件
			buttonClickLink(e) {
				console.log('点击的是关联商品的组件')
				if (e.index == 0) {
					// 点击的是加入购物车
					if (this.linkProducts[this.linkCur].productStock == 0) {
						uni.showToast({
							title: '商品库存不足',
							icon: "none",
							duration: 1000,
						});
					} else {
						this.$http
							.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
							.then(res => {
								this.cartList = res.cartList
								this.isAddLink(this.linkProducts[this.linkCur])
							})
					}
				} else {
					// 点击的是立即购买
					if (this.linkProducts[this.linkCur].productStock == 0) {
						uni.showToast({
							title: '商品库存不足',
							icon: "none",
							duration: 1000,
						});
					} else {
						uni.navigateTo({
							url: '../bookShop/settlement?type=2&list=' + this.linkProducts[this.linkCur].productId
						});
					}
				}
			},
			// 点击按钮组间
			buttonClick(e) {
				//	console.log(e)	
				if (e.index == 0) {
					// 点击的是加入购物车
					//	console.log('+.........',this.linkProducts,'this.linkProducts')
					if (this.linkProducts.length == 0) {
						this.addCart()
					} else {
						this.upoShow = true
					}

				} else {
					// 点击的是立即购买
					if (this.linkProducts.length == 0) {
						this.goPurse()
					} else {
						this.upoShow = true
					}
				}
			},
			goToListenNone() {
				uni.showToast({
					title: '该书暂未生成音频内容，敬请期待！',
					icon: 'none'
				})
			},
			// 加入购物车
			addCart() {
				if (this.productInfo.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none",
						duration: 1000,
					});
				} else {
					this.$http
						.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						.then(res => {
							this.cartList = res.cartList
							this.isAdd()
						})
				}

			},
			isAddLink(item) {
				// 统计商品信息
				let data = {
					"userId": this.userInfo.id,
					"productId": item.productId,
					"productAmount": this.productAmount,
					"price": item.price
				}
				// 判断列表是否为空
				if (this.cartList.length > 0) {
					let flag = ''
					let shagnpin = {}
					// 循环购物车列表
					flag = this.cartList.some((item, index) => {
						if (item.productId == data.productId) {
							shagnpin = item
							shagnpin.productAmount = item.productAmount + 1
							return true
						}
					})
					if (flag) {
						// 已在购物车中添加
						$http.request({
							url: "book/ordercart/update",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: shagnpin,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					} else {
						// 加入购物车
						$http.request({
							url: "book/ordercart/save",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					}

				} else {
					// 购物车列表为空时直接加入购物车
					$http.request({
						url: "book/ordercart/save",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 1000,
							});
						}
					})
				}
			},
			isAdd() {
				// 统计商品信息
				let data = {
					"userId": this.userInfo.id,
					"productId": this.productInfo.productId,
					"productAmount": this.productAmount,
					"price": this.productInfo.price
				}
				// 判断列表是否为空
				if (this.cartList.length > 0) {
					let flag = ''
					let shagnpin = {}
					// 循环购物车列表
					flag = this.cartList.some((item, index) => {
						if (item.productId == data.productId) {
							shagnpin = item
							shagnpin.productAmount = item.productAmount + 1
							return true
						}
					})
					if (flag) {
						// 已在购物车中添加
						$http.request({
							url: "book/ordercart/update",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: shagnpin,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					} else {
						// 加入购物车
						$http.request({
							url: "book/ordercart/save",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					}

				} else {
					// 购物车列表为空时直接加入购物车
					$http.request({
						url: "book/ordercart/save",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 1000,
							});
						}
					})
				}
			},

			// 购买下单
			goPurse() {
				if (this.productInfo.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none",
						duration: 1000,
					});
				} else {
					uni.navigateTo({
						url: '../bookShop/settlement?type=2&list=' + this.productInfo.productId
					});
				}

			},
			formatRichText(html) { //控制图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
				// 	match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
				// 	return match;
				// });
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			// 去购物车
			goCard() {
				uni.switchTab({
					url: '../peanut/shopping'
				});
			},
			clickImg() {
				console.log('点击了图片')
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			// 时间格式化
			formatDate(date) {
				console.log(date)
				let newDate = new Date(date);
				let year = newDate.getFullYear();
				let month = newDate.getMonth().toString().padStart(2, 0);
				let day = newDate.getDay().toString().padStart(2, 0);
				return year + '-' + month + '-' + day;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header_fixed {
		background-color: #fff;
	}

	.tanchu {
		background: #fff;
		position: relative;
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;

		.list {
			margin-bottom: 140rpx;

			.imgBox {
				height: 500rpx;
				width: 100%;
				margin-bottom: 10rpx;
				position: relative;

				.xiangxi {
					text-align: center;
					position: absolute;
					left: 0;
					bottom: 20rpx;
					width: 100%;

					text {
						padding: 10rpx 20rpx;
						font-size: 32rpx;
						background-color: rgba(235, 160, 11, .9);
						color: #def0ea;
						border-radius: 10px;
					}
				}
			}
		}

		.spbh {
			border: 2rpx solid #fff;

			.spbhimg {
				image {
					border: none !important;
				}
			}
		}

		.spbh.cur {
			border: 2rpx solid #eba00b;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}

	.tingshuList {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding-top: 40rpx;
		background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);

		.item {
			margin-bottom: 20rpx;
			vertical-align: middle;
		}

		h4 {
			color: #5fb386;
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}

		text {
			color: #444;
			font-size: 32rpx;
			padding-left: 20rpx;
		}
	}

	.pjimgs {
		margin: 0;
		flex-wrap: wrap;
		display: flex;
		justify-content: space-between;

		.item {
			width: 23%;
			padding-right: 20rpx;
			margin-top: 10rpx;

			image {
				border-radius: 15rpx;
			}
		}

	}

	.star {
		display: inline-block;
		width: 15px;
		height: 15px;
		margin-right: 6rpx;
	}

	.starGray {
		background: url(../../static/icon/star_greey.png) no-repeat;
		background-size: contain;
	}

	.starLight {
		background: url(../../static/icon/star_light.png) no-repeat;
		background-size: contain;
	}

	.quesheng {
		text-align: center;
		margin-top: 0rpx;
		color: #8b8a91;
	}

	.pingjia {
		background-color: #f5f5f5;
		border-radius: 20rpx;
		// margin-top: 20rpx;
		padding: 30rpx 30rpx 20rpx;

	}

	.pingjiaBox {
		color: #555;
		margin-bottom: 20rpx;
	}

	.flexbox {
		display: flex;
	}

	.contentBox {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 10rpx 30rpx 6rpx;

		.content {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-top: 10rpx;
		}

		.time {
			font-size: 24rpx;
			color: #999;
			padding-top: 6rpx;
			float: right;
		}
	}

	.spbh {
		padding-bottom: 10rpx;
		font-size: 26rpx;
		padding: 0 10rpx;
	}

	.spbhimg {
		width: 40px;
		overflow: hidden;
		text-align: center;

		image {
			width: 40px !important;
			padding: 3px;
			height: 40px !important;
			border: 1px solid #eee;
			border-radius: 6rpx;
			overflow: hidden;
		}

	}

	.username {
		margin-left: 10rpx;
	}

	.price {
		margin-left: 5px;
		color: #ffa200;
		font-weight: bold;
	}

	.nowrap {
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
	}

	.touxiang {
		width: 40px;
		overflow: hidden;
		text-align: center;

		image {
			width: 40px !important;
			padding: 3px;
			height: 40px !important;
			border: 1px solid #eee;
			border-radius: 64px;
			overflow: hidden;
			;
		}

		.username {
			font-size: 24rpx;
			color: #999;
			margin-top: 6rpx;
		}
	}

	.aligncenter {
		align-items: center;
	}

	.xiangqing {
		overflow: hidden;
		overflow-x: hidden;

		img {
			display: block;
			max-width: 100%;
		}

		p {
			max-width: 100%;
		}
	}

	.goods_nav {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.SoldNumber {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
		font-weight: 400;
	}

	.bookInfo {
		// padding: 20px 10px;
		// line-height: 30rpx;
		// background-color: #fff;
		font-size: 26rpx;
		color: #555;
		// border-radius: 20rpx 20rpx 0 0
	}

	.header {
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 999;
	}

	.contentButton {
		// margin: 10px 0;
	}

	.swiperBox {
		width: 100%;
		height: 375px;
		margin-top: 150rpx;
	}

	.commodityContent {
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
		height: auto;
		font-size: 26rpx;

		.commodityPrice {
			// background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
			// border-top: 1px solid #fff;
			// background-color: #f7faf9;
			// border-top-left-radius: 20rpx;
			// border-top-right-radius: 20rpx;
			color: #ffa200;
			padding: 0rpx 0rpx 0rpx 16rpx;

			em {
				font-size: 40rpx;
				font-style: normal;
			}

			.oldPrice {
				background-color: #ff000013;
				;
				padding: 4rpx 14rpx;
				border-radius: 20rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #ff0000;
			}
		}

		.commodityyName {
			margin-top: -20rpx;
			padding: 30rpx 20rpx 40rpx 20rpx;
			font-size: 40rpx;
			font-weight: 600;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #fff;
		}

		.commodityIntroduce {
			font-size: 30rpx;
			// background-color: #fff;
			// padding: 0 20rpx 30rpx 20rpx;
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0%;

		.shopcard {
			margin: 0 0 0 30rpx;
			text-align: center;
			font-size: 20rpx;
			color: #eba00b;
		}

		.operate {
			display: flex;

			view {
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
				padding: 32rpx 40rpx;
				letter-spacing: 0.8px;
			}

			.addShopCar {
				background-color: #eba00b;
			}

			.goBuy {

				background-color: #cf3906;
			}
		}
	}
</style>