You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1342 lines
44 KiB
1342 lines
44 KiB
<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 + '元消费金' }} {{ 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 + '元消费金' }} {{ 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 + '元消费金' }} {{ 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 + '元消费金' }} {{ 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+'元消费金'}} {{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+'元消费金'}} {{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+'元消费金'}} {{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+'元消费金'}} {{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+'元消费金'}} {{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+'元消费金'}} {{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 + '元消费金' }} {{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor2"
|
|
v-if="userInfo.level == 2 && goodsDetail.threeMomey !== 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }} {{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor3"
|
|
v-if="userInfo.level == 3 && goodsDetail.twoMomey !== 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }} {{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor4"
|
|
v-if="userInfo.level == 4 && goodsDetail.fourMomey !== 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }} {{ 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 + '元消费金' }} {{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor2"
|
|
v-if="userInfo.level == 2 && goodsDetail.threeMomey == 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }} {{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor3"
|
|
v-if="userInfo.level == 3 && goodsDetail.twoMomey == 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }} {{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor4"
|
|
v-if="userInfo.level == 4 && goodsDetail.fourMomey == 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }} {{ 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 + '元消费金' }} {{ goodsDetail.oneInteger == 0 ? '' : goodsDetail.oneInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor2"
|
|
v-if="goodsDetail.twoMomey !== 0 || goodsDetail.twoInteger !== 0 ">银卡再返：{{ goodsDetail.twoMomey == 0 ? '' : goodsDetail.twoMomey + '元消费金' }} {{ goodsDetail.twoInteger == 0 ? '' : goodsDetail.twoInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor3"
|
|
v-if="goodsDetail.threeMomey !== 0 || goodsDetail.threeInteger !== 0 ">金卡再返：{{ goodsDetail.threeMomey == 0 ? '' : goodsDetail.threeMomey + '元消费金' }} {{ goodsDetail.threeInteger == 0 ? '' : goodsDetail.threeInteger + '元兑购金' }}</text>
|
|
<text class="bg_style bgcolor4"
|
|
v-if="goodsDetail.fourMomey !== 0 || goodsDetail.fourInteger !== 0 ">钻石卡再返：{{ goodsDetail.fourMomey == 0 ? '' : goodsDetail.fourMomey + '元消费金' }} {{ 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+'元消费金'}} {{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>
|