<template>
	<view style="font-size: 28upx;padding-top: 75rpx;">
		<view v-if="pageNum==1">
			<view v-if="selected==1">
				<view class="home_bg">
					<view class="" style=" ">
						<view class="icon_hua">
							<image src="../../static/logo.png" mode="aspectFit" class="icon_hua_1"></image>
						</view>
						<!-- <view class="hehan">
							<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
						</view> -->

					</view>
				</view>

				<view class="head_line" style="background-color: #fff;">
					<b></b>
					<text>新书上市</text>
					<!-- <i @click="onBookMore('New')">查看更多 ></i> -->
				</view>

				<view class="newBook">
					<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10"
						style="margin-top: 0 !important;">
						<view :class="['item']" v-for="(item,index) in newBookList" :key="index">
							<view class="videoBox" @click="goDetail(item.productId)">
								<image v-if="item.productImages != ''" :src="item.productImages" mode="scaleToFill">
								</image>
								<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
							</view>
							<text class="bookName">{{item.productName}}</text>
						</view>
					</scroll-view>
				</view>


				<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="0">
					<view class="ProTabs">
						<text v-for="item in tagList" :key="item.splId" :class="[tabsid == item.splId ? 'cur' :'']"
							@click="tabsChange(item)">{{item.labelName}}</text>
					</view>
				</scroll-view>
				<!-- 商品展示 -->
				<view class="goods">
					<!-- 精选 -->
					<view class="">
						<view v-if="tjProList.length > 0">
							<view class="flexbox" style="flex-wrap: wrap;">
								<view class="goodsItem" v-for="(item,index) in tjProList" :key="index"
									@click="goDetail(item.productId)">
									<image :src="item.productImages" mode="" class="goodsImg"></image>
									<view class="goodsContent">
										<view class="goodsName">
											{{item.productName}}
										</view>
										<view class="goodsPrice">
											<span class="price"
												v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</span>
											<span class="price" v-else>￥{{item.price}}</span>
											<span class="Salesnum">已售：{{item.sumSales}} 件</span>
										</view>
									</view>
								</view>
							</view>
							<view class="">
								<view v-if="status==0" style="text-align: center;">
									<u-loading-icon style="display: inline-block;"></u-loading-icon>
									<font
										style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>
										努力加载中
									</font>
								</view>
								<view v-if="status==1">
									<u-divider text="全部加载完成"></u-divider>
								</view>
							</view>
						</view>
						<u-divider v-else text="暂无数据哦~"></u-divider>

					</view>

				</view>
			</view>
			<view v-if="selected==4" style="padding: 0 40rpx;font-size: 28rpx;">
				<view style="height: 50rpx;"></view>
				<view class="per_mes">

					<image src="../../static/icon/home_icon_1.png" class="per_mes_img"></image>
					<view @click="onLoginJump">
						<text class="name">点击登录</text>

					</view>
					<br clear="both">
				</view>

				<view class="xiugai">
					<view class="nav_list" @click="newOnShare">
						<text>分享App</text>
					</view>
					<view class="nav_list" @click="onPageJump('../peanut/aboutUs')">
						<text>关于我们</text>
					</view>

				</view>
			</view>


			<view>
				<view class="footer_box footer_bg">
					<view class="footer_item">
						<view class="footer_nav_item" @click="selected=1">
							<image v-if="selected == 1" class="footer_nav_item_image footer_nav_item_image_scale"
								src="/static/tab/icon1_y.png" mode="aspectFit"></image>
							<image v-else class="footer_nav_item_image" src="/static/tab/icon1_n.png" mode="aspectFit">
							</image>
							<text class="footer_nav_item_text"
								:class="[selected == 1 ? 'footer_item_text_active' : '']">首页</text>
						</view>
					</view>
					<view class="footer_item">
						<view class="footer_nav_item" @click="onYouAlert()">
							<image class="footer_nav_item_image" src="/static/tab/order.png" mode="aspectFit"></image>
							<text class="footer_nav_item_text">我的订单</text>
						</view>
					</view>
					<view class="footer_item">
						<view class="footer_nav_item" @click="onYouAlert()">
							<image class="footer_nav_item_image" src="/static/tab/tab_nor_03.png" mode="aspectFit"></image>
							<text class="footer_nav_item_text">太湖公益</text>
						</view>
					</view>
					<view class="footer_item">
						<view class="footer_nav_item" @click="selected=4">
							<image v-if="selected == 4" class="footer_nav_item_image footer_nav_item_image_scale"
								src="/static/tab/icon4_y.png" mode="aspectFit"></image>
							<image v-else class="footer_nav_item_image" src="/static/tab/tab_nor_04.png" mode="aspectFit">
							</image>
							<text class="footer_nav_item_text"
								:class="[selected == 4 ? 'footer_item_text_active' : '']">我的</text>
						</view>
					</view>
				</view>
				<view class="footer_station"></view>

			</view>

		</view>

		<view v-if="pageNum==2">
			<view class="shXiang">
				<image src="../../static/icon/me_lise_more.png" @click="pageNum=1"></image>
				<view style="height: 20rpx;"></view>
				<view>商品详情</view>
			</view>
			<view style="height: 80rpx;"></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]&&iosHide" 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="onYouAlert()"></u-icon>
								<u-icon v-else name="volume" color="#71d5a1" size="24"
									@click="onYouAlert()"></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">
							<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>
				<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>
			<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="onYouAlert" />
		</view>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share @select="haveSelected"></uni-popup-share>
		</uni-popup>

		<!-- 登录弹窗 -->
		<u-modal :show="youkeShow" @confirm="onLoginJump" @cancel="youkeShow=false" :show-cancel-button="true"
			cancel-text="再逛逛~" confirm-text="去登录">
			<view>
				您还未登录，请先登录~
			</view>
		</u-modal>
		<!-- <z-navigation></z-navigation> -->
	</view>

</template>

<script>
	import $http from '@/config/requestConfig.js';
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import {

	} from 'vuex';
	export default {
		data() {
			return {
				selected: 1,
				pageNum: 1,
				newBookList: [],
				tjProList: [],
				tagList: [], // 推荐标签列表
				loadingNow: false,
				pageSize: 10,
				page: 1,
				totalPage: 0,
				status: 3,
				path: '',
				youkeShow: false,
				contentShow: 0,
				swiperlist: [],
				productInfo: {},
				listenList: [],
				linkProducts: [],
				commentsList: [],
				options: [],	
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				contentButtonList: [{
						name: '商品详情'
					},
					{
						name: '商品评价'
					}
				],
			};
		},

		//第一次加载
		onLoad(e) {


		},
		onHide() {
			this.page = 1
			this.tjProList = []
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			// uni.hideTabBar();
			this.tjProList = []
			this.getData();
			this.getTags()
		},
		// 页面加载完毕
		onReady() {
			// this.requestIapOrder()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.tjProList = []
			this.getData()
			this.getTags()
			uni.stopPullDownRefresh()

		},
		onReachBottom() {
			this.loadingNow = true
			console.log('到底了')
			if (this.page + 1 <= this.totalPage) {
				this.status = 0
				this.page++
				this.getJtData()
			} else {
				this.status = 1
			}

		},

		filters: {
			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;
			},
		},

		//方法
		methods: {
			// 获取列表数据
			getData() {
				this.getNewBook()
			},


			// 新书上市
			getNewBook() {
				this.$http
					.post('visitor/getNewBook', {
						'limit': 4,
						'page': 1
					})
					.then(res => {
						// console.log(res, 'xinshu')
						this.newBookList = res.page.list
					}).catch(e => {
						console.log(e, '新书上市报错')
					});
			},

			// 获取商品标签
			getTags() {
				this.loadingNow = false
				this.$http
					.post('visitor/getLabels')
					.then(res => {
						console.log(res, '标签列表')
						if (res.code == 0 && res.result.labels.length > 0) {
							this.tagList = res.result.labels
							this.tabsid = this.tagList[0].splId
							this.getJtData()
						}
					}).catch(e => {
						console.log(e, 'e')
					});
			},

			tabsChange(item) {
				this.tjProList = []
				this.tabsid = item.splId
				this.page = 1
				// 获取推荐数据
				this.getJtData()
			},
			getJtData() {
				this.$http
					.post('visitor/getProductsByLabel', {
						'splId': this.tabsid,
						'limit': this.pageSize,
						'page': this.page
					})
					.then(res => {
						if (res.code == 0 && res.page.records.length > 0) {
							this.tjProList = this.tjProList.concat(res.page.records)
							this.totalPage = res.page.pages
							this.status = 3
							// console.log(this.tjProList, '按标签检索结果')
						} else {
							this.tjProList = []
							this.totalPage = 0
						}
					}).catch(e => {
						console.log(e, '标签检索报错')
					});
			},

			// 页面跳转跳转
			onPageJump(e) {
				uni.navigateTo({
					url: e
				});
			},

			// 商品详情页
			goDetail(id) {
				this.pageNum = 2
				// 获取商品详情
				uni.showLoading({
					title: '加载中'
				});
				this.swiperlist=[]
				this.$http
					.post('/visitor/info/' + id)
					.then(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(",")
							for (var i = 0; i < imgList.length; i++) {
								this.swiperlist.push(imgList[i])
							}
						}
						uni.hideLoading();
					}).catch(e => {
						uni.hideLoading();
						if (e.msg == '该商品不存在，看看其他商品吧') {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000)
						}
					})


				// 获取评价详情
				$http.request({
						url: "visitor/All",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档1
						data: {
							'bookid': id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							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)
								item1.phtml = pjstr
								item1.zphtml = zpstr
								newarr.push(item1)
							})
							this.commentsList = newarr
						}
					})
			},


			// 获取html格式的评论1
			getHtmlComment(comment) {
				// 格式化html
				// 这里处理 链接   换行符
				let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					var indexss = emojiList1.findIndex(item1 => item1.alt === item)
					return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
						'" width="18rpx">';
				});
				return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
			},


			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;
			},

			contentButtonClick(e) {
				this.contentShow = e.index
			},

			// 分享
			newOnShare() {
				this.$refs.share.open()
			},


			haveSelected(data) {
				if (data.index == 0) {
					// 分享到好友
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.$apkUrl,
						title: "吴门医述",
						summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
						imageUrl: "static/icon/home_icon_logo.png",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (data.index == 1) {
					// 分享到朋友圈
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: this.$apkUrl,
						title: "吴门医述",
						summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
						imageUrl: "static/icon/home_icon_logo.png",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},



			// 游客跳转
			onYouAlert() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '请先登录'
				// })
				this.youkeShow = true
			},


			// 点击去登录
			onLoginJump(e) {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			},


		},

	};
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.flexbox {
		display: flex;
	}

	.aligncenter {
		align-items: center;
	}

	.home_bg {
		background-image: url('@/static/icon/home_bg.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20rpx;
		position: relative;

		.icon_hua_1 {
			width: 100%;
			text-align: center;
			height: 80rpx;

			image {
				width: 150rpx;
				height: 80rpx;
			}
		}

		.icon_hua {
			width: 100%;
			text-align: center;
			display: block;

			image {
				width: 150rpx;
				height: 150rpx;
				margin: 0 auto;
			}
		}


	}

	.head_line {
		padding-top: 8rpx;
		margin: 12rpx 0 0 0;


		b {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background-color: #54a966;
			vertical-align: bottom;
			margin: 0 20rpx 0 0;
		}

		text {
			font-size: 32rpx;
			font-weight: bold;
		}

		i {
			float: right;
			font-style: normal;
			color: #8b8a91;
			font-size: 24rpx;
			margin: 5rpx 35rpx 0 0;
		}
	}


	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
		margin-top: 12rpx;

		.item {
			padding: 10rpx;
			overflow: hidden;
			display: inline-block;
			padding-bottom: 0;
			width: 180rpx !important;
			margin-right: 20rpx;
			border-radius: 10rpx;

			.videoBox {
				image {
					display: block;
					width: 150rpx;
					height: 170rpx;
				}
			}

			.bookName {
				display: block;
				margin-top: 6rpx;
				color: #666;
				font-size: 24rpx;
				white-space: nowrap;
				overflow-x: hidden;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		// .item.active{margin-right: 20rpx; border: 1px solid #55aa00;  border-radius: 10rpx;}
	}



	.ProTabs {
		// margin: 20rpx 0; 
		padding: 0 20rpx;

		text {
			padding: 8rpx 14rpx;
			font-size: 32rpx;
			display: inline-block;
			border-radius: 10rpx;
			overflow: hidden;
			// background-color: #eee;
			color: #55aa7f;
			margin-right: 10rpx;
		}

		text.cur {
			background-color: #55aa7f;
			color: #fff;
		}
	}

	.goods {
		width: 100%;
		margin: 0 0 50rpx 0;
		background-color: #fff;

		.goodsItem {
			display: inline-block;
			width: 46%;
			border-radius: 20rpx;
			padding: 25rpx;
			padding-bottom: 5rpx;
			margin: 0 20rpx 20rpx 20rpx;
			background-color: #fff;
			border: 1px solid #eee;

			.goodsImg {
				width: 98%;
				height: 380rpx;
				border-radius: 10rpx;
			}

			.goodsContent {

				.goodsName {
					margin-top: 10rpx;
					font-size: 28rpx;
					// font-weight: bold;
				}

				.goodsPrice {
					font-size: 28rpx;
					margin: 5rpx 0 0 3rpx;
					display: flex;
					justify-content: space-between;

					.price {
						font-weight: bold;
						color: #ff0000;
					}

					.Salesnum {
						color: #9b9b9b;
					}
				}
			}
		}

		.goodsItem:nth-child(2n) {
			margin-left: 0;
		}
	}

	.per_mes {
		margin: 0 0 50rpx 0;
		align-items: center;

		.per_mes_img {
			width: 120upx;
			height: 120upx;
			background-color: #fff;
			border-radius: 120upx;
			margin: 0 30upx 0 0;
			float: left;
		}

		view {
			float: left;
			margin-top: 20rpx;

			.name {
				display: inline-block;
				font-weight: bold;
				font-size: 38upx;
				margin-bottom: 10rpx;
			}

			.tong {
				color: #999;
				font-size: 25upx;
			}

			.per_user_img {
				display: inline-block;
				width: 40upx;
				height: 40upx;
				margin-left: 10rpx;
				vertical-align: super;
			}
		}


	}

	.shXiang {
		background-color: #fff;
		height: 80rpx;
		text-align: center;
		position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		z-index: 100;

		view {
			font-weight: bold;
			font-size: 32rpx;
		}

		image {
			width: 18rpx;
			height: 25rpx;
			transform: scale(-1);
			position: fixed;
			top: 105rpx;
			left: 40rpx;
		}
	}


	.xiugai {

		.nav_list {
			background-color: #fff;
			padding: 30upx 0 30upx 20upx;
			display: flex;
			align-items: center;
			position: relative;
			font-weight: bold;
			border-bottom: 1px solid #e5e5e5;

			&:active {
				background-color: #f5f5f5;
			}

			text {
				color: #333;
				margin-left: 10rpx;
			}

			&::after {
				content: '';
				position: absolute;
				right: 20upx;
				top: 50%;
				transform: translateY(-50%);
				width: 40upx;
				height: 40upx;
				background-image: url('../../static/icon/icon_right.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.nav_list:nth-last-child(1) {
			border-bottom: 0;
		}
	}


	.swiperBox {
		width: 100%;
		height: 375px;

	}

	.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;

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

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


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

			.pingjiaBox {
				color: #555;
				margin-bottom: 20rpx;
			}
			
			.touxiang {
				width: 100rpx;
				overflow: hidden;
				text-align: center;
			
				image {
					width: 40px !important;
					padding: 3px;
					height: 40px !important;
					border: 1px solid #eee;
					border-radius: 64px;
					overflow: hidden;
					margin: 0 auto;
				}
			
				.username {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}
			
			.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;
				}
			}
			
			.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;
			}

		}


		.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;
			}

		}

	}

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


	.footer_station {
		height: 110rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_box {
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		z-index: 502;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_bg {
		background-color: #FFF;
		box-shadow: 0 0px 10px 1px #0000001a;
	}

	.footer_item {
		position: relative;
		flex: 1;
	}

	.footer_nav_item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.footer_nav_item:active {
		background-color: rgba($color: #fff, $alpha: 0.1);
	}

	.footer_nav_item_text {
		font-size: 26rpx;
		color: #909090;
		margin-top: 6rpx;
	}

	.footer_nav_item_text_active {
		color: #f9a633;
	}

	.footer_nav_item_image {
		width: 50rpx;
		height: 50rpx;

	}

	.footer_nav_item_image_scale {
		animation: mescrollUpRotate 0.6s linear 1;
	}

	@keyframes mescrollUpRotate {
		0% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}



	.footer_item_text_active {
		color: #258feb;
		font-weight: bold;
	}
</style>