<template>
	<view class="maintenance-detail">
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar :status-bar="true" :border="false" :background-color="'transparent'" :fixed="true"
			@click-left="handleClickLeft">
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<image style="width: 16rpx;height:30rpx;" src="../.././static/common/white_left_arrrow.png"></image>
				</view>
			</block>
		</uni-nav-bar>
		<!-- 自定义导航栏结束  style="padding-bottom: 164rpx;" -->

		<view class="content" :style="{ overflow: show ? 'hidden' : 'auto',
		 height: '100vh'}">
			<!-- <view class="top-fixed" :style="{ height: paddingTop }">
				swiper图
				<image style="width: 100%;height: 100%;" :mode="'widthFix'" :src="currentSwiperImg">
				</image>
			</view> -->

			<view class="swiper-wrap">
				<swiper class="swiper" :current="current" @change="changeswiper">
					<swiper-item v-for="(item, index) in goodsInfo.goodsImageList" :key="index">
						<view class="swiper-item">
							<image style="width: 100%;height: 100%;" :src="item" :mode="'aspectFill'"
								@click="previewImage(goodsInfo.goodsImageList,index)"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="shop-car" :style="{ top: paddingTop }" @click="enterShopCar">
					<image src="../.././static/common/shop_car.png" style="width: 100%;height: 100%;"></image>
				</view> -->
				<view class="swiper-num fw400 fs28">
					{{current+1}}/{{JSON.stringify(goodsInfo.goodsImageList) !== 'null' ?goodsInfo.goodsImageList&&goodsInfo.goodsImageList.length : 0}}
				</view>
			</view>

			<view class="content-detail">
				<view class="shop-desc">
					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-16">
							<view class="main-color">
								<text class="fs38">￥</text>
								<text class="fs44">{{goodsInfo.goodsPrice}}</text>
							</view>
							<button open-type="share" class="u-f u-f-fdc u-f-jcc shareBtn">
								<image class="share-icon" :mode="'widthFix'" src="../.././static/common/share.png">
								</image>
								<text class="main-color fs22 fw400">分享</text>
							</button>
						</view>
						<view class="fw700 fs32 light-black two-line-ellipsis mg-bot-16">
							{{goodsInfo.goodsName}}
						</view>
						<view class="u-f u-f-jcfs u-f-aic fs24 light-gray">
							<text class="mg-right-10">总销</text>
							<text>{{goodsInfo.totalSales}}</text>
						</view>
						<view v-if="goodsInfo.tireParametersMap&&goodsInfo.tireParametersMap.patternPerformance!=null"
							class="guige u-f u-f-jcsb u-f-aic mg-top-20" @click="showTireParameter">
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/huawen.png"></image>
								<text class="light-black fs24 mg-bot-6">花纹性能</text>
								<text
									class="light-blac fs22">{{goodsInfo.tireParametersMap&&goodsInfo.tireParametersMap.patternPerformance || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/chicun.png"></image>
								<text class="light-black fs24 mg-bot-6">尺寸</text>
								<text class="light-blac fs22">{{goodsInfo.tireParametersMap.size || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/guochan.png"></image>
								<text class="light-black fs24 mg-bot-6">国产/进口</text>
								<text
									class="light-blac fs22">{{goodsInfo.tireParametersMap.domesticImports || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/guochan.png"></image>
								<text class="light-black fs24 mg-bot-6">轮胎类型</text>
								<text class="light-blac fs22">{{goodsInfo.tireParametersMap.tireType || '_'}}</text>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcfs u-f-aifs">
							<view class="fw400 light-gray fs28 mg-right-14 vertical-text" style="flex: 28rpx;">适用门店
							</view>
							<view class="right u-f u-f-jcfs" style="width: calc(100% - 28rpx);">
								<view class="mg-right-12" style="width: 133rpx;">
									<image class="border-radius-9" style="width: 134rpx;height: 134rpx;"
										:mode="'scaleToFill'" :src="goodsInfo.storeLogo"></image>
								</view>
								<view style="width: calc(100% - 133rpx)">
									<view class="u-f u-f-jcsb u-f-aic mg-bot-10">
										<view class="fs28 fw400 light-black one-line-ellipsis" style="flex: 1;">
											{{goodsInfo.storeName}}
										</view>
										<view class="u-f u-f-jcfs u-f-aic" @click="goToShopDetail">
											<text
												class="fs24 fw400 light-gray mg-right-18">{{goodsInfo.storeNum}}家门店</text>
											<image src="../.././static/common/big_gray_right_arrow.png"
												:mode="'widthFix'" style="width: 13rpx;height: 26rpx"></image>
										</view>
									</view>
									<view class="mg-bot-10">
										<text class="fs28 light-gray fw400">{{goodsInfo.distance}}km</text>
									</view>
									<view class="u-f u-f-jcsb u-f-aic" @click="skipCityMap(goodsInfo)">
										<text
											class="fs28 fw400 light-gray one-line-ellipsis">{{goodsInfo.detailedAddress}}</text>
										<view class="u-f u-f-jcfe u-f-aic">
											<image class="send-icon" :mode="'widthFix'"
												src="../.././static/common/send.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcsb u-f-aic" @click="handleShowChoiseSize">
							<view>选择规格</view>
							<view class="u-f u-f-jcsb u-f-aic">
								<text
									class="fs26 light-gray mg-right-10">{{goodsInfo.specificationListList&&goodsInfo.specificationListList[active]?goodsInfo.specificationListList[active].specificationsName:"无规格"}}</text>
								<image src="../.././static/common/sg_right_arrow.png" :mode="'widthFix'"
									style="width: 13rpx;height: 13rpx;"></image>
							</view>
						</view>
					</view>

					<view class="common-card mg-top-20">
						<view class="ue-title u-f u-f-jcsb u-f-aic" @click="jumpToEvaluationList">
							<common-title :msg="'用户评价'"></common-title>
							<view>
								<image src="../.././static/common/sg_right_arrow.png"
									style="width: 13rpx;height: 13rpx;" :mode="'widthFix'">
								</image>
							</view>
						</view>
						<view v-if="reviewsList&&reviewsList.length > 0">
							<view class="ue-user u-f u-f-jcfs u-f-aic mg-top-16">
								<image class="mg-right-10" style="border-radius: 50%;width: 78rpx;height: 78rpx;"
									:src="reviewsList[0].avatarUrl"></image>
								<view class="user-desc">
									<view class="fs26 fw400 light-black mg-bot-8">{{reviewsList[0].nickName}}</view>
									<view class="evaluate-wrap u-f u-f-jcfs">
										<view class="fs24 fw400 light-gray mg-right-10">{{reviewsList[0].createTime}}
										</view>
										<view class="evaluate u-f">
											<view v-if="reviewsList[0].score!=0">
												<image v-for="i in reviewsList[0].score" :key="i"
													src="../.././static/common/star.png"
													style="width: 32rpx;height: 32rpx;">
												</image>
											</view>
											<view v-else>
												<image v-for="i in 5" :key="i" src="../.././static/common/star.png"
													style="width: 32rpx;height: 32rpx;">
												</image>
											</view>
											<view class="star-num fs24" style="color: #F2CB51;">
												{{reviewsList[0].score}}.0分
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="ue-content mg-top-24">
								<view class="light-black ellipsis mg-bot-10 fs24 fw400"
									v-if="reviewsList[0].commentContent">
									{{reviewsList[0].commentContent}}
								</view>
								<view style="height: 150rpx;">
									<scroll-view scroll-x>
										<view class="image-list u-f u-f-jcfs"
											v-if="reviewsList[0].commentImageList && Object.prototype.toString.call(reviewsList[0].commentImageList) !== '[object Null]'">
											<view class="mg-right-12"
												v-for="(innerItm,innerIdx) in reviewsList[0].commentImageList"
												:key="innerIdx">
												<image style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"
													:mode="'widthFix'"
													:src="'https://image.xnszz.com/2024/11/08/c901b6a55f0cdf92801437b28293ab22_20241108232534A001.png'">
												</image>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
						<view v-else class="fs24 light-gray mg-top-30" style="text-align: center;">暂无评论</view>
					</view>

					<view class="common-card mg-top-20 mg-bot-20">
						<view class="good-detail">
							<view class="gr-title u-f u-f-aic u-f-jcc">
								<view class="left-line mg-right-16"></view>
								<view class="fw600 main-color fs32 mg-right-16">商品详情</view>
								<view class="right-line"></view>
							</view>
							<view>
								<rich-text :nodes="goodsInfo.serviceIntroduction"></rich-text>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-34 u-f u-f-jcfs u-f-aic" style="margin-bottom: 100rpx;">
						<image src="../.././static/common/exclamation_ point.png" style="width: 20rpx;height: 20rpx;">
						</image>
						<text class="light-gray fs24 fw400">“平台只为用户和商家提供服务，开发票请找服务商家”</text>
					</view>

				</view>
			</view>

			<!-- <view class="fix-bot u-f u-f-jcsa u-f-aic">
				<view class="left u-f u-f-jcfs u-f-aic" style="calc(100% - 48rpx);">
					<view class="u-f u-f-fdc u-f-jcc mg-right-48" @click="addCollection">
						<image v-show="goodsInfo.isCollect" class="already-collect mg-bot-10"
							src="../.././static/common/star.png"></image>
						<image v-show="!goodsInfo.isCollect" class="already-collect mg-bot-10"
							src="../.././static/common/collect.png"></image>
						
						<text class="light-black fs24 fw400">收藏</text>
					</view>
					<view class="u-f u-f-fdc u-f-jcc" @click="showCusServeicePopup">
						<text class="serve-person mg-bot-10"></text>
						<text class="light-black fs24 fw400">客服</text>
					</view>
				</view>
				<view class="right u-f u-f-jcfs u-f-aic">
					<view class="default-line-btn mg-right-10" @click="handleShowChoiseSize(1)">加购物车</view>
					<view class="main-btn" @click="handleShowChoiseSize(2)">立即购买</view>
				</view>
			</view> -->

			<view class="fix-bot">
				<view class="u-f u-f-jcsb u-f-aic" style="padding: 0 24rpx;">
					<view class="u-f u-f-jcc u-f-aic" style="flex: 1">
						<view class="u-f u-f-fdc u-f-jcfe mg-right-48" style="align-items: center;"
							@click="addCollection">
							<image v-show="goodsInfo.isCollect" class="already-collect mg-bot-10"
								src="../.././static/common/star.png"></image>
							<image v-show="!goodsInfo.isCollect" class="collect mg-bot-10"
								src="../.././static/common/collect.png"></image>
							<text class="light-black fs24 fw400">收藏</text>
						</view>
						<view class="u-f u-f-fdc u-f-jcc" style="align-items: center;" @click="showCusServeicePopup">
							<text class="serve-person mg-bot-10"></text>
							<text class="light-black fs24 fw400">客服</text>
						</view>
					</view>
					<view class="u-f u-f-jcc u-f-aic" style="flex: 3" @click="handleShowChoiseSize(2)">
						<text class="main-btn" style="width: 100%;text-align: center;">立即购买</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup :position="'bottom'" class="updatePopup" :show="show" @hidePopup="handleHidePopup">
			<view class="share-modal">
				<image class="gray-close fw70" @click="handleHidePopup" src="../../static/common/gray_close.png"
					mode=""></image>
				<!-- <view class="gray-close fw70" @click="handleHidePopup"></view> -->
				<view class="u-f u-f-aic u-f-jcc one-line-ellipsis mg-bot-32 fw600 fs28">
					分享出去，让更多人看到
				</view>

				<view class="content-wrap u-f u-f-fdc u-f-aic">
					<image :src="path" mode="widthFix"></image>

					<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event;" hidden
						css="width: 429rpx;height: 562rpx;border: 10rpx solid #FF5502;border-radius:12rpx;padding:20rpx;background:#fff">
						<!-- 基础用法 -->
						<l-painter-image :src="goodsInfo.goodsImageList&&goodsInfo.goodsImageList[0]"
							css="width: 373rpx; height: 363rpx;margin-bottom:10rpx;object-fit: contain;" />
						<l-painter-text :text="goodsInfo.goodsName"
							css="font-size: 28rpx;color: #333333;line-clamp:1" />

						<l-painter-view css="display:flex;">
							<l-painter-text
								:text="'￥' + goodsInfo.specificationListList&&goodsInfo.specificationListList[active]?goodsInfo.specificationListList[active].specificationsUnitPrice:goodsInfo.goodsPrice"
								css="font-size: 28rpx;color: #FF4502;margin-right:20rpx" />
							<l-painter-text
								:text="goodsInfo.specificationListList&&goodsInfo.specificationListList[active]?goodsInfo.specificationListList[active].specificationsOriginalPrice:goodsInfo.commodityPrice"
								css="font-size: 24rpx;color: #999999; text-decoration: line-through;vertical-align: bottom;" />
							<l-painter-image :src="QRCode"
								css="width: 70rpx; height: 70rpx;object-fit: contain;margin-left:100rpx" />
						</l-painter-view>
					</l-painter>

					<view class="share u-f u-f-jcsb u-f-aic mg-top-30 mg-bot-46">
						<view class="u-f u-f-fdc u-f-aic" @click="handleShareWxFriend">
							<view class="wx mg-bot-8">
								<image src="../../static/common/weixin.png" style="width: 100%;height: 100%;" mode="">
								</image>
							</view>
							<text class="fs24 light-gray">微信好友</text>
						</view>
						<view class="u-f u-f-fdc u-f-aic" @click="handleShareWxPengyouquan">
							<view class="wx-pengyouquan mg-bot-8">
								<image src="../../static/common/pengyouquan.png" style="width: 100%;height: 100%;"
									mode="">
								</image>
							</view>
							<text class="fs24 light-gray">朋友圈</text>
						</view>
					</view>

					<view class="u-f u-f-aic u-f-jcc" style="width: 100%;">
						<view class="line-gradient-btn" style="flex: 1;padding: 22rpx 0;" @click="savePic">保存图片</view>
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup :position="'bottom'" class="updatePopup" :show="showChoiseSize" @hidePopup="handleHideChoiseSize">
			<view class="share-modal">
				<view class="gray-close fw70" @click="handleHideChoiseSize">
					<image style="width: 100%;height: 100%;" src="/static/common/gray_close.png"></image>
				</view>
				<view>
					<view class="u-f  u-f-aic">
						<image style="width: 146rpx;height: 146rpx;border-radius: 8rpx;" :mode="'scaleToFill'"
							:src="goodsInfo.goodsImageList&&goodsInfo.goodsImageList[current]"></image>

						<view class="u-f u-f-fdc u-f-aifs mg-left-10">
							<view class="light-black fs32 two-line-ellipsis" style="text-align: left;">
								{{goodsInfo.goodsName}}
							</view>
							<view class="u-f u-f-jcfs u-f-aic mg-top-20">
								<view class="light-black mg-right-18 main-color fw600">
									<text class="fs38">￥</text>
									<text
										class="fs44">{{goodsInfo.specificationListList&&goodsInfo.specificationListList[active]?goodsInfo.specificationListList[active].specificationsUnitPrice:goodsInfo.goodsPrice}}</text>
								</view>
								<view class="light-gray fs24">
									<text
										class="delete-line">￥{{goodsInfo.specificationListList&&goodsInfo.specificationListList[active]?goodsInfo.specificationListList[active].specificationsOriginalPrice:goodsInfo.goodsOriginalPrice}}</text>
								</view>
							</view>
						</view>

					</view>

					<view class="mg-bot-40">
						<view class="fw700 light-black fs28 mg-bot-24" style="text-align: left;">规格</view>
						<view class="tab-list u-f u-f-jcfs">
							<view :class="['tab-item mg-right-20', active === index ? 'active' : '']"
								v-for="(item, index) in goodsInfo.specificationListList" :key="item.specificationsId"
								@click="getItemSpec(item,index)">
								{{item.specificationsName}}
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcsb u-f-aic mg-bot-56">
						<text>数量</text>
						<view>
							<uni-number :min="1" v-model="number"></uni-number>
						</view>
					</view>

					<view class="u-f u-f-aic u-f-jcc" style="width: 100%;">
						<view class="line-gradient-btn" style="flex: 1;padding: 22rpx 0;" @click="$debounce(quickBuy)">
							{{isShowCart == 1?'加入购物车':'立即购买'}}
						</view>
					</view>

				</view>
			</view>
		</uni-popup>

		<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="hideCusServeicePopup">
			<view class="common-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
				<view class="mg-top-38 deep-gray u-f u-f-jcc u-f-aic">
					<text>客服电话：{{customerService.cusServicePhone}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(customerService.cusServicePhone)">
					<text class="confirm">拨打电话</text>
				</view>
			</view>
		</uni-popup>
		<!-- 轮胎参数展示 -->
		<uni-popup :position="'bottom'" class="updatePopup" :show="showTire" @hidePopup="hideTireParameter">
			<view class="tire-modal">
				<view class="u-f u-f-aic u-f-jcc mg-bot-40">
					<text class="fs32 fw600 light-blac">商品参数</text>
				</view>
				<view style="margin-bottom: 136rpx;padding-left: 20rpx;">
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>花纹性能</text>
						</view>
						<text
							class="light-black">{{goodsInfo.tireParametersMap&&goodsInfo.tireParametersMap.patternPerformance}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>尺寸</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.size}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>国产/进口</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.domesticImports}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>轮胎类型</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.tireType}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>胎面宽度</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.treadWidth}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>扁平比</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.aspectRatio}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfs fs28 mg-bot-24">
						<view style="width: 124rpx;margin-right: 58rpx;" class="light-gray u-f u-f-jcfs u-f-aic">
							<text>速度级别</text>
						</view>
						<text class="light-black">{{goodsInfo.tireParametersMap.speedLevel}}</text>
					</view>
				</view>
				<view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 100%;">
						<view class="line-gradient-btn" style="flex: 1;padding: 22rpx 0;" @click="hideTireParameter">
							我知道了</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let app = getApp()
	import commonTitle from "../.././components/common-title/common-title.vue"
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"
	import {
		debounce
	} from '@/common/utils.js';

	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		components: {
			commonTitle,
			uniNumber
		},
		data() {
			return {
				current: 0,
				goodsId: 0,
				goodsInfo: {},
				specificationsId: 0,
				inventory: "",
				number: 1,
				active: 0,
				isShowCart: 1,
				paddingTop: 0,
				show: false,
				showChoiseSize: false,
				lat: 0,
				lon: 0,
				QRCode: '',
				path: '',
				reviewsList: [],
				showBotPopup: false,
				customerService: {},
				currentSwiperImg: '',
				storeId: 0,
				isChangeShop: false,
				showTire: false,
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onLoad(option) {
			this.goodsId = option.id
			this.storeId = option.storeId
			this.getLocation()
			const token = uni.getStorageSync('token')
			if (!token && option.share != null) {
				//沒有登录  先登录
				uni.navigateTo({
					url: '/pages/login/login?share=1'
				})
			}
		},

		onShow() {
			const token = uni.getStorageSync('token')
			if (token) {
				this.getGenerateQRCodeData()
				this.getCustomerService()
			}
			let detail = uni.getStorageSync('detail');
			if (detail && this.isChangeShop) {
				let object = JSON.parse(detail);
				this.goodsInfo.storeLogo = object.storeLogo
				this.goodsInfo.storeName = object.storeName
				this.goodsInfo.distance = object.distance
				this.goodsInfo.score = object.score
				this.goodsInfo.storeId = object.storeId
				this.goodsInfo.detailedAddress = object.detailedAddress
				this.goodsInfo.commentNum = object.commentNum
				this.goodsInfo.totalSales = object.totalSales
			}
		},
		onShareAppMessage(res) {
			return {
				title: '[￥' + this.goodsInfo.goodsPrice + ']' + this.goodsInfo.goodsName, // 分享出去的标题
				path: '/pagesB/good-product-detail/good-product-detail?id=' + this.goodsId + '&storeId=' + this
					.storeId + '&share=1' // 分享出去的页面路径
			}
		},
		onShareTimeline() {
			return {
				title: this.goodsInfo.goodsName,
				query: 'id=' + this.goodsId,
			}
		},

		methods: {
			// 
			getItemSpec(data, index) {
				this.active = index;
				this.specificationsId = data.specificationsId;
				this.inventory = data.inventory
			},
			//预览图片
			previewImage(urls, current) {
				console.log(urls)
				console.log(current)
				uni.previewImage({
					urls: urls,
					current
				})
			},
			//保存海报
			savePic(type) {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						// 非H5 保存到相册
						// H5 提示用户长按图另存
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								if (type == 'pengyouquan') {
									uni.showToast({
										icon: 'none',
										title: '保存成功，请到朋友圈分享海报!!!'
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '保存成功'
									})
								}
								console.log('save success');
							}
						});
					},
				});
			},

			//获取小程序二维码
			getGenerateQRCodeData() {
				this.$http.get('/api/client/userInfo/generateQRCode', {
					path: "/pagesB/good-product-detail/good-product-detail?id=" + this.goodsId + '&storeId=' + this
						.storeId + '&share=1'
				}).then((res) => {
					this.QRCode = res.data.data
				})
			},

			//收藏
			addCollection() {
				this.$http.post('/api/client/collectionRecord/addCollection', {
					targetId: this.goodsId,
					storeId: this.goodsInfo.storeId,
					type: 2
				}).then(res => {
					this.goodsInfo.isCollect = !this.goodsInfo.isCollect
					if (this.goodsInfo.isCollect) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '取消收藏成功'
						})
					}
				})
			},
			async getGoodInfo() {
				let data = {
					"storeId": this.storeId,
					"goodsId": this.goodsId,
					"lat": this.lat,
					"lon": this.lon
				}

				let res = await this.$http.post('/api/client/store/storeGoodsDetails', data)

				let goodsInfo = res.data.data
				this.goodsInfo = goodsInfo
				this.inventory = goodsInfo.inventory
				if (this.goodsInfo.specificationListList.length != 0) {
					this.inventory = this.goodsInfo.specificationListList.length > 0 ? this.goodsInfo
						.specificationListList[this.active].inventory : ''
					this.specificationsId = this.goodsInfo.specificationListList.length > 0 ? this.goodsInfo
						.specificationListList[this.active].specificationsId : ''
				}
				console.log(goodsInfo.serviceIntroduction, 'goodsInfo.serviceIntroduction')
				if (goodsInfo.serviceIntroduction) {
					goodsInfo.serviceIntroduction = goodsInfo.serviceIntroduction.replace(/\<img/gi,
						'<img style="max-width:100% !important;height:auto !important" ')
					goodsInfo.serviceIntroduction = goodsInfo.serviceIntroduction.replace(/style=""\s*/gi, '');
				}
				// let content = this.goodsInfo.serviceIntroduction.replace(/style="[^"]*"/g, '').replace(/\<img/gi,
				// 	'<img style="max-width:100% !important;height:auto !important" ')
				this.goodsInfo.serviceIntroduction = goodsInfo.serviceIntroduction
				this.getReviewsList()
				this.setFirstImg()
			},
			async getLocation() {
				try {
					let res = await uni.getLocation({
						type: 'wgs84'
					});
					// console.log("123123", res)
					let lat = res.latitude; // 获取纬度
					let lon = res.longitude; // 获取经度
					// console.log("lat", lat)
					// console.log("lon", lon)

					this.lat = lat;
					this.lon = lon;
					// console.log("当前位置的经纬度：", this.lat, this.lon);

					this.getGoodInfo()

				} catch (e) {
					// console.error("获取位置信息失败：", e);
				}
			},
			async createBill() {
				let data = {
					"storeId": this.goodsInfo.storeId,
					"type": 1,
					// "userCarId": 0,
					"goodsId": this.goodsInfo.goodsId,
					"specificationsId": this.specificationsId,
					"goodsNum": this.number,
					"lon": this.lon,
					"lat": this.lat
				}

				console.log("createBill", data)

				uni.showLoading({
					title: '正在创建订单...',
					mask: true
				})
				let res = await this.$http.post('/api/client/order/createOrder', data)
				console.log(res);
				uni.hideLoading()
				if (res.data.code == 200) {
					let goodsInfo = res.data.data
					// app.data = goodsInfo
					this.User.navigate({
						url: "/pagesB/good-product-buy/good-product-buy?data=" + encodeURIComponent(JSON
							.stringify(goodsInfo))
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}

			},
			async getCustomerService() {
				let res = await this.$http.get('/api/client/userInfo/customerService')
				let customerService = res.data.data
				this.customerService = customerService
			},
			// enterShopCar() {
			// 	uni.navigateTo({
			// 		url: '/pagesC/shop-car/shop-car'
			// 	})
			// },
			handleHidePopup() {
				this.show = false;
			},
			showBottomPopup() {
				this.show = true;
			},
			sharePic() { //分享图片给好友按钮的点击事件函数
				let that = this
				this.base64ToFilePath(this.userInfo.jumpAddFriendQr, (filePath) => {
					console.log(filePath);
					wx.showShareImageMenu({ //分享给朋友
						path: filePath,
						success: (res) => {
							console.log("分享成功：", res);
						},
						fail: (err) => {
							console.log("分享取消：", err);
						},
					})
				})
			},
			base64ToFilePath(base64data, fun) { //封装的base64转换成临时文件路径的函数
				const base64 = base64data; //base64格式图片
				const time = new Date().getTime();
				const imgPath = wx.env.USER_DATA_PATH + "/addFriends" + time + "share_qrcode" +
					".png"; //去掉data:image/png;base64,如果图片字符串不含要清空的前缀,可以不执行下行代码.
				const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
				const file = wx.getFileSystemManager();
				file.writeFileSync(imgPath, imageData, "base64");
				fun(imgPath);
			},
			handleShareWxFriend() {
				let that = this
				this.base64ToFilePath(this.path, (filePath) => {
					console.log(filePath);
					wx.showShareImageMenu({ //分享给朋友
						path: filePath,
						success: (res) => {
							console.log("分享成功：", res);
						},
						fail: (err) => {
							console.log("分享取消：", err);
						},
					})
				})
				console.log(this.path);
				// uni.downloadFile({
				//   url: this.path,
				//   success: (res) => {
				//    console.log(res);
				//     uni.showShareImageMenu({
				//       path: res.tempFilePath
				//     })
				//   }
				// })


			},
			handleShareWxPengyouquan() {
				this.savePic('pengyouquan')

			},
			handleShowChoiseSize(type) {
				this.showChoiseSize = true;
				this.isShowCart = type
			},
			handleHideChoiseSize() {
				this.showChoiseSize = false;
			},
			quickBuy() {
				const inventory = Number(this.inventory);
				const number = Number(this.number);
				console.log(inventory, number, "number");
				if (isNaN(inventory) || isNaN(number)) {
					// console.log("输入的值无效");

				} else {
					// 库存数量小于下单数量不予执行
					if (inventory < number) {
						console.log("库存小于数字");
						uni.showToast({
							icon: "none",
							title: "暂无更多库存，请减少数量或者更换规格"
						})
						return
					}
					if (this.isShowCart == 1) {
						this.addcart()
					} else {
						this.createBill()
					}
				}


			},
			async getReviewsList() {
				let data = {
					"pageNum": 1,
					"pageSize": 5,
					"goodsId": this.goodsId,
					"storeId": this.goodsInfo.storeId
				}

				let res = await this.$http.post('/api/client/store/reviewsList', data)
				let reviewsList = res.data.data.rows
				this.reviewsList = reviewsList || []
			},
			async addcart() {
				let data = {
					"storeId": this.goodsInfo.storeId,
					"type": 1,
					// "userCarId": 0,
					"goodsId": this.goodsInfo.goodsId,
					"goodsSpecificationId": this.specificationsId,
					"goodsNum": this.number,
					"lon": this.lon,
					"lat": this.lat,
					"goodsSpecification": this.goodsSpecification
				}
				this.handleHideChoiseSize()
				let res = await this.$http.post('/api/client/shopping/add', data, {
					token: true,
					checkToken: true
				})
				let resData = res.data
				console.log("resData", resData)

				uni.showToast({
					title: resData.msg,
					duration: 500
				})

			},
			showCusServeicePopup() {
				this.showBotPopup = true
				console.log("showCusServeicePopup", this.showBotPopup)
			},
			hideCusServeicePopup() {
				this.showBotPopup = false
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			changeswiper(e) {
				this.current = e.detail.current
				this.setFirstImg()
			},
			handleClickLeft() {
				// 获取当前页面栈
				const pages = getCurrentPages();

				// 判断是否有上一页
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			setFirstImg() {
				this.currentSwiperImg = this.goodsInfo.goodsImageList[this.active]
			},
			skipCityMap(data) {
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goToShopDetail() {
				this.isChangeShop = true
				this.User.navigate({
					url: "/pagesC/choice-shop/choice-shop?goodsId=" + this.goodsInfo.goodsId + '&storeType2Id=' + 0
				}, "navigateTo", true)
			},
			showTireParameter() {
				this.showTire = true
			},
			hideTireParameter() {
				this.showTire = false
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.maintenance-detail {
		.back-wrap {
			.white-back-icon {
				width: 30rpx;
				height: 30rpx;
				// background: url(../.././static/shop/white-left-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.content {
			position: relative;

			.top-fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 3;
				overflow: hidden;
			}

			.swiper-wrap {
				position: relative;

				.swiper {
					height: 750rpx;

					.swiper-item {
						display: block;
						width: 100%;
						height: 750rpx;
					}
				}

				.shop-car {
					padding-top: 10rpx;
					position: fixed;
					right: 28rpx;
					width: 62rpx;
					height: 62rpx;
					z-index: 1000;
				}

				.swiper-num {
					color: #ffffff;
					padding: 10rpx 24rpx;
					position: absolute;
					bottom: 58rpx;
					right: 24rpx;
					background-color: rgba(0, 0, 0, 0.25);
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					z-index: 2;
				}
			}

			.content-detail {
				position: relative;
				margin-top: -50rpx;
				padding: 26rpx 24rpx 24rpx 34rpx;
				background-color: #F9F9F9;
				border-radius: 40rpx 40rpx 0 0;

				.common-card {
					padding: 20rpx;
					border-radius: 18rpx;
					background-color: #ffffff;

					.youhuiquan {
						padding: 18rpx 20rpx;
						background: #FFF4F0;
						border-radius: 9rpx 9rpx 9rpx 9rpx;

						.main-color-right-arrow {
							width: 18rpx;
							height: 18rpx;
							// background: url(../.././static/maintenance/hight_right_arrow.png) no-repeat center center;
							background-size: 50%;
						}
					}

					.ue-user {
						.avatar {
							width: 78rpx;
							height: 78rpx;
						}

						.user-desc {
							.evaluate-wrap {
								.evaluate {
									.star-icon {
										width: 32rpx;
										height: 32rpx;
										// background: url(../.././static/star.png) no-repeat center center;
										// background-size: 100%;
									}

									.star-num {
										color: #F2CB51;
									}
								}
							}
						}
					}

					.ue-content {
						.image-list {
							.image-item {
								width: 78rpx;
								height: 78rpx;
							}
						}
					}

					.good-detail {
						.big-title {
							.left {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/left_rect.png) no-repeat center center;
								background-size: 100%;
							}

							.right {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/right_rect.png) no-repeat center center;
								background-size: 100%;
							}
						}

						.gantanhao {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}

		.fix-bot {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10rpx 0;
			background-color: #ffffff;
		}
	}

	.send-icon {
		width: 56rpx;
		height: 56rpx;
		// background: url(../.././static/common/send.png) no-repeat center center;
		// background-size: 100%;
	}

	.collect {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/common/collect.png) no-repeat center center;
		// background-size: 100%;
	}

	.already-collect {
		width: 40rpx;
		height: 40rpx;
	}

	.onCollect {
		width: 40rpx;
		height: 40rpx;
		background: url(../.././static/common/star.png) no-repeat center center;
		background-size: 100%;
	}

	.serve-person {
		width: 40rpx;
		height: 40rpx;
		background: url(../.././static/common/say.png) no-repeat center center;
		background-size: 100%;
	}

	.share-icon {
		width: 30rpx;
		height: 30rpx;
		// background: url(../.././static/common/share.png) no-repeat center center;
		background-size: 100%;
	}

	.default-line-btn {
		color: #333333;
		font-size: 28rpx;
		border-radius: 40rpx;
		padding: 22rpx 46rpx;
		text-align: center;
		background-color: transparent;
		border: 1rpx solid #707070;
	}

	.main-btn {
		color: #ffffff;
		font-size: 28rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 22rpx 100rpx;
	}

	.mark {
		font-size: 28rpx;
		padding: 8rpx 0 8rpx 36rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #FF4502 0%, rgba(255, 137, 3, 0) 100%);
	}

	.join-group-person {
		.main-title-btn {
			padding: 6rpx 12rpx;
			background: #FFF6F3;
			border-radius: 9rpx 4rpx 9rpx 2rpx;
			border: 1rpx solid #FFD0BF;
			color: #FF4502;
			margin-top: 16rpx;
		}
	}

	.join-group-progress {
		margin-bottom: 28rpx;

		.progress-wrap {
			flex: 2;
			margin-right: 10rpx;
		}

		.join-group-person {
			color: #FF4502;
		}
	}

	.share-modal {
		position: relative;
		padding: 44rpx;

		.gray-close {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			width: 42rpx;
			height: 42rpx;
			// background: url(../.././static/common/gray_close.png) no-repeat center center;
			background-size: 100%;
		}

		.content-wrap {
			width: 100%;

			.inner {
				position: relative;
				width: 420rpx;
				padding: 12rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
				border: 10rpx solid #FF4502;

				.codeImg {
					position: absolute;
					right: 21rpx;
					bottom: 21rpx;
					width: 70rpx;
					height: 70rpx;
					background-color: #FF4502;
					border-radius: 50%;
				}
			}

			.share {
				width: 420rpx;

				view {
					.wx {
						width: 58rpx;
						height: 58rpx;
						// background: url(../.././static/common/wx.png) no-repeat center center;
						background-size: 100%;
					}

					.wx-pengyouquan {
						width: 58rpx;
						height: 58rpx;
						// background: url(../.././static/common/wx__pengyouquan.png) no-repeat center center;
						background-size: 100%;
					}
				}
			}
		}
	}

	.product-card {
		flex: 1;
		border-radius: 18rpx;
		background-color: #ffffff;

		.pc-image {
			width: 100%;
			height: 340rpx;
		}

		.pc-desc {
			color: #333333;
			height: 74rpx;
		}

		.pc-price {
			margin-top: 10rpx;
			color: #FF4502;
		}
	}

	.tab-list {
		.tab-item {
			padding: 12rpx 30rpx;
			font-size: 22rpx;
			border-radius: 28rpx;
			background-color: transparent;
			border: 1rpx solid transparent;
			background-color: #F9F9F9;
			color: #333333;

			&.active {
				color: #FF4502;
				background-color: #FFEFE9;
				border-color: #FF4502;
			}
		}
	}

	.gr-title {
		margin-bottom: 26rpx;

		.left-line {
			width: 165rpx;
			height: 4rpx;
			background: url(../.././static/common/l_recom.png) no-repeat center center;
		}

		.center-title {
			color: #FF4502;
			margin-right: 16rpx;
		}

		.right-line {
			width: 165rpx;
			height: 4rpx;
			background: url(../.././static/common/r_recom.png) no-repeat center center;
		}
	}

	.updatePopup :deep(.uni-popup-bottom) {
		border-radius: 40rpx 40rpx 0 0;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}

	.guige .line {
		background-color: #707070;
		width: 1rpx;
		height: 50rpx;
		margin: 0 24rpx;
	}

	.shareBtn {
		background: #ffffff;
	}

	.shareBtn {
		margin: unset;
		padding: unset;
	}

	.shareBtn:after {
		border: unset;
	}
</style>