<template>
	<view class="body">
		<uni-nav-bar backgroundColor="#000000" :statusBar="true" left-icon="left" color="#fff" :leftWidth="navWidth"
			:rightWidth="navWidth" :fixed="true" @clickLeft="back">
			<view class="input-view">
				<!-- <uni-icons class="input-uni-icon" type="search" size="18" color="#999" /> -->
				<view class="input-uni-icon">
					<image src="../../static/img/seach.png" mode=""></image>
				</view>
				<navigator url="/pages/index/search">
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="search" />
				</navigator>

			</view>
			<block slot="right">
				<view class="nav_right">
					<navigator url="/pages/shippingCart/index" open-type="switchTab">
						<uni-badge style="position: relative;z-index: 1111;" :text="sum" type="error"
							absolute="rightTop">
							<image src="../../static/img/shop_cart1.png" mode=""></image>
						</uni-badge>
					</navigator>
				</view>
			</block>
		</uni-nav-bar>
		<view class="uni-margin-wrap">
			<uni-swiper-dot :info="goodsDate.gallery_list" :current="current" field="content" mode="nav"
				class="page_padding " :class="isvideo?'showvideo':''">
				<swiper class="swiper" @change="gridSwiper" :circular="true">

					<!-- <swiper-item>	
						<view class="swiper-item" v-show="goodsDate.goods_video" :style="{display:video?'none':''}" @change="clickImg(-1)">
							<video :enable-progress-gesture="false" :mobilenet-hint-type="1" 
							:http-cache="true" :autoplay="false" :src=" goodsDate.goods_video"  class="video_play">
								
							</video></view>
					</swiper-item> -->
					<swiper-item :touchable="true" v-if="goodsDate.goods_video">
						<view class="swiper-item uni-bg-black"
							:style="{ background: 'url(' + goodsDate.gallery_list[0].img_url + ')' }">
							<video v-if="video" :autoplay="true" :enable-progress-gesture="true"
								:mobilenet-hint-type="1" class="video_play" :http-cache="true" @pause="VideoPuse()"
								object-fit="contain" :direction="0" :src=" goodsDate.goods_video" :show-mute-btn="true"
								@touchstart="touchStart" @touchend="touchEnd">
							</video>

							<view class="play_icon" v-show="!video" @click="isVideo"></view>
							<!-- <view  class="next_icon"v-show="Isshownext"></view> -->


							<!-- <view class="videoControl">
								<image src="/static/img/suspend.png" mode="" class="videoControl_play" @click="isVideo"></image>
								<view class="videoControl_progress">
									<progress :percent="50"  stroke-width="3" activeColor="#B22234" />
									<image src="/static/img/video_progress.png" mode="" class="video_progress"></image>
									
								</view> 
								<view>00:14</view>
								<image src="/static/img/zoom.png" mode="" class="videoControl_zoom"></image>
							</view> 
							<image src="/static/img/mute.png" mode="" class="video_mute"></image> -->
						</view>
					</swiper-item>
					<swiper-item v-for="(item,index ) in goodsDate.gallery_list" :key="item.img_url">
						<view class="swiper-item">
							<image :src="item.img_url" class="swiper-item-image" mode="" @click="clickImg(index)">
							</image>

							<!-- <img src="" alt="" class="swiper-item-image"> -->
							<!-- <image src="../../static/img/play.png" class="video_play" mode="" ></image> -->
						</view>
					</swiper-item>
					<!-- <swiper-item>
						<view class="swiper-item uni-bg-blue">C</view>
					</swiper-item> -->
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="special" v-if="goodsDate.is_promote==1">
			<view class="special_left">
				<image src="../../static/img/naozhong.png" mode=""></image>
				<text>Flash Sale</text>
			</view>
			<view class="special_right">
				<text>End in</text>
				<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes"
					:second="curEndTime|seconds" splitorColor="#FFFFFF" color="#FFFFFF" background-color="#B22234"
					class="countdown" />
				<image src="../../static/img/right2.png" mode=""></image>
			</view>
		</view>
		<view class="goods_info">
			<!-- <view class="goods_info_price">
				<text>US${{goodsDate.is_promote==0? goodsDate.shop_price :goodsDate.promote_price}}</text>
				
				<view class="info_price_right">
					<image src="/static/img/like_white.png" mode="" v-show="goodsDate.is_attention==0" @click="addLike(goodsDate.id)"></image>
					<image src="../../static/icon/like_red.png" mode="" v-show="goodsDate.is_attention==1" @click="removeLike(goodsDate.id)"></image>
					<image src="../../static/icon/share_white.png" mode=""@click="Isshare=true"></image>
				</view>
			</view> -->
			<view>{{goodsDate.goods_name}} </view>
			<!-- <view class="evaluate">
				<uni-rate size="14" :disabled="true" disabledColor="#B22234" :value="goodsDate.comment_summary[0].commentcount==0?'0':'4'"  active-color="red" :is-fill="false" />
				<view class="evaluate_text">{{goodsDate.comment_summary[0].commentcount==0?'0.0':'4.0'}}</view>
				<text>({{goodsDate.comment_summary[0].commentcount}}reviews)</text>
			</view> -->

			<view class="goods_info_price">
				<text>US${{goodsDate.is_promote==0? goodsDate.shop_price :goodsDate.promote_price}}</text>

				<view class="info_price_right">
					<image src="/static/img/like_white.png" mode="" v-show="goodsDate.is_attention==0"
						@click="addLike(goodsDate.id)"></image>
					<image src="../../static/icon/like_red.png" mode="" v-show="goodsDate.is_attention==1"
						@click="removeLike(goodsDate.id)"></image>
					<image src="../../static/icon/share_white.png" mode="" @click="Isshare=true"></image>
				</view>
			</view>
			<view class="variations">
				<view class="variations_title">
					<view class="variations_title_left" v-if="sizenum>0||colorNum >0">Variations</view>
					<text v-if="item.goods_attrs.length>0" class="text_margin"
						v-for="(item,index) in goodsDate.attr_list" :key="item.attr_name">
						{{ item.goods_attrs.length}}{{item.attr_name}}
					</text>
					<!-- 	<text v-if="sizenum>0"class="text_margin" >  {{sizenum}}size</text> -->
				</view>
				<view>
					<!-- <view v-for="(item,index) in goodsDate.attr_list" :key="index" class="variations_select">
						<view class="variations_select_varieties" >
							<view class="select_varieties_image" v-for="(item,index) in 3" :key="index"></view>
						</view>
					</view> -->
					<view class="variations_select_size" v-for="(item,index ) in goods_attr_list" :key="item.attr_id">
						<view v-for="(item1,index1 ) in item.list" :key="item1.attr_value">
							<view class="select_size_item" v-if="item1.attr_img"
								:style="{background:`url(${item1.attr_img})`}" @click="clickImg(index1,item.list)">
							</view>
							<view class="select_size_item1" v-if="item1.attr_img && tag!=0">{{ item1.attr_value }}
							</view>
							<view class="select_size_item2" v-if="tag==0">{{ item1.attr_value }}</view>
						</view>
						<!-- <view class="select_size_item">35</view>
							<view class="select_size_item">M</view>
							<view class="select_size_item">L</view> -->
					</view>



				</view>
			</view>
		</view>

		<!-- ssss -->

		<view class="transport">
			<!-- <view class="goods_title">Shipping to {{addressDate.country_name || 'United States'}}</view> -->
			<view class="goods_title title_Mtop" v-if="shipping_list">
				<view class="goods_title_left">
					<image src="/static/img/transport.png" mode=""></image>
					<text>Delivery</text>
				</view>
			</view>
			<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
				<view class="spike1_item" v-for="(item,index) in shipping_list" :key="item.shipping_name">
					<view class="spike1_item_title">
						<view>
							{{ item.shipping_name}}: <text class="text_white">US${{ item.shipping_fee}}</text>
						</view>
						<view>
							free on orders <text class="text_white">US${{ item.free_money}}</text>
						</view>
						<view class="text_bold_200">Estimated to be deliverd on </view>
						<view class="text_bold_200">{{ item.shipping_desc }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="security">
				<view class="goods_title" @click="isSecurity=true">
					<view class="goods_title_left">
						<image src="/static/img/security.png" mode=""></image>
						<text>Shipping security</text>
					</view>
					<view class="goods_title_right">
						<image src="../../static/icon/right_white.png" mode=""></image>
					</view>

				</view>
				<view class="security_content">
					<!-- <ul>
						<li>{{item.block_title}} </li>	
					</ul> -->
					<view class="icon" v-for="(item,index) in listtext" :key="item.block_title"><text
							style="color:#fff;font-size: 28rpx;margin:0 9rpx 0 9rpx;">•</text>{{item.block_title}}
					</view>
				</view>
			</view>
			<view class="description goods_title" @click="isAttr=true">
				<view class="goods_title_left">
					<text>Description</text>
				</view>
				<view class="goods_title_right">
					<!-- <view>#Iron #Pearls,Flowers #Fashionable</view> -->
					<view>{{goodsDate.tags}}</view>
					<image src="../../static/icon/right_white.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="order_popup" v-show="isAttr">
			<view class="order_popup_title">
				<text>Description</text>
				<image src="../../static/img/close1.png" mode="" @click="isAttr=false"></image>
			</view>

			<!-- <view class="securityDetails_item_title">{{item.product_sn}}</view> -->
			<!-- <scroll-view scroll-y="true" class="descriptionDetails" > -->

			<scroll-view scroll-y="true" class="text1">
				<view class="text1_item" v-if="Attr_list" :style="{height:max>7?max/7*130+'rpx':''}">
					<view class="text1_left"><text>Color</text> </view>
					<view class="text1_right"><text>{{ Attr_list }}</text></view>
				</view>
				<!-- <view class="text1_item" >
									<view class="text1_left" ><text>Material</text> </view>
									<view  class="text1_right"><text>No</text></view>
								</view> -->
				<view class="text1_item" v-if="goodsDate.brand_name">
					<view class="text1_left"><text>Gender</text> </view>
					<view class="text1_right"><text>{{ goodsDate.brand_name}}</text></view>
				</view>
				<!-- <view class="text1_item" v-if="goodsDate.goods_weight">
									<view class="text1_left" ><text>Weight</text> </view>
									<view  class="text1_right"><text>{{ goodsDate.goods_weight}}</text></view>
								</view> -->
				<view class="text1_item" v-for="(item,index) in goodsDate.property_list" :key="item.attr_name">
					<view class="text1_left"><text>{{ item.attr_name }}</text></view>
					<view class="text1_right" v-for="(item1,index1) in item.goods_attrs" :key="item1.attr_value">
						<text>{{ item1.attr_value}}</text></view>
				</view>
				<view class="text1_item" v-if="Size_list">
					<view class="text1_left"><text>Length</text> </view>
					<view class="text1_right" v-if="Size_list ">{{Size_list }}</view>
				</view>
				<!-- <view>Power Suppy <text>No</text></view>
								<view>Type</view>
								<view>Length</view> -->
				<!-- <view class="text1_right">
									<view>{{ Attr_list }}</view>
									<view class="text_right">No</view>
									<view v-if="goodsDate.cat_name">{{ goodsDate.cat_name}}</view>
									
									<view>{{ Size_list }}</view>
								</view> -->
			</scroll-view>
			<!-- </scroll-view> -->

		</view>
		<view class="reviews">
			<view class="goods_title" @click="goReview">
				<view class="goods_title_left">
					<text>Reviews({{goodsDate.comment_summary[0].commentcount}})</text>
				</view>
				<view class="goods_title_right">
					<image src="../../static/icon/right_white.png" mode=""></image>
				</view>
			</view>

			<view class="allReviews">
				<text>{{goodsDate.comment_summary[0].commentcount==0?'0.0':'4.0'}}</text>
				<uni-rate size="20" :disabled="true" disabledColor="#B22234" color="#B22234"
					:value="goodsDate.comment_summary[0].commentcount==0?'0':'4'" active-color="red" :is-fill="false" />
			</view>
			<template v-if="goodsDate.comment_summary[0].commentcount==0">
				<view class="reviews_no">No comment yet</view>
			</template>
			<template v-else>
				<view class="reviews_item" v-for="(item,index) in commonlist" :key="index">
					<view class="reviews_item_title">
						<view class="reviews_item_img">
							<image mode="" :src="item.avatar_img_small"></image>
						</view>
						<view class="reviews_item_one">
							<view class="reviews_title_user">
								<view class="reviews_title_user_name">{{item.user_name}}</view>
								<uni-rate style="margin-left: 2rpx;margin-top: 10rpx;" size="14" :disabled="true"
									disabledColor="#B22234" :value="item.comment_rank" active-color="#B22234"
									:is-fill="false" />
							</view>
							<!-- <view class="reviews_title_color">Color:###</view> -->
						</view>

						<view class="reviews_title_time">{{item.add_time | date}}</view>
					</view>
					<view class="reviews_item_color">{{item.commentlabels}}</view>
					<view class="reviews_item_content">{{item.content}}</view>
					<view class="reviews_item_image">
						<view class="reviews_image_content" v-for="(item1,index1) in item.attachments"
							:key="item1.afile">
							<!-- <text> {{ item1.afile}}</text>					 -->
							<image mode=" " :src="item1.afile" v-if="item1.afile"
								@click="clickImg(index1,item.attachments)"></image>
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="productImage">
			<template v-if="goodsDate.goods_desc">
				<view class="productImage_title">Product lmage gallery</view>
				<view class="productImage_image" v-html="goodsDate.goods_desc">
					<!-- {{goodsDate.goods_desc}} -->
					<!-- <image :src="goodsDate.goods_img" mode=""></image> -->
				</view>
			</template>
			<!-- <view class="recommend recommend1" v-if="goodsDate.category_list">
				<view class="recommend_title">Other options</view>
				<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
					<view class="spike1_item1" v-for="(item,index) in 8"  :key="index" >
						<view class="spike1_item_img"></view>
						<view class="spike1_item_bottom">
							<text>US$314.00</text>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- 产品详情页最后一张图片 -->
			<!-- 			<view class="productImage_image1">
				<image :src="goodsDate.goods_thumb" mode=""></image>
			</view> -->
			<view class="recommend">
				<view class="recommend_title">You might also like</view>
				<view class="recommend_content">
					<view class="recommend_content_item" v-for="(item,index) in catList ">
						<view class="recommend_content_item_image">
							<image :src="item.thumb" mode="" :key="index" @click="goDetails(item.id)"></image>
						</view>
						<view class="recommend_content_name"><text>{{item.short_name}}</text></view>
						<view class="recommend_content_item_pric">
							US${{item.is_promote==0? item.shop_price :item.promote_price}}
							<view>
								<image src="../../static/icon/cat_white.png" @click="recommendTap(item)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer_left">
				<text>US${{goodsDate.is_promote==0? goodsDate.shop_price *cartQuery.goods_number:goodsDate.promote_price *cartQuery.goods_number}}</text>
			</view>
			<view class="footer_right">
				<button @click="isCart=true,getDate(ID)">ADD TO CART</button>
			</view>
		</view>
		<view class="mask" @click="isCart=false,isSecurity=false,isAttr=false&&Attr_list,Isshare=false"
			v-show="isCart || isSecurity || isAttr ||Isshare"></view>
		<view class="order_popup" v-show="isSecurity">
			<view class="order_popup_title">
				<text>Shipping security</text>
				<image src="../../static/img/close1.png" mode="" @click="isSecurity=false"></image>
			</view>
			<view class="securityDetails" v-for="(item,index) in listtext" :key="item.block_id">
				<view class="securityDetails_item">
					<view class="securityDetails_item_title">{{item.block_title}}</view>
					<view>
						{{item.block_title2}}
					</view>
				</view>
			</view>
		</view>
		<view class="addCard" v-show="isCart">
			<image src="/static/img/close1.png" mode="" class="addCard_close" @click="isCart=false"></image>
			<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
				<image :src="item.img_url" mode="" class="addCard_scroll img_border"
					v-for="(item,index) in goodsDate.gallery_list" :key="index" @click="clickImg(index)"></image>
			</scroll-view>
			<scroll-view class="addCard_body" scroll-y="true">
				<view>{{goodsDate.goods_name}} </view>
				<view class="addCard_price">US${{goodsDate.is_promote==0? shop_price :goodsDate.promote_price}}</view>
				<view v-for="(item,index) in goods_attr_list" :key="item.attr_id">
					<view>{{item.name}}</view>
					<view class="color_select variations_select_size">

						<!-- <view class="select_size_item" 
						v-for="(item1,index1) in item.goods_attrs"  
						:key="item1.goods_attr_id" 
						:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
						@click="selectAttr(item.attr_id,item1.goods_attr_id,index)">
							{{item1.attr_value}}
						</view> -->
						<view class="color_select_item" v-for="(item1,index1) in item.list" :key="item1.attr_value"
							:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
							@click="selectAttr(item.attr_id,item1.goods_attr_id,index1,item1.attr_price)">
							<view class="color_select_item_zoom">
								<image src="/static/icon/big2.png" @click="clickImg(index1)" mode=""
									v-if="item1.attr_img!=''"></image>
							</view>
							<image :src="item1.attr_img" mode="" v-if="item1.attr_img!=''"></image>
							<view class="color_select_item_bottom" v-if="item1.attr_img!=''">【{{ item1.attr_value}}】
							</view>
							<view class="color_select_item_bottom" v-if="!item1.attr_img">{{ item1.attr_value}}</view>

						</view>
					</view>
				</view>

				<!-- <view >Size</view>
				<view class="variations_select_size">
					<view class="select_size_item">34</view>
					<view class="select_size_item">35</view>
					<view class="select_size_item">36</view>
					<view class="select_size_item">37</view>
					<view class="select_size_item">38</view>
					<view class="select_size_item">M</view>
					<view class="select_size_item">L</view>
				</view> -->
				<view class="quantity">
					<text>Quantity</text>
					<uni-number-box background="#FFFFFF" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
				</view>
			</scroll-view>
			<!-- <view class="quantity">
				<text>Quantity</text>
				<uni-number-box background="#FFFFFF" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
			</view> -->
			<button @click="addCart">ADD TO CART</button>
		</view>
		<!-- 分享 -->
		<view class="Isshare" v-show="Isshare">
			<view class="order_popup_title">
				<text>Share this product with friends!</text>
				<image src="../../static/img/close1.png" mode="" @click="Isshare=false"></image>
			</view>
			<view class="share_icon">
				<view class="icon_item">
					<image src="../../static/img/facebook1.png" mode=""></image>
					<view>Facebook</view>
				</view>
				<view class="icon_item" @click="Copylink()">
					<image src="../../static/img/copyLink.png" mode="">Copy Link
				</view>
				<view class="icon_item" @click="Sendmes()">
					<image src="../../static/img/Mes.png" mode="">Send SMS
				</view>
				<view class="icon_item" @click="downloadImg()">
					<image src="../../static/img/down.png" mode="">Download
				</view>
				<view class="icon_item">
					<image src="../../static/img/more1.png" mode="">More
				</view>
			</view>
		</view>
		<view class="bootom_last" v-if="bootom == 1">-THE END-</view>

	</view>
</template>

<script>
	import {
		defaultRequest,
		defaultRequest2,
		defaultRequest4
	} from '../../api/index.js'
	export default {
		data() {
			return {
				navWidth: '80rpx',
				current: 0,
				max: 0,
				isvideo: false,
				isSecurity: false,
				sum: 0,
				bootom: 0,
				ID: '',
				query: {
					_action: 'getgoodsdetail',
					goods_id: ''
				},
				info: [],
				isCart: false,
				goodsDate: {
					comment_summary: [{
						comment_summary: '',
						commentlabel: ""
					}],
					gallery_list: [{
						content: ''
					}],

				},
				commonlist: [],
				user_info: {},
				addressDate: {},
				colorNum: 0,
				sizenum: 0,
				//选择规格的数组
				goods_attr_list: [],
				// 获取该分类的其他商品的请求参数
				catQuery: {
					_action: 'getgoods',
					cat: '',
					page_index: 1,
					page_size: 10
				},
				catList: [],
				isReachBottom: true,
				// 添加到购物车请求参数
				cartQuery: {
					_action: 'addtocart',
					goods_id: '',
					goods_parent_id: 0,
					goods_number: 1,
					goods_attr_id: '',
					goods_is_package: 0
				},
				Is_attr: 0, //是否有规格
				listtext: [],
				isLogin: -1,
				isAttr: false,
				Attr_list: '',
				video: false,
				list: [],
				pageNum: 1,
				pageSize: 10,

				//初始化点击位置的x坐标
				startX: 0,
				Isshownext: false,
				current: 0,
				Isshare: false, //分享
				Ship: {
					_action: 'getgoodsshippingfeelist',
					goods_id: '',
					goods_count: 1,
					country: 4191,
					province: 0,
					district: 0,
					city: 0
				},
				shipping_list: [],
				Size_list: '',
				shop_price: 0,
				first: 0,
				noImgtype: [],
				tag: 0,




			}
		},

		computed: {
			//当天结束时间
			curEndTime() {
				const endtime = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
				// 获取当前时间
				const nowtime = (new Date()).getTime();
				var date3 = nowtime - endtime; //时间差的毫秒数      
				date3 = Math.abs(date3)
			 return date3;
			}
		},
		filters: {
			hours(timestamp) {
				var leave1 = timestamp % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000))
				return hours
			},
			minutes(timestamp) {
				var leave2 = (timestamp % (24 * 3600 * 1000)) % (3600 * 1000) //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000))
				return minutes
			},
			seconds(timestamp) {
				var leave3 = ((timestamp % (24 * 3600 * 1000)) % (3600 * 1000)) % (60 * 1000) //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)
				return seconds
			},
			date(e) {
				let str = e
				str = str.substring(0, 10);
				const year = str.substring(0, 4)
				let date = str.substring(5, 10)
				date = date.replace('-', '/')
				let time = date + '/' + year
				return time

			}

		},
		methods: {
			// 跳转到评论详情
			goReview() {
				uni.navigateTo({
					url: './goodsReview?goods_id=' + this.query.goods_id
				})
			},
			onReachBottom() {
				console.log(111)
				this.bootom = 1
			},
			recommendTap(item) {
				console.log(item)
				this.goodsDate = []
				uni.showLoading({
					title: 'loading',

				})
				this.getDate(item.id)
				this.goods_attr_list = []
				setTimeout(() => {
					uni.hideLoading()
					this.isCart = true

				}, 1500)
				// this.query.goods_id = item.id


			},
			isVideo() {
				this.video = true
			},

			// 侧滑
			/**
			 * 触摸开始
			 * @param {Object} e
			 */
			touchStart(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX;
				}
			},
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					if (Math.abs(diff) > 20) {
						if (diff > 0) {
							//console.log("左滑...");

						} else {
							//console.log("右滑...");
						}
					}
				}

			},
			// 视频停止
			VideoPuse() {
				this.video = false
			},
			getCartNum() {
				let data = {
					_action: 'getcartgoods'
				}
				defaultRequest(data).then(res => {
					//console.info(res)
					if (res.error == 0) {
						this.sum = res.data.goods_list.length

						// uni.setStorageSync('cartSum',this.sum)
					}
				})
			},
			// 添加到购物车
			addCart() {
				if (this.Is_attr > 0) {
					let goods_attr_id = ''
					this.goods_attr_list.map(item => {
						if (item.goods_attr_id != '') {
							goods_attr_id += item.goods_attr_id + ','
						}

					})
					let isall = 1
					this.goods_attr_list.map(item => {
						//console.log(item.goods_attr_id)
						if (item.goods_attr_id == '') {
							isall = 0
						}
					})

					if (isall == 0) {
						uni.showToast({
							title: 'Please select the product specification',
							icon: 'none',
							duration: 1000
						})
						return
					}

					this.cartQuery.goods_attr_id = goods_attr_id.substring(0, goods_attr_id.lastIndexOf(','));
				}
				console.log(this.cartQuery)
				if (this.isLogin == 1) {
					defaultRequest2(this.cartQuery).then(res => {
						if (res.error == 0) {
							this.isCart = false
							this.cartQuery.goods_attr_id = ''
							if (res.data[0].success) {
								setTimeout(() => {
									uni.showToast({
										title: 'Successfully added',
										icon: 'none',
										duration: 2000
									})
								}, 500)

							}
							this.getCartNum()
						}
					})
				} else if (this.isLogin == 0) {
					uni.navigateTo({
						url: '../login/index'
					})
				}

			},
			// 点击预览图片
			clickImg(index, e) {
				console.log(e)
				let list = []
				if (e) {
					if (typeof(e) === 'object') {

						for (let i in e) {

							console.log(e[i].afile)
							list.push(e[i].afile)
							console.log(list)
						}
					} else {
						e.map(item => {
							list.push(item.attr_img)
						})
					}


					wx.previewImage({
						urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: index, // 当前显示图片的http链接，默认是第一个
						indicator: 'number',
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					wx.previewImage({
						urls: this.info, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: index, // 当前显示图片的http链接，默认是第一个
						indicator: 'number',
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}

			},
			// 其他商品详情
			goDetails(id) {
				uni.navigateTo({
					url: 'index?goodid=' + id
				})
			},
			// 获取该分类的其他商品
			getCatList(type) {
				defaultRequest4(this.catQuery).then(res => {
					//console.info(res)
					if (res.error == 0) {
						if (res.data) {
							if (type == 0) {
								this.catList = res.data
							} else {
								this.catList = this.catList.concat(res.data)
							}
						} else {
							this.isReachBottom = false
							uni.showToast({
								title: 'No more data yet',
								icon: 'none',
								duration: 2000
							})
							this.catQuery.page_index--
						}
					}
					uni.hideNavigationBarLoading();
				})
			},
			// 选择规格
			selectAttr(attr_id, goods_attr_id, index1, attr_price) {
				this.current = index1
				let sum = this.goodsDate.shop_price
				if (attr_price) {
					sum = parseInt(sum) + parseInt(attr_price)
					console.log(sum)

				}
				this.shop_price = sum
				let data = {
					attr_id: attr_id,
					goods_attr_id: goods_attr_id
				}
				if (this.goods_attr_list.length == 0) {
					this.goods_attr_list.push(data)
				} else {
					// 判断是否有新的规格加入
					let isNew = false
					for (let i in this.goods_attr_list) {
						let item = this.goods_attr_list[i]
						if (item.attr_id == attr_id) {
							if (item.goods_attr_id == goods_attr_id) {
								this.goods_attr_list[i].goods_attr_id = ''
							} else {
								this.goods_attr_list[i].goods_attr_id = goods_attr_id
							}
							isNew = false
							break
						} else {
							isNew = true
						}
					}
					if (isNew) {
						this.goods_attr_list.splice(index, 0, data)
					}
				}
			},
			// 添加收藏
			addLike(id) {
				if (this.isLogin == 1) {
					let data = {
						_action: 'setfaviouritegoods',
						goods_id: this.query.goods_id
					}
					defaultRequest2(data).then(res => {
						//console.info(res)
						if (res.error == 0) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
							this.goodsDate.is_attention = 1
						}
					})
				} else if (this.isLogin == 0) {
					uni.navigateTo({
						url: '../login/index'
					})
				}
			},
			// 取消收藏
			removeLike(id) {
				if (this.isLogin == 1) {
					let data = {
						_action: 'unsetfaviouritegoods',
						goods_id: this.query.goods_id
					}
					defaultRequest2(data).then(res => {
						//console.info(res)
						if (res.error == 0) {
							uni.showToast({
								title: 'ok!',
								icon: 'none',
								duration: 2000
							})
							this.goodsDate.is_attention = 0
						}
					})
				}
			},
			// 添加商品足迹
			setFavorites() {
				let data = {
					_action: 'setgoodsbrowsehistory',
					goods_id: this.query.goods_id
				}
				defaultRequest2(data).then(res => {
					//console.info(res)
				})
			},
			//取默认配送方式
			getShip() {
				this.Ship.goods_id = this.query.goods_id
				defaultRequest(this.Ship).then(res => {
					if (res.error == 0) {
						this.shipping_list = res.shipping_list
						//console.log(this.shipping_list,'1123')
					}
				})
			},
			// 获取默认地址
			getDefaultAddress() {
				let data = {
					_action: 'getdefaultconsignee'
				}

				defaultRequest2(data).then(res => {
					//console.info(res)
					if (res.error == 0) {
						this.addressDate = res.data
						//console.log(res)
						this.Ship = {
							_action: 'getgoodsshippingfeelist',
							goods_id: this.query.goods_id,
							goods_count: 1,
							country: res.data.country,
							province: res.data.province,
							district: res.data.district,
							city: res.data.city
						}
						defaultRequest(this.Ship).then(res => {
							if (res.error == 0) {
								this.shipping_list = res.shipping_list
								console.log(this.shipping_list)
							}
						})

					}
				})
			},
			// 获取商品详情数据
			getDate(id, e) {
				this.info = []
				this.goods_attr_list = []
				this.query.goods_id = id
				defaultRequest(this.query).then(res => {
					if (res.error == 0) {
						console.log(res.data)
						this.goodsDate = res.data
						if (this.goodsDate.comment_list && e == 1) {
							if (this.goodsDate.comment_list.length < 2) {
								this.commonlist.push(this.goodsDate.comment_list[0])
							} else if (this.goodsDate.comment_list.length == 0) {
								this.commonlist = []
							} else {
								for (let i = 0; i < 2; i++) {
									this.commonlist.push(this.goodsDate.comment_list[i])
								}

							}
						}

						console.log(this.commonlist, '11')
						this.shop_price = this.goodsDate.shop_price

						this.goodsDate.gallery_list.map(item => {
							item.content = ''
							this.info.push(item.img_url)

							// this.Attr_list = this.goodsDate.attr_list[0].goods_attrs

						})

						if (this.goodsDate.attr_list) {
							console.log(this.goodsDate.attr_list)
							this.Is_attr = this.goodsDate.attr_list.length
							if (this.Is_attr > 0) {
								let Size_list
								let Attr_list


								this.goodsDate.attr_list.map(item => {

									if (item.attr_name) {
										this.sizenum = item.goods_attrs.length
									}

									if (item.attr_name == "Color") {
										this.colorNum = item.goods_attrs.length
										console.log(this.colorNum)
										Attr_list = item.goods_attrs
										let i = 0
										Attr_list.map(item => {
											this.Attr_list += item.attr_value + '、'
											i++
									 })
										this.Attr_list = this.Attr_list.substring(0, this.Attr_list
											.length - 1)
										console.log(i)
										this.max = i
									} else if (item.attr_name == "Size") {
										Size_list = item.goods_attrs

										console.log(this.sizenum)
										Size_list.map(item => {
											this.Size_list += item.attr_value + ' '

										})
										this.Size_list = this.Size_list.substring(0, this.Size_list
											.length - 1)
									}
									let data = {
										name: item.attr_name,
										goods_attr_id: '',
										attr_id: item.attr_id,
										list: item.goods_attrs
									}
									this.goods_attr_list.push(data)
									console.log(this.goods_attr_list)
									let list = []

									this.goods_attr_list.map(item => {
										item.list.map(item1 => {
											if (item1.attr_img) {
												this.tag++
											}

										})
								 })
									// console.log(list)
									// this.noImgtype = list
								})
							}
						} else {
							this.goods_attr_list = []
							this.Is_attr = 0
						}

						this.catQuery.cat = res.data.cat_id
						this.getCatList(0)
					}
				})
			},
			//当录播有视屏时
			gridSwiper(e) {

				this.video = false
				this.current = e.detail.current
			},
			//获取保障内容
			getSecuritty() {
				let data = {
					pagecode: 'PRODUCTDETAILPAGE',
					_action: 'getpagedata'
				}
				defaultRequest(data).then(res => {
					//console.log(res,'保障内容')
					if (res.error == 0) {
						this.listtext = res.data.zones[0].blocks


					}
				})
			},
			back() {
				if (this.first == 2) {
					uni.navigateTo({
						url: '../category/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			// 分享1复制
			Copylink() {
				uni.setClipboardData({
					data: this.goodsDate.url, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: 'succeeded',
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			// 2 下载图片
			downloadImg() {
				uni.downloadFile({
					url: this.goodsDate.goods_thumb,
			 	success: (res) => {
						if (res.statusCode === 200) {
							console.log(res);
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res2) {
									console.log(res2)
									uni.showToast({
										title: 'saved!',
										icon: 'none',
										duration: 2000
									})

								},
							});
						}
					}
				});



			},
			//3 发送短信
			Sendmes() {
				console.log('发送短信')
				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
				msg.to = [];
				msg.body = 'I discovered amazing products on DOPE PLUS.com, come check them out!' + this.goodsDate.url;
				plus.messaging.sendMessage(msg);

			},
			Require(url) {
				return url
			}
		},
		onLoad(e) {
			// let goods = JSON.parse(e)
			this.isLogin = uni.getStorageSync('isLogin')
			if (e.first) {
				this.first = e.first
			}
			//console.log(e,'p')

			this.query.goods_id = e.goodid
			this.cartQuery.goods_id = e.goodid
			this.ID = e.goodid
			//console.log(this.query.goods_id)
			this.Ship.goods_id = this.query.goods_id
			//console.log(this.Ship.goods_id)

			this.getSecuritty()
			this.getCartNum()
			this.getDate(e.goodid, 1)

			this.user_info = uni.getStorageSync('user_info')

			this.setFavorites()
			this.getDefaultAddress()

			this.getShip()

			if (e.e == 2) {
				this.isCart = true
			}
			console.info(this.shipping_list)
		},
		onShow() {
			this.getCartNum()
		},
		// 上拉加载
		onReachBottom() {
			if (!this.isReachBottom) return
			if (this.catQuery.page_index >= 5) {
				uni.hideNavigationBarLoading();
				uni.showToast({
					title: 'No more data yet',
					icon: 'none',
					duration: 2000
				})
			} else {

				this.catQuery.page_index++
				this.getCatList(1)
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>
<style>
	page {
		background-color: #F6F5FA;
		padding-bottom: 150rpx;
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #000 !important;
		overflow-x: auto !important;
	}

	.body {
		background-color: #000;
		color: white;
		// padding-bottom: 35px;
		overflow: hidden;
		box-sizing: border-box;
		height: auto;
		padding-bottom: -30px;
		overflow-x: auto !important;
	}

	.bg_b {
		background-color: #000000;
	}

	.flex {
		display: flex;
	}

	$nav-height: 30px;

	.reviews_no {
		padding: 30rpx;
		text-align: center;
		font-weight: bold;
	}

	.showvideo {
		/deep/ .uni-swiper__dots-nav {
			display: none;
		}
	}

	/deep/ .uni-swiper__dots-nav {
		background: none;
		justify-content: center;

		.uni-swiper__dots-nav-item {
			padding: 6rpx 24.67rpx;
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 25rpx;
		}
	}

	.text1 {

		width: 100%;
		max-height: 500rpx;
		min-height: 200rpx;
		padding-left: 4.67rpx;
		padding-top: 30.67rpx;
		padding-bottom: 30.67rpx;
		padding-right: 10rpx;
		// padding-right: 45.33rpx;
		// line-height: 50rpx;
		// text-align: start;
		// font-size: 25rpx;

		color: #999999;

		&:last-child {
			margin-bottom: 17.37rpx;
		}

		.text1_item {
			display: flex;
			width: 100%;
			flex-direction: row;

			line-height: 50rpx;
			text-align: start;

			text {

				word-wrap: wrap;
			}

			.text1_left {
				width: 200rpx;
				// background-color:red;
				height: 50rpx;
				color: #999;

				font-size: 28rpx;
				line-height: 50rpx;
				text-align: start;
				padding-left: 43.27rpx;

			}

			.text1_right {
				width: 400rpx;
				color: #000;

				font-size: 28rpx;
				// background-color:green;
				line-height: 50rpx;
				margin-left: 60rpx;
				text-align: start;
				white-space: wrap;
				word-wrap: wrap;

			}
		}
	}

	// .description_item{
	// 	padding-left: 54.67rpx;
	// 	padding-top: 30.67rpx;
	// 	line-height: 50rpx;
	// 	text-align: start;
	// 	font-size: 28rpx;
	// 	color: #999999;

	// 	&:last-child{
	// 		margin-bottom: 0;
	// 	}
	// }


	.securityDetails {
		padding-top: 20.67rpx;
		// padding-bottom: 120rpx;
		padding-left: 54.67rpx;
		padding-right: 45.33rpx;

		.securityDetails_item {
			margin-bottom: 22rpx;
			font-size: 24.67rpx;
			font-weight: 400;
			color: #999999;

			// color: #fff;
			&:last-child {
				margin-bottom: 62.67rpx;
				// padding-bottom: 52.67rpx;
			}

			.securityDetails_item_title {
				position: relative;
				// color: #333333;
				// color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 10.33rpx;

				&:before {
					content: "";
					width: 6rpx;
					height: 6rpx;
					position: absolute;
					border-radius: 50%;
					background-color: #999999;
					left: -25.67rpx;
					top: 50%;
					margin-top: -3rpx;
				}
			}
		}
	}

	.variations_select_size {
		margin-left: 20.67rpx;
		display: flex;
		flex-wrap: wrap;

		.select_size_item {
			background-color: #1b1b1b;
			width: 97.67rpx;
			height: 97.67rpx;
			display: flex;
			background-size: 100% !important;
			background-repeat: no-repeat;
			align-items: center;
			justify-content: center;
			border-radius: 12.67rpx;
			// color: #666666;
			color: #fff;
			font-size: 24rpx;
			margin-right: 18.67rpx;
			// border: 1px solid #F8F8F8;
			padding: 1rpx 5rpx;
			margin-bottom: 16.67rpx;

			// &:nth-child(-n+2){
			// 	margin-bottom: 16.67rpx;
			// }
		}

		.select_size_item2 {
			background-color: #1b1b1b;
			// width: 97.67rpx;
			width: auto;
			height: 37.67rpx;
			display: flex;
			background-size: 100% !important;
			background-repeat: no-repeat;
			align-items: center;
			justify-content: center;
			border-radius: 12.67rpx;
			// color: #666666;
			color: #fff;
			font-size: 24rpx;
			margin-right: 18.67rpx;
			// border: 1px solid #F8F8F8;
			padding: 1rpx 5rpx;
			margin-bottom: 16.67rpx;

			// &:nth-child(-n+2){
			// 	margin-bottom: 16.67rpx;
			// }
		}

		.select_size_item1 {
			// background-color: red;
			width: 97.67rpx;
			line-height: 30rpx;
			// height: 60rpx;
			// overflow: hidden;
			display: flex;
			text-align: center;
			background-size: 100% !important;
			background-repeat: no-repeat;
			align-items: center;
			justify-content: center;
			border-radius: 12.67rpx;
			// color: #666666;
			color: #fff;
			font-size: 24rpx;
			margin-right: 18.67rpx;
			// border: 1px solid #F8F8F8;
			padding: 0 5rpx;
			margin-bottom: 16.67rpx;

			// &:nth-child(-n+2){
			// 	margin-bottom: 16.67rpx;
			// }
		}
	}

	.addCard {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		padding-left: 29.33rpx;
		padding-right: 29.33rpx;
		box-sizing: border-box;
		padding-top: 77.67rpx;
		color: #000;
		width: 100%;
		// font-size: 30.67rpx;
		font-weight: 400;
		padding-bottom: 44.67rpx;

		.addCard_close {
			width: 21.33rpx;
			height: 21.33rpx;
			position: absolute;
			right: 24.67rpx;
			top: 18.67rpx;
		}

		.spike1 {
			margin-top: 0;
			margin-bottom: 20rpx;
			padding-bottom: 0;
			border-bottom: none;

			.addCard_scroll {
				width: 286.67rpx;
				height: 286.67rpx;
				margin-left: 10.67rpx;

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 15rpx;
				}
			}
		}

		.addCard_body {
			padding-right: 31.33rpx;
			max-height: 60vh;
			min-height: 400rpx;

			.addCard_price {
				font-size: 44rpx;
				font-weight: bold;
				margin-top: 17.33rpx;
				margin-bottom: 51.33rpx;
			}

			.color_select {

				display: flex;

				color: #666666;
				flex-wrap: wrap;
				margin-bottom: 59.33rpx;

				.color_select_item {
					margin-top: 22rpx;
					position: relative;
					background-color: #F9F7FA;
					border-radius: 6.67rpx;
					margin-right: 12.67rpx;
					width: auto;
					// width: 134.67rpx;

					image {
						width: 134.67rpx;
						height: 133.33rpx;
						border-radius: 6.67rpx 6.67rpx 0 0;
					}

					.color_select_item_zoom {
						width: 20.33rpx;
						height: 20.33rpx;
						// background-color: rgba(0, 0, 0, 0.3);
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 12.67rpx;
						top: 9.33rpx;
						z-index: 99;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.color_select_item_bottom {
						padding: 10rpx 4rpx;
						// padding: 10rpx 0rpx;
						font-size: 24rpx;
						text-align: center;

					}
				}

				.active_color {
					color: #fff;
					;
					background-color: #000;
					border: 1px solid #000000;
				}
			}

			.variations_select_size {
				margin-left: 0;
				margin-top: 26.67rpx;
				margin-bottom: 40.67rpx;

				.select_size_item {
					background-size: cover;
					margin-bottom: 16.67rpx !important;

					&:nth-child(4n+4) {
						margin-right: 0;
					}
				}
			}

		}


	}

	.quantity {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 43.33rpx;

		.uni-numbox {
			border: 1px solid #999999;
			border-radius: 14rpx;
			height: 42.67rpx;

			/deep/ .uni-numbox__minus {
				border-radius: 14rpx;
			}

			/deep/.uni-numbox__plus {
				border-radius: 14rpx;
			}

			/deep/.uni-numbox__value {
				border-left: 1px solid #999999;
				border-right: 1px solid #999999;
				height: 100%;
				width: 63.33rpx;
				font-size: 21.33rpx;
			}
		}
	}

	button {
		width: 100%;
		height: 73.33rpx;
		line-height: 73.33rpx;
		background-color: #191919;
		color: white;
		font-weight: bold;
		font-size: 26.67rpx;
	}

	.spike1 {
		white-space: nowrap;
		width: 100%;
		margin-top: 36.67rpx;
		padding-bottom: 34rpx;

		// border-bottom: 1px solid #E2E2E2;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			// background-color: transparent;
		}

		.spike1_item {
			width: 480rpx;
			background-color: #1b1b1b;

			padding: 27.33rpx 37.67rpx;
			margin-right: 19.33rpx;
			font-size: 20rpx;
			border-radius: 10rpx;
			// border:1rpx solid #ccc;
			display: inline-block;
			// color: #737373;
			color: #fff;

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

			view {
				margin-bottom: 10rpx;
			}

			.text_bold_200 {
				font-size: 24rpx;
				font-weight: 50;
			}

			.spike1_item_title {
				// font-weight: bold;
				font-size: 28rpx;

				.text_black {
					color: black;
					display: inline-block;
					margin-left: 10rpx;
				}

				.text_red {
					color: #B22234;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}

		.spike1_item1 {
			// color: #191919;
			color: #fff;
			font-size: 29.33rpx;
			margin-right: 16.67rpx;
			width: 200rpx;
			display: inline-block;
			font-weight: bold;

			.spike1_item_img {
				width: 200rpx;
				height: 200rpx;

				background-color: #999999;
			}

			.spike1_item_bottom {
				padding-left: 9.33rpx;
				margin-top: 22.67rpx;

				.spike1_item_text {
					// color: #9D9D9D;
					color: #fff;
					font-size: 21.33rpx;
					text-decoration: line-through;
				}

				.spike1_item_text1 {
					// color: #9D9D9D;
					color: #fff;
					font-size: 21.33rpx;
				}
			}

			.spike1_item_bottom1 {
				padding-left: 9.33rpx;
				margin-top: 19.33rpx;
				font-weight: bold;

				.spike1_item_text {
					// color: #000000;
					color: #fff;
					font-size: 16rpx;
					font-weight: 400;
					margin-bottom: 20.67rpx;
					white-space: break-spaces;

				}
			}

		}

		.spike1_item:last-child {
			margin-right: 0;
		}
	}

	.goods_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 29.33rpx;
		font-weight: 600;

		.goods_title_left {
			display: flex;
			align-items: center;

			image {
				width: 33.33rpx;
				height: 33.33rpx;
				margin-right: 14rpx;
			}
		}

		.goods_title_right {
			// color: #737373;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 22rpx;
			}

		}
	}

	.uni-margin-wrap {
		width: 100%;

		.swiper {
			height: 750rpx;
			position: relative;

			.swiper-item {
				display: flex;
				height: 750rpx;
				// line-height: 750rpx;
				text-align: center;
				color: white;
				width: 100vw;

				.play_icon {
					height: 80rpx;
					width: 80rpx;
					z-index: 99;
					// background-color: #999999;
					background-image: url('@/static/icon/play.png');
					// border-radius: 50%;
					background-size: 100%;
					background-repeat: no-repeat;
					margin: 300rpx auto;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.next_icon {
					height: 80rpx;
					width: 80rpx;
					z-index: 99;
					background-image: url('@/static/icon/next.png');
					background-size: 100%;
					background-repeat: no-repeat;
					background-color: #ccc;
					border-radius: 50%;
					margin-top: 650rpx;
					margin-left: 90vw;
					float: right;
					position: fixed;
				}

				.swiper-item-image {
					width: 100%;
					height: 100%;
				}

				.videoControl {
					position: absolute;
					bottom: 18.67rpx;
					width: 100%;
					box-sizing: border-box;
					padding-left: 36rpx;
					padding-right: 31.33rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: white;

					.videoControl_progress {
						position: relative;
						width: 476rpx;

						progress {
							width: 100%;
						}

						.video_progress {
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							left: 50%;
							margin-left: -15rpx;
							top: 50%;
							margin-top: -15rpx;
						}
					}

					.videoControl_play {
						width: 52rpx;
						height: 52rpx;
					}

					.videoControl_zoom {
						width: 30.67rpx;
						height: 30.67rpx;
					}

				}
			}

			.video_mute {
				width: 200rpx;
				height: 200rpx;
				position: fixed;
				z-index: 999;
				right: 22.67rpx;
				bottom: 94.67rpx;


			}

			.video_play {
				width: 100vw;
				height: 750rpx;
				// left:99%;

				// margin-top: 30rpx;
				// margin-left: 5vw;
				// margin-right: 5vw;

			}

			.uni-bg-red {
				background-color: red;
			}

			.uni-bg-green {
				background-color: green;
			}

			.uni-bg-blue {
				background-color: blue;
			}

			.uni-bg-black {
				background-color: #000000;

			}
		}
	}

	.uni-navbar {
		font-size: 32rpx;
		font-weight: bold;

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #F7F7F7;
			// height: $nav-height;
			height: 60rpx;
			border-radius: 20px;
			padding: 0 12px;
			flex-wrap: nowrap;
			margin: 7px 0;
			align-items: center;
			line-height: 60rpx;
		}

		.input-uni-icon {
			// line-height: $nav-height;
			height: 25rpx;
			width: 30rpx;
			// padding-top: 5.37rpx;
			line-height: 0px;

			image {
				height: 100%;
				width: 100%;
				margin: 0 auto;

			}
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding-left: 10rpx;
			// padding: 2rpx 5px;
			// padding-bottom: 8rpx;

			font-size: 12px;
			// background-color: #F7F7F7;
			font-weight: 500;
		}

		/deep/.uni-navbar--border {
			border-bottom-width: 0;
			border-bottom-style: none;
		}

		.nav_right {
			padding-right: 30rpx;
			padding-top: 12px;

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

	.info_price {
		font-size: 44rpx;
		font-weight: bold;
		margin-top: 40rpx !important;
	}

	.goods_info {
		padding: 0 26.67rpx;
		padding-top: 20.67rpx;
		// padding-bottom: 15.33rpx;
		// border-bottom: #F7F7F7 13.33rpx solid;
		font-size: 30.67rpx;
		font-weight: 400;


		.goods_info_price {
			display: flex;
			align-items: center;
			font-size: 44rpx;
			font-weight: bold;
			margin-top: 23rpx;
			justify-content: space-between;
			// margin-bottom: 45.33rpx;

			.info_price_right {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;

					&:last-child {
						margin-left: 27.33rpx;
					}
				}
			}
		}

		.evaluate {
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			// padding-bottom: 33.33rpx;
			// border-bottom: 1px solid #E2E2E2;
			margin-bottom: 28rpx;

			.evaluate_text {
				font-weight: 500;
				color: #B22234;
				margin: 0 10rpx;
			}
		}

		.variations {
			font-size: 29.33rpx;
			padding-top: 32rpx;

			.variations_title {
				display: flex;
				align-items: center;
				margin-bottom: 34.67rpx;

				.variations_title_left {
					font-weight: bold;
					margin-right: 35rpx;
				}
			}

			.variations_select {
				display: flex;
				align-items: center;

				.variations_select_varieties {
					display: flex;

					.select_varieties_image {
						width: 126.67rpx;
						height: 126.67rpx;
						margin-right: 9.33rpx;
						// background-color: #999999;

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

			}
		}

	}

	.promotion {
		padding-top: 36rpx;
		padding-left: 30.67rpx;
		border-bottom: #F7F7F7 13.33rpx solid;
		padding-bottom: 35.33rpx;

		.promotion_title {
			font-size: 29.33rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
		}

		.promotion_content {
			display: flex;
			align-items: center;
			color: #B22234;
			font-size: 18rpx;

			.promotion_content_item {
				background-color: #FBFAF8;
				padding: 20rpx 0;
				padding-left: 22.67rpx;
				display: flex;
				align-items: center;
				padding-right: 18rpx;
				margin-right: 18.67rpx;

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

				.promotion_item_right {
					margin-left: 8.67rpx;

					.title {
						font-weight: 600;
					}
				}
			}
		}
	}

	.transport {
		padding: 0 26.67rpx;
		// padding-top: 17.33rpx;
		// border-bottom: #F7F7F7 13.33rpx solid;

		.title_Mtop {
			margin-top: 25.33rpx;
		}

		.security {
			padding-top: 36rpx;
			padding-bottom: 32.67rpx;
			// border-bottom: 1px solid #E2E2E2;

			.security_content {

				margin-top: 26rpx;
				padding-left: 10rpx;

				font-weight: 400;
				// background-color: #B22234;
				display: flex;
				flex-wrap: wrap;

				.icon {
					height: 60rpx;
					width: 40%;
					line-height: 40rpx;
					text-align: start;
					// background-color: pink;
					// margin: 12rpx; 
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
				}

				// ul{	
				// 	width: 300rpx;
				// 	padding-left: 0;
				// 	margin-bottom: 50.67rpx;
				// 	&:last-child{
				// 		margin-bottom: 0;
				// 	}
				// 	li{

				// 		width: 150rpx;
				// 		// display: block;
				// 		// float: left;
				// 		margin-left: 50rpx;
				// 	}
				// }
			}
		}

		.description {
			padding: 34.67rpx 0;
		}
	}

	.reviews {
		// border-bottom: #F7F7F7 13.33rpx solid;
		padding: 0 26.67rpx;
		padding-top: 36rpx;

		.allReviews {
			background-color: #1b1b1b;
			display: flex;
			opacity: 0.8;
			// background: rgba(0, 0, 0, 0.2);
			align-items: center;
			padding-left: 26.67rpx;
			border-radius: 6.67rpx;
			font-size: 45.67rpx;
			font-weight: 800;
			margin-top: 32.67rpx;
			height: 118.67rpx;
			color: #fff;

			text {
				display: inline-block;
				margin-right: 42rpx;
			}
		}

	}

	.productImage {
		.productImage_title {
			padding: 35.33rpx 36.67rpx;
			font-size: 29.33rpx;
			font-weight: bold;
		}

		.productImage_image {
			width: 100%;
			min-height: 788rpx;
			margin-bottom: 0 !important;
			margin-top: 20rpx;
			// margin-bottom: 62rpx;
			background-color: #fff;
			display: grid;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.productImage_image1 {
			width: 100%;
			height: 350px;

			// background-color: #999999;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.recommend1 {
			padding-top: 0;
			padding-right: 0;

			.spike1 {
				border-bottom: none;
			}
		}
	}

	.footer {
		padding-top: 11rpx;
		padding-bottom: 37rpx;
		padding-left: 27.33rpx;
		padding-right: 19.33rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		border-top: 1px solid #F6F5FA;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;

		.footer_left {
			font-weight: bold;
			display: flex;
			align-items: center;
			color: #000;
		}

		.footer_right {
			display: flex;
			align-items: center;
			font-weight: 400;

			button {
				height: 73.33rpx;
				line-height: 73.33rpx;
				background-color: #191919;
				margin: 0;
				font-size: 26.67rpx;
				color: white;
				border-radius: 0;
				width: 383.33rpx;
			}
		}
	}

	.special {
		background-image: url('@/static/img/special_bg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 72rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #fff;
		padding-left: 29.33rpx;
		padding-right: 22rpx;
		justify-content: space-between;
		font-weight: bold;
		box-sizing: border-box;

		.special_left {
			display: flex;
			align-items: center;
			font-family: Source Han Sans CN;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}

		.special_right {
			display: flex;
			align-items: center;

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

			.countdown {
				margin: 0 12.67rpx;
			}
		}
	}

	.Isshare {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		padding-left: 29.33rpx;
		padding-right: 29.33rpx;
		box-sizing: border-box;
		padding-top: 77.67rpx;
		width: 100%;
		font-size: 30.67rpx;
		font-weight: 400;
		padding-bottom: 74.67rpx;

		.order_popup_title {
			position: relative;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1px solid #E2E2E2;
			display: flex;
			color: #000;
			align-items: center;
			justify-content: center;
			// padding-top: 44.67rpx;
			padding-bottom: 50.67rpx;
			text-align: center;

			image {
				width: 21.33rpx;
				height: 21.33rpx;
				position: absolute;
				right: 26rpx;

			}
		}

		.share_icon {
			display: flex;
			width: 100%;
			margin: 10rpx 10rpx;
			flex-direction: row;
			flex-wrap: nowrap;
			font-size: 20rpx;
			line-height: 40rpx;
			text-align: center;

			.icon_one {
				width: 100rpx;
				height: 150rpx;
			}

			.icon_item {
				width: 100rpx;
				height: 150rpx;
				margin-top: 20rpx;
				color: #000;
				margin-left: 20.37rpx;
				margin-right: 20.36rpx;
				background-color: #fff;

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

	.text_margin {
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.recommend_content_name,
	.recommend_content_item_pric {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.recommend_content_item_pric {
		display: flex;
		justify-content: space-between;

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

	.recommend_content_name {
		font-size: 13px;
		height: 52rpx;
		line-height: 52rpx;
	}

	.bootom_last {
		// height: 200rpx;
		height: 60px;
		width: 100%;
		color: #fff;
		font-size: 25rpx;
		// line-height: 200rpx;
		line-height: 50px;
		text-align: center;
	}

	// uni-image {
	// 	margin-top: -2px !important;
	// }
	/deep/.nav_left .uni-image .data-v-af9236d6 {
		background-size: 0% !important;
	}

	/deep/ .uni-navbar__header {
		height: auto !important;
	}

	.footer_right uni-button {
		border-radius: 6px !important;
	}

	.uni-navbar .input-uni-icon {
		height: 16px !important;
		width: 16px !important;
	}

	uni-page-body {
		padding-bottom: 30px !important;
		background-color: black !important;
	}

	uni-page-wrapper {
		background: #000;
		height: auto;
	}

	/deep/ body.pages-productDetails-index {
		background-color: #000 !important;
		overflow-x: auto !important;
		height: 100%;
	}

	body {
		background-color: #000;
	}
</style>
