From 808b1214aec0d75c19a1c2c4d8b6de4fd247e41b Mon Sep 17 00:00:00 2001
From: java110 <928255095@qq.com>
Date: Wed, 28 Oct 2020 23:51:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/goods/goodsApi.js                    |   26 +
 components/vc-price/vc-price.vue         |   14 -
 components/vc-recommend/vc-recommend.vue |    2 +-
 components/vc-sku/vc-sku.vue             |    6 +-
 constant/url.js                          |    1 +
 pages/goodDetail/goodDetail.vue          | 1161 +++++++++++-----------
 6 files changed, 596 insertions(+), 614 deletions(-)

diff --git a/api/goods/goodsApi.js b/api/goods/goodsApi.js
index a8dc995..75ff320 100644
--- a/api/goods/goodsApi.js
+++ b/api/goods/goodsApi.js
@@ -56,3 +56,29 @@ export function getGroupBuyProduct(dataObj) {
 		})
 }
 
+/**
+ * 查询产品
+ */
+export function getProduct(dataObj) {
+	return new Promise(
+		(resolve, reject) => {
+			requestNoAuth({
+				url: url.queryProduct,
+				method: "GET",
+				data: dataObj,
+				//动态数据
+				success: function(res) {
+					if (res.statusCode == 200) {
+						let _products = res.data.data;
+						resolve(_products);
+						return;
+					}
+					reject();
+				},
+				fail: function(e) {
+					reject();
+				}
+			});
+		})
+}
+
diff --git a/components/vc-price/vc-price.vue b/components/vc-price/vc-price.vue
index d7f3b06..0b06ec2 100644
--- a/components/vc-price/vc-price.vue
+++ b/components/vc-price/vc-price.vue
@@ -16,20 +16,6 @@
 				<view class="express"></view>
 			</view>
 		</view>
-		<!-- 积分商品 -->
-		<view class="score-price-card" v-if="type === 'score'">
-			<view class="x-f">
-				<image class="score-img" src="http://shopro.7wpp.com/imgs/score.png" mode=""></image>
-				<text class="price">{{ detail.price }}</text>
-			</view>
-			<view class="x-bc price-bottom-box">
-				<view class="x-f">
-					<view class="original-price">价值：￥{{ detail.original_price }}</view>
-					<text class="line"></text>
-					<view class="sold">已兑换：{{ detail.sales }}件</view>
-				</view>
-			</view>
-		</view>
 		<!-- 团购商品 -->
 		<view class="groupon-price-box" v-if="detail.activity && detail.activity.type === 'groupon'">
 			<view class="">
diff --git a/components/vc-recommend/vc-recommend.vue b/components/vc-recommend/vc-recommend.vue
index 5c23a25..51e3902 100644
--- a/components/vc-recommend/vc-recommend.vue
+++ b/components/vc-recommend/vc-recommend.vue
@@ -5,7 +5,7 @@
 		</view>
 
 		<view class="grid margin-bottom text-center col-2">
-			<view class="padding-lr-xs margin-top-xs " v-for="(item,indexs) in products" :key="indexs">
+			<view class="padding-lr-xs margin-top-xs margin-bottom-sm" v-for="(item,indexs) in products" :key="indexs">
 				<view class="padding bg-white goods" @tap="_toGoodsDetail(item)">
 					<view>
 						<image class="goods-image" :src="item.coverPhoto"></image>
diff --git a/components/vc-sku/vc-sku.vue b/components/vc-sku/vc-sku.vue
index abb833a..aac9ce7 100644
--- a/components/vc-sku/vc-sku.vue
+++ b/components/vc-sku/vc-sku.vue
@@ -68,7 +68,7 @@
 import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
 import { mapMutations, mapActions, mapState } from 'vuex';
 export default {
-	name: 'shoproSku',
+	name: 'vcSku',
 	components: {
 		uniNumberBox
 	},
@@ -276,6 +276,10 @@ export default {
 		// 当前所选规格下，获取所有有库存的 skuPrice
 		getCanUseSkuPrice() {
 			let newPrice = [];
+			
+			if(this.skuPrice == undefined){
+				return newPrice;
+			}
 
 			for (let price of this.skuPrice) {
 				if (price.stock <= 0) {
diff --git a/constant/url.js b/constant/url.js
index 9fd3955..38a3fb8 100644
--- a/constant/url.js
+++ b/constant/url.js
@@ -93,6 +93,7 @@ export default {
 	queryActivitiesType: baseUrl +'app/activitiesType/queryActivitiesType',
 	queryProductLabel: baseUrl +'app/product/queryProductLabel',
 	queryGroupBuyProduct: baseUrl +'app/groupBuy/queryGroupBuyProduct',
+	queryProduct: baseUrl +'app/product/queryProduct',
 	
 	NEED_NOT_LOGIN_PAGE: [
 		'/pages/login/login',
diff --git a/pages/goodDetail/goodDetail.vue b/pages/goodDetail/goodDetail.vue
index 8c03cb9..8ee7719 100644
--- a/pages/goodDetail/goodDetail.vue
+++ b/pages/goodDetail/goodDetail.vue
@@ -1,16 +1,17 @@
 <template>
 	<view class="box">
-		
+
 		<view class="detail_box shopro-selector">
 			<view class="detail-content">
 				<view class="goodes_detail_swiper-box">
 					<!-- 详情轮播 -->
 					<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
-						<swiper-item @tap="tools.previewImage(goodsInfo.images, swiperCurrent)" v-for="(img, index) in goodsInfo.images" :key="index" class="carousel-item">
-							<image class="swiper-image shopro-selector-rect" :src="img" mode="aspectFill" lazy-load></image>
+						<swiper-item @tap="tools.previewImage(goodsInfo.carouselFigurePhotos, swiperCurrent)" v-for="(img, index) in goodsInfo.carouselFigurePhotos"
+						 :key="index" class="carousel-item">
+							<image class="swiper-image shopro-selector-rect" :src="baseUrl+img" mode="aspectFill" lazy-load></image>
 						</swiper-item>
 					</swiper>
-					<view v-if="goodsInfo.images" class="swiper-dots">{{ swiperCurrent + 1 }} / {{ goodsInfo.images.length }}</view>
+					<view v-if="goodsInfo.carouselFigurePhotos" class="swiper-dots">{{ swiperCurrent + 1 }} / {{ goodsInfo.carouselFigurePhotos.length }}</view>
 				</view>
 
 				<!-- 价格卡片组 -->
@@ -18,11 +19,7 @@
 				<view class="goods-title more-t">{{ goodsInfo.title }}</view>
 				<view class="sub-title more-t">{{ goodsInfo.subtitle }}</view>
 				<!-- 规格选择 -->
-				<view
-					class="sku-box shopro-selector-rect"
-					@tap="showSku = true"
-					v-if="activityRules.status !== 'waiting' && checkActivity(goodsInfo.activity_type, 'groupon') && goodsInfo.is_sku"
-				>
+				<view class="sku-box shopro-selector-rect" @tap="showSku = true" v-if="activityRules.status !== 'waiting' && checkActivity(goodsInfo.activity_type, 'groupon') && goodsInfo.is_sku">
 					<view class="x-bc">
 						<view class="x-f">
 							<text class="title">规格</text>
@@ -31,25 +28,16 @@
 						<text class="cuIcon-right"></text>
 					</view>
 				</view>
-				<vc-sku
-					v-model="showSku"
-					:goodsInfo="goodsInfo"
-					:buyType="goodsInfo.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
-					:grouponBuyType="grouponBuyType"
-					:goodsType="detailType === 'score' ? 'score' : 'goods'"
-					@changeType="changeType"
-					@getSkuText="getSkuText"
-				></vc-sku>
+				<vc-sku v-model="showSku" :goodsInfo="goodsInfo" :buyType="goodsInfo.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
+				 :grouponBuyType="grouponBuyType" :goodsType="detailType === 'score' ? 'score' : 'goods'" @changeType="changeType"
+				 @getSkuText="getSkuText"></vc-sku>
 				<!-- 服务 -->
 				<vc-serve v-if="goodsInfo.service.length" v-model="showServe" :serveList="goodsInfo.service"></vc-serve>
-			
-		
+
+
 				<!-- 拼团玩法 -->
-				<view
-					v-if="goodsInfo.activity && !!goodsInfo.activity.richtext_id && goodsInfo.activity_type !== 'seckill'"
-					class="groupon-play x-bc px20"
-					@tap="jump('/pages/public/richtext', { id: goodsInfo.activity.richtext_id })"
-				>
+				<view v-if="goodsInfo.activity && !!goodsInfo.activity.richtext_id && goodsInfo.activity_type !== 'seckill'" class="groupon-play x-bc px20"
+				 @tap="jump('/pages/public/richtext', { id: goodsInfo.activity.richtext_id })">
 					<view class="x-f">
 						<text class="title">玩法</text>
 						<view class="description one-t">{{ goodsInfo.activity.richtext_title || '开团/参团·邀请好友·人满发货（不满退款' }}</view>
@@ -68,7 +56,9 @@
 						</view>
 					</view>
 					<view class="tab-detail pb20">
-						<view class="rich-box" v-show="tabCurrent === 'tab0'"><uni-parser :html="goodsInfo.content"></uni-parser></view>
+						<view class="rich-box" v-show="tabCurrent === 'tab0'">
+							<uni-parser :html="goodsInfo.content"></uni-parser>
+						</view>
 						<view class="goods-size" v-if="tabCurrent === 'tab1'">
 							<view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
 								<view class="t-tr x-f" v-for="t in goodsInfo.params" :key="t.title">
@@ -78,8 +68,12 @@
 							</view>
 						</view>
 						<view class="goods-comment" v-if="tabCurrent === 'tab2'">
-							<block v-for="comment in commentList" :key="comment.id"><sh-comment :comment="comment"></sh-comment></block>
-							<view class="empty-box x-c" v-if="!commentList.length"><vc-empty :isFixed="false" :emptyData="emptyData"></vc-empty></view>
+							<block v-for="comment in commentList" :key="comment.id">
+								<sh-comment :comment="comment"></sh-comment>
+							</block>
+							<view class="empty-box x-c" v-if="!commentList.length">
+								<vc-empty :isFixed="false" :emptyData="emptyData"></vc-empty>
+							</view>
 							<view class="more-box x-c" v-if="commentList.length">
 								<button class="cu-btn more-btn x-f" @tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })">
 									查看全部
@@ -106,11 +100,8 @@
 			<view class="detail-foot_box  x-f" v-if="!showSku && !showServe && detailType !== 'score'">
 				<view class="left x-f">
 					<view class="tools-item y-f" @tap="onFavorite(goodsInfo.id)">
-						<image
-							class="tool-img"
-							:src="Boolean(goodsInfo.favorite) ? 'http://shopro.7wpp.com/imgs/favorite_end.png' : 'http://shopro.7wpp.com/imgs/favorite.png'"
-							mode=""
-						></image>
+						<image class="tool-img" :src="Boolean(goodsInfo.favorite) ? 'http://shopro.7wpp.com/imgs/favorite_end.png' : 'http://shopro.7wpp.com/imgs/favorite.png'"
+						 mode=""></image>
 						<text class="tool-title">收藏</text>
 					</view>
 					<view class="tools-item y-f" @tap="onShare">
@@ -132,7 +123,8 @@
 								<text class="price">￥{{ goodsInfo.price }}</text>
 								<text class="price-title">单独购买</text>
 							</button>
-							<button class="cu-btn tool-btn groupon-btn y-f" :style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''" @tap="payGroupon('groupon')">
+							<button class="cu-btn tool-btn groupon-btn y-f" :style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''"
+							 @tap="payGroupon('groupon')">
 								<text class="price">￥{{ goodsInfo.groupon_price }}</text>
 								<text class="price-title">我要开团</text>
 							</button>
@@ -140,641 +132,614 @@
 					</view>
 				</view>
 			</view>
-			
+
 		</view>
 	</view>
 </template>
 
 <script>
-import vcPrice from '@/components/vc-price/vc-price.vue';
-import vcServe from '@/components/vc-serve/vc-serve.vue';
+	import vcPrice from '@/components/vc-price/vc-price.vue';
+	import vcServe from '@/components/vc-serve/vc-serve.vue';
 
-import vcComment from '@/components/vc-comment/vc-comment.vue';
-import vcSku from '@/components/vc-sku/vc-sku.vue';
+	import vcComment from '@/components/vc-comment/vc-comment.vue';
+	import vcSku from '@/components/vc-sku/vc-sku.vue';
 
-import vcEmpty from '@/components/vc-empty/vc-empty.vue';
-import { mapMutations, mapActions, mapState } from 'vuex';
-export default {
-	components: {
-		vcServe,
-		vcPrice,
-		vcSku,
-		vcComment,
-		vcEmpty
-	},
-	data() {
-		return {
-			currentSkuText: '', //选中规格
-			detailType: '',
-			showShare: false,
-			buyType: 'sku',
-			grouponBuyType: 'alone', //拼团购买方式。
-			showSku: false,
-			showServe: false,
-			tools: this.$tools,
-			goodsInfo: {},
-			commentList: [], //商品评价列表
-			commentNum: 0, //商品评价总数
-			favorite: false,
-			activityRules: {},
-			currentSkuList: [],
-			confirmGoodsInfo: {},
-			swiperCurrent: 0, //轮播下标
-			tabCurrent: 'tab0',
-			emptyData: {
-				img: '/static/imgs/empty/comment_empty.png',
-				tip: '暂无评价~'
+	import vcEmpty from '@/components/vc-empty/vc-empty.vue';
+
+	import {
+		getProduct
+	} from '../../api/goods/goodsApi.js'
+	
+	import conf from '../../conf/config.js'
+	import {
+		mapMutations,
+		mapActions,
+		mapState
+	} from 'vuex';
+	export default {
+		components: {
+			vcServe,
+			vcPrice,
+			vcSku,
+			vcComment,
+			vcEmpty
+		},
+		data() {
+			return {
+				productId: '',
+				baseUrl:conf.baseUrl,
+				currentSkuText: '', //选中规格
+				detailType: '',
+				showShare: false,
+				buyType: 'sku',
+				grouponBuyType: 'alone', //拼团购买方式。
+				showSku: false,
+				showServe: false,
+				tools: this.$tools,
+				goodsInfo: {},
+				commentList: [], //商品评价列表
+				commentNum: 0, //商品评价总数
+				favorite: false,
+				activityRules: {},
+				currentSkuList: [],
+				confirmGoodsInfo: {},
+				swiperCurrent: 0, //轮播下标
+				tabCurrent: 'tab0',
+				emptyData: {
+					img: '/static/imgs/empty/comment_empty.png',
+					tip: '暂无评价~'
+				},
+				tabList: [{
+						id: 'tab0',
+						title: '商品详情'
+					},
+					{
+						id: 'tab1',
+						title: '规格参数'
+					},
+					{
+						id: 'tab2',
+						title: '用户评价'
+					}
+				]
+			};
+		},
+		computed: {},
+		onLoad(options) {
+			this.productId = options.productId;
+
+			this.getGoodsDetail();
+
+		},
+		onReady() {},
+		methods: {
+			getActivityRules(e) {
+				if (e) {
+					this.activityRules = JSON.parse(e);
+				}
 			},
-			tabList: [
-				{
-					id: 'tab0',
-					title: '商品详情'
-				},
-				{
-					id: 'tab1',
-					title: '规格参数'
-				},
-				{
-					id: 'tab2',
-					title: '用户评价'
+			// 检测
+			checkActivity(data, type) {
+				if (data) {
+					return !data.includes(type);
 				}
-			]
-		};
-	},
-	computed: {},
-	onLoad() {
-		const type = this.$Route.query.type;
-		this.detailType = type;
-		switch (type) {
-			case 'score':
-				this.getScoreDetail();
-				break;
-			default:
-				this.getGoodsDetail();
-		}
-	},
-	onReady() {},
-	methods: {
-		getActivityRules(e) {
-			if (e) {
-				this.activityRules = JSON.parse(e);
-			}
-		},
-		// 检测
-		checkActivity(data, type) {
-			if (data) {
-				return !data.includes(type);
-			}
-			return true;
-		},
-		// 路由跳转
-		jump(path, parmas) {
-			this.showShare = false;
-			this.$Router.push({
-				path: path,
-				query: parmas
-			});
-		},
-		// 回到首页
-		goHome() {
-			this.$tools.routerTo('/pages/index/index');
-		},
-		// 轮播图切换
-		swiperChange(e) {
-			const index = e.detail.current;
-			this.swiperCurrent = index;
-		},
-		// 选项卡
-		onTab(id) {
-			this.tabCurrent = id;
-		},
-		// 积分详情
-		getScoreDetail() {
-			this.$api('score.detail', {
-				id: this.$Route.query.id
-			}).then(res => {
-				if (res.code === 1) {
-					this.goodsInfo = res.data;
+				return true;
+			},
+			// 路由跳转
+			jump(path, parmas) {
+				this.showShare = false;
+				this.$Router.push({
+					path: path,
+					query: parmas
+				});
+			},
+			// 轮播图切换
+			swiperChange(e) {
+				const index = e.detail.current;
+				this.swiperCurrent = index;
+			},
+			// 选项卡
+			onTab(id) {
+				this.tabCurrent = id;
+			},
+			// 商品详情
+			getGoodsDetail() {
+				let that = this;
+				let _data = {
+					page: 1,
+					row: 1,
+					productId: this.productId
 				}
-			});
-		},
-		// 商品详情
-		getGoodsDetail() {
-			let that = this;
-			that.$api('goods.detail', {
-				id: that.$Route.query.id
-			}).then(res => {
-				if (res.code === 1) {
-					that.goodsInfo = res.data;
-					that.getCommentList();
-					that.setShareInfo({
-						query: {
-							url: 'goods-' + that.$Route.query.id
-						},
-						title: that.goodsInfo.title,
-						image: that.goodsInfo.image
+				getProduct(_data)
+					.then(_product => {
+						that.goodsInfo = _product[0];
 					});
-				}
-				if (res.code == 0) {
-					that.$tools.toast(res.msg);
-				}
-			});
-		},
-		// 商品评论
-		getCommentList() {
-			let that = this;
-			that.$api('goods_comment.list', {
-				goods_id: that.goodsInfo.id,
-				per_page: 3,
-				type: 'all'
-			}).then(res => {
-				if (res.code === 1) {
-					that.commentList = res.data.data;
-					that.commentNum = res.data.total;
-				}
-			});
-		},
-		// 组件返回的type;
-		changeType(e) {
-			this.buyType = e;
-		},
-		// 组件返回的规格;
-		getSkuText(e) {
-			this.currentSkuText = e;
-		},
-		// 分享
-		onShare() {
-			this.showShare = true;
-		},
-		// 加入购物车
-		addCart() {
-			if (Boolean(uni.getStorageSync('token'))) {
-				this.buyType = 'cart';
-				this.showSku = true;
-			} else {
-				this.$store.commit('LOGIN_TIP', true);
-			}
-		},
-		// 立即购买
-		goPay() {
-			if (Boolean(uni.getStorageSync('token'))) {
-				this.buyType = 'buy';
-				this.showSku = true;
-			} else {
-				this.$store.commit('LOGIN_TIP', true);
-			}
-		},
-		// 拼团购买
-		payGroupon(type) {
-			if (Boolean(uni.getStorageSync('token'))) {
-				if (type === 'groupon') {
-					this.grouponBuyType = 'groupon';
+				that.getCommentList();
+
+			},
+			// 商品评论
+			getCommentList() {
+				let that = this;
+				that.$api('goods_comment.list', {
+					goods_id: that.goodsInfo.id,
+					per_page: 3,
+					type: 'all'
+				}).then(res => {
+					if (res.code === 1) {
+						that.commentList = res.data.data;
+						that.commentNum = res.data.total;
+					}
+				});
+			},
+			// 组件返回的type;
+			changeType(e) {
+				this.buyType = e;
+			},
+			// 组件返回的规格;
+			getSkuText(e) {
+				this.currentSkuText = e;
+			},
+			// 分享
+			onShare() {
+				this.showShare = true;
+			},
+			// 加入购物车
+			addCart() {
+				if (Boolean(uni.getStorageSync('token'))) {
+					this.buyType = 'cart';
+					this.showSku = true;
 				} else {
-					this.grouponBuyType = 'alone';
+					this.$store.commit('LOGIN_TIP', true);
 				}
-				this.buyType = 'buy';
-				this.showSku = true;
-			} else {
-				this.$store.commit('LOGIN_TIP', true);
-			}
-		},
-		// 立即秒杀。
-		goSeckill() {
-			if (Boolean(uni.getStorageSync('token'))) {
-				if (this.activityRules.status !== 'waiting') {
+			},
+			// 立即购买
+			goPay() {
+				if (Boolean(uni.getStorageSync('token'))) {
 					this.buyType = 'buy';
 					this.showSku = true;
-					console.log(this.buyType);
 				} else {
-					this.$tools.toast('秒杀暂未开始');
+					this.$store.commit('LOGIN_TIP', true);
+				}
+			},
+			// 拼团购买
+			payGroupon(type) {
+				if (Boolean(uni.getStorageSync('token'))) {
+					if (type === 'groupon') {
+						this.grouponBuyType = 'groupon';
+					} else {
+						this.grouponBuyType = 'alone';
+					}
+					this.buyType = 'buy';
+					this.showSku = true;
+				} else {
+					this.$store.commit('LOGIN_TIP', true);
+				}
+			},
+			// 立即秒杀。
+			goSeckill() {
+				if (Boolean(uni.getStorageSync('token'))) {
+					if (this.activityRules.status !== 'waiting') {
+						this.buyType = 'buy';
+						this.showSku = true;
+						console.log(this.buyType);
+					} else {
+						this.$tools.toast('秒杀暂未开始');
+					}
+				} else {
+					this.$store.commit('LOGIN_TIP', true);
 				}
-			} else {
-				this.$store.commit('LOGIN_TIP', true);
 			}
-		},
-		// 收藏
-		onFavorite(goodsId) {
-			let that = this;
-			that.$api('goods.favorite', {
-				goods_id: goodsId
-			}).then(res => {
-				if (res.code === 1) {
-					that.goodsInfo.favorite = res.data;
-					that.$tools.toast(res.msg);
-				}
-			});
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-.box {
-	padding-bottom: 100rpx;
-}
-
-// 拼团玩法
-.groupon-play {
-	height: 94rpx;
-	background: #fff;
-
-	.title {
-		font-size: 28rpx;
-		color: #999;
+	.box {
+		padding-bottom: 100rpx;
 	}
 
-	.description {
-		font-size: 28rpx;
-		margin-left: 30rpx;
+	// 拼团玩法
+	.groupon-play {
+		height: 94rpx;
+		background: #fff;
+
+		.title {
+			font-size: 28rpx;
+			color: #999;
+		}
+
+		.description {
+			font-size: 28rpx;
+			margin-left: 30rpx;
+		}
+
+		.cuIcon-right {
+			margin-left: 20rpx;
+		}
 	}
 
-	.cuIcon-right {
-		margin-left: 20rpx;
-	}
-}
-
-.load-box {
-	/deep/.skeletons_box {
-		z-index: 11;
-	}
-}
-
-.detail-content {
-	&::-webkit-scrollbar {
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
-}
-
-.sticky-box {
-	.tab-box {
-		position: -webkit-sticky;
-		position: sticky;
-		top: 0;
-		z-index: 99;
-	}
-}
-
-// 商品图片轮播
-
-.goodes_detail_swiper-box {
-	width: 750rpx;
-	height: 750rpx;
-	position: relative;
-
-	.carousel {
-		width: 750rpx;
-		height: 100%;
+	.load-box {
+		/deep/.skeletons_box {
+			z-index: 11;
+		}
 	}
 
-	.carousel-item {
-		width: 750rpx;
-		height: 100%;
+	.detail-content {
+		&::-webkit-scrollbar {
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
 	}
 
-	.swiper-image {
-		width: 750rpx;
-		height: 100%;
-		background: #ccc;
+	.sticky-box {
+		.tab-box {
+			position: -webkit-sticky;
+			position: sticky;
+			top: 0;
+			z-index: 99;
+		}
 	}
 
-	.swiper-dots {
-		display: flex;
-		position: absolute;
-		right: 20rpx;
-		bottom: 20rpx;
-		line-height: 44rpx;
-		border-radius: 22rpx;
-		padding: 0 15rpx;
-		background: rgba(#333, 0.3);
-		font-size: 28rpx;
-		color: rgba(#fff, 0.9);
-	}
-}
+	// 商品图片轮播
 
-// 规格卡片
-.sku-box {
-	line-height: 82rpx;
-	background: #fff;
-	padding: 0 20rpx;
-	margin: 20rpx 0;
-	font-size: 28rpx;
-
-	.title {
-		color: #999;
-		margin-right: 20rpx;
-	}
-
-	.cuIcon-right {
-		color: #bfbfbf;
-		font-size: 36rpx;
-	}
-}
-
-.goods-title {
-	font-size: 28rpx;
-	font-weight: 500;
-	line-height: 42rpx;
-	background-color: #fff;
-	padding-bottom: 10rpx;
-	padding: 10rpx 20rpx;
-}
-
-.sub-title {
-	padding: 0 20rpx;
-	color: #a8700d;
-	font-size: 24rpx;
-	font-weight: 500;
-	line-height: 42rpx;
-	background-color: #fff;
-	padding-bottom: 10rpx;
-}
-
-// 选项卡
-.tab-box {
-	height: 102rpx;
-	background: #fff;
-	border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
-	margin-top: 20rpx;
-
-	.tab-item {
-		flex: 1;
-		height: 100%;
+	.goodes_detail_swiper-box {
+		width: 100%;
+		height: 500rpx;
 		position: relative;
-		font-size: 30rpx;
-		font-weight: bold;
 
-		.tab-line {
-			width: 123rpx;
-			height: 4rpx;
-			left: 50%;
-			bottom: 20rpx;
-			transform: translateX(-50%);
-			background: transparent;
+		.carousel {
+			width: 100%;
+			height: 100%;
+		}
+
+		.carousel-item {
+			width: 750rpx;
+			height: 100%;
+		}
+
+		.swiper-image {
+			width: 750rpx;
+			height: 100%;
+			background: #ccc;
+		}
+
+		.swiper-dots {
+			display: flex;
 			position: absolute;
-			z-index: 2;
-		}
-
-		.line-active {
-			background: rgba(168, 112, 13, 1);
-		}
-	}
-}
-
-.tab-detail {
-	min-height: 300rpx;
-	background: #fff;
-	background: #fff;
-
-	.rich-box {
-		/deep/ img {
-			display: block;
+			right: 20rpx;
+			bottom: 20rpx;
+			line-height: 44rpx;
+			border-radius: 22rpx;
+			padding: 0 15rpx;
+			background: rgba(#333, 0.3);
+			font-size: 28rpx;
+			color: rgba(#fff, 0.9);
 		}
 	}
 
-	.goods-size {
-		padding-top: 30rpx;
-
-		.table-box {
-			width: 710rpx;
-			margin: auto;
-			background: rgba(255, 255, 255, 1);
-			border: 1rpx solid rgba(223, 223, 223, 1);
-
-			.t-tr {
-				border-bottom: 1rpx solid rgba(223, 223, 223, 1);
-
-				&:last-child {
-					border-bottom: none;
-				}
-
-				.t-head {
-					font-size: 26rpx;
-					color: #999;
-					flex: 1;
-					padding: 15rpx 20rpx;
-					height: 100%;
-					border-right: 1rpx solid rgba(223, 223, 223, 1);
-				}
-
-				.t-detail {
-					font-size: 26rpx;
-					flex: 4;
-					padding: 15rpx 20rpx;
-					height: 100%;
-				}
-			}
-		}
-	}
-
-	.goods-comment {
-		padding-top: 30rpx;
-		min-height: 300rpx;
-
-		.more-box {
-			height: 100rpx;
-			background: #fff;
-
-			.more-btn {
-				width: 200rpx;
-				height: 60rpx;
-				border: 1rpx solid rgba(213, 166, 90, 1);
-				border-radius: 30rpx;
-				font-size: 26rpx;
-				font-weight: 400;
-				color: rgba(168, 112, 13, 1);
-				padding: 0;
-				background: #fff;
-
-				.cuIcon-right {
-					font-size: 30rpx;
-					margin-left: 10rpx;
-				}
-			}
-		}
-	}
-}
-
-// 推荐商品
-.guess-box {
-	.guess-title {
-		height: 90rpx;
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: rgba(51, 51, 51, 1);
+	// 规格卡片
+	.sku-box {
+		line-height: 82rpx;
 		background: #fff;
 		padding: 0 20rpx;
+		margin: 20rpx 0;
+		font-size: 28rpx;
+
+		.title {
+			color: #999;
+			margin-right: 20rpx;
+		}
+
+		.cuIcon-right {
+			color: #bfbfbf;
+			font-size: 36rpx;
+		}
 	}
 
-	.goods-wrap {
-		display: flex;
-		flex-wrap: wrap;
-		padding: 20rpx;
+	.goods-title {
+		font-size: 28rpx;
+		font-weight: 500;
+		line-height: 42rpx;
+		background-color: #fff;
+		padding-bottom: 10rpx;
+		padding: 10rpx 20rpx;
+	}
 
-		.goods-item {
-			margin-right: 20rpx;
-			margin-bottom: 20rpx;
+	.sub-title {
+		padding: 0 20rpx;
+		color: #a8700d;
+		font-size: 24rpx;
+		font-weight: 500;
+		line-height: 42rpx;
+		background-color: #fff;
+		padding-bottom: 10rpx;
+	}
 
-			&:nth-child(2n) {
-				margin-right: 0;
+	// 选项卡
+	.tab-box {
+		height: 102rpx;
+		background: #fff;
+		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
+		margin-top: 20rpx;
+
+		.tab-item {
+			flex: 1;
+			height: 100%;
+			position: relative;
+			font-size: 30rpx;
+			font-weight: bold;
+
+			.tab-line {
+				width: 123rpx;
+				height: 4rpx;
+				left: 50%;
+				bottom: 20rpx;
+				transform: translateX(-50%);
+				background: transparent;
+				position: absolute;
+				z-index: 2;
+			}
+
+			.line-active {
+				background: rgba(168, 112, 13, 1);
 			}
 		}
 	}
-}
 
-// 积分底部栏
-.score-foot-box {
-	height: 110rpx;
-	background: rgba(255, 255, 255, 1);
-	border-top: 1rpx solid rgba(238, 238, 238, 1);
-	width: 100%;
-	position: fixed;
-	bottom: 0;
-	z-index: 999;
+	.tab-detail {
+		min-height: 300rpx;
+		background: #fff;
+		background: #fff;
 
-	.left,
-	.right {
-		flex: 1;
-	}
-
-	.tools-item {
-		flex: 1;
-		height: 100%;
-
-		.tool-img {
-			width: 46rpx;
-			height: 46rpx;
+		.rich-box {
+			/deep/ img {
+				display: block;
+			}
 		}
 
-		.tool-title {
-			font-size: 22rpx;
-			line-height: 22rpx;
-			padding-top: 8rpx;
+		.goods-size {
+			padding-top: 30rpx;
+
+			.table-box {
+				width: 710rpx;
+				margin: auto;
+				background: rgba(255, 255, 255, 1);
+				border: 1rpx solid rgba(223, 223, 223, 1);
+
+				.t-tr {
+					border-bottom: 1rpx solid rgba(223, 223, 223, 1);
+
+					&:last-child {
+						border-bottom: none;
+					}
+
+					.t-head {
+						font-size: 26rpx;
+						color: #999;
+						flex: 1;
+						padding: 15rpx 20rpx;
+						height: 100%;
+						border-right: 1rpx solid rgba(223, 223, 223, 1);
+					}
+
+					.t-detail {
+						font-size: 26rpx;
+						flex: 4;
+						padding: 15rpx 20rpx;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.goods-comment {
+			padding-top: 30rpx;
+			min-height: 300rpx;
+
+			.more-box {
+				height: 100rpx;
+				background: #fff;
+
+				.more-btn {
+					width: 200rpx;
+					height: 60rpx;
+					border: 1rpx solid rgba(213, 166, 90, 1);
+					border-radius: 30rpx;
+					font-size: 26rpx;
+					font-weight: 400;
+					color: rgba(168, 112, 13, 1);
+					padding: 0;
+					background: #fff;
+
+					.cuIcon-right {
+						font-size: 30rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
 		}
 	}
 
-	.btn-box {
-		flex: 1;
-
-		.seckill-btn {
-			width: 600rpx;
-			height: 80rpx;
-			background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
-			box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
-			border-radius: 40rpx;
+	// 推荐商品
+	.guess-box {
+		.guess-title {
+			height: 90rpx;
 			font-size: 30rpx;
 			font-family: PingFang SC;
-			font-weight: 500;
-			color: rgba(255, 255, 255, 1);
-			margin-right: 20rpx;
-		}
-	}
-}
-
-// 底部工具栏
-.detail-foot_box {
-	height: 100rpx;
-	background: rgba(255, 255, 255, 1);
-	border-top: 1rpx solid rgba(238, 238, 238, 1);
-	width: 100%;
-	position: fixed;
-	bottom: 0;
-	z-index: 999;
-
-	.left,
-	.detail-right {
-		flex: 1;
-	}
-
-	.tools-item {
-		flex: 1;
-		height: 100%;
-
-		.tool-img {
-			width: 46rpx;
-			height: 46rpx;
+			font-weight: bold;
+			color: rgba(51, 51, 51, 1);
+			background: #fff;
+			padding: 0 20rpx;
 		}
 
-		.tool-title {
-			font-size: 22rpx;
-			line-height: 22rpx;
-			padding-top: 8rpx;
+		.goods-wrap {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 20rpx;
+
+			.goods-item {
+				margin-right: 20rpx;
+				margin-bottom: 20rpx;
+
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
 		}
 	}
 
-	.detail-btn-box {
-		flex: 1;
+	// 积分底部栏
+	.score-foot-box {
+		height: 110rpx;
+		background: rgba(255, 255, 255, 1);
+		border-top: 1rpx solid rgba(238, 238, 238, 1);
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		z-index: 999;
 
-		.tool-btn {
-			font-size: 28rpx;
-			font-weight: 500;
-			color: rgba(#fff, 0.9);
-			width: 210rpx;
-			height: 70rpx;
-			border-radius: 35rpx;
-			padding: 0;
-			margin-right: 20rpx;
+		.left,
+		.right {
+			flex: 1;
+		}
 
-			.price {
-				font-size: 24rpx;
-				font-weight: bold;
-				color: rgba(#fff, 0.9);
+		.tools-item {
+			flex: 1;
+			height: 100%;
+
+			.tool-img {
+				width: 46rpx;
+				height: 46rpx;
 			}
 
-			.price-title {
-				font-size: 20rpx;
-				font-weight: 500;
-				color: rgba(#fff, 0.9);
+			.tool-title {
+				font-size: 22rpx;
+				line-height: 22rpx;
 				padding-top: 8rpx;
 			}
 		}
 
-		.add-btn {
-			box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
-			background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
-		}
+		.btn-box {
+			flex: 1;
 
-		.pay-btn {
-			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
-			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
-		}
-
-		.seckill-btn {
-			width: 432rpx;
-			height: 70rpx;
-			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
-			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: rgba(255, 255, 255, 1);
-			border-radius: 35rpx;
-			padding: 0;
-			margin-right: 20rpx;
-		}
-
-		.seckilled-btn {
-			width: 432rpx;
-			height: 70rpx;
-			background: rgba(221, 221, 221, 1);
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #999999;
-			border-radius: 35rpx;
-			padding: 0;
-			margin-right: 20rpx;
-		}
-
-		.groupon-btn {
-			width: 210rpx;
-			height: 70rpx;
-			background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
-			box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
-			border-radius: 35rpx;
+			.seckill-btn {
+				width: 600rpx;
+				height: 80rpx;
+				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
+				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
+				border-radius: 40rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 1);
+				margin-right: 20rpx;
+			}
+		}
+	}
+
+	// 底部工具栏
+	.detail-foot_box {
+		height: 100rpx;
+		background: rgba(255, 255, 255, 1);
+		border-top: 1rpx solid rgba(238, 238, 238, 1);
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		z-index: 999;
+
+		.left,
+		.detail-right {
+			flex: 1;
+		}
+
+		.tools-item {
+			flex: 1;
+			height: 100%;
+
+			.tool-img {
+				width: 46rpx;
+				height: 46rpx;
+			}
+
+			.tool-title {
+				font-size: 22rpx;
+				line-height: 22rpx;
+				padding-top: 8rpx;
+			}
+		}
+
+		.detail-btn-box {
+			flex: 1;
+
+			.tool-btn {
+				font-size: 28rpx;
+				font-weight: 500;
+				color: rgba(#fff, 0.9);
+				width: 210rpx;
+				height: 70rpx;
+				border-radius: 35rpx;
+				padding: 0;
+				margin-right: 20rpx;
+
+				.price {
+					font-size: 24rpx;
+					font-weight: bold;
+					color: rgba(#fff, 0.9);
+				}
+
+				.price-title {
+					font-size: 20rpx;
+					font-weight: 500;
+					color: rgba(#fff, 0.9);
+					padding-top: 8rpx;
+				}
+			}
+
+			.add-btn {
+				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
+				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
+			}
+
+			.pay-btn {
+				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
+				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
+			}
+
+			.seckill-btn {
+				width: 432rpx;
+				height: 70rpx;
+				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
+				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 1);
+				border-radius: 35rpx;
+				padding: 0;
+				margin-right: 20rpx;
+			}
+
+			.seckilled-btn {
+				width: 432rpx;
+				height: 70rpx;
+				background: rgba(221, 221, 221, 1);
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				border-radius: 35rpx;
+				padding: 0;
+				margin-right: 20rpx;
+			}
+
+			.groupon-btn {
+				width: 210rpx;
+				height: 70rpx;
+				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
+				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+				border-radius: 35rpx;
+			}
 		}
 	}
-}
 </style>