wx-qhb/pageA/productdetails.vue

<template>
	<view>
		<scroll-view ref="scrollView" scroll-y="true" style="min-height: 100%;">
			<!-- 页面内容 -->

			<!-- 自定义导航栏 -->
			<u-navbar :safeAreaInsetTop="true" :placeholder='true'>
				<view class="u-nav-slot u-flex" slot="left" style="display: flex;">
					<view class="u-flex">
						<u-icon name="arrow-left" size="19" @click="navigateBack()"></u-icon>
						<u-tabs :duration='duration' @click="click" :list="list1" lineColor='#fff'
							:activeStyle=" {color:'#FF1515'}" :inactiveStyle="{
						color:' #666666' }"></u-tabs>
					</view>
					<!-- 				<view class="" style="margin-left: 184rpx;" @click="share = true">
					<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
				</view> -->
				</view>
				<view class="u-nav-slot u-flex" slot="right" style="display: flex;">
					<view class="" style="margin-left: 184rpx;" @click="share = true">
						<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
					</view>
					<view class="" style="width: 180rpx;"></view>
				</view>
			</u-navbar>
			<!-- 商品图片 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
					<swiper-item v-if="goodinfo.video">
						<video style="width: 750rpx;height: 750rpx;" :src='goodinfo.video'></video>
					</swiper-item>
					<swiper-item v-for="(item,idx) in goodinfo.images.split(',')" :key="idx">
						<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
							style="width: 750rpx;height: 750rpx;" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			</image>
			<view class="back">
				<!-- 折扣 -->
				<view class="discount">
					<view class="top">
						<text class='count' v-if="goodinfo.is_discount==0">{{i18n.Discounted}}</text>
						<text class='money'>¥</text>
						<text class='money'
							style="font-size: 48rpx;">{{goodinfo.is_discount==0?goodinfo.discount_price.slice(0,-3):goodinfo.price.slice(0,-3)}}</text>
						<text
							class='money'>{{goodinfo.is_discount==0?goodinfo.discount_price.slice(-3):goodinfo.price.slice(-3)}}</text>
						<text class='right' v-if="goodinfo.is_discount==0">¥{{goodinfo.price}}</text>
					</view>
					<view class="bottom">
						<text class="tabs">{{i18n.sametype}}</text>
						<view class="title">
							<text class="title" selectable @longpress="onLongPress" v-if="language =='zh-CN'">
								{{goodinfo.name_cn}}
							</text>
							<text class="title" selectable @longpress="onLongPress" v-if="language =='en-US'">
								{{goodinfo.name_en}}
							</text>
							<text class="title" selectable @longpress="onLongPress" v-if="language =='es-ES'">
								{{goodinfo.name_es}}
							</text>
							<text class="title" selectable @longpress="onLongPress" v-if="language =='it-IT'">
								{{goodinfo.name_ita}}
							</text>
						</view>
					</view>
				</view>
				<!-- 服务 -->
				<view class="serve" style="margin-top: 20rpx;">
					<view class="top u-flex u-row-between"  @click="sele">
						<view class="u-flex">
							<view class="change">{{i18n.Sele}}</view>
							<view class="" style="margin-left: 20rpx;">{{selectArr.length>0?selectArr.join(','):i18n.Sele}}</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
					<view class="top u-flex u-row-between" style="margin-top: 36rpx;" @click="serve=true">
						<view class="u-flex">
							<view class="change">{{i18n.service}}</view>
							<view class="" style="margin-left: 20rpx;">正品保障 · 极速退款 · 7天无理由退</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="comment" ref="targetPosition">
					<view class="u-flex u-row-between">
						<text class="ping">{{i18n.review}}</text>
						<view class="u-flex">
							<text class="strip">5000+{{i18n.article + i18n.review}}</text>
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
					<view class="" v-for="(item,idx) in commentlist" :key="idx">
						<view class="uesr u-flex u-row-between" style="margin-top: 36rpx;">
							<view class="u-flex">
								<image src="../static/images/logo.png" style="width: 52rpx;height: 52rpx;" mode="">
								</image>
								<text class="name">{{item.member.nickname}}</text>
							</view>
							<text class="strip">{{item.created_at}}</text>
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="sku" style="margin-top: 16rpx;">{{
							item.sku_item.item
						}}</view>
					</view>
				</view>
				<!-- 店铺 -->
				<view class="store u-flex u-row-between">
					<view class="u-flex">
						<image :src='goodinfo.merchant.image' style="width: 112rpx;height: 112rpx;" mode=""></image>
						<view class="" style="margin-left: 20rpx;">
							<view class="title">{{goodinfo.merchant.merchant_name}}</view>
							<uni-rate network allow-half :readonly="true" color="red" :size='8' :value="5"
								v-model="rate" />
							<view class="" style='margin-top:20rpx'></view>
							<view class="u-flex" style='margin-top:20rpx'>
								<text class='num'>{{i18n.Salesvolume}} 2384w+</text>
								<view class="line"></view>
								<!-- 评价总数 -->
								<text class='num'>{{i18n.Salesvolume}} 2384w+</text>
							</view>
						</view>
					</view>
					<view class="goshop" @click="goshop">{{i18n.stroll}}</view>
				</view>
				<!-- 推荐 -->
				<view class="recommend">
					<view class="title">
						{{i18n.Recommended}}
					</view>
					<view class="">
						<swiper style="height: 400rpx;" class="swiper" circular :indicator-dots="true" :autoplay="true">
							<swiper-item v-for="(parent,index) in swiptlist" :key="index">
								<view class="u-flex  swiper-item u-row-between">
									<view class="" v-for="(child,idx) in parent" @click="toinfo(child.id)" :key="idx">
										<image :src="child.image" style="width: 214rpx;height: 214rpx;" mode="">
										</image>
										<view class="u-line-1"
											style="width: 214rpx;margin-top: 14rpx;font-style: normal;font-size: 26rpx;"
											v-if="language =='zh-CN'">
											{{child.name_cn}}
										</view>
										<view class="u-line-1"
											style="width: 214rpx;margin-top: 14rpx;font-style: normal;font-size: 26rpx;"
											v-if="language =='en-US'">
											{{child.name_en}}
										</view>
										<view class="u-line-1"
											style="width: 214rpx;margin-top: 14rpx;font-style: normal;font-size: 26rpx;"
											v-if="language =='es-ES'">
											{{child.name_es}}
										</view>
										<view class="u-line-1"
											style="width: 214rpx;margin-top: 14rpx;font-style: normal;font-size: 26rpx;"
											v-if="language =='it-IT'">
											{{child.name_ita}}
										</view>
										<view class="" style="margin-top: 12rpx;">
											<span
												style="color:rgba(204, 51, 0, 1) ;font-size: 26rpx;">¥{{child.price}}</span>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="recommend">
					<view class="title">{{i18n.Productdetails}}</view>
					<view class="" style="margin-top: 32rpx;margin-bottom:28rpx">{{i18n.Specification}}</view>
					<view class="specification">
						<view class="item u-flex" style='margin-bottom:28rpx' v-for="(item,idx) in goodinfo.parameter"
							:key="idx">
							<view style='width:150rpx;'>{{item.name}}</view>
							<text style='margin-left:58rpx'>{{item.value}}</text>
						</view>
					</view>
					<view class="">
						<image :src="goodinfo.image" style="width: 100%;height: 580rpx;" mode=""></image>
					</view>
				</view>

				<view class="" style="height: 158rpx;"></view>
				<view class="fix u-flex u-row-between">
					<view class="u-flex" style="column-gap: 35rpx;">
						<view class="u-flex" style="justify-content: center;flex-direction: column;">
							<image src="../static/images/index/service.png" style='width:40rpx;height:40rpx' mode="">
							</image>
							<view class="ke">{{i18n.Customer}}</view>
						</view>
						<view class="u-flex" style="justify-content: center;flex-direction: column;" @click="shopping">
							<image src="../static/cart1.png" style='width:40rpx;height:40rpx' mode=""></image>
							<view class="ke">{{i18n.Shopping}}</view>
						</view>
						<view class="u-flex" style="justify-content: center;flex-direction: column;" @click="">
							<!-- <image src="../static/images/index/attention.png" style='width:40rpx;height:40rpx' mode=""> -->
							<image src="../static/images/index/bottom1.png" style='width:40rpx;height:40rpx' mode="">
							</image>
							<!-- <view class="ke">{{i18n.follow}}</view> -->
							<view class="ke" style="color: rgba(248, 50, 36, 1);">已关注</view>
						</view>
					</view>
					<view class="join" @click="join(0)">加入购物车</view>
					<view class="pin" @click="join(1)">立即拼团</view>
					<!-- 				<view class="tongzhi" @click="inform">
					{{i18n.notification}}
				</view> -->
				</view>
			</view>
		</scroll-view>
		<!-- 加入购物车 -->
		<u-popup :round="10" :show="show">
			<view style="padding:48rpx 28rpx;box-sizing: border-box;position: relative;">
				<view class="u-flex">
					<image :src="goodinfo.image" style="width: 192rpx;height: 192rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="">
							<text class="read">¥</text>
							<text class="read" style="font-size: 40rpx;"
								v-if="goodinfo.is_discount==0">{{(Number(sku_info.discount_price)*Number(value)) || (Number(goodinfo.discount_price) * Number(value))}}</text>
							<!-- <text class="read" v-if="goodinfo.is_discount==0">{{(goodinfo.discount_price * value).slice(-3)}}</text> -->
							<text class="read" style="font-size: 40rpx;"
								v-if="goodinfo.is_discount==1">{{(Number(sku_info.price)*Number(value))|| (Number(goodinfo.price) * Number(value))}}</text>
							<!-- <text class="read" v-if="goodinfo.is_discount==1">{{(goodinfo.price * value).slice(-3)}}</text> -->
							<!-- <text class="read" style="font-size: 40rpx;" >{{(Number(goodinfo.price) * Number(value)).toString()}}</text> -->
						</view>
						<text class="guige">已选：{{selectArr.join(',')||i18n.selection}}</text>
					</view>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right: 28rpx;" @click="show=false">
					<u-icon name="close" @click="show==false" color="#000" size="28"></u-icon>
				</view>
				<view class="" v-for="(item,index) in goodinfo.sku">
					<view class="title1" style="margin-top: 40rpx;margin-bottom: 32rpx;">
						{{item.name}}
					</view>
					<view class="u-flex" style="column-gap: 18rpx;flex-wrap: wrap;">
						<view class="" :class="selectArr[index]==child?'acttab':'tabs'"
							v-for="(child,idx) in item.values" :key="idx" @click="actabs(index,child,item)">
							{{child}}
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 30rpx;">
					<text class="title1">数量</text>
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
				<view class="" style="height: 200rpx;"></view>
				<view class="bottoma">
					<view v-if="shopcar==0" class="btn" @click="joincart">
						加入购物车
					</view>
					<view v-if="shopcar==1" class="btn" @click="order">
						立即购买
					</view>
					<view v-if="shopcar==2" class="btn" @click="show = false">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="serve">
			<view style="padding:48rpx 24rpx;box-sizing: border-box;background-color: #FFF3E7;position: relative;">
				<view class="u-flex" style="flex-direction: column;justify-content: center;">
					<image src="../static/images/index/serve.png" style="width: 138rpx;height: 34rpx;" mode=""></image>
					<text class="info">
						售前售后 安心无忧购物
					</text>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right:24rpx;" @click="serve = false">
					<u-icon name="close" style="width: 22rpx;height: 22rpx;"></u-icon>
				</view>
				<view class="contenta">
					<view class="">
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
				</view>
				<view class="button" @click="serve = false">
					{{i18n.know}}
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="share" bgColor=' rgba(244, 244, 244, 1);'>
			<view
				style="padding:48rpx 24rpx;box-sizing: border-box;background-color: rgba(244, 244, 244, 1);border-radius: 10px 10px 0 0 ;">
				<view class="u-flex u-row-between" style="">
					<view class="" style="width: 28px;height: 28px;"></view>
					<text class="info" style="font-size: 32rpx;">
						{{i18n.shar}}
					</text>
					<image src="../static/images/index/bottom2.png" style="width: 40rpx;height: 40rpx;">
				</view>
				<!-- 				<view class="" style="position: absolute;top: 48rpx;right:24rpx;">
					
				</view> -->
				<view class="u-flex u-row-between" style="margin-top: 82rpx;padding:  0 140rpx;">
					<view class="">
						<image src="../static/images/index/link.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">{{i18n.Copylink}}</view>
					</view>
					<view class="" @click="builder">
						<image src="../static/images/index/image.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">{{i18n.Generatepicture}}</view>
					</view>
				</view>
				<view class="button" @click="share = false" style="background: #fff;color: #555555;margin-top: 58rpx;">
					{{i18n.Cancel}}
				</view>
			</view>
		</u-popup>
		<u-popup :show="imagea" bgColor=' rgba(244, 244, 244, 0);' mode='center' :customStyle="{alignItems: 'center'}">
			<view class="u-fle" style="display: flex; justify-content: flex-end;width: 100%;">
				<u-icon name="close" @click="imagea==false" color="#fff" size="28"></u-icon>
			</view>
			<view
				style="padding:48rpx 24rpx;box-sizing: border-box;background-color: rgba(255, 255, 255, 1);border-radius: 16rpx;width: 538rpx;">
				<view class="" style="">
					<image src="../static/images/index/bottom2.png" style="width: 490rpx;height: 490rpx;">
				</view>
				<view class="money">
					<span>¥</span>
					<span style="font-size: 36rpx;">258</span>
					<span>00</span>
				</view>
				<view class="title">布兰德低温烘焙猫粮全价通用高端鲜肉成猫幼</view>
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 44rpx;">
					<image src="../static/images/logo.png" style="width: 132rpx;height: 132rpx;" mode=""></image>
					<view class="view">长按识别查看</view>
				</view>
			</view>
			<view class="button" style="width: 658rpx;">保存到相册</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate: '', //星级
				imagea: false,
				list1: [{
					name: '商品',
				}, {
					name: '评价',
				}, {
					name: '详情'
				}, ],
				current: 0,
				// 购物车
				show: false,
				//服务
				serve: false,
				//分享
				share: false,
				value: 1, //步进器的值
				swiptlist: [], //推荐列表
				actab: 0,
				id: '', //商品id
				language: '',
				goodinfo: {}, //商品详情
				duration: 0, //tabs选项
				actidx: 0,
				subIndex: [],
				selectArr: [],
				shopcar: '',
				sku_info: {},
				commentlist: []
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onLoad(options) {
			this.id = options.id
			this.comment()
		},
		onShow() {
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
			this.detail(this.id)
			this.recommend()

		},
		methods: {
			sele(){
				this.shopcar = 2
				this.show = true
			},
			//跳转到购物车
			shopping() {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			//评论接口
			comment() {
				uni.$u.http.post('/api/goods/goods_comment', {
					merchant_goods_id: this.goodinfo.merchant_goods_id,
					page: 1,
					limit: 2
				}).then((res) => {
					console.log('comment', res);
					this.commentlist = res.data
				}).catch(() => {

				})
			},
			//商品推荐
			recommend() {
				uni.$u.http.post('/api/goods/recommend', {
					keyword: '',
				}).then((res) => {
					this.swiptlist = res.reduce((a, b) => {
						let lastIndex = a.length - 1
						if (a[lastIndex].length < 3) {
							a[lastIndex].push(b)
						} else {
							a.push([b])
						}
						return a
					}, [
						[]
					])
				}).catch(() => {

				})
			},
			//逛逛
			goshop() {
				uni.navigateTo({
					url: '/pageD/homepage/homepage'
				})
			},
			detail(id) {
				uni.$u.http.get('/api/goods/detail/' + id, ).then((res) => {
					console.log(res);
					this.goodinfo = res
					this.comment()
				}).catch(() => {

				})
			},
			scrollToPosition() {
				console.log(111);
				// 使用$refs获取目标位置的DOM元素
				const targetElement = this.$refs.targetPosition;
				// 调用scrollToView方法滚动到目标位置
				this.$refs.scrollView.scrollToView('targetPosition');
			},
			actabs(index, child, idx) {
				// this.actidx = index
				// this.actab = child
				console.log(this.selectArr);
				if (this.selectArr[index] != child) {
					this.$set(this.selectArr, index, child);
					this.$set(this.subIndex, index, idx);
				} else {
					this.$set(this.selectArr, index, '');
					this.$set(this.subIndex, index, -1); //去掉选中颜色
				}
				this.goodinfo.sku_item.forEach(ite => {
					console.log(ite.item);
					console.log(this.selectArr.join(','));
					if (ite.item == this.selectArr.join(',')) {
						this.sku_info = ite
					}
				})
				console.log(this.sku_info);
			},
			order() {
				uni.navigateTo({
					url: '/pageA/order?sku=' + encodeURIComponent(JSON.stringify(this.sku_info)) + '&value=' + this
						.value + '&goodinfo=' + encodeURIComponent(JSON.stringify(this.goodinfo))
				})
				// console.log(JSON.stringify(this.sku_info));
			},
			//生成图片弹窗
			builder() {
				this.imagea = true
				this.share = false
			},
			//加入购物车
			joincart() {
				this.show = false
				uni.$u.http.post('/api/cart/save', {
					goods_id: this.id, //63 是 String 商品id 
					goods_num: this.value, //1 是 String 商品数量
					sku_item_id: this.sku_info.id, //38 是 String 规格详情id
					merchant_goods_id: this.goodinfo.merchant_goods_id, //38 是 String 团长商品id
					belong: this.goodinfo.source, //是 String 商品归属 0 团长 1 平台自营 2 团长发布或者分享的平台自营商品、 供应链商品
					share_merchant_id: '', //是 String 分享团长id
				}).then((res) => {
					console.log(res);
					this.$u.toast('添加成功')
				}).catch(() => {

				})
			},
			valChange(e) {
				return e.value
			},
			navigateBack() {
				uni.navigateBack()
			},
			click(item) {
				this.current = item
				console.log(item);
				if (item.index == 1) {
					this.scrollToPosition()
				}
			},
			join(index) {
				this.show = true
				this.shopcar = index
			},
			//通知
			inform() {
				uni.showToast({
					title: this.i18n.shelves,
					icon: 'none',
					duration: 2000
				});
			},
			//复制
			onLongPress(e) {
				// 获取长按的文本内容
				let text = e.target.innerText;
				console.log(e);
				// 执行复制操作
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: this.i18n.Copiedpaste,
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: this.i18n.Replicationfailure,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sku {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #888888;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.acttab {
		height: 68rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		box-sizing: border-box;
		display: inline;
		background: rgba(248, 50, 36, 0.06);
		border-radius: 6rpx;
		border: 2rpx solid #F83224;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #F83224;
		line-height: 40rpx;
	}

	.read {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 26rpx;
		color: #F83224;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
	}

	// ::v-deep .u-popup__content{
	// 	background-color: rgba(0,0,0,0) !important;
	// }
	.money {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 20rpx;
		color: #F83224;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
	}

	.title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
	}

	.view {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #777777;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 12rpx;
	}

	.actabs {
		width: 116rpx;
		height: 68rpx;
		background: rgba(248, 50, 36, 0.06);
		border-radius: 6rpx;
		border: 2rpx solid #F83224;
	}

	.bottoma {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		padding: 16rpx 44rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;

		.btn {
			width: 662rpx;
			height: 84rpx;
			background: #F83224;
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.title1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 550;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.tabs {
		// width: 276rpx;
		height: 68rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		background: #F4F4F4;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: inline;
		font-size: 28rpx;
		border: 2rpx solid rgba(151, 151, 151, 0);
		line-height: 40rpx;
		// line-height: 68rpx;
	}

	.link {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
	}

	.tongzhi {
		width: 422rpx;
		height: 76rpx;
		background: #FFB515;
		border-radius: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		text-align: center;
		font-style: normal;
	}

	.info {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 18rpx;
	}

	.button {
		// width: 662rpx;
		height: 88rpx;
		background: #F83224;
		border-radius: 44rpx;
		margin-top: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.contenta {
		width: 702rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 26rpx;
		padding: 28rpx 24rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.content {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-top: 20rpx;
		}
	}

	.back {
		background-color: #F4F4F4;
		padding: 20rpx;
		box-sizing: border-box;

		.guige {}

		.fix {
			width: 750rpx;
			height: 158rpx;
			background: #FFFFFF;
			padding: 14rpx 28rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;

			.ke {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.join {
				width: 208rpx;
				height: 76rpx;
				border-radius: 40rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #F83224;
				line-height: 76rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
			}

			.pin {
				width: 208rpx;
				height: 76rpx;
				background: #F83224;
				border-radius: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}
		}

		// 规格
		.specification {
			width: 670rpx;
			// height: 280rpx;
			background: #F4F4F4;
			padding: 24rpx 22rpx;
			box-sizing: border-box;

			view:last-of-type {
				margin-bottom: 0rpx !important;
			}

			.item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		// 推荐
		.recommend {
			width: 710rpx;
			// height: 476rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//店铺
		.store {
			width: 710rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.line {
				background: rgba(151, 151, 151, 1);
				width: 4rpx;
				height: 20rpx;
				margin: 0 18rpx;
			}

			.num {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #777777;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}

			.goshop {
				// width: 108rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 52rpx;
				text-align: center;
				font-style: normal;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		// 评论
		.comment {
			width: 710rpx;
			// height: 356rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.content {
				margin-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #444444;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				max-height: 112rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: wrap;
				-webkit-line-clamp: 3
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				margin-left: 16rpx;
			}

			.ping {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.strip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #444444;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//服务
		.serve {
			width: 710rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 20rpx;
			box-sizing: border-box;

			.top {
				.change {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		//折扣
		.discount {
			position: relative;
			height: 312rpx;

			.top {
				width: 710rpx;
				height: 124rpx;
				background: linear-gradient(295deg, #FB6662 0%, #FD403B 100%);
				border-radius: 16rpx 16rpx 0 0;
				padding: 20rpx;
				box-sizing: border-box;
				line-height: 98rpx;

				.count {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
				}

				.money {
					font-size: 20rpx;
					font-family: HarmonyOS_Sans_Medium;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					margin-left: 8rpx
				}

				.right {
					font-family: HarmonyOS_Sans;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
					margin-left: 16rpx
				}
			}

			.bottom {
				width: 710rpx;
				height: 208rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				position: absolute;
				top: 104rpx;
				z-index: 2;
				padding: 28rpx 20rpx;
				box-sizing: border-box;

				.title {
					margin-top: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 550;
					font-size: 32rpx;
					color: #222222;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.tabs {
				// width: 104rpx;
				height: 40rpx;
				background: rgba(255, 21, 21, 0.1);
				border-radius: 4rpx;
				padding: 4rpx 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF1515;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}

	// 轮播图
	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;

		.swiper {
			height: 750rpx;
		}

		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}

		.info {
			position: absolute;
			right: 20rpx;
		}

		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
	}



	::v-deep .u-popup__content data-v-17becaea {
		align-items: center !important;
	}
</style>