<template>
	<view class="content">
		<!-- 商品轮播图片 -->
		<view class="shop-banner" @click="showImg()">
			<swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000"
				:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"
				@change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in  banner" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 底部遮罩 -->
			<view class="banner-mask"></view>
			<!-- 数量 -->
			<view class="num-box"><text class="bold">{{ activeBanner }}</text>/{{ banner.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="det-info">
			<view class="row-box mb32">
				<view class="price">
					<!-- <text class="label">会员价</text> -->
					<text class="unit">￥</text><text class="num">{{product.price}}</text>

					<!-- <text class="label">零售价</text>
					<text class="old" >¥{{product.otPrice}}</text> -->
				</view>
				<view class="sale">已售2456件</view>
				<!-- <view class="share-box">
					<text class="text">分享</text>
					<image src="https://cdn.his.cdwjyyh.com/images/share1.png" mode=""></image>
					<button  class="share" data-name="shareBtn" open-type="share">分享</button>
				</view> -->
			</view>
			<view class="row-box mb24">
				<view class="lable-group">
					<view class="lable-item">9.5折</view>
					<view class="lable-item">限购1份</view>
				</view>
				<view class="lable-group" @click.stop="showCouponPopup">
							<text class="coupon">领券</text>
							<image class="icon" src="https://cdn.his.cdwjyyh.com/images/right_red.png" mode=""></image>
						</view>
			</view>
			<view class="name-box">
				<!-- <view class="tag">{{utils.getDictLabelName("storeProductType",product.productType)}}</view> -->
				{{product.productName}}
			</view>
			<view class="intro" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
			</view>
			<view class="card">
				<view class="card-item">
					<image class="img" src="https://cdn.his.cdwjyyh.com/images/ranking_icon.png"></image>
					<text class="ranking">达人榜 第15名</text>
					<text class="bold">TOP.1</text>
				</view>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/jb_arrow_right_icon.png"></image>
			</view>
			<!-- <view class="safe-box">
				<image src="https://cdn.his.cdwjyyh.com/images/safe.png" mode=""></image>
				<text class="text">品质保障</text>
				<view class="line"></view>
				<text class="text">药师服务</text>
				<view class="line"></view>
				<text class="text">隐私保护</text>
			</view> -->
		</view>
		<!-- 规格、配送 -->
		<view class="inventor">
			<view class="item" @click="showSpecPopup">
				<view class="left">
					<view class="title">选择</view>
					<view class="main">产品 规格</view>
				</view>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/shh_arrow_right_icon.png" mode=""></image>
			</view>
			<view class="item" @click="goToAddressPage">
				<view class="left">
					<view class="title">配送</view>
					<view class="main">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/address_icon.png" mode=""></image>
						<text>{{addressInfo ? addressInfo.address : '请选择地址'}}</text>
					</view>
				</view>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/shh_arrow_right_icon.png" mode=""></image>
			</view>
			<view class="tip">
				<text class="bold">现货</text>
				<text>24小时内发货 准时率99.9%</text>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/shh_arrow_right_icon.png" mode=""></image>
			</view>
			<view class="item" @click="showGuaranteePopup">
				<view class="left">
					<view class="title">购物保障</view>
					<view class="main">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/guarantee_icon.png" mode=""></image>
						<text>品质严保·极速退款</text>
					</view>
				</view>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/shh_arrow_right_icon.png" mode=""></image>
			</view>
			<view class="item" @click="goToQualificationPage">
				<view class="left">
					<view class="title">证照</view>
					<view class="main">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/qualifications_icon.png" mode=""></image>
						<text>经营资质</text>
					</view>
				</view>
				<image class="go" src="https://cdn.his.cdwjyyh.com/images/shh_arrow_right_icon.png" mode=""></image>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="shop-info">
			<view class="info-block">
				<view class="left">
					<image class="head" :src="storeInfo.logoUrl||'https://cdn.his.cdwjyyh.com/images/img.png'"></image>
					<view class="shop-box">
						<view class="shop-name">
							<text class="name">{{storeInfo.storeName||'-'}}</text>
						</view>
						<view class="label-group">
							<view class="label1">3年老店</view>
							<view class="label2">销量超15万</view>
							<view class="label2">回头客15万+</view>
						</view>
						<view class="txt">
							<view class="rating">
								<image class="star" src="https://cdn.his.cdwjyyh.com/images/star.png"></image><text>{{storeInfo.amazingDegree}}分</text>
							</view>
							<view class="line"></view>
							<view class="fans">{{storeInfo.storeFollowers||'0'}}粉丝</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="button" @click="goShop()">
						<text>进店</text>
					</view>
				</view>
			</view>
			<view class="data-block">
				<view class="number-block">
					<view class="item">
						<text class="txt-item">商品品质</text>
						<text class="number-item">平均惊艳度{{storeInfo.amazingDegree}}%</text>
					</view>
					<view class="item">
						<text class="txt-item">发货时效</text>
						<text class="number-item">发货准时率 {{storeInfo.deliveryOnTimeRate}}%</text>
					</view>
					<view class="item">
						<text class="txt-item">客服响应</text>
						<text class="number-item">平均{{storeInfo.serviceResponseTime}}秒回复</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 购买记录 -->
		<view class="buy-record">
			<view class="title-box">
				<view class="title">购买记录</view>
				<view class="more" @click="showPurchaseRecordPopup"><text>查看更多</text>
					<image class="w48 h48" src="https://cdn.his.cdwjyyh.com/images/more_arrow.png"></image>
				</view>
			</view>
			<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
				<view class="user-info">
					<image class="star" src="https://cdn.his.cdwjyyh.com/images/img.png"></image>
					<text class="name">{{utils.encryptName(record.realName)}}</text>
					<text class="place">{{record.userAddress.split(' ').slice(0, 2).join(' ')}}</text>
				</view>
				<view class="num">+{{record.num}}</view>
				<view class="time">{{record.relativeTime}}</view>
			</view>
		</view>

		<!-- 评价 -->
		<view class="evaluate-box">
			<view class="title-box">
				<text class="title">评价（{{evaluateNumber}}+）</text>
				<view class="more" @click="goToEvaluationPage">
					<text>满意度99.99%</text>
					<image class="w48 h48" src="https://cdn.his.cdwjyyh.com/images/more_arrow.png"></image>
				</view>
			</view>
			<view class="evaluate-block">
				<view class="amazingness">
					<text class="num">99.5%</text>
					<view class="text">
						<text>惊艳度</text>
						<image class="w24 h24 ml10" src="https://cdn.his.cdwjyyh.com/images/stunning.png"></image>
					</view>
				</view>
				<star-rating v-model="rating1" @change="onRatingChange"></star-rating>
				<view class="trend">
					<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/trend.png"></image>
					<text>趋势</text>
				</view>
			</view>

			<!-- 评价标签 -->
			<view class="evaluate-lable">
				<view class="lable-item">品质惊艳 <text class="num">16548</text></view>
				<view class="lable-item">品质惊艳 <text class="num">16548</text></view>
				<view class="lable-item">品质惊艳 <text class="num">16548</text></view>
				<view class="lable-item">品质惊艳 <text class="num">16548</text></view>
			</view>

			<!-- 评价 -->
			<view class="evaluate-main" v-for="(comment, index) in commentList.slice(0, 1)" :key="comment.commentId">
				<view class="main-user">
					<image class="avatar" :src="comment.avatar || 'https://cdn.his.cdwjyyh.com/images/img.png'"></image>
					<view class="right">
						<view class="name">{{comment.userName || '匿名用户'}}</view>
						<view class="txt">已购：{{comment.productName || '未知商品'}}</view>
					</view>
				</view>
				<view class="evaluate-txt">{{comment.content || '暂无评论内容'}}</view>
				<view class="photo-list" v-if="comment.commentImageList && comment.commentImageList.length > 0">
					<image v-for="(img, imgIndex) in comment.commentImageList" :key="imgIndex" :src="img"></image>
				</view>
				<view class="evaluate-text">
					<view class="left">
						<view class="star-group">
							<image v-for="i in comment.score" :key="i" class="star-icon" src="https://cdn.his.cdwjyyh.com/images/star.png"></image>
						</view>
						<text class="txt">{{comment.auditStatusName}}</text>
					</view>
					<view class="day">{{calculateRelativeTime(comment.createTime)}}评价</view>
				</view>
			</view>
		</view>
		<view class="life-box">
			<view class="title-box">
				<text class="title">生活号（80）</text>
				<view class="more">
					<text>全部</text>
					<image class="w48 h48" src="https://cdn.his.cdwjyyh.com/images/more_arrow.png"></image>
				</view>
			</view>
			<view class="life-list">
				<!-- 左边大列 - 1个大图 -->
				<view class="left-column">
					<view class="item">
						<image class="play" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
						<image :src="vidioList[0]" mode="widthFix"></image>
					</view>
				</view>

				<!-- 右边两小列 - 每列2个小图 -->
				<view class="right-columns">
					<view class="middle-column">
						<view class="item">
							<image class="play" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
							<image :src="vidioList[1]" mode="widthFix"></image>
						</view>
						<view class="item">
							<image class="play" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
							<image :src="vidioList[2]" mode="widthFix"></image>
						</view>
					</view>
					<view class="right-column">
						<view class="item">
							<image class="play" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
							<image :src="vidioList[3]" mode="aspectFill"></image>
						</view>
						<view class="item">
							<image class="play" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
							<image :src="vidioList[4] || vidioList[0]" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 功效 -->
		<!-- <view class="effect">
			<view class="label">药品说明书</view>
			<view class="label">查看</view>
			
		</view> -->
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">图文详情</view>
			<view class="inner">
				<view v-html="product.description" style="font-size:0"></view>
			</view>
		</view>
		<view class="problem">
			<image class="w32 h32" src="https://cdn.his.cdwjyyh.com/images/answer_icon2.png" mode=""></image>
			<text class="mlr8">常见问题</text>
			<image class="w24 h24" src="https://cdn.his.cdwjyyh.com/images/arrow4.png" mode=""></image>
		</view>
		<!-- 你可能还喜欢 -->
		<view class="like">
			<view class="title-box">
				<image class="w32 h32 mr12" src="https://cdn.his.cdwjyyh.com/images/like_icon2.png" mode=""></image>
				<text>你可能还喜欢</text>
			</view>

			<!-- <view class="goods-list">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
					<view class="img-box">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="info-box">
						<view class="title ellipsis2">{{item.productName}}</view>
						<view class="intro ellipsis">{{item.productInfo}}</view>
						<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
						<view class="lable-group">
							<view class="lable-item">9.5折</view>
							<view class="lable-item">限购1份</view>
						</view>
						<view class="prce-num">
							<view class="price">
								<text class="unit">¥</text><text
									class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
							</view>
							<view class="cart-img" @click="navgetTo('../shopping/cart')">
								<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/add_car.png"></image>
							</view>
						</view>
						<view class="card">
							<view class="card-item">
								<image class="img" src="https://cdn.his.cdwjyyh.com/images/ranking_icon.png"></image>
								<text class="ranking">健康新品热销榜</text>
								<text class="bold">TOP.1</text>
							</view>
							<image class="go" src="https://cdn.his.cdwjyyh.com/images/jb_arrow_right_icon.png"></image>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image src="https://cdn.his.cdwjyyh.com/images/back_home.png" mode=""></image>
					<text class="label">首页</text>
				</view>
				<view class="item" style="position: relative;">
					<image src="https://cdn.his.cdwjyyh.com/images/consult_small.png" mode=""></image>
					<text class="label">咨询</text>
					<button class="contact-btn" open-type="contact"></button>
				</view>
				<!-- <view class="item" @click="navgetTo('./cart')">
					<uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
						<image src="https://cdn.his.cdwjyyh.com/images/cart36.png" mode=""></image>
					</uni-badge>
					<text class="label">购物车</text>
				</view> -->
			</view>
			<view class="btn-box">
				<!-- <view class="btn cart" >好药分享
				<button  class="share" data-name="shareBtn" open-type="share"></button>
				</view> -->
				<view class="btn cart" @click="addCart('cart')">加入购物车</view>
				<view class="btn buy" @click="addCart('buy')">{{buyText}}</view>
			</view>
		</view>
		<!-- 商品规格选择弹窗 -->
		<ProductSpecPopup
			:visible="specVisible"
			:product="product"
			:is-buy-mode="isBuyMode"
			@update:visible="specVisible = $event"
			@cart-updated="getCartCount"
		/>
		<view class="loadding" v-if="loadding==true">
			<image src="https://cdn.his.cdwjyyh.com/images/logo.png"></image>
			<text class="text">加载中...</text>
		</view>
		<!-- 购物保障弹窗 -->
		<popupBottom ref="guaranteePopup" :visible.sync="guaranteeVisible" title="服务说明" radius="32" maxHeight="1024">
			<view class="guarantee-content">
				<view class="guarantee-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/guarantee_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">品质严保</view>
						<view class="desc">我们承诺所有商品均经过严格的品质检测，确保您购买的商品安全、可靠。</view>
					</view>
				</view>
				<view class="guarantee-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/quick_refund_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">极速退款</view>
						<view class="desc">符合退款条件的商品，我们将在24小时内完成退款处理，让您购物无忧。</view>
					</view>
				</view>
				<view class="confirm-btn" @click="guaranteeVisible = false">确认</view>
			</view>
		</popupBottom>
		<!-- 购买记录弹窗 -->
		<popupBottom ref="purchaseRecordPopup" :visible.sync="purchaseRecordVisible" title="购买记录" radius="32" maxHeight="1024">
			<view class="purchase-record-content">
				<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
					<view class="user-info">
						<image class="star" src="https://cdn.his.cdwjyyh.com/images/img.png"></image>
							<text class="name">{{utils.encryptName(record.realName)}}</text>
							<text class="place">{{record.userAddress.split(' ').slice(0, 2).join(' ')}}</text>
					</view>
					<view class="num">+{{record.num}}</view>
					<view class="time">{{record.relativeTime}}</view>
				</view>
			</view>
		</popupBottom>
		<!-- 配送信息弹窗 -->
		<popupBottom ref="deliveryPopup" :visible.sync="deliveryVisible" title="配送信息" radius="32" maxHeight="1024">
			<view class="delivery-content">
				<view class="delivery-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/address_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">配送地址</view>
						<view class="desc">重庆市渝北区财富中心B座</view>
					</view>
				</view>
				<view class="delivery-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/time_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">配送时间</view>
						<view class="desc">24小时内发货，预计3-5个工作日送达</view>
					</view>
				</view>
				<view class="delivery-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/shipping_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">配送方式</view>
						<view class="desc">快递配送（支持顺丰、京东物流）</view>
					</view>
				</view>
				<view class="confirm-btn" @click="deliveryVisible = false">确认</view>
			</view>
		</popupBottom>
		<!-- 经营资质弹窗 -->
		<popupBottom ref="qualificationPopup" :visible.sync="qualificationVisible" title="经营资质" radius="32" maxHeight="1024">
			<view class="qualification-content">
				<view class="qualification-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/qualifications_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">营业执照</view>
						<view class="desc">统一社会信用代码：91500000MA617K4F2C</view>
					</view>
				</view>
				<view class="qualification-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/qualifications_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">食品经营许可证</view>
						<view class="desc">许可证编号：JY15000000000001</view>
					</view>
				</view>
				<view class="qualification-item">
					<view class="icon-box">
						<image class="icon" src="https://cdn.his.cdwjyyh.com/images/qualifications_icon.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">医疗器械经营许可证</view>
						<view class="desc">许可证编号：渝0123456789</view>
					</view>
				</view>
				<view class="confirm-btn" @click="qualificationVisible = false">确认</view>
			</view>
		</popupBottom>

		<!-- 优惠券弹窗组件 -->
		<CouponPopup v-model="showCoupon" />
	</view>
</template>

<script>
	import{
		getStore,//店铺查询
	} from '@/api/product.js'
	import {
		getDicts
	} from '@/api/index'
	import {
		getProductDetails, // 获取商品详情
		getCartCount, // 获取购物车数量
		addCart, // 添加到购物车
		productHistoryOrderList, // 查询当前商品最近的购买记录10条
		productGoodProductList, // 获取商品好评榜单/推荐商品
		getProductValues, // 获取商品规格列表
		productSalesRanking, // 获取当天商品实时销量榜单
		productCommentPage//查询评论列表
	} from '@/api/product'
	import StarRating from '@/components/StarRating.vue'
	import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
	import ProductSpecPopup from '@/components/product-spec-popup/product-spec-popup.vue'
import CouponPopup from '@/components/coupon-popup/coupon-popup.vue'
export default {
		components: {
				item: {},
				popupBottom,
				StarRating,
				ProductSpecPopup,
				CouponPopup
			},
		data() {
			return {
				storeInfo:{},//店铺信息
				evaluateNumber:null,
				vidioList: [
					"https://cdn.his.cdwjyyh.com/images/img.png", "https://cdn.his.cdwjyyh.com/images/bg_1.png", "https://cdn.his.cdwjyyh.com/images/img.png",
					"https://cdn.his.cdwjyyh.com/images/img.png", "https://cdn.his.cdwjyyh.com/images/img.png", "https://cdn.his.cdwjyyh.com/images/img.png"
				],
				dataList: [{
					cateId: 364,
					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
					otPrice: 268,
					price: 98.1,
					productId: 66050,
					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
					productName: "佟络宝®健步器",
					sales: 1026,
					unitName: "个",
					warehouseCode: "JST001",
					warehouseId: 3,
				}, {
					cateId: 364,
					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
					otPrice: 298,
					price: 138,
					productId: 65920,
					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
					productName: "[九仙汤]除痹通络汤 30克x30包",
					sales: 6042,
					unitName: "盒",
					warehouseCode: "JST001",
					warehouseId: 3,
				}],
				rating1: 4,
				loadding: true,
				buyText: "立即购买",
				type: null,
				productValueSelect: {
					price: 0,
				},
				banner: [],
				productId: null,
				attrs: [],
				values: [],
				product: {
					price: 0,
					otPrice: 0,
				},

				// 当前轮播的图片
				activeBanner: 1,
				// 购物车数量
				cartCount: 0,
				// 规格弹窗
				specVisible: false,
				// 购物保障弹窗
				guaranteeVisible: false,
				// 购买记录弹窗
				purchaseRecordVisible: false,
				// 购买记录
				purchaseRecords: [],
				// 评论列表
				commentList: [],
				// 选中的地址信息
				addressInfo: null,
				// 规格数量
			specNum: 1,
			show: false,
			isSubmitting: false, // 控制按钮禁用状态
			// 购买模式
			isBuyMode: false,
					// 优惠券弹窗
					showCoupon: false
				};
			},
		onLoad(options) {
		if (options.userId != null) {
			uni.setStorageSync('tuiUserId', options.userId);
		} else if (options.hasOwnProperty('q') && options.q) {
			// 通过下面这步解码，可以拿到url的值
			const url = decodeURIComponent(options.q)
			this.url = url;
			// // 对url中携带的参数提取处理
			const obj = this.utils.urlToObj(url)
			uni.setStorageSync('tuiUserId', obj.userId);
		}
		uni.showShareMenu({
			withShareTicket: true,
			//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
		})
		
		// 监听地址选择事件
		uni.$on('updateAddress', (address) => {
			// 构建完整的地址字符串
			const fullAddress = address.province + address.city + address.district + address.detail;
			// 更新地址信息
			this.addressInfo = {
				...address,
				address: fullAddress
			};
		});
		
		this.getDicts();
		this.productId = options.productId;
		if (this.utils.checkToken()) {
			this.getCartCount();
		}
	},
		onShow() {
		// 接收从地址选择页面返回的地址信息
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		if (currentPage.options.addressInfo) {
			try {
				this.addressInfo = JSON.parse(currentPage.options.addressInfo);
			} catch (e) {
				console.error('解析地址信息失败:', e);
			}
		}

		this.getProductDetails();
		// 加载购买记录
		this.getProductHistoryOrderList();
		// 加载推荐商品
		this.getProductGoodProductList();
		// 加载销量榜单
		this.getProductSalesRanking();
		//查询评论列表
		this.productCommentPage();
	},
		//发送给朋友
		onShareAppMessage(res) {
			// if(this.utils.isLogin()){
			var user = JSON.parse(uni.getStorageSync('userInfo'))
			return {
				title: this.product.productName,
				path: '/pages_shopping/shopping/productDetails?productId=' + this.product.productId + "&userId=" + user
					.userId,
			}
			// }

		},
		//分享到朋友圈
		onShareTimeline(res) {
			if (this.utils.isLogin()) {
				var user = JSON.parse(uni.getStorageSync('userInfo'))
				return {
					title: this.product.productName,
					query: 'productId=' + this.product.productId + "&userId=" + user.userId, //页面参数
				}
			}

		},
		methods: {
			goShop() {
				uni.navigateTo({
				url: '/pages_shopping/live/shop?storeId=' + this.storeInfo.storeId
				})
		},

				// 显示优惠券弹窗
				showCouponPopup() {
					this.showCoupon = true;
				},
				
				//查询店铺
					getStore() {
				getStore(this.product.storeId).then(
					res => {
						if (res.code == 200) {
							console.log("查询店铺:", res);
							this.storeInfo=res.data
						}
					},
					rej => {}
				);
			},
			//查询评论列表
				productCommentPage() {
				productCommentPage().then(
					res => {
						if (res.code == 200) {
							console.log("评论列表:", res);
						}
					},
					rej => {}
				);
			},
			splitPrice(price) {
				const priceStr = parseFloat(price).toFixed(2).toString();
				return {
					integer: priceStr.split('.')[0],
					decimal: priceStr.split('.')[1]
				};
			},
			getDicts: function() {
				getDicts().then(
					res => {
						if (res.code == 200) {
							uni.setStorageSync('dicts', JSON.stringify(res));
						}

					},
					rej => {}
				);
			},
			showImg(img) {
				if (img != null) {
					var imgs = [];
					imgs.push(img)
					//预览图片
					uni.previewImage({
						urls: imgs,
						current: imgs[0]
					});
				} else {
					//预览图片
					uni.previewImage({
						urls: this.banner,
						current: this.banner[0]
					});
				}
			},
			doAddCart(type) {
				if (this.specNum == 0) {
					uni.showToast({
						icon: 'none',
						title: "库存不足",
					});
					return;
				}
				var isBuy = type == "buy" ? 1 : 0;
				let data = {
					isBuy: isBuy,
					cartNum: this.specNum,
					productId: this.productValueSelect.productId,
					attrValueId: this.productValueSelect.id
				};
				addCart(data).then(
					res => {
						if (res.code == 200) {
							if (type == "buy") {
								uni.navigateTo({
									url: '/pages_shopping/shopping/confirmOrder?type=' + this.type +
										"&cartIds=" + res.id + "&orderType=" + this.orderType
								})
								this.isSubmitting = false; // 禁用按钮
							} else {
								this.getCartCount()
								uni.showToast({
									icon: 'success',
									title: "添加成功",
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							this.getProductDetails()
						}
					},
					rej => {}
				);
			},
			getProductDetails() {
				let data = {
					productId: this.productId
				};
				getProductDetails(data).then(
					res => {
						this.loadding = false
						if (res.code == 200) {
							this.product = res.product;
							if (this.product.productType == 1) {
								this.buyText = "立即购买"
							} else if (this.product.productType == 2) {
								this.buyText = "开方购买"
							}
							this.product.otPrice = this.product.otPrice.toFixed(2);
							this.product.price = this.product.price.toFixed(2);
							if (this.product.sliderImage != null) {
								this.banner = this.product.sliderImage.split(',');
							} else {
								this.banner = []
							}
							this.attrs = res.productAttr;
							this.attrs.forEach((item, index, arr) => {
								item.values = item.attrValues.split(',');
								item.index = 0
							})
							console.log(this.attrs)
							this.values = res.productValues;
							this.choseSpec(0, 0)
							this.getStore();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/home/index',
								})
							}, 2000)

						}
					},
					rej => {}
				);
			},
			getCartCount() {
				let data = {
					productId: this.productId
				};
				getCartCount(data).then(
					cartRes => {
						if (cartRes.code == 200) {
							this.cartCount = cartRes.data;
						}
					},
					rej => {}
				);

			},
			// swiper变化事件
			swiperChange(event) {
				this.activeBanner = event.detail.current + 1
			},
			// 回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 加入购物车
			addCart(type) {
				this.utils.isLogin().then(res => {
					if (res) {
						this.type = type;
						// 设置购买模式
						this.isBuyMode = type === 'buy';
						this.specVisible = true
					}
				})
			},
			// 显示产品规格弹窗
			showSpecPopup() {
				this.utils.isLogin().then(res => {
					if (res) {
						this.type = 'cart'; // 默认设置为购物车模式
						this.isBuyMode = false; // 购物车模式
						this.specVisible = true
					}
				})
			},
			// 显示购物保障弹窗
			showGuaranteePopup() {
				this.guaranteeVisible = true
			},
			// 跳转到地址选择页面
			goToAddressPage() {
				uni.navigateTo({
					url: '/pages_user/user/address'
				})
			},
			// 跳转到经营资质页面
			goToQualificationPage() {
				uni.navigateTo({
					url: '/pages_shopping/shopping/qualification'
				})
			},
			// 规格选择
			choseSpec(index, subIndex) {
				this.attrs[index].index = subIndex;
				this.$forceUpdate();
				let productAttr = this.attrs;
				let values = [];
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].values.length; j++) {
						if (productAttr[i].index === j) {
							values.push(productAttr[i].values[j]);
						}
					}
				}
				var selectVal = values.sort().join(",");
				console.log(selectVal)
				var valueSelect = this.values.filter((item) => {
					return item.sku == selectVal;
				})
				if (valueSelect != null && valueSelect.length == 1) {
					this.productValueSelect = valueSelect[0];
				}
				this.updateSpecNum();

			},
			//更新数量
			updateSpecNum() {
				if (this.productValueSelect.stock == 0) {
					this.specNum = 0;
				} else {
					this.specNum = 1;
				}
			},
			changeNum(e) {
				this.specNum = e.detail.value.replace(/\D/g, '')
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 数量减法
			lessNum() {
				this.specNum--
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 数量加法
			addNum() {
				// if(this.specNum<10){
				// }
				// else{
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '限购10盒',
				// 	});
				// }
				if (this.product.stock == 0) {
					this.specVisible = false //弹窗显示
					uni.showToast({
						icon: 'none',
						title: '库存不足',
					});
				} else {
					this.specNum++
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 确定选择该规格
			submit() {
				if (this.isSubmitting) return; // 防止重复点击
				this.isSubmitting = true; // 禁用按钮
				if (this.isSubmitting) {
					// uni.showToast({
					// 	icon:'none',
					// 	title: '不能重复点击',
					// });
				}
				this.specVisible = false
				this.doAddCart(this.type);

			},
			// 获取购买记录
			getProductHistoryOrderList() {
				let data = this.productId;
				productHistoryOrderList(data).then(
					res => {
						if (res.code == 200) {
							// 处理购买记录数据，计算相对时间
							this.purchaseRecords = res.data.map(record => ({
								...record,
								relativeTime: this.calculateRelativeTime(record.payTime)
							}));
							console.log('购买记录:', res);
						}
					},
					rej => {}
				);
			},
			// 计算相对时间
			calculateRelativeTime(payTime) {
				const now = new Date();
				const past = new Date(payTime);
				const diffMinutes = Math.floor((now - past) / (1000 * 60));
				if (diffMinutes < 60) return `${diffMinutes}分钟前`;
				const diffHours = Math.floor(diffMinutes / 60);
				if (diffHours < 24) return `${diffHours}小时前`;
				const diffDays = Math.floor(diffHours / 24);
				return `${diffDays}天前`;
			},
			// 显示购买记录弹窗
			showPurchaseRecordPopup() {
				this.purchaseRecordVisible = true;
			},
			// 获取推荐商品
			getProductGoodProductList() {
				let data = {
					productId: this.productId
				};
				productGoodProductList(data).then(
					res => {
						if (res.code == 200) {
							// 处理推荐商品数据
							this.dataList = res.data;
							console.log('推荐商品:', res);
						}
					},
					rej => {}
				);
			},
			// 获取商品规格
			getProductValues() {
				let data = {
					productId: this.productId
				};
				getProductValues(data).then(
					res => {
						if (res.code == 200) {
							// 处理商品规格数据
							this.values = res.data;
							console.log('商品规格:', res);
						}
					},
					rej => {}
				);
			},
			// 获取销量榜单
			getProductSalesRanking() {
				let data = {
					cateId:320
				};
				productSalesRanking(data).then(
					res => {
						if (res.code == 200) {
							// 处理销量榜单数据
							console.log('销量榜单:', res);
						}
					},
					rej => {}
				);
			},
			// 获取评论列表
			productCommentPage() {
				let data = {
					productId: this.productId
				};
				productCommentPage(data).then(
					res => {
						if (res.code == 200) {
							// 处理评论列表数据
							this.evaluateNumber=res.data.total;
							this.commentList = res.data.records;
							console.log('评论列表:', res);
						}
					},
					rej => {}
				);
			},
			// 跳转到商品评价页面
			goToEvaluationPage() {
				uni.navigateTo({
					url: '/pages_shopping/shopping/productEvaluation?productId=' + this.productId
				});
			}
		}
	}
</script>

<style lang="scss">
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 104rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #333333;
		}

		.more {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #999999;
		}
	}

	.shop-banner {
		height: 756rpx;
		background-color: #FFFFFF;
		position: relative;

		.swiper-item {
			box-sizing: border-box;
		}

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

		.banner-mask {
			width: 100%;
			height: 44rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-image: url(https://cdn.his.cdwjyyh.com/images/black_mask.png);
			background-size: 20rpx 44rpx;
			background-repeat: repeat-x;
		}

		.num-box {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			background: rgba(0, 0, 0, .3);
			border-radius: 20rpx;
			position: absolute;
			right: 34rpx;
			bottom: 34rpx;
			z-index: 10;

			.bold {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.det-info {
		background: #FFFFFF;
		padding: 36rpx 30rpx 25rpx;

		.row-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable-group {
				display: flex;
				align-items: center;

				.icon {
					width: 24rpx;
					height: 24rpx;
				}

				.coupon {
					font-size: 24rpx;
					color: #FA341E;
					margin-right: 4rpx;
				}

				.lable-item {
					margin-right: 8rpx;
					height: 30rpx;
					padding: 0 8rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 1rpx solid #FFA599;
					font-size: 21rpx;
					color: #FF4B33;
				}
			}

			.price {
				display: flex;
				align-items: flex-end;

				.label {
					color: #333;
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 1.3;
					margin-right: 5rpx;
				}

				.unit {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					line-height: 1.3;
				}

				.num {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					margin: 0 20rpx 0 10rpx;
					line-height: 1;
				}

				// .old{
				// 	font-size: 28rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: 500;
				// 	text-decoration: line-through;
				// 	color: #BBBBBB;
				// 	line-height: 1.3;
				// }
			}

			// .share-box{
			// 	width: 120rpx;
			// 	height: 46rpx;
			// 	border: 1px solid #2BC7B9;
			// 	border-radius: 23rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	position: relative;
			// 	.text{
			// 		font-size: 26rpx;
			// 		font-family: PingFang SC;
			// 		font-weight: 500;
			// 		color: #2BC7B9;
			// 	}
			// 	image{
			// 		margin-left: 2rpx;
			// 		width: 25rpx;
			// 		height: 24rpx;
			// 	}
			// 	.share{
			// 		display: inline-block;
			// 		position: absolute;
			// 		top: 0;
			// 		left: 0;
			// 		width: 100%;
			// 		height: 100%;
			// 		opacity: 0;
			// 	}
			// }

			.sale {
				font-size: 24rpx;
				color: #999999;
			}

			.spec {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36rpx;
			}
		}

		.name-box {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			color: #111111;
			line-height: 44rpx;
			margin-top: 24rpx;

			.tag {
				display: inline-block;
				padding: 0 6rpx;
				height: 30rpx;
				background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
				border-radius: 4rpx;
				margin-right: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30rpx;
				float: left;
				margin-top: 7rpx;
			}
		}

		.intro {
			font-weight: 400;
			font-size: 24rpx;
			color: #D46C0D;
			line-height: 36rpx;
			padding: 18rpx 0 23rpx;
			border-bottom: 1px solid #f7f7f7;
		}

		.card {

			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFF5EB;
			width: 100%;
			height: 56rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 12rpx;
			box-sizing: border-box;

			.card-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.ranking {
					color: #4D4D4D;
				}

				.bold {
					color: #F4A007;
					font-weight: 600;
					transform: skewX(-8deg);
					/* 负值向左倾斜，正值向右倾斜 */
					display: inline-block;
					/* transform需要inline-block或block */
					margin-left: 12rpx;
				}
			}

			.go {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.safe-box {
			display: flex;
			align-items: center;
			padding-top: 24rpx;

			image {
				width: 20rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}

			.text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}

			.line {
				width: 1px;
				height: 23rpx;
				background: #EDEEEF;
				margin: 0 20rpx;
			}
		}
	}

	.inventor {
		padding: 16rpx 24rpx;
		margin-top: 20rpx;
		background: #FFFFFF;

		.go {
			width: 24rpx;
			height: 24rpx;
		}

		.item {
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 56rpx;
			margin-bottom: 16rpx;

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

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

				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.title {
					width: 160rpx;
					color: #666666;
				}

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

					color: #333333;
				}
			}
		}

		.tip {
			padding-left: 160rpx;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			color: #999999;
			display: flex;
			align-items: center;

			.bold {
				font-weight: 600;
				color: #333333;
				margin-right: 22rpx;
			}
		}
	}

	.shop-info {
		padding: 24rpx;
		background-color: #fff;
		margin: 36rpx 24rpx 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.info-block {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;

				.head {
					width: 112rpx;
					height: 112rpx;
					margin-right: 16rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.shop-box {
					.shop-name {
						display: flex;

						.name {
							font-weight: 600;
							font-size: 34rpx;
							color: #333333;
							margin-right: 16rpx;
						}
					}

					.label-group {
						display: flex;
						align-items: center;
						margin: 12rpx 0;

						.label1 {
							padding: 0 8rpx;
							font-size: 20rpx;
							color: #02B176;
							background: #EBFAF6;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}

						.label2 {
							padding: 0 8rpx;
							font-size: 20rpx;
							color: #F4A007;
							background: #FFF7E6;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}


					.txt {
						margin-top: 4rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						margin: 8rpx 0 16rpx;
						display: flex;
						align-items: center;

						.rating {
							font-weight: 500;
							font-size: 24rpx;
							color: #F4A007;
							display: flex;
							align-items: center;

							.star {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background: #CCCCCC;
							margin: 0 20rpx;
						}

						.fans {
							font-size: 24rpx;
							color: #999999;
						}

					}
				}
			}

			.right {
				.button {
					width: 96rpx;
					height: 56rpx;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #02B176;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #02B176;
					font-weight: 500;
				}
			}
		}

		.data-block {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.number-block {
				display: flex;

				.item {
					margin-right: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

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

					.number-item {
						font-size: 26rpx;
						color: #333333;
					}

					.txt-item {
						margin-bottom: 10rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

		}
	}

	.buy-record {
		margin: 0 24rpx;
		padding: 0 24rpx 24rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;



		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

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

			.user-info {
				display: flex;
				align-items: center;

				.star {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.name {
					width: 106rpx;
					text-align: center;
					margin-left: 16rpx;
					font-size: 26rpx;
					color: #333333;
				}

				.place {
					font-size: 26rpx;
					color: #999999;
					margin-left: 32rpx;
				}
			}

			.num {
				font-weight: 500;
				font-size: 34rpx;
				color: #FA341E;
			}

			.time {
				font-size: 26rpx;
				color: #999999;
			}
		}

	}

	// 评价
	.evaluate-box {
		margin: 0 24rpx;
		padding: 0 24rpx 24rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.evaluate-block {
			display: flex;
			align-items: center;
			color: #02B176;
			justify-content: space-between;

			.amazingness {

				.num {
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 48rpx;
				}

				.text {
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
			}

			.trend {
				display: flex;
				align-items: center;
				font-size: 22rpx;
			}
		}

		.evaluate-lable {
			display: flex;
			flex-wrap: wrap;
			margin-top: 28rpx;

			.lable-item {
				background: #F5F7FA;
				border-radius: 8rpx;
				padding: 8rpx 12rpx;
				font-size: 24rpx;
				color: #333333;
				margin: 0 16rpx 16rpx 0;

				.num {
					color: #666666;
				}
			}
		}

		.evaluate-main {
			.main-user {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.right {
					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.txt {
						margin-top: 6rpx;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}

			.evaluate-txt {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 35rpx;
			}

			.photo-list {
				margin: 28rpx 0;

				image {
					width: 152rpx;
					height: 160rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-right: 12rpx;
				}
			}

			.evaluate-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

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

					.txt {
						color: #666666;
					}

					.day {
						color: #9B9B9B;
					}
					.star-group{
display: flex;
align-items: center;
.star-icon{
	width: 24rpx;
	height: 24rpx;
	margin-right: 4rpx;
}
					}
				}
			}
		}
	}

	.life-box {
		margin: 0 24rpx;
		padding: 0 24rpx 24rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		overflow: hidden;

		.life-list {
			display: flex;
			height: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			height: 412rpx;

			/* 左边大列 - 1个大图 */
			.left-column {
				width: 278rpx;
				margin-right: 8rpx;

				.item {
					height: 100%;
				}
			}

			/* 右边两小列 */
			.right-columns {
				flex: 1;
				display: flex;
				justify-content: space-between;


				.middle-column,
				.right-column {
					width: 180rpx;
					display: flex;
					flex-direction: column;
					margin-right: 12rpx;

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

				.item {
					&:first-child {
						margin-bottom: 8rpx;
					}
				}

			}

			.item {
				position: relative;
				overflow: hidden;

				/* 左边大图 */
				.left-column & {
					image:last-child {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				/* 右边小图 */
				.right-columns & {
					image:last-child {
						width: 100%;
						height: auto;
						/* 高度自适应 */
						display: block;
					}
				}

				.play {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 2;
				}
			}
		}
	}

	.effect {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 1.8;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.label {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			line-height: 1.8;
		}
	}

	.det-box {
		margin-top: 10rpx;
		padding: 40rpx 30rpx 34rpx 30rpx;
		// padding: 40rpx 30rpx 130rpx 30rpx;
		background-color: #FFFFFF;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			margin-bottom: 25rpx;
		}

	}

	.problem {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333333;
	}

	.like {
		padding-bottom: 130rpx;

		.title-box {
			margin-top: 36rpx 0 24rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.goods-list {
			padding: 20upx;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 18rpx;
				margin-bottom: 18rpx;
				width: 342rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

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

				.img-box {
					width: 100%;
					height: 342upx;

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

				.info-box {
					box-sizing: border-box;
					padding: 20upx 20upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						margin-bottom: 4rpx;
					}

					.intro {
						font-weight: 400;
						font-size: 22rpx;
						color: #D46C0D;
						margin-bottom: 8upx;
					}

					.sale {
						font-size: 21rpx;
						color: #999999;
					}

					.lable-group {
						display: flex;
						margin-top: 8rpx;

						.lable-item {
							margin-right: 8rpx;
							height: 30rpx;
							padding: 0 8rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 1rpx solid #FFA599;
							font-size: 21rpx;
							color: #FF4B33;
						}
					}

					.prce-num {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 8upx;

						.price {
							font-weight: 600;
							font-size: 26rpx;
							color: #FA341E;
							font-size: 26rpx;

							.unit {
								font-size: 20upx;
							}

							.bold {
								font-size: 36upx;
							}
						}
					}

					.card {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #FFF4E8;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						width: 100%;
						height: 40rpx;
						padding: 8rpx 10rpx;
						box-sizing: border-box;

						.card-item {
							display: flex;
							align-items: center;

							.img {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}

							.ranking {
								font-size: 20rpx;
								color: #4D4D4D;
								margin-right: 4rpx;
							}

							.bold {
								font-family: Roboto Flex, Roboto Flex;
								font-weight: 600;
								font-size: 24rpx;
								color: #F4A007;
								margin-right: 6rpx;
								transform: skewX(-8deg);
								/* 负值向左倾斜，正值向右倾斜 */
								display: inline-block;
								/* transform需要inline-block或block */
							}
						}

						.go {
							width: 16rpx;
							height: 16rpx;
						}
					}
				}
			}
		}

	}

	.btn-foot {
		box-sizing: border-box;
		width: 100%;
		height: 121rpx;
		background: #FFFFFF;
		padding: 0 32rpx 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.menu-box {
			display: flex;
			align-items: center;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 48rpx;

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

				image {
					width: 36rpx;
					height: 36rpx;
					margin-bottom: 10rpx;
				}

				.label {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
				}
			}

			::v-deep.uni-badge--x {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			::v-deep.uni-badge {
				border: none;
				background-color: #FF3636;
				font-family: Roboto;
			}
		}

		.btn-box {
			display: flex;
			align-items: center;

			.btn {
				position: relative;
				padding: 22rpx 40rpx;
				border-radius: 40rpx;
				margin-left: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;

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

				&.cart {
					background: linear-gradient(90deg, #FFC95F 0%, #FEA633 100%);

					.share {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}

				&.buy {
					background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
				}
			}
		}
	}

	.product-spec {
		.pro-info {
			display: flex;
			align-items: center;

			.img-box {
				width: 200rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 30rpx;

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

			.product-name {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}

			.info-text {
				height: 200rpx;
				display: flex;
				flex-direction: column;

				.price {
					margin-top: 16rpx;
					font-weight: 600;
					font-size: 26rpx;
					color: #FA341E;
					font-size: 26rpx;

					.title {
						font-weight: 500;
						font-size: 24rpx;
						color: #FF5030;
						margin-right: 8rpx;
					}

					.bold {
						font-size: 48upx;
					}
				}

				.desc-box {
					margin-top: 16rpx;
					display: flex;
					flex-direction: column;
					padding-bottom: 9rpx;

					.text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 27rpx;
						line-height: 1;

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

		.spec-box {
			padding-top: 50rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 1;
			}

			.spec-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.item {
					box-sizing: border-box;
					padding: 12rpx 24rpx;
					font-size: 28rpx;
					color: #333333;
					background: #F5F7FA;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					margin-right: 24rpx;
					margin-bottom: 30rpx;

					&.active {
						font-size: 24rpx;
						color: #02B176;
						background: #EBFAF6;
						border: 2rpx solid #02B176;
					}
				}
			}
		}

		.price-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 14rpx;

			.label {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.num-box {
				display: flex;
				align-items: center;

				.img-box {
					width: 60rpx;
					height: 60rpx;

					display: flex;
					align-items: center;
					justify-content: center;

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

				input {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					background: #F5F7FA;
					text-align: center;
				}
			}
		}

		.sub-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			border-radius: 44rpx;
			margin-top: 30rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);

		}
	}

	.contact-btn {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 9999;
	}

	.loadding {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		image {
			border-radius: 50%;
			animation: load linear 1s infinite;
			width: 120rpx;
			height: 120rpx;
		}

		.text {
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.btnsel {
		color: #5f5f5f !important;
		background: #ebebeb !important;
	}

	// 购物保障弹窗样式
	.guarantee-content {
		padding: 30rpx;

		.guarantee-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;

			.icon-box {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #F5F7FA;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.text-box {
				flex: 1;

				.title {
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 8rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}
		}

		.confirm-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
			border-radius: 44rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	// 购买记录弹窗样式
	.purchase-record-content {
		padding: 20rpx;

		.record-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F0F0F0;

			.user-info {
				flex: 1;
				display: flex;
				align-items: center;

				.star {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
					.name {
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 4rpx;
					}

					.place {
						font-size: 28rpx;
						color: #999999;
					}
			}

			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #FF6633;
				margin: 0 20rpx;
			}

			.time {
				font-size: 28rpx;
				color: #999999;
				white-space: nowrap;
			}
		}
	}

	// 配送信息弹窗样式
	.delivery-content {
		padding: 30rpx;

		.delivery-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;

			.icon-box {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #F5F7FA;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.text-box {
				flex: 1;

				.title {
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 8rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}
		}

		.confirm-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
			border-radius: 44rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	// 经营资质弹窗样式
	.qualification-content {
		padding: 30rpx;

		.qualification-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;

			.icon-box {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #F5F7FA;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.text-box {
				flex: 1;

				.title {
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 8rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}
		}

		.confirm-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
			border-radius: 44rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}
	}
</style>