wx-qhb/pageA/productdetails.vue

<template>
	<view>
		<scroll-view ref="scrollView" scroll-y="true" scroll-with-animation="true" style="min-height: 100vh;"
			:scroll-into-view="toView">
			<!-- 页面内容 -->
			<!-- 自定义导航栏 -->
			<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="scrollToPosition" :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="sharea">
						<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" id="scroll0">
				<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>
					<template v-if="goodinfo.images">
						<swiper-item v-for="(item, idx) in goodinfo.images.split(',')" :key="idx">
							<image :src="goodinfo.image" style="width: 750rpx; height: 750rpx" mode=""></image>
						</swiper-item>
					</template>
				</swiper>
			</view>
			<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">
						<view class="u-flex" style="column-gap:16rpx">
							<div v-for="(tab,idx) in goodinfo.label_arr" :key="idx">
								<text v-if="language == 'zh-CN'" class="tabs">{{ tab.name_cn }}</text>
								<text v-if="language == 'en-US'" class="tabs">{{ tab.name_en }}</text>
								<text v-if="language == 'es-ES'" class="tabs">{{ tab.name_es }}</text>
								<text v-if="language == 'it-IT'" class="tabs">{{ tab.name_ita }}</text>
							</div>
						</view>
						<view class="title">
							<text class="title" 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" id="scroll1">
					<view class="u-flex u-row-between">
						<text class="ping">{{ i18n.review }}</text>
						<view class="u-flex" @click="tocomment">
							<text class="strip">{{ total }}{{ 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>
							<view class="redback u-flex">
								<uni-rate network allow-half :readonly="true" active-color="red"
									color="rgba(255, 27, 0, 0.5)" :size="8" :value="5" v-model="rate" />
								<text style="margin-left: 8rpx">{{ rate }}</text>
							</view>
							<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="detail(child.id)" :key="idx">
										<image :src="child.image" style="width: 214rpx; height: 214rpx" mode="">
										</image>
										<view class="over" style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      " v-if="language == 'zh-CN'">
											{{ child.name_cn }}
										</view>
										<view class="over" style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      " v-if="language == 'en-US'">
											{{ child.name_en }}
										</view>
										<view class="over" style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      " v-if="language == 'es-ES'">
											{{ child.name_es }}
										</view>
										<view class="over" 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" id="scroll2">
					<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="" style="margin-top: 28rpx;">
						<u-parse :content="goodinfo.detail_cn"></u-parse>
						<!-- <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;
                width: 70rpx;
              " @click="fllow">
							<image v-if="goodinfo.is_interest == 1" src="../static/images/index/attention.png"
								style="width: 40rpx; height: 40rpx" mode=""></image>
							<image v-if="goodinfo.is_interest == 0" src="../static/images/index/bottom1.png"
								style="width: 40rpx; height: 40rpx" mode="">
							</image>
							<view v-if="goodinfo.is_interest == 1" class="ke">{{
                i18n.follow
              }}</view>
							<view v-if="goodinfo.is_interest == 0" class="ke" style="color: rgba(248, 50, 36, 1)">已关注
							</view>
						</view>
					</view>
					<view v-if="sku_info.stock_total == 0" class="tongzhi" @click="inform">
						{{ i18n.notification }}
					</view>
					<view v-if="sku_info.stock_total != 0" class="join" @click="join(0)">加入购物车</view>
					<view v-if="sku_info.stock_total != 0" class="pin" @click="join(1)">立即拼团</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="JSON.stringify(sku_info)=='{}'?goodinfo.image:sku_info.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 * 100) *
                    Number(value * 100)) /
                    10000 ||
                  (Number(goodinfo.discount_price * 100) *
                    Number(value * 100)) /
                    10000
                }}</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 * 100) * Number(value * 100)) /
                    10000 ||
                  (Number(goodinfo.price * 100) * Number(value * 100)) / 10000
                }}</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="close">
					<u-icon name="close" 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="close">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="serve" :round="20">
			<view style="
          padding: 48rpx 24rpx;
          box-sizing: border-box;
          background-color: #fff3e7;
          position: relative;
          border-radius: 20rpx 20rpx 0 0;
        ">
				<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">
					</image>
				</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="close" 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"></image>
				</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 {
				toView: "",
				imagea: false,
				list1: [{
						name: "商品",
					},
					{
						name: "评价",
					},
					{
						name: "详情",
					},
				],
				current: 0,
				// 购物车
				show: false,
				//服务
				serve: false,
				//分享
				share: false,
				value: 1, //步进器的值
				swiptlist: [], //推荐列表
				actab: 0,
				id: "", //商品id
				language: "zh-CN",
				goodinfo: {}, //商品详情
				duration: 0, //tabs选项
				actidx: 0,
				subIndex: [],
				selectArr: [],
				shopcar: "",
				sku_info: {},
				commentlist: [],
				total: "",
				rate: 5,
			};
		},
		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: {
			sharea() {
				this.share = true
			},
			close() {
				this.show = false
				this.share = false
			},
			//评论页面
			tocomment() {
				uni.navigateTo({
					url: "/pageA/comment?id=" + this.goodinfo.merchant_goods_id,
				});
			},
			//关注
			fllow() {
				uni.$u.http
					.post("/api/interest/follow", {
						interest_type: 0,
						interest_id: this.goodinfo.merchant_goods_id,
					})
					.then((res) => {
						if (res == "ok1") {
							this.$u.toast("取关成功");
							this.detail(this.id);
						} else {
							this.$u.toast("关注成功");
							this.detail(this.id);
						}
					})
					.catch(() => {});
			},
			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) => {
						this.commentlist = res.data;
						this.total = res.total;
					})
					.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(() => {});
			},
			scrollToPosition(e) {
				var that = this
				this.current = e.index;
				console.log(this.current);
				this.$nextTick(() => {
					that.toView = "scroll" + e.index;
					console.log('view', that.toView);
				})
			},
			//逛逛
			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();
						this.rate = res.merchant.score;
					})
					.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() {
				if (this.sku_info.stock_total != 0) {
					uni.navigateTo({
						url: "/pageA/order?sku=" +
							encodeURIComponent(JSON.stringify(this.sku_info)) +
							"&value=" +
							this.value +
							"&goodinfo=" +
							encodeURIComponent(JSON.stringify(this.goodinfo)),
					});
				} else {
					this.$u.toast("库存为0");
					this.show = false;
				}
				// console.log(JSON.stringify(this.sku_info));
			},
			//生成图片弹窗
			builder() {
				this.imagea = true;
				this.share = false;
			},
			//加入购物车
			joincart() {
				this.show = false;
				if (this.sku_info.stock_total == 0) {
					this.$u.toast("添加失败,库存为0");
				} else {
					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) => {
							this.$u.toast("添加成功");
						})
						.catch(() => {});
				}
			},
			valChange(e) {
				return e.value;
			},
			navigateBack() {
				uni.navigateBack();
			},
			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>
	.over {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 2;
		height: 70rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.redback {
		background: rgba(255, 27, 0, 0.07);
		border-radius: 12rpx;
		padding: 6rpx 12rpx;
		box-sizing: border-box;
		font-family: HarmonyOS_Sans_Medium;
		font-size: 16rpx;
		color: #ff1515;
		line-height: 22rpx;
		text-align: left;
		font-style: normal;
		width: 150rpx;
	}

	.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: rgba(34, 34, 34, 0.5);
			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>