wx-qhb/pageA/productdetails.vue

<template>
	<view class="page">
		<!-- 页面内容 -->
		<!-- 自定义导航栏 -->
		<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="returnindex"></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="" @click="sharea">
					<image src="static/images/share.png" style="width: 38rpx; height: 38rpx" mode=""></image>
				</view>
				<view class="" style="width: 200rpx"></view>
			</view>
		</u-navbar>
		<!-- 商品图片 -->
		<scroll-view ref="scrollView" scroll-y="true" style="min-height: 100vh" :scroll-into-view="toView"
			scroll-with-animation="true">
			<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.discount_price.slice(0, -3)
            }}</text>
						<text class="money">{{ goodinfo.discount_price.slice(-3) }}</text>
						<!-- <text class="right" v-if="goodinfo.is_discount == 0">¥{{ goodinfo.price }}</text> -->
						<text class="right" v-if="goodinfo.is_discount == 0">¥{{ goodinfo.price * value }}</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="">
							<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="openfu">
						<view class="u-flex">
							<view class="change">{{ i18n.service }}</view>
							<view v-if="language == 'zh-CN'" class="" style="margin-left: 20rpx">{{ content.name_cn }}
							</view>
							<view v-if="language == 'en-US'" class="" style="margin-left: 20rpx">{{ content.name_en }}
							</view>
							<view v-if="language == 'es-ES'" class="" style="margin-left: 20rpx">{{ content.name_es }}
							</view>
							<view v-if="language == 'it-IT'" class="" style="margin-left: 20rpx">{{ content.name_ita }}
							</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="item.member.avatar" 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" style="width: 600">{{
                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" v-model="rate" max="5" />
								<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 }} {{ goodinfo.merchant.sale_num }}</text>
								<view class="line"></view>
								<!-- 评价总数 -->
								<text class="num">{{ i18n.review }} {{ goodinfo.merchant.comment_num }}</text>
							</view>
						</view>
					</view>
					<view class="goshop" @click="goshop(goodinfo.merchant.id)">{{
            i18n.stroll
          }}</view>
				</view>
				<!-- 推荐 -->
				<view class="recommend">
					<view class="title">
						{{ i18n.Recommended }}
					</view>
					<view class="" style="margin-top: 10rpx">
						<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;
                        border-radius: 10rpx;
                      " 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; font-size: 26rpx">
						{{ 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">
						<view v-if="language == 'zh-CN'" class="">
							<u-parse :content="goodinfo.detail_cn"></u-parse>
						</view>
						<view v-if="language == 'en-US'" class="">
							<u-parse :content="goodinfo.detail_en"></u-parse>
						</view>
						<view v-if="language == 'es-ES'" class="">
							<u-parse :content="goodinfo.detail_es"></u-parse>
						</view>
						<view v-if="language == 'it-IT'" class="">
							<u-parse :content="goodinfo.detail_ita"></u-parse>
						</view>
						<!-- <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" @click="chat">
							<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)">
								{{ i18n.Followed }}
							</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)">{{ i18n.Addtocart }}</view>
					<view v-if="sku_info.stock_total != 0" class="pin" @click="join(1)">{{
            i18n.grouping
          }}</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; font-weight: 600">{{
                (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;font-weight: 600;"
								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">{{ i18n.Selected }}：{{
                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 v-if="language == 'zh-CN'" class="title1" style="margin-top: 40rpx; margin-bottom: 32rpx">
						{{ item.name }}
					</view>
					<view v-if="language == 'en-US'" class="title1" style="margin-top: 40rpx; margin-bottom: 32rpx">
						{{ item.name_en }}
					</view>
					<view v-if="language == 'es-ES'" class="title1" style="margin-top: 40rpx; margin-bottom: 32rpx">
						{{ item.name_es }}
					</view>
					<view v-if="language == 'it-IT'" class="title1" style="margin-top: 40rpx; margin-bottom: 32rpx">
						{{ item.name_ita }}
					</view>

					<view class="u-flex" style="flex-wrap: wrap">
						<view style="margin-right: 18rpx; margin-bottom: 18rpx" class=""
							:class="selectArr[index] == child.name || selectArr[index] == child.name_en || selectArr[index] == child.name_es ||selectArr[index] == child.name_ita? 'acttab' : 'tabs'"
							v-for="(child, idx) in item.values" :key="idx" @click="actabs(index, child, item)">
							<text v-if="language == 'zh-CN'">{{child.name}}</text>
							<text v-if="language == 'en-US'">{{child.name_en}}</text>
							<text v-if="language == 'es-ES'">{{child.name_es}}</text>
							<text v-if="language == 'it-IT'">{{child.name_ita}}</text>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 30rpx">
					<text class="title1">{{ i18n.number }}</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">
						{{ i18n.Addtocart }}
					</view>
					<view v-if="shopcar == 1" class="btn" @click="order">
						{{ i18n.Buynow }}
					</view>
					<view v-if="shopcar == 2" class="btn" @click="close">
						{{ i18n.enter }}
					</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"> {{ i18n.sales }} </text>
				</view>
				<view class="" style="position: absolute; top: 48rpx; right: 24rpx" @click="close()">
					<u-icon name="close" style="width: 22rpx; height: 22rpx"></u-icon>
				</view>
				<view class="contenta">
					<view class="" v-if="language == 'zh-CN'">
						<u-parse :content="content.content_cn"></u-parse>
					</view>
					<view class="" v-if="language == 'en-US'">
						<u-parse :content="content.content_en"></u-parse>
					</view>
					<view class="" v-if="language == 'es-ES'">
						<u-parse :content="content.content_es"></u-parse>
					</view>
					<view class="" v-if="language == 'it-IT'">
						<u-parse :content="content.content_ita"></u-parse>
					</view>
				</view>
				<view class="button" @click="close()">
					{{ 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 @click="toxieyi" 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" style="margin-top: 82rpx; padding: 0 140rpx; justify-content: center">
					<!-- 					<view class="" @click="copylink">
						<image src="../static/images/index/link.png" style="width: 108rpx; height: 108rpx" mode="">
						</image>
						<view class="link">{{ i18n.Copylink }}</view>
					</view> -->
					<view class="u-row-center" style="display: flex; flex-direction: column; align-items: center"
						@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="close()" color="#fff" size="28"></u-icon>
			</view>
			<image :src="picture2" mode="widthFix"></image>
			<view class="button" style="width: 658rpx" @click="saveImage">{{
        i18n.album
      }}</view>
		</u-popup>
		<l-painter custom-style="position: fixed; left: 200%" ref="poster"
			css="width: 538rpx; height:900rpx; background: #fff;padding:24rpx">
			<l-painter-image :src="goodinfo.image" css="width: 490rpx; height: 490rpx" />
			<l-painter-text text="¥" css=" padding-top: 20rpx;color:#F83224;" />
			<l-painter-text :text="goodinfoyuan"
				css="text-align:center; padding-top: 20rpx;color:#F83224; font-size: 26rpx" />

			<l-painter-text :text="goodinfoname" css=" padding-top: 20rpx;display:block" />
			<l-painter-qrcode :text="'https://cbec.hdlkeji.com/cbec?id=' + id + '&userid=' + userid"
				css="width: 132rpx; height: 132rpx;margin-top:44rpx;margin-left:174rpx" />
			<l-painter-text :text="i18n.identify"
				css=" padding-top: 20rpx;text-align:center;display:block;color:#777777" />
		</l-painter>
	</view>
</template>

<script>
	import WebIM from "@/newSDK/Easemob-chat-4.1.7.js";
	import {
		conn
	} from "@/utils/WebIM";
	import list from "../uview-ui/libs/config/props/list";
	export default {
		data() {
			return {
				share_merchant_id: "",
				toView: "",
				imagea: false,
				goodinfoname: "",
				goodinfoyuan: "",
				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,
				content: {},
				bao: "",
				picture2: "",
				userid: "",
				fu: "",
				name_c: "",
				childA: ''
			};
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
			list1() {
				var List = [{
						name: this.i18n.mineCommodity,
					},
					{
						name: this.i18n.evaluate,
					},
					{
						name: this.i18n.particulars,
					},
				];
				return List;
			},
		},
		onLoad(options) {
			console.log(options);
			if (options.q && options.q != "undefined") {
				// 获取到二维码原始链接内容
				const qrUrl = decodeURIComponent(options.q);
				//此处就是我们要获取的参数 json，通过方法解析
				let jsonUrl = this.GetwxUrlParam(qrUrl);
				//比如我要得到id的值，直接取值即可
				console.log("jsonUrl", jsonUrl);
				let id = jsonUrl.id;
				this.share_merchant_id = jsonUrl.userid;
				this.id = id;
				this.comment();
				this.detail(this.id);
			} else {
				if (uni.getStorageSync("user_info")) {
					var user_info = uni.getStorageSync("user_info");
					this.userid = user_info.id;
					console.log(this.userid);
				}
				this.id = options.id;
				this.comment();
				this.detail(this.id);
			}
		},
		onShow() {
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
			this.recommend();
			this.guarantee();
		},
		mounted() {
			this.$refs.poster.canvasToTempFilePathSync({
				fileType: "jpg",
				quality: 1,
				success: (res) => {
					// console.log(`mounted`, res.tempFilePath)
					this.picture2 = res.tempFilePath;
				},
			});
		},
		methods: {
			//返佣规则
			toxieyi() {
				uni.navigateTo({
					url: "/pageB/xieyi?code=" + "rebate_proportion",
				});
			},
			//解析链接地址
			GetwxUrlParam(url) {
				let theRequest = {};
				if (url.indexOf("#") != -1) {
					const str = url.split("#")[1];
					const strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				} else if (url.indexOf("?") != -1) {
					const str = url.split("?")[1];
					const strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			//分享
			onShareAppMessage(res) {
				if (res.from === "button") {
					// 来自页面内分享按钮
					console.log(res.target);
				}
				return {
					title: "自定义分享标题",
					path: "/pageA/productdetails?id=" + this.id,
				};
			},
			//保存到手机相册
			saveImage() {
				var that = this;
				var fileManager = uni.getFileSystemManager();
				fileManager.writeFile({
					filePath: wx.env.USER_DATA_PATH + "/img.jpg", // 指定图片的临时路径
					data: this.picture2.slice(23), // 要写入的文本或二进制数据
					encoding: "base64", // 指定写入文件的字符编码
					success: (res) => {
						console.log(wx.env.USER_DATA_PATH + "/img.jpg");
						uni.saveImageToPhotosAlbum({
							// 保存图片到相册
							filePath: wx.env.USER_DATA_PATH + "/img.jpg",
							success: function(res) {
								uni.showToast({
									title: this.i18n.savesuccessfully,
								});
								that.imagea = false;
							},
							fail: function(err) {
								console.log("保存失败", err);
								that.imagea = false;
							},
						});
					},
					file: (err) => {
						console.log("写入文件失败", err);
					},
				});
			},
			// 将页面转换成图片的方法
			copylink() {
				this.$u.toast(this.i18n.window);
			},
			openfu() {
				this.serve = true;
			},
			returnindex() {
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
				uni.navigateBack();
			},
			chat() {
				let useinfo = uni.getStorageSync("user_info");
				let that = this;
				let id = conn.getUniqueId(); // 生成本地消息id
				let msg = new WebIM.message("txt", id); // 创建文本消息
				msg.set({
					type: "txt",
					msg: this.i18n.merchandiseNews,
					to: this.goodinfo.merchant.member.easemob_username,
					chatType: "singleChat",
					ext: {
						type: "shopinfo",
						order: {
							name: that.name_c,
							image: that.goodinfo.image,
							discount_price: that.goodinfo.discount_price,
							fu: that.fu,
							id: that.id,
						},
						user_other: that.goodinfo.merchant,
						user: useinfo,
					},
					success: function(id, serverMsgId) {
						uni.navigateTo({
							url: "/pageA/chat/chat?user_other=" +
								encodeURIComponent(JSON.stringify(that.goodinfo.merchant)) +
								"&user_other_no=" +
								that.goodinfo.merchant.member.easemob_username,
						});
					},
					fail: function(e) {
						console.log("发送消息失败");
					},
				});
				conn.send(msg.body);
			},
			sharea() {
				this.share = true;
			},
			close() {
				this.show = false;
				this.share = false;
				this.serve = false;
				this.imagea = 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.i18n.shutdown);
							this.detail(this.id);
						} else {
							this.$u.toast(this.i18n.Focus);
							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) {
				console.log(e);
				var that = this;
				this.current = e.index;
				console.log(this.current);
				this.$nextTick(() => {
					that.toView = "scroll" + e.index;
					console.log("view", that.toView);
				});
				if (!e.index) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300,
					});
				} else if (e.index == 1 || e.index == 2) {
					uni
						.createSelectorQuery()
						.select(e.index == 1 ? "#scroll1" : "#scroll2")
						.boundingClientRect((data) => {
							uni
								.createSelectorQuery()
								.select(".page")
								.boundingClientRect((res) => {
									uni.pageScrollTo({
										duration: 100,
										scrollTop: data.top - res.top - 66,
									});
								})
								.exec();
						})
						.exec();
				}
			},
			//逛逛
			goshop(id) {
				uni.navigateTo({
					url: "/pageD/homepage/homepage?user_other=" +
						encodeURIComponent(JSON.stringify(this.goodinfo.merchant)) +
						"&user_other_no=" +
						this.goodinfo.merchant.member.easemob_username +
						"&merchant_id=" +
						id +
						"&show=" +
						true,
				});
			},
			detail(id) {
				uni.$u.http
					.get("/api/goods/detail/" + id)
					.then((res) => {
						console.log(res);
						this.goodinfo = res;
						if (this.language == "en-US") {
							this.name_c = this.goodinfo.name_en;
						}
						if (this.language == "es-ES") {
							this.name_c = this.goodinfo.name_es;
						}
						if (this.language == "it-IT") {
							this.name_c = this.goodinfo.name_ita;
						}

						if (this.language == "zh-CN") {
							this.name_c = this.goodinfo.name_cn;
						}
						this.goodinfoname = this.goodinfo.name_cn;
						this.goodinfoyuan = this.goodinfo.discount_price;
						this.comment();
						this.rate = res.merchant.score;
					})
					.catch(() => {});
			},
			//保障服务
			guarantee() {
				uni.$u.http
					.get("/api/agreement?code=guarantee_service")
					.then((res) => {
						console.log(res);
						this.content = res;
						if (this.language == "en-US") {
							this.fu = this.content.name_en;
						}
						if (this.language == "es-ES") {
							this.fu = this.content.name_es;
						}
						if (this.language == "it-IT") {
							this.fu = this.content.name_ita;
						}

						if (this.language == "zh-CN") {
							this.fu = this.content.name_cn;
						}
					})
					.catch(() => {});
			},
			// scrollToPosition() {
			// 	console.log(111);
			// 	// 使用$refs获取目标位置的DOM元素
			// 	const targetElement = this.$refs.targetPosition;
			// 	// 调用scrollToView方法滚动到目标位置
			// 	this.$refs.scrollView.scrollToView('targetPosition');
			// },
			actabs(index, child, idx) {
				console.log('index', index);
				console.log('child', child);
				console.log('idx', idx);
				if (this.language == "en-US") {
					this.childA = child.name_en
				}
				if (this.language == "es-ES") {
					this.childA = child.name_es
				}
				if (this.language == "it-IT") {
					this.childA = child.name_ita
				}
				if (this.language == "zh-CN") {
					this.childA = child.name
				}
				if (this.selectArr[index] != this.childA) {
					this.$set(this.selectArr, index, this.childA);
					this.$set(this.subIndex, index, idx);
				} else {
					this.$set(this.selectArr, index, "");
					this.$set(this.subIndex, index, -1); //去掉选中颜色
				}
				console.log('select', this.selectArr);
				console.log('this.selectArrindex', this.selectArr[index]);
				console.log('this.childA', this.childA);
				this.goodinfo.sku_item.forEach((ite) => {
					console.log('ite',ite);
					console.log('this.selectArr.join(",")',this.selectArr.join(","));
					var active = ''
					if (this.language == "en-US") {
						active = ite.item_en
					}
					if (this.language == "es-ES") {
						active = ite.item_es
					}
					if (this.language == "it-IT") {
						active = ite.item_ita
					}
					if (this.language == "zh-CN") {
						active = ite.item
					}
					if (active == this.selectArr.join(",")) {
						this.sku_info = ite;
						this.goodinfo.discount_price = (
							(Number(this.sku_info.discount_price * 100) *
								Number(this.value * 100)) /
							10000
						).toFixed(2);
						this.goodinfo.price = this.sku_info.price;
					}
				});
				console.log(this.sku_info);
			},
			order() {
				if (JSON.stringify(this.sku_info) != "{}") {
					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)) +
								"&share_merchant_id=" +
								this.share_merchant_id,
						});
					} else {
						this.$u.toast(this.i18n.understock);
						this.show = false;
					}
				} else {
					this.$u.toast(this.i18n.selection + this.i18n.specification);
				} // console.log(JSON.stringify(this.sku_info));
			},
			//生成图片弹窗
			builder() {
				this.imagea = true;
				this.share = false;
			},
			//加入购物车
			joincart() {
				if (JSON.stringify(this.sku_info) != "{}") {
					if (this.sku_info.stock_total == 0) {
						this.$u.toast(this.i18n.understock);
					} 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_member_id: this.share_merchant_id, //是 String 分享团长id
							})
							.then((res) => {
								this.$u.toast(this.i18n.successfullyAdded);
								this.show = false;
							})
							.catch(() => {});
					}
				} else {
					this.$u.toast(this.i18n.selection + this.i18n.specification);
				}
			},
			valChange(e) {
				this.goodinfo.discount_price = (
					(Number(this.sku_info.discount_price * 100) * Number(e.value * 100)) /
					10000
				).toFixed(2);
				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;
		word-break: break-all;
	}

	.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;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.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;
				word-break: break-all;
			}

			.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>