medicine-xcx/pagesC/goodsInfo/goodsInfo.vue

<template>
	<view class="goods-info" v-show="isShow">
		<view class="goods-info-banner m-b-20">
			<view class="position-relative m-b-10 overflow-hidden">
				<view class="w-100 goods-info-swiper">
					<swiper-video-image v-if="hackReset" :list="swiperData[swiperKey]" height="560rpx" autoplay circular
						autoPlayVideo ref="swiperVideoImage" @swiperClick="swiperClick" @swiperChange="swiperChange" />
				</view>
				<view class="position-absolute goods-info-segmented-control flex align-center" id="segmentedControl"
					v-if="goodsDetail.voType == 1">
					<view class="goods-info-segmented-control-item flex align-center justify-center flex-1"
						:class="{ 'goods-info-segmented-control-item--active': segmentedControlCurrent === index }"
						v-for="(item, index) in subsectionList" :key="index"
						@click.stop="onSegmentedControl(item, index)">
						{{ item.name }}
					</view>
					<view class="goods-info-segmented-control-bar" :style="[segmentedControlLeft]"></view>
				</view>
			</view>
		</view>

		<!-- 价格展示 -->
		<template v-if="type">
			<!-- <view
				v-if="type =='membersArea' || type == 'ZeroMoneyBuy' || type == 'todayAllReturn'|| type == 'PreferentialSpellGroup' "
				class="goods-info-price" :style="'background-image: url('+IMG_URL+'goods/goodsInfoPriceBg.png);'">
				<view class="goods-info-price-box">
					本网价<text class="font-42">{{goodsDetail.payMoney}}</text>元
					<text v-if="type" class="goods-info-price-box-oldPrice">市场价{{goodsDetail.price}}元</text>
					<text class="text-grey grey_one">{{ goodsDetail.sumShop }}盒起售</text>
				</view> -->


			<!-- 普通订单 -->
			<!-- <view class="towReturn"
	
					v-if="(type =='ZeroMoneyBuy' || type =='todayAllReturn' || type== 'membersArea') && goodsDetail.giveType == 1">
			
					<text class="goods-info-price-box"
							v-if="goodsDetail.oneMomey !== 0 || goodsDetail.oneInteger !== 0 ">次卡再返：{{ goodsDetail.oneMomey == 0 ? '' : goodsDetail.oneMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
						<text class="goods-info-price-box"
							v-if="goodsDetail.twoMomey !== 0 || goodsDetail.twoInteger !== 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
						<text class="goods-info-price-box"
							v-if="goodsDetail.threeMomey !== 0 || goodsDetail.threeInteger !== 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
						<text class="goods-info-price-box"
							v-if="goodsDetail.fourMomey !== 0 || goodsDetail.fourInteger !== 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.fourInteger == 0 ? '' : goodsDetail.fourInteger + '元兑购金' }}</text>
					
				</view>
				<view
					v-if="goodsDetail.giveType == 0">
					<text class="rebate font-36 flex flex-column" v-if="!(goodsDetail.allMoney==0 && goodsDetail.allInteger==0) ">
						再返：{{goodsDetail.allMoney==0? '':goodsDetail.allMoney+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.allInteger==0?'':goodsDetail.allInteger+'元兑购金'}}
					</text>
				</view> -->

			<!-- 拼团 -->
			<!-- <view class="towReturn" v-if="type =='PreferentialSpellGroup' && goodsDetail.giveType == 1">
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 1 && goodsDetail.oneMomey !== 0">再返：{{goodsDetail.oneMomey}}元消费金</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 2 && goodsDetail.threeMomey !== 0 ">再返：{{goodsDetail.threeMomey}}元消费金</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 3 && goodsDetail.twoMomey !== 0 ">再返：{{goodsDetail.twoMomey}}元消费金</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 4 && goodsDetail.fourMomey !== 0 ">再返：{{goodsDetail.fourMomey}}元消费金</text>

					<text class="goods-info-price-alt"
						v-if="userInfo.level == 1 && !(goodsDetail.oneMomey==0 && goodsDetail.oneInteger==0)">
						再返：{{goodsDetail.oneMomey==0? '':goodsDetail.oneMomey+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.oneInteger==0?'':goodsDetail.oneInteger+'元兑购金'}}
					</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 2 && !(goodsDetail.twoMomey==0 && goodsDetail.twoInteger==0)">
						再返：{{goodsDetail.twoMomey==0? '':goodsDetail.twoMomey+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.twoInteger==0?'':goodsDetail.twoInteger+'元兑购金'}}
					</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 3 && !(goodsDetail.threeMomey==0 && goodsDetail.threeInteger==0)">
						再返：{{goodsDetail.threeMomey==0? '':goodsDetail.threeMomey+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.threeInteger==0?'':goodsDetail+'元兑购金'}}
					</text>
					<text class="goods-info-price-alt"
						v-if="userInfo.level == 4 && !(goodsDetail.fourMomey==0 && goodsDetail.fourInteger==0)">
						再返：{{goodsDetail.fourMomey==0? '':goodsDetail.fourMomey+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.fourInteger==0?'':goodsDetail.fourInteger+'元兑购金'}}
					</text>
				</view> -->
			<!-- <view class="towReturn" v-if="type =='PreferentialSpellGroup' && goods.giveType == 0">
					<text class="goods-info-price-alt"
						v-if="goods.allMoney == 0 && goods.allMoney == 0">再返：{{goods.allMoney}}元消费金</text>
					<text class="goods-info-price-alt" v-if="!(goodsDetail.allMoney==0 && goodsDetail.allInteger==0) ">
						再返：{{goodsDetail.allMoney==0? '':goodsDetail.allMoney+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.allInteger==0?'':goodsDetail.allInteger+'元兑购金'}}
					</text>
				</view> -->

			<!-- <text class="goods-info-price-alt" v-if="(type == 'ZeroMoneyBuy' || type == 'membersArea'|| type == 'todayAllReturn') && goodsDetail.giveType == 0">
					返：3 元消费金 +2.99 元 兑购金</text> -->
			<!-- <text class="goods-info-price-alt" v-else>返：50 元消费金</text> -->
			<!-- <view class="rebate font-30 flex flex-column" v-if="goodsDetail.giveType == 0">
					<text class="bg_style bgcolor1"
						v-if="goodsDetail.oneMomey !== 0 || goodsDetail.oneInteger !== 0 ">次卡再返：{{ goodsDetail.oneMomey == 0 ? '' : goodsDetail.oneMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor2"
						v-if="userInfo.level == 2 && goodsDetail.threeMomey !== 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor3"
						v-if="userInfo.level == 3 && goodsDetail.twoMomey !== 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor4"
						v-if="userInfo.level == 4 && goodsDetail.fourMomey !== 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.fourInteger == 0 ? '' : goodsDetail.fourInteger + '元兑购金' }}</text>
				</view>
				<view class="rebate font-30 flex flex-column" v-else>
					<text class="bg_style bgcolor1"
						v-if="goodsDetail.oneMomey !== 0 || goodsDetail.oneInteger !== 0 ">次卡再返：{{ goodsDetail.oneMomey == 0 ? '' : goodsDetail.oneMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor2"
						v-if="userInfo.level == 2 && goodsDetail.threeMomey == 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor3"
						v-if="userInfo.level == 3 && goodsDetail.twoMomey == 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor4"
						v-if="userInfo.level == 4 && goodsDetail.fourMomey == 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.fourInteger == 0 ? '' : goodsDetail.fourInteger + '元兑购金' }}</text>
				</view> -->

			<!-- </view> -->
			<view class="goods-info-price" :style="'background-image: url('+IMG_URL+'goods/goodsInfoPriceBg.png);'">
				<view v-if="
					type=='home' 
					|| type=='specialOfferArea' 
					|| type=='highReturn' 
					|| type=='festivaIActivity'
					|| type=='scienceIsTie-in'
					|| type=='sort' 
					|| type =='ZeroMoneyBuy' 
					|| type =='todayAllReturn' 
					|| type== 'membersArea'
					" class="goods-info-price-box box_centter">
					<text class="font-42" v-if="
						type=='home' 
						|| type=='highReturn'
						|| type=='scienceIsTie-in'
						|| type=='sort'
						|| type =='ZeroMoneyBuy'
						|| type =='todayAllReturn' 
						|| type== 'membersArea'
						">本网价</text>
					<text v-if="type=='specialOfferArea' || type=='festivaIActivity'">特价</text>
					<text>{{goodsDetail.payMoney}}</text>元
					<text class="goods-info-price-box-oldPrice"
						v-if="goodsDetail.price || goodsDetail.price == 0">市场价{{goodsDetail.price}}元</text>
					<text class="text-grey"
						v-if="goodsDetail.sumShop || goodsDetail.sumShop == 0">{{ goodsDetail.sumShop }}盒起售</text>
				</view>
				<view v-if="type=='integralStore' " class="goods-info-price-integral_centter">
					<text>{{goodsDetail.integerPrice}}兑购金兑购</text>
					<text class="text-grey">{{ goodsDetail.sumShop }}盒起售</text>
				</view>
				<view class="rebate font-40 flex flex-column" v-if="goodsDetail.giveType == 1">
					<text class="bg_style bgcolor1"
						v-if="goodsDetail.oneMomey !== 0 || goodsDetail.oneInteger !== 0">次卡再返：{{ goodsDetail.oneMomey == 0 ? '' : goodsDetail.oneMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor2"
						v-if="goodsDetail.twoMomey !== 0 || goodsDetail.twoInteger !== 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor3"
						v-if="goodsDetail.threeMomey !== 0 || goodsDetail.threeInteger !== 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
					<text class="bg_style bgcolor4"
						v-if="goodsDetail.fourMomey !== 0 || goodsDetail.fourInteger !== 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }}&nbsp;&nbsp;{{ goodsDetail.fourInteger == 0 ? '' : goodsDetail.fourInteger + '元兑购金' }}</text>
				</view>
				<view class="rebate font-40 flex flex-colum" v-if="goodsDetail.endTime">
					<text class="bg_style bgcolor4">
						活动结束时间： {{ goodsDetail.endTime }}</text>
				</view>

				<view class="rebate font-40 flex flex-column" v-if="goodsDetail.giveType == 0">
					<text class="bg_style bgcolor4" v-if="!(goodsDetail.allMoney==0 && goodsDetail.allInteger==0) ">
						再返：{{goodsDetail.allMoney==0? '':goodsDetail.allMoney+'元消费金'}}&nbsp;&nbsp;{{goodsDetail.allInteger==0?'':goodsDetail.allInteger+'元兑购金'}}
					</text>
				</view>

				<view class="flex flex-column m-b-10">
					<!-- <text class="return_text" v-if="goods.payMoney !== 0 && goods.bottonType == 0 && thereTo == 'sort'" >可用{{goods.payMoney}}元消费金兑购</text> -->
					<!-- 兑购专区不显示 消费金抵购-->
					{{}}
					<text class="return_text" v-if="goodsDetail.payMoney !== 0 && type !=='integralStore'">可用{{goodsDetail.payMoney}}元消费金抵购</text>
					<text class="return_text" v-if="goodsDetail.integerOldPrice !== 0 && type !=='integralStore'" >可用{{goodsDetail.integerOldPrice}}兑购金兑购</text>
					<div class="flex justify-between">
						<!-- <text class="return_text" v-if="goods.getInteger !== 0">推广可得兑购金{{goods.getInteger}}元</text> -->
						<text class="return_text return_text_1"
							v-if="goodsDetail.getMoney!==0">推广可得兑购金{{goodsDetail.getMoney}}元</text>
						<!-- <text class="return_text return_text_1"
							v-if="thereTo !== 'sort'">推广可得兑购金{{goodsDetail.getInteger}}元</text> -->
					</div>
				</view>
			</view>

		</template>

		<!-- 选择是看评论 还是 商品详情 -->
		<view class="goods-info-select-show flex ">
			<view @click="isShowDetale = true;showComment=false"
				:class="isShowDetale?'goods-info-select-show-goods flex justify-center align-center selectactive':'goods-info-select-show-goods flex justify-center align-center'">
				商品参数
			</view>
			<view @click="isShowDetale =false;showComment=true"
				:class="isShowDetale?'goods-info-select-show-comment flex justify-center align-center':'goods-info-select-show-comment flex justify-center align-center selectactive'">
				评论
			</view>
		</view>
		<template v-if="isShowDetale">
			<!-- 商品详情 -->
			<view class="goods-info-container">
				<view class="goods-info-container-title flex align-end justify-between">
					<text
						class="font-36 text-black font-weight-bold">【{{goodsDetail.subTitle}}】{{goodsDetail.title}}</text>
				</view>

				<view class="goods-info-container-params">
					<!-- <view class="goods-info-container-params-image">
						<image :src="IMG_URL + 'goods/params.png'" mode="widthFix"></image>
					</view> -->

					<view class="goods-info-container-params-content">
						<!-- <view class="flex align-start m-b-20" v-for="item in 3" :key="item">
							<text class="goods-info-container-params-content-left text-grey font-28">功能主治</text>
							<text class="text-black font-28">成人儿童风热感冒，用于感冒引起的头痛、 发热、鼻塞、流涕、喉咙痛</text>
						</view> -->
						<rich-text :nodes="goodsDetail.detail" image-menu-prevent></rich-text>
						<!-- <u-parse :html="goodsDetail.detail"></u-parse> -->
					</view>
				</view>
			</view>

			<view class="goods-info-other" v-if="goodsDetail.goodsRelationList.length !== 0">
				<view class="goods-info-other-image m-b-20">
					<image :src="IMG_URL + 'goods/test.png'" mode="widthFix"></image>
				</view>
				<view class="goods-info-other-item" v-for="(item2,index) in goodsDetail.goodsRelationList" :key="index">
					<goods-item :type='type' :thereTo="type" :goods="item2"></goods-item>
				</view>
			</view>

		</template>
		<template v-else>
			<!-- 评论 -->
			<view class="comment">
				<view class="comment-item" v-for="(item,index) in pingList" :key="index">
					<view class="comment-item-user-info">
						<img class="comment-item-user-info-userImg" :src="item.headUrl" alt="">
						<text>{{item.name}}</text>
					</view>
					<view class="comment-conter">
						{{item.connet}}
					</view>
				</view>
			</view>
		</template>
		<!-- <com-view class="goods-info-doctor position-fixed"> -->
		<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
			class="wechatBtn goods-info-doctor position-fixed">
			<image :src="IMG_URL + 'goods/doctor.png'" mode="widthFix"></image>
		</button>
		<!-- </com-view> -->

		<view class="goods-info-footer position-fixed vw-100 left-0 bottom-0 flex align-center justify-between">
			<view class="flex showCommtBox" v-if="showComment">
				<input type="text" placeholder="发表评论" class="input-commit" indconfirm="toSendCommit"
					v-model="commitKey">
				<button class="flex font-24 send_commit_btn" @click="toSendCommit">发送</button>
			</view>
			<view class="flex align-center">
				<!-- 				<com-view @click="toHome">
					<view class="flex flex-column h-100 justify-between align-center m-r-50">
						<image class="goods-info-footer-icon" :src="IMG_URL + 'goods/home.png'">
							<text class="text-black font-24">分享</text>
					</view>
				</com-view> -->
				<button class="goods-info-footer-share" @click="showShare = true">
					<view class="flex flex-column h-100 justify-between align-center m-l-25 m-r-25">
						<image class="goods-info-footer-icon" :src="IMG_URL + 'goods/share.png'">
							<text class="text-black font-32">分享</text>
					</view>
				</button>
				<com-view @click="toCollection">
					<view class="flex flex-column h-100 justify-between align-center m-r-25">
						<image v-if="goodsDetail.skuListSku[0].collection" class="goods-info-footer-icon"
							:src="IMG_URL + 'goods/isCollection.png'">
							<!-- 已收藏 -->
							<image v-else class="goods-info-footer-icon" :src="IMG_URL + 'goods/collection.png'">
								<!-- 未收藏 -->
								<text class="text-black font-32">收藏</text>
					</view>
				</com-view>
				<!-- 	<com-view @click="toAddCart"
					v-if=" !(type == 'PreferentialSpellGroup' || type =='integralStore') && goodsDetail.payNum != 1">
					<view>
						<view class="flex flex-column h-100 justify-between align-center position-relative m-r-28"
							style="width: 120rpx; !important">
							<image class="goods-info-footer-icon" :src="IMG_URL + 'goods/cart.png'">
								<text class="text-black font-24">加入购物车</text>
						</view>
					</view>
				</com-view> -->
				<!-- 特惠拼团和兑购兑换商品详情太过空旷 增加购物车按钮 -->
				<!-- 	<com-view @click="toShoppingCart" v-else-if="goodsDetail.payNum != 1">
					<view>
						<view class="flex flex-column justify-between align-center position-relative m-r-28"
							style="width: 120rpx; !important">
							<image class="goods-info-footer-icon" :src="IMG_URL + 'goods/cart.png'">
								<text class="text-black font-24">购物车</text>
								<u-badge :offset="[-8,0]" type="error" :count="goodsDetail.shopCartNum"
									v-if="goodsDetail.shopCartNum"></u-badge>
						</view>
					</view>
				</com-view> -->
			</view>
			<!-- 老的逻辑 -->
			<!-- <u-button  type="primary" shape="circle" @click="showParameter = true">查看参数</u-button> -->
			<!-- <u-button type="primary" shape="circle" @click="toAddCart" class="changeWidth" v-if="goodsDetail.payNum == 1 && !(type == 'PreferentialSpellGroup' && type =='integralStore')">加入购物车</u-button>
			<u-button type="primary" shape="circle" :class="textBtnPrimary=='立即购买'? 'changeColor': '' " @click="toShowS" v-else>{{textBtnPrimary}}</u-button>
			<!-- 加入购物车 -->
			<!-- <u-button type="primary" shape="circle" v-if="!(goodsDetail.payNum == 1 && !(type == 'PreferentialSpellGroup' && type =='integralStore'))" @click="toAddCart">加入购物车</u-button> -->
			<u-button type="primary" shape="circle"
				:class="[textBtnPrimary=='立即购买'||textBtnPrimary=='立即预约'? 'changeColor': '',textBtnPrimary=='立即兑换'? 'changeWidth': '','fontSize' ]"
				@click="toShowS">{{textBtnPrimary}}</u-button>
			<u-button type="primary" shape="circle" v-if="type !== 'integralStore'" @click="toAddCart" class='fontSize' >加入购物车</u-button>
		</view>
		<!-- 弹出查看参数 -->
		<u-popup v-model="showParameter" mode="bottom" border-radius="40" height="70%" @close="showParameter = false"
			@touchmove.prevent="">
			<scroll-view scroll-y="true">
				<rich-text :nodes="goodsDetail.parameter"></rich-text>
			</scroll-view>
		</u-popup>

		<!-- 分享选择 -->
		<u-popup v-model="showShare" mode="bottom" border-radius="20" height="15%" @close="showShare = false">
			<view class="flex align-center shareBox">
				<!-- 分享 -->
				<button class="imgwH" data-name="shareBtn" open-type="share">
					<image class="imgwH" :src="IMG_URL + 'goods/weixin.png'">
				</button>
				<!-- 海报 -->
				<image class="imgwH" :src="IMG_URL + 'goods/pic.png'" mode="" @click="toPages"></image>
			</view>
		</u-popup>
		<spec-popup ref="specPopup" :type="type" :goodsDetail="goodsDetail" @addShopping="addShoppingBefore" />
		<!-- 自定义提示组件 -->
		<view class="showToastStyle" v-if="isShowToast">
			<text class="showToastText">加入购物车成功！</text>
		</view>
		<!-- 返回首页 -->
		<view class="showToBack" v-if="toBackHome" @click="toBachHome">
			返回首页
		</view>
		
	</view>
</template>

<script>
	import SpecPopup from './components/specPopup'
	import {
		IMG_URL
	} from '@/env.js'
	let subsectionList = [{
			name: '图片',
			key: 'image'
		},
		{
			name: '视频',
			key: 'video'
		}
	]
	export default {
		data() {
			return {
				isShowToast: false,
				toBackHome: false,
				pingList: [],
				IMG_URL,
				type: '',
				swiperData: {},
				swiperKey: 'image',
				hackReset: true,
				subsectionList,
				showParameter: false,
				segmentedControlCurrent: 0,
				show_pic_viode: 0,
				bannerList: [
					IMG_URL + 'home/test14.png',
					IMG_URL + 'home/test14.png',
					IMG_URL + 'home/test14.png'
				],
				goodsDetail: {},
				goodsId: '',
				segmentedControlInfo: null,
				textBtnPrimary: '立即购买', // 加入按钮
				isShowDetale: true,
				showShare: false, // 分享选择显示
				showComment: false, // 显示输入框
				commitKey: '', //发送评论文字
				isLock: true, // 防止重复发评论
				shareInfo: {}, // 分享信息
			}
		},
		components: {
			SpecPopup
		},
		onShareAppMessage(res) {
			return {
				title: `【好友推荐】${this.goodsDetail.title}`,
				imageUrl: this.goodsDetail.pic[0],
				path: `/pagesC/goodsInfo/goodsInfo?id=${this.goodsId}&type=${this.type}&shareId=${this.userInfo.invitationCode}`
			}
		},
		computed: {
			segmentedControlLeft() {
				let width = this.segmentedControlInfo?.width ?? 0 / 2;
				let left = width * this.segmentedControlCurrent;
				return {
					transform: `translateX(${left}rpx)`
				};
			},
			isShow() {
				return Object.keys(this.goodsDetail).length
			},
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		async onLoad(options) {
			console.log(options)
			uni.setStorageSync('shareId', options.shareId);
			this.type = options.type;
			this.goodsId = options.id;
			// 返回首页
			const pages = getCurrentPages();
			console.log(pages)
			this.toBackHome = pages[0].route == 'pagesC/goodsInfo/goodsInfo' ? true : false
			// 要么跳首页
			const token = this.$store.state.userToken
			if (options.shareId) {
				this.getGoodsdetail(options.id)
			} else {
				console.log(12313)
				await this.getGoodsdetail(options.id)
				await this.goodsFenGoods();
				// 获取分享信息
			}
		},
		onShow() {
			// 返回是提示 添加购物车成功
			uni.$on("isUpdataShowToast", (time = 1500) => {
				this.isShowToast = true;
				setTimeout(() => {
					this.isShowToast = false;
				}, time)
			})
		},
		onUnload() {
			uni.$off('isUpdataShowToast')
			const pages = getCurrentPages();
			if (pages[0].route == 'pagesC/goodsInfo/goodsInfo') {
				uni.switchTab({
					url: "/pages/home/home"
				})
			}
		},
		methods: {
			toBachHome() {
				uni.switchTab({
					url: "/pages/home/home"
				})
			},
			// 获取分享信息
			goodsFenGoods() {
				return new Promise((req, rej) => {
					this.$api('goodsFenGoods', {
						goodId: this.goodsId,
						type: this.type,
						path: '/pagesC/goodsInfo/goodsInfo',
					}).then(res => {
						let {
							code,
							result,
							message
						} = res;
						if (code == 200) {
							// console.log(result);
							this.shareInfo = result
							req(result)
						} else {
							this.$Toast(message);
						}
					})
				})
			},
			// 发送评论
			toSendCommit() {
				const keyName = this.commitKey
				if (keyName == "") {
					this.$Toast("请输入评论内容！")
					return
				}
				if (!this.isLock) {
					this.$Toast("请休息一下吧！")
					return
				}
				this.isLock = false
				const params = {
					goodId: this.goodsId,
					name: this.userInfo.nickName,
					headUrl: this.userInfo.headUrl,
					connet: keyName
				}
				// console.log(params)
				this.$api("setCommit", params).then(res => {
					const {
						code,
						result,
						message
					} = res;
					if (code !== 200) {
						this.$Toast(message)
						this.isLock = true;
						return
					}
					this.isLock = true;
					this.commitKey = '';
					this.$Toast(message);
					this.getPing(params.goodId);
				}).catch(err => {
					this.$Toast(err.message)
					this.isLock = true;
				})
			},
			// swiper切换时触发的回调
			swiperChange(index) {
				// console.log(index)
			},
			// 点击当前视频或图片的回调
			swiperClick(item, index) {
				item.type === 'video' && this.play(item.link)
			},
			// 暂停当前视频播放
			pause() {
				this.$refs.swiperVideoImage.pause()
			},
			toShowS() {
				this.$refs.specPopup.show(true, 'confirm', this.type)
			},
			onSegmentedControl(item, index) {
				// 显示图片还是视频
				this.swiperKey = item.key
				this.segmentedControlCurrent = index;
				this.hackReset = false;
				this.$nextTick(() => {
					console.log('---reset')
					this.hackReset = true;
				})
				// if (item.key === 'video') return this.$nextTick(() => console.log(this.$refs.swiperVideoImage.play),this.$refs.swiperVideoImage.play())
			},
			//加入购物车 之前判断条件
			addShoppingBefore(params, type) {
				let tips = ''
				console.log(params, type, '数据')
				for (let key in params.spec) {
					if (!params.spec[key]) {
						this.$Toast(`请选择${key}`)
						return
					}
				}
				if (this.type == 'integralStore') {
					// if (params.num * params.price > this.userInfo.integral) return this.$Toast('兑购金不足');  // 如果解开，请加上刷新个人信息，更新缓存
					console.log(params)
					uni.showModal({
						title: '确定使用消费' + parseFloat(params.price * params.num).toFixed(2) + '元兑购金兑购',
						success: (res) => {
							if (res.confirm) {
								if (type === 'confirm') return this.confirmShopping(params)
								this.confirmShopping(params);
							} else if (res.cancel) {
								this.$Toast("您取消了兑换")
							}
						},
						fail: () => {
							this.$Toast("您取消了兑换")
						}
					})
				} else {
					if (type === 'confirm') return this.confirmShopping(params)
					this.addShopping(params)
				}
			},
			confirmShopping(params) {
				let {
					num,
					price,
					spec
				} = params
				let arr = Object.values(spec)
				let goodSkuParam = arr.join(',')
				const payNum = this.goodsDetail.payNum

				// if (this.type == 'PreferentialSpellGroup' || this.type=='integralStore') { // 拼团 1 && 兑购金 2
				let orderType = this.type == 'PreferentialSpellGroup' ? 1 : this.type == 'integralStore' ? 2 : 3
				let payType = this.type == 'PreferentialSpellGroup' ? 0 : this.type == 'integralStore' ? 2 : 0
				if (payNum == 1) { // 处方药
					// 传递goodsId 和 type
					this.$tools.navigateTo({
						url: `/pagesC/subscribe/subscribe?goodsId=${this.goodsId}&orderType=${orderType}&isSituation=${this.goodsDetail.isSituation}&num=${num}&price=${price}&goodSkuParam=${goodSkuParam}&prescriptionId=${this.goodsDetail.payNum}&createOrderType=confirm&payType=${payType}&isZone=${this.goodsDetail.bottonType}`
					})
				} else {
					uni.showLoading()
					this.$api('teamCreateOrder', {
							type: payType,
							id: this.goodsDetail.id,
							goodsPrice: price,
							goodsNum: num,
							goodsSku: goodSkuParam,
							orderType
						})
						.then(res => {
							uni.hideLoading()
							let {
								code,
								message,
								result
							} = res
							if (code === 200) {
								this.$tools.navigateTo({
									url: `/pagesC/confirmOrder/confirmOrder?ids=${result.order.id}&orderType=${orderType}&payType=${payType}&isZone=${this.goodsDetail.bottonType}`
								})
							} else if (code === 902) {
								const that = this
								uni.showModal({
									title: "疫情防控药品登记提示",
									content: "您好，您购买的商品中含疫情防控类商品，请您登记用药人信息后下单",
									success(res) {
										if (res.confirm) {
											setTimeout(() => {
												that.$refs.specPopup.hide();
												that.$tools.navigateTo({
													url: `/pagesB/epidemicPrevention/index?goodsId=${that.goodsId}&orderType=${orderType}&isSituation=${that.goodsDetail.isSituation}&num=${num}&price=${price}&goodSkuParam=${goodSkuParam}&prescriptionId=${that.goodsDetail.payNum}&createOrderType=confirm&payType=${payType}&isZone=${that.goodsDetail.bottonType}`
												}, 800)
											})
										}
									}
								})
							} else {
								// this.$Toast(message)
								if(message == "兑购金不足"){
									uni.showModal({
										title: `兑购金不足，兑购失败`,
										content: '可以去充值/或分享推广/或答题有奖/或购物........获得兑购金',
										showCancel: false,
										confirmText: '我知道了',
										success(res) {
											}
										});
								}
							}
						}).catch(err => {
							this.$Toast(err.message)
						})
				}
				// } else { 

				// }
			},
			// 加入购物车 
			addShopping(params) {
				let {
					num,
					price,
					spec
				} = params
				let arr = Object.values(spec)
				let goodSkuParam = arr.join(',')
				const payNum = this.goodsDetail.payNum

				// 兑购金提示是否确定使用多少兑购金兑购
				// 防疫药

				if (payNum == 1) { // 处方药
					// 传递goodsId 和 type
					let orderType = this.type == 'PreferentialSpellGroup' ? 1 : this.type == 'integralStore' ? 2 : 0
					this.$refs.specPopup.hide();
					this.$tools.navigateTo({
						url: `/pagesC/subscribe/subscribe?goodsId=${this.goodsId}&orderType=${orderType}&isSituation=${this.goodsDetail.isSituation}&num=${num}&price=${price}&goodSkuParam=${goodSkuParam}&prescriptionId=${this.goodsDetail.payNum}&createOrderType=shoppingCart`
					})
				} else { // 加入购物车接口
					// if (this.type == 'PreferentialSpellGroup' || this.type=='integralStore') { // 拼团 1 && 兑购金 2
					// 	let orderType = this.type == 'PreferentialSpellGroup' ? 1 : this.type=='integralStore' ? 2 : 0
					// 	uni.showLoading()
					// 	this.$api('teamCreateOrder', {type:2, id: this.goodsDetail.id,goodsPrice: price, goodsNum: num,  goodsSku: goodSkuParam, orderType })
					// 	.then(res => {
					// 		uni.hideLoading()
					// 		let { code, message, result } = res
					// 		if (code === 200) {
					// 			this.$tools.navigateTo({
					// 				url: `/pagesC/confirmOrder/confirmOrder?ids=${result.order.id}&type=${orderType}` 
					// 			})
					// 		}else if(code === 902){
					// 			setTimeout(() => {
					// 				this.$tools.navigateTo({
					// 					url: `/pagesB/epidemicPrevention/index?goodsId=${this.goodsId}&orderType=${orderType}&isSituation=${this.goodsDetail.isSituation}&num=${num}&price=${price}&goodSkuParam=${goodSkuParam}&prescriptionId=${this.goodsDetail.payNum}`
					// 				}, 800)
					// 			})
					// 		} else {
					// 			this.$Toast(message)
					// 		}
					// 	}).catch(err => {
					// 		this.$Toast(err.message)
					// 	})
					// } else { // 购物车
					this.$api('addShoppingCart', {
							id: this.goodsDetail.id,
							num,
							price,
							goodSkuParam
						})
						.then(res => {
							this.$refs.specPopup.hide()
							// this.$Toast(res.message)
							if (res.code === 200) {

								uni.$emit('updateShoppingCartList')
								this.$Toast('加入成功')
								// setTimeout(() => {
								// 	this.$tools.switchTab({
								// 		url: '/pages/shoppingCart/shoppingCart'
								// 	}, 800)
								// })

							} else if (res.code === 902) {
								const that = this
								uni.showModal({
									title: "疫情防控药品登记提示",
									content: "您好，您购买的商品中含疫情防控类商品，请您登记用药人信息后下单",
									success(res) {
										if (res.confirm) {
											// 防疫药
											setTimeout(() => {
												that.$refs.specPopup.hide();
												that.$tools.navigateTo({
													url: `/pagesB/epidemicPrevention/index?goodsId=${that.goodsId}&isSituation=${that.goodsDetail.isSituation}&num=${num}&price=${price}&goodSkuParam=${goodSkuParam}&prescriptionId=${that.goodsDetail.payNum}&createOrderType=shoppingCart`
												}, 800)
											})
										}
									}
								})
							} else {
								this.$Toast(res.message)
							}
						}).catch(err => {
							this.$Toast(err.message)
						})
					// }
				}
			},
			// 获取商品详情
			getGoodsdetail(id) {
				uni.showLoading();
				this.$api('getGoodsdetail', {
						id
					})
					.then(res => {
						let {
							code,
							result,
							message
						} = res;
						uni.hideLoading();
						if (code == 200) {
							this.getPing(this.goodsId);
							result.pic = result.pic ? result.pic.split(',') : []
							result.picVo = result.picVo ? result.picVo.split(',') : []
							result.goodsRelationList.forEach(item => {
								if (item) {
									item.pic = item.pic.split(',')[0]
								}
							})

							this.swiperData = {
								video: result.picVo.map(item => ({
									type: 'video',
									link: item
								})),
								image: result.pic.map(item => ({
									type: 'img',
									link: item
								}))
							}
							let detail = result.detail.replace(/\<img/gi,
								`<img style="width:${uni.upx2px(750)}px;height:auto;display:block;"`)
							// .replace(/\<li style="[^"]+"/gi, `<li style="display:flex;flex-wrap:wrap"`)
							// .replace(/\<p class="drug-explain-txt" style="[^"]+"/gi, `<p style="flex:1"`)
							this.goodsDetail = {
								...result,
								detail
							}
							// 处方显示立即预约 其他显示立即购买  .type== 'PreferentialSpellGroup'  integralStore
							let btnTxt = this.textBtnPrimary
							// if (result.payNum == 1 && this.type !== 'PreferentialSpellGroup' && this.type !==
							// 	'integralStore') {
							// 	btnTxt = "加入购物车"
							// } else 
							if (result.payNum !== 1 && (this.type !== 'PreferentialSpellGroup' && this.type !==
									'integralStore')) {
								btnTxt = "立即购买"
							} else if (this.type === 'PreferentialSpellGroup') {
								btnTxt = '立即参团'
							} else if (this.type == 'integralStore') {
								btnTxt = '立即兑换'
							}
							if (result.payNum == 1) {
								btnTxt = '立即预约'
							}
							this.$nextTick(async () => {
								this.segmentedControlInfo = await this.$util.getDomInfo(
									'#segmentedControl', this);
								this.textBtnPrimary = btnTxt
								console.log('this.segmentedControlInfo', this.segmentedControlInfo)
							})
						} else {
							let tips = message.indexOf('操作失败') > -1 ? '商品不存在' : message
							this.$Toast(tips);
						}
					}).catch(err => {
						uni.hideLoading();
						this.$Toast(err.message)
					})
			},

			//获取评论
			getPing(goodId) {
				let that = this;
				let pamas = {
					goodId: goodId
				}
				this.$api('getGoodsPing', pamas).then(res => {
					console.log(res)
					if (res.code == 200) {
						that.pingList = res.result;
						console.log(that.pingList)
					}
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message)
				})
			},
			play(picVo) {
				this.$tools.navigateTo({
					url: `/pagesC/videoPlay/videoPlay?picVo=${picVo}`
				});
			},
			toAddCart() {
				// uni.switchTab({
				// 	url: '/pages/shoppingCart/shoppingCart'
				// })
				// if (this.goodsDetail.shopCardType === 1 && this.goodsDetail.bottonType === 0 ) return this.$Toast('购物车中有专区商品，请先支付')
				// if (this.goodsDetail.shopCardType === 0 && this.goodsDetail.bottonType === 1 && this.goodsDetail.shopCartNum * 1 > 0 ) return this.$Toast('购物车中有普通商品，请先支付')
				this.$refs.specPopup.show(true, 'shoppingCart', this.type)
			},

			toShoppingCart() {
				uni.switchTab({
					url: '/pages/shoppingCart/shoppingCart'
				})
			},
			toCollection() {

				uni.showLoading();
				const params = {
					goodId: this.goodsDetail.id,
					thereTo: this.type // 从那元页面来的
				}
				this.$api('saveCollectionPage', params).then(res => {
					let {
						code,
						result,
						message
					} = res;
					uni.hideLoading();
					if (code == 200) {
						this.goodsDetail.skuListSku[0].collection = !this.goodsDetail.skuListSku[0].collection
						this.$Toast(result);
					} else {
						this.$Toast(message);
					}
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message);
				})
			},
			toHome() {

				this.$tools.switchTab({
					url: '/pages/home/home'
				})
			},
			// 分享海报
			toPages() {
				const goodsInfo = encodeURIComponent(JSON.stringify(this.goodsDetail));
				const shareInfo = encodeURIComponent(JSON.stringify(this.shareInfo));
				if (Object.keys(this.shareInfo).length == 0) {
					this.$Toast("请等会儿点击，资源正在加载！");
					return;
				}
				this.$tools.navigateTo({
					url: `/pagesC/sharePic/sharePic?goodsInfo=${goodsInfo}&shareInfo=${shareInfo}`,

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.towReturn {
		padding-left: 40rpx;
	}

	.rebate {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		margin-left: 20rpx;

		// margin-bottom: 6rpx;
		.bg_style {
			width: fit-content;
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 20rpx;
			margin-bottom: 10rpx;
			border-radius: 12rpx;
			color: #fff;
		}


		// 	.bgcolor1 {
		// 		background-color: #58efa9;
		// 		display: inline-block;
		// 	}

		// 	.bgcolor2 {
		// 		background-color: #ffa952;
		// 		display: inline-block;
		// 	}

		// 	.bgcolor3 {
		// 		background-color: #f94343;
		// 		display: inline-block;
		// 	}

		// 	.bgcolor4 {
		// 		background-color: #000000;
		// 		display: inline-block;
		// 	}
	}

	.text-grey {
		font-size: 28rpx !important;
	}

	.goods-info {
		padding-bottom: 150rpx;

		&-swiper {
			width: 100%;
			height: 560rpx;
		}

		&-play {
			left: 50%;
			bottom: 50%;
			transform: translate(-50%, 50%);
		}

		&-segmented-control {
			width: 200rpx;
			height: 50rpx;
			background: #fff;
			border-radius: 40rpx;
			left: 50%;
			bottom: 20rpx;
			transform: translateX(-50%);

			&-item {
				position: relative;
				z-index: 1;
				color: #000;
				font-size: 34rpx;
				transition: all 0.2s linear;

				&--active {
					color: #fff;
				}
			}

			&-bar {
				width: 50%;
				height: 100%;
				border-radius: 40rpx;
				position: absolute;
				background-color: $u-type-primary;
				z-index: 0;
				transition: all 0.2s linear;
			}
		}

		&-price {
			width: 714rpx;
			// height: 176rpx;
			margin: 20rpx auto 20rpx;
			border-radius: 14rpx;
			box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.16);
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			&-box {
				color: #fff;
				margin-top: 34rpx;
				padding-left: 40rpx;
				font-size: 30rpx;

				text {
					font-size: 36rpx;
				}

				width: 100%;

				&-oldPrice {
					text-decoration: line-through;
					color: #fff;
					font-size: 24rpx !important;
					margin-left: 12rpx;
				}

				.text-grey {
					display: inline-block;
					float: right;
					flex: 1;
					margin-right: 20rpx;
					font-size: 28rpx !important;
					vertical-align: initial;
				}

				.grey_one {
					margin-top: 8rpx;
				}
			}

			.box_centter {
				// line-height: 176rpx;

				padding-top: 10rpx;
				// padding-left: 40rpx;
				margin-top: 0rpx;
				padding-right: 20rpx;
			}

			&-integral_centter {
				flex: 1;
				line-height: 176rpx;
				padding-left: 20rpx;
				padding-top: 0rpx;
				font-size: 43rpx;
				color: #fff;
				display: flex;
				justify-content: space-between;

				.text-grey {
					margin-right: 20rpx;
				}
			}

			&-alt {
				margin-left: 37rpx;
				margin-top: 13rpx;
				display: inline-block;
				height: 61rpx;
				border-radius: 30rpx;
				text-align: center;
				line-height: 52rpx;
				padding: 0 17rpx;
				background-color: #fff;
				color: #DB0618;
				box-sizing: border-box;
				font-size: 24rpx;
				border: 1px solid #DB0618;
			}
		}

		&-footer {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 130rpx;
			background-color: #fff;
			box-shadow: 0px 2rpx 16rpx 4px #d9d9d9;

			.showCommtBox {
				width: 100%;
				position: fixed;
				left: 0;
				padding: 10rpx 0;
				height: 60rpx;
				background-color: #fff;
				margin-bottom: 180rpx;
				justify-content: space-around;

				.input-commit {
					// width: 640rpx;
					flex: 1;
					margin-left: 30rpx;
				}

				.send_commit_btn {
					width: 120rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					background-color: #01AEEA;
					color: #fff;
				}
			}

			&-share {
				padding: 0;
				border: 0;
				background: transparent;
				line-height: unset;

				&::after {
					border: 0;
					background: transparent;
				}
			}

			&-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.changeWidth {
				/deep/.u-btn {
					width: 488rpx;
					height: 90rpx;
					font-size: 32rpx;
				}
			}
			.fontSize{
				/deep/ .u-btn {
					font-size: 36rpx;
				}
			}
			.changeColor {
				/deep/ .u-btn {
					background-color: #F8B66A;
				}
			}

			/deep/.u-btn {
				width: 236rpx;
				height: 90rpx;
				font-size: 32rpx;
			}
		}

		&-select-show {
			width: 500rpx;
			margin: 0 auto;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			&-goods {
				display: flex;
				margin-left: 20rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}

			&-comment {
				display: flex;
				margin-left: 20rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}

			.selectactive {
				background-color: #01AEEA;
				color: #fff;
			}

		}

		&-container {
			padding: 0 20rpx;
			margin-bottom: 40rpx;

			&-params {
				&-image {
					width: 280rpx;
					margin: 20rpx auto;
				}

				&-content {
					padding: 0 10rpx;

					&-left {
						min-width: 5em;
					}
				}
			}
		}

		.comment {
			padding-bottom: 50rpx;

			&-item {
				margin-left: 20rpx;
				margin-bottom: 20rpx;

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

					&-userImg {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				&-conter {}
			}

		}

		&-other {
			&-image {
				width: 560rpx;
				margin: 0 auto;
			}

			&-item {
				padding: 0 20rpx;
			}
		}

		&-doctor {
			right: -2%;
			width: 200rpx;
			top: 70%;
			transform: translateY(-50%);
		}
	}

	.goods-info-doctor {
		z-index: 1000;
	}

	.wechatBtn {
		background: transparent;
		border: 0;
		padding: 0;

		&::after {
			background: transparent;
			border: 0;
		}
	}

	//  分享弹出框
	.shareBox {
		width: 100%;
		height: 100%;
		justify-content: space-around;
	}

	.imgwH {
		width: 94rpx;
		height: 94rpx;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: #fff;
		margin: 0;
	}

	.return_text {
		width: fit-content;
		// border: 1px solid #01AEEA;
		// background-color: #fff;
		// color: #01AEEA;
		color: #000;
		font-weight: bold;
		border-radius: 6rpx;
		font-size: 30rpx;
		// padding: 6rpx 12rpx;
		padding-left: 40rpx;
		margin-bottom: 10rpx;
	}

	.return_text_1 {
		color: #fff;
	}

	// 自定义提示
	.showToastStyle {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;

		.showToastText {
			border-radius: 20rpx;
			padding: 20rpx 40rpx;
			background-color: rgba(0, 0, 0, 0.3);
		}
	}

	// 返回首页
	.showToBack {
		position: fixed;
		top: 45%;
		left: 0;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background-color: #01AEEA;
		color: #fff;
		font-size: 36rpx;
	}
	
</style>