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.
1798 lines
44 KiB
1798 lines
44 KiB
<template>
|
|
<view class="pages-product">
|
|
<block v-if="isload">
|
|
<block v-if="sysset.showgzts">
|
|
<view style="width:100%;height:88rpx"> </view>
|
|
<view class="follow_topbar">
|
|
<view class="headimg">
|
|
<image :src="sysset.logo" />
|
|
</view>
|
|
<view class="info">
|
|
<view class="i">欢迎进入 <text :style="{color:t('color1')}">{{sysset.name}}</text></view>
|
|
<view class="i">关注公众号享更多专属服务</view>
|
|
</view>
|
|
<view class="sub" @tap="showsubqrcode" :style="{'background-color':t('color1')}">立即关注</view>
|
|
</view>
|
|
<uni-popup id="qrcodeDialog" ref="qrcodeDialog" type="dialog">
|
|
<view class="qrcodebox">
|
|
<image :src="sysset.qrcode" @tap="previewImage" :data-url="sysset.qrcode" class="img" />
|
|
<view class="txt">长按识别二维码关注</view>
|
|
<view class="close" @tap="closesubqrcode">
|
|
<image :src="event_rul +'/static/img/static/img/close2.png'" style="width:100%;height:100%" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</block>
|
|
<view
|
|
v-if="bboglist.length>0"
|
|
style="position:fixed;top:5vh;left:20rpx;z-index:9;background:rgba(153,153,153,0.8);border-radius:20rpx;color:#fff;padding:0 10rpx">
|
|
<swiper style="position:relative;height:54rpx;width:350rpx;" :autoplay="true" :interval="5000"
|
|
:vertical="true">
|
|
<swiper-item v-for="(item, index) in bboglist" :key="index" @tap="goto"
|
|
:data-url="'/pages/shop/product?id=' + item.proid" class="flex-y-center">
|
|
<image :src="item.headimg"
|
|
style="width:40rpx;height:40rpx;border:1px solid rgba(255,255,255,0.7);border-radius:50%;margin-right:4px" />
|
|
<view
|
|
style="width:300rpx;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;font-size:22rpx">
|
|
{{item.nickname}} {{item.showtime}}购买了该商品</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="swiper-container" v-if="isplay==0">
|
|
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" @change="swiperChange">
|
|
<block v-for="(item, index) in product.pics" :key="index">
|
|
<swiper-item class="swiper-item">
|
|
<view class="swiper-item-view">
|
|
<image class="img" @click="preImg(product.pics,index)" :src="item" mode="widthFix" />
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<view class="imageCount">{{current+1}}/{{(product.pics).length}}</view>
|
|
<view v-if="product.video" class="provideo" @tap="payvideo">
|
|
<image :src="event_rul +'/static/img/static/img/video.png'" />
|
|
<view class="txt">{{product.video_duration}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="videobox" v-if="isplay==1">
|
|
<video autoplay="true" class="video" id="video" :src="product.video"></video>
|
|
<view class="parsevideo" @tap="parsevideo">退出播放</view>
|
|
</view>
|
|
<view class="product-detail__con">
|
|
<view class="product-detail__info">
|
|
<view class="info-hd flex al-item-center j-between">
|
|
<view class="price flex al-item-center">
|
|
<view class="current" :class="{'small-current': product.max_price!=product.min_price}">
|
|
<text class="symbol">￥</text>{{product.min_price}}<text
|
|
v-if="product.max_price!=product.min_price">-{{product.max_price}}</text>
|
|
</view>
|
|
<view class="original" v-if="product.market_price*1 > product.sell_price*1">
|
|
￥{{product.market_price}}<text v-if="product.max_price!=product.min_price">起</text>
|
|
</view>
|
|
<view class="txt" v-if="shopset.hide_sales != 1">
|
|
销量：{{product.sales}}
|
|
</view>
|
|
<view class="txt" v-if="shopset.hide_sales != 1">
|
|
库存：{{product.stock}}
|
|
</view>
|
|
</view>
|
|
<view class="info-hd__btn flex al-item-center j-between" @tap="showcuxiaodetail" v-if="couponlist.length>0">
|
|
<view class="btn-txt">领券</view>
|
|
<view class="icon-box flex al-item-center j-center">
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-bd">{{product.name}}</view>
|
|
<view class="info-ft flex">
|
|
<!-- <view class="playback">
|
|
<text class="iconfont icon-shipin"></text>
|
|
<text class="playback-txt">点击直播回放</text>
|
|
</view> -->
|
|
<view class="share" @tap="shareClick">
|
|
<text class="iconfont icon-fenxiang"></text>
|
|
<text class="share-txt">分享</text>
|
|
</view>
|
|
</view>
|
|
<view class="sellpoint" v-if="product.sellpoint">{{product.sellpoint}}</view>
|
|
<view class="commission" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}"
|
|
v-if="shopset.showcommission==1 && product.commission > 0">分享好友购买预计可得{{t('佣金')}}：<text
|
|
style="font-weight:bold;padding:0 2px">{{product.commission}}</text>{{product.commission_desc}}
|
|
</view>
|
|
<view style="margin:20rpx 0;color:#333;font-size:22rpx" v-if="product.balance_price > 0">
|
|
首付款金额：{{product.advance_price}}元，尾款金额：{{product.balance_price}}元</view>
|
|
<view style="margin:20rpx 0;color:#666;font-size:22rpx" v-if="product.buyselect_commission > 0">
|
|
下单被选奖励预计可得{{t('佣金')}}：<text
|
|
style="font-weight:bold;padding:0 2px">{{product.buyselect_commission}}</text>元</view>
|
|
|
|
<view class="upsavemoney"
|
|
:style="{background:'linear-gradient(90deg, rgb(255, 180, 153) 0%, #ffcaa8 100%)',color:'#653a2b'}"
|
|
v-if="product.upsavemoney > 0">
|
|
<view class="flex1">升级到 {{product.nextlevelname}} 预计可节省<text
|
|
style="font-weight:bold;padding:0 2px;color:#ca4312">{{product.upsavemoney}}</text>元
|
|
</view>
|
|
<view style="margin-left:20rpx;font-weight:bold;display:flex;align-items:center;color:#ca4312"
|
|
@tap="goto" data-url="/pages/my/levelup">立即升级
|
|
<!-- <image :src="event_rul +'/static/img/static/img/arrowright2.png'" style="width:30rpx;height:30rpx"/> -->
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose" @tap="buydialogChange" data-btntype="2">
|
|
<view class="f0">规格</view>
|
|
<view class="f1 flex1">请选择商品规格及数量</view>
|
|
</view>
|
|
|
|
<view class="cuxiaodiv" v-if="product.givescore > 0">
|
|
<view class="cuxiaopoint">
|
|
<view class="f0">送{{t('积分')}}</view>
|
|
<view class="f1" style="font-size:26rpx">购买可得{{t('积分')}}{{product.givescore}}个</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cuxiaodiv"
|
|
v-if="cuxiaolist.length>0 || couponlist.length>0 || fuwulist.length>0 || product.discount_tips!=''">
|
|
<view class="fuwupoint cuxiaoitem" v-if="fuwulist.length>0">
|
|
<view class="f0">服务</view>
|
|
<view class="f1" @tap="showfuwudetail">
|
|
<view class="t" v-for="(item, index) in fuwulist" :key="index">{{item.name}}</view>
|
|
</view>
|
|
<view class="f2" @tap="showfuwudetail">
|
|
<!-- <image :src="event_rul +'/static/img/static/img/arrow-point.png'" mode="widthFix"/> -->
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="cuxiaopoint cuxiaoitem" v-if="cuxiaolist.length>0">
|
|
<view class="f0">促销</view>
|
|
<view class="f1" @tap="showcuxiaodetail">
|
|
<view v-for="(item, index) in cuxiaolist" :key="index" class="t"
|
|
:style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}"><text
|
|
class="t0">{{item.tip}}</text><text class="t1">{{item.name}}</text></view>
|
|
</view>
|
|
<view class="f2" @tap="showcuxiaodetail">
|
|
<!-- <image :src="event_rul +'/static/img/static/img/arrow-point.png'" mode="widthFix"/> -->
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="cuxiaopoint cuxiaoitem" v-if="product.discount_tips!=''">
|
|
<view class="f0">折扣</view>
|
|
<view class="f1" style="padding-left:10rpx">{{product.discount_tips}}</view>
|
|
<view class="f2" @tap="goto" data-url="/pages/my/levelinfo">
|
|
<!-- <image :src="event_rul +'/static/img/static/img/arrow-point.png'" mode="widthFix"/> -->
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showfuwudialog" class="popup__container">
|
|
<view class="popup__overlay" @tap.stop="hidefuwudetail"></view>
|
|
<view class="popup__modal">
|
|
<view class="popup__title">
|
|
<text class="popup__title-text">服务</text>
|
|
<image :src="event_rul +'/static/img/static/img/close.png'" class="popup__close" style="width:36rpx;height:36rpx"
|
|
@tap.stop="hidefuwudetail" />
|
|
</view>
|
|
<view class="popup__content">
|
|
<view v-for="(item, index) in fuwulist" :key="index" class="service-item">
|
|
<view class="fuwudialog-content">
|
|
<view class="f1">{{item.name}}</view>
|
|
<text class="f2">{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showcuxiaodialog" class="popup__container">
|
|
<view class="popup__overlay" @tap.stop="hidecuxiaodetail"></view>
|
|
<view class="popup__modal">
|
|
<view class="popup__title">
|
|
<text class="popup__title-text">优惠促销</text>
|
|
<image :src="event_rul +'/static/img/static/img/close.png'" class="popup__close" style="width:36rpx;height:36rpx"
|
|
@tap.stop="hidecuxiaodetail" />
|
|
</view>
|
|
<view class="popup__content">
|
|
<view v-for="(item, index) in cuxiaolist" :key="index" class="service-item">
|
|
<view class="suffix">
|
|
<view class="type-name"><text
|
|
style="border-radius:4px;border:1px solid #f05423;color: #ff550f;font-size:20rpx;padding:2px 5px">{{item.tip}}</text>
|
|
<text style="color:#333;margin-left:20rpx">{{item.name}}</text></view>
|
|
</view>
|
|
</view>
|
|
<couponlist :couponlist="couponlist" @getcoupon="getcoupon"></couponlist>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="commentbox" v-if="shopset.comment==1 && commentcount > 0">
|
|
<view class="commentbox-hd flex al-item-center j-between">
|
|
<view class="commentbox-hd__title">用户评价({{commentcount}})
|
|
</view>
|
|
<view class="commentbox-hd__more flex al-item-center" @tap="goto"
|
|
:data-url="'commentlist?proid=' + product.id">查看全部
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="commentbox-bd">
|
|
<view class="commentbox-bd__item" v-if="commentlist.length>0">
|
|
<view class="item-hd flex al-item-center j-between">
|
|
<view class="item-hd__userInfo flex al-item-center">
|
|
<image class="item-hd__userInfo-img" :src="commentlist[0].headimg" />
|
|
<view class="item-hd__userInfo-bd">
|
|
<view>
|
|
<view class="item-hd__userInfo-name">{{commentlist[0].nickname}}</view>
|
|
</view>
|
|
<view class="item-hd__userInfo-time">
|
|
{{commentlist[0].createtime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-hd__userInfo-ft">
|
|
<image class="grade-star" v-for="(item2,index2) in [0,1,2,3,4]" :key="index2"
|
|
:src="event_rul +'/static/img/static/img/star' + (commentlist[0].score>item2?'2':'') + '.png'" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-bd">
|
|
<text class="item-bd__txt">{{commentlist[0].content}}</text>
|
|
<view class="item-bd__imgs">
|
|
<block v-if="commentlist[0].content_pic!=''">
|
|
<block v-for="(itemp, index) in commentlist[0].content_pic" :key="index">
|
|
<view @tap="previewImage" :data-url="itemp"
|
|
:data-urls="commentlist[0].content_pic">
|
|
<image :src="itemp"/>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="f3" @tap="goto" :data-url="'commentlist?proid=' + product.id">查看全部评价</view> -->
|
|
</view>
|
|
<view v-else class="nocomment">暂无评价~</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail_title">
|
|
<image class="icon2" :src="event_rul +'/static/images/title-decorate.svg'" mode=""></image>
|
|
<view class="t0">商品描述</view>
|
|
<image class="icon2" :src="event_rul +'/static/images/title-decorate.svg'" mode=""></image>
|
|
</view>
|
|
<view class="detail">
|
|
<dp :pagecontent="pagecontent"></dp>
|
|
</view>
|
|
|
|
<!-- <view class="detail_title"><view class="t1"></view><view class="t2"></view><view class="t0">猜你喜欢</view><view class="t2"></view><view class="t1"></view></view> -->
|
|
<view class="detail_title">
|
|
<image class="icon2" :src="event_rul +'/static/images/title-decorate.svg'" mode=""></image>
|
|
<view class="t0">猜你喜欢</view>
|
|
<image class="icon2" :src="event_rul +'/static/images/title-decorate.svg'" mode=""></image>
|
|
</view>
|
|
<!-- <dp-product-itemlist :data="loveList" :menuindex="-1"></dp-product-itemlist> -->
|
|
<dp-product-item :data="loveList" :menuindex="-1"></dp-product-item>
|
|
<view class="bottombar flex-row" :class="menuindex>-1?'tabbarbot':''"
|
|
v-if="product.status==1">
|
|
<view class="f1">
|
|
<view class="item" @tap="goto" :data-url="product.bid== 0 ? '/pages/index/index':'/pagesA/shop/index?id=' + product.bid">
|
|
<!-- <image class="img" :src="event_rul +'/static/img/static/img/kefu.png'" /> -->
|
|
<text class="iconfont" :class="product.bid == 0 ? 'icon-shouye1' : 'icon-dianpu1'" style="font-size: 40rpx; margin-bottom: 3rpx;"></text>
|
|
<view class="t1">{{product.bid == 0 ? '首页' : '店铺'}}</view>
|
|
</view>
|
|
<!-- <button class="item" v-else open-type="contact">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/kefu.png'" />
|
|
<view class="t1">客服</view>
|
|
</button> -->
|
|
<!-- <view class="item flex1" @tap="goto" data-url="/pages/shop/cart">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/gwc.png'"/>
|
|
<view class="t1">购物车</view>
|
|
<view class="cartnum" v-if="cartnum>0" :style="{background:'rgba('+t('color1rgb')+',0.8)'}">{{cartnum}}</view>
|
|
</view> -->
|
|
<view class="item" @tap="addfavorite">
|
|
<!-- <image class="img" :src="event_rul +'/static/img/static/img/shoucang.png'" />
|
|
-->
|
|
<text class="iconfont icon-shoucang" v-if="!isfavorite" style="font-size: 40rpx; margin-bottom: 3rpx;"></text>
|
|
<text class="iconfont icon-Collection" v-else style="color:#0A5D3B; font-size: 40rpx; margin-bottom: 3rpx;"></text>
|
|
<view class="t1">{{isfavorite?'已收藏':'收藏'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="op">
|
|
<view class="tocart flex-x-center flex-y-center"
|
|
@tap="buydialogChange" data-btntype="1"
|
|
v-if="product.freighttype!=3 && product.freighttype!=4">加入购物车</view>
|
|
<view class="tobuy flex-x-center flex-y-center"
|
|
@tap="buydialogChange" data-btntype="2">立即购买</view>
|
|
</view>
|
|
</view>
|
|
<buydialog v-if="buydialogShow" :proid="product.id" :btntype="btntype"
|
|
@buydialogChange="buydialogChange" :menuindex="menuindex" @addcart="addcart" @cartPuch="cartPuch" :showtaos="1"></buydialog>
|
|
<cart-full v-if="showPurchase" @closePur="closePur" :purchaseDetail="purchaseDetail" :goodscart="goodscart"></cart-full>
|
|
<scrolltop :isshow="scrolltopshow"></scrolltop>
|
|
|
|
<view v-if="sharetypevisible" class="popup__container">
|
|
<view class="popup__overlay" @tap.stop="handleClickMask"></view>
|
|
<view class="popup__modal" style="height:320rpx;min-height:320rpx">
|
|
<!-- <view class="popup__title">
|
|
<text class="popup__title-text">请选择分享方式</text>
|
|
<image :src="event_rul +'/static/img/static/img/close.png'" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="hidePstimeDialog"/>
|
|
</view> -->
|
|
<view class="popup__content">
|
|
<view class="sharetypecontent">
|
|
<view class="f1" @tap="shareapp" v-if="getplatform() == 'app'">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
|
|
<text class="t1">分享给好友</text>
|
|
</view>
|
|
<view class="f1" @tap="sharemp" v-else-if="getplatform() == 'mp'">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
|
|
<text class="t1">分享给好友</text>
|
|
</view>
|
|
<view class="f1" @tap="sharemp" v-else-if="getplatform() == 'h5'">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
|
|
<text class="t1">分享给好友</text>
|
|
</view>
|
|
<button class="f1" open-type="share" v-else>
|
|
<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
|
|
<text class="t1">分享给好友</text>
|
|
</button>
|
|
<view class="f2" @tap="showPoster">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/sharepic.png'" />
|
|
<text class="t1">生成分享图片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="posterDialog" v-if="showposter">
|
|
<view class="main">
|
|
<view class="close" @tap="posterDialogClose">
|
|
<image class="img" :src="event_rul +'/static/img/static/img/close.png'" />
|
|
</view>
|
|
<view class="content">
|
|
<image class="img" :src="posterpic" mode="widthFix" @tap="previewImage"
|
|
:data-url="posterpic"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- new add -->
|
|
<view class="right_car" @tap="goto" data-url="/pages/shop/cart">
|
|
<text class="iconfont icon-gouwuche1" style="font-size: 42rpx; font-weight: bold; color: #0A5D3B;"></text>
|
|
</view>
|
|
|
|
</block>
|
|
<loading v-if="loading"></loading>
|
|
<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
|
|
<view class="hitn-n position-f" v-show="hintShow">
|
|
<view class="hint-bx position-a">
|
|
<image class="hint-img" :src="event_rul + '/static/images/hint-n.png'" mode="widthFix"></image>
|
|
<view class="content position-a flex flex-colum al-item-center">
|
|
<text class="title font-w">温馨提示</text>
|
|
<text class="text">该商品已下架！</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
var interval = null;
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loveList: [],
|
|
opt: {},
|
|
loading: false,
|
|
isload: false,
|
|
menuindex: -1,
|
|
textset: {},
|
|
isload: false,
|
|
buydialogShow: false,
|
|
btntype: 1,
|
|
isfavorite: false,
|
|
current: 0,
|
|
isplay: 0,
|
|
showcuxiaodialog: false,
|
|
showfuwudialog: false,
|
|
business: "",
|
|
product: [],
|
|
cartnum: "",
|
|
commentlist: "",
|
|
commentcount: "",
|
|
cuxiaolist: "",
|
|
couponlist: "",
|
|
fuwulist: [],
|
|
pagecontent: "",
|
|
shopset: {},
|
|
sysset: {},
|
|
title: "",
|
|
bboglist: "",
|
|
sharepic: "",
|
|
sharetypevisible: false,
|
|
showposter: false,
|
|
posterpic: "",
|
|
scrolltopshow: false,
|
|
kfurl: '',
|
|
showPurchase: false,
|
|
purchaseDetail: {},
|
|
goodscart: {},
|
|
|
|
event_rul: app.globalData.event_url,
|
|
|
|
hintShow:false,
|
|
hintTime: null,
|
|
};
|
|
},
|
|
onLoad: function(opt) {
|
|
this.opt = app.getopts(opt);
|
|
this.getdata();
|
|
},
|
|
onPullDownRefresh: function() {
|
|
this.getdata();
|
|
},
|
|
onShareAppMessage: function() {
|
|
return this._sharewx({
|
|
title: this.product.sharetitle || this.product.name,
|
|
pic: this.product.sharepic || this.product.pic
|
|
});
|
|
},
|
|
onShareTimeline: function() {
|
|
var sharewxdata = this._sharewx({
|
|
title: this.product.sharetitle || this.product.name,
|
|
pic: this.product.sharepic || this.product.pic
|
|
});
|
|
var query = (sharewxdata.path).split('?')[1];
|
|
console.log(sharewxdata)
|
|
console.log(query)
|
|
return {
|
|
title: sharewxdata.title,
|
|
imageUrl: sharewxdata.imageUrl,
|
|
query: query
|
|
}
|
|
},
|
|
onUnload: function() {
|
|
clearInterval(interval);
|
|
clearTimeout(this.hintTime)
|
|
},
|
|
|
|
methods: {
|
|
|
|
cartPuch(e) {
|
|
this.purchaseDetail = e
|
|
this.showPurchase = true
|
|
|
|
},
|
|
// 关闭购物车满弹框
|
|
closePur(e) {
|
|
this.showPurchase = e
|
|
},
|
|
preImg(arr,index){
|
|
console.log(arr,'weism')
|
|
uni.previewImage({urls:arr,current:index})
|
|
},
|
|
|
|
getdata: function() {
|
|
var that = this;
|
|
var id = this.opt.id || 0;
|
|
that.loading = true;
|
|
app.get('ApiShop/product', {
|
|
id: id
|
|
}, function(res) {
|
|
that.loading = false;
|
|
|
|
if (res.status == 0) {
|
|
// app.alert(res.msg);
|
|
that.hintShow = true
|
|
that.hintTime = setTimeout(() => {
|
|
that.hintShow = false
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
return;
|
|
}
|
|
that.loveList = res.loveList;
|
|
that.textset = app.globalData.textset;
|
|
var product = res.product;
|
|
var pagecontent = JSON.parse(product.detail);
|
|
that.business = res.business;
|
|
that.product = product;
|
|
that.cartnum = res.cartnum;
|
|
that.commentlist = res.commentlist;
|
|
that.commentcount = res.commentcount;
|
|
that.cuxiaolist = res.cuxiaolist;
|
|
that.couponlist = res.couponlist;
|
|
that.fuwulist = res.fuwulist;
|
|
that.pagecontent = pagecontent;
|
|
that.shopset = res.shopset;
|
|
that.sysset = res.sysset;
|
|
that.title = product.name;
|
|
that.isfavorite = res.isfavorite;
|
|
that.bboglist = res.bboglist;
|
|
that.sharepic = product.pics[0];
|
|
uni.setNavigationBarTitle({
|
|
title: product.name
|
|
});
|
|
|
|
that.kfurl = '/pages/kefu/index?bid=' + product.bid;
|
|
if (app.globalData.initdata.kfurl != '') {
|
|
that.kfurl = app.globalData.initdata.kfurl;
|
|
}
|
|
that.loaded({
|
|
title: product.sharetitle || product.name,
|
|
pic: product.sharepic || product.pic,
|
|
desc: product.sharedesc || product.sellpoint
|
|
});
|
|
});
|
|
},
|
|
swiperChange: function(e) {
|
|
var that = this;
|
|
that.current = e.detail.current
|
|
},
|
|
payvideo: function() {
|
|
this.isplay = 1;
|
|
uni.createVideoContext('video').play();
|
|
},
|
|
parsevideo: function() {
|
|
this.isplay = 0;
|
|
uni.createVideoContext('video').stop();
|
|
},
|
|
buydialogChange: function(e) {
|
|
if (!this.buydialogShow) {
|
|
this.btntype = e.currentTarget.dataset.btntype
|
|
}
|
|
this.buydialogShow = !this.buydialogShow;
|
|
},
|
|
//收藏操作
|
|
addfavorite: function() {
|
|
var that = this;
|
|
var proid = that.product.id;
|
|
app.post('ApiShop/addfavorite', {
|
|
proid: proid,
|
|
type: 'shop'
|
|
}, function(data) {
|
|
if (data.status == 1) {
|
|
that.isfavorite = !that.isfavorite;
|
|
}
|
|
app.success(data.msg);
|
|
});
|
|
},
|
|
shareClick: function() {
|
|
this.sharetypevisible = true;
|
|
},
|
|
handleClickMask: function() {
|
|
this.sharetypevisible = false
|
|
},
|
|
showPoster: function() {
|
|
var that = this;
|
|
that.showposter = true;
|
|
that.sharetypevisible = false;
|
|
app.showLoading('生成海报中');
|
|
app.post('ApiShop/getposter', {
|
|
proid: that.product.id
|
|
}, function(data) {
|
|
app.showLoading(false);
|
|
if (data.status == 0) {
|
|
app.alert(data.msg);
|
|
} else {
|
|
that.posterpic = data.poster;
|
|
}
|
|
});
|
|
},
|
|
posterDialogClose: function() {
|
|
this.showposter = false;
|
|
},
|
|
showfuwudetail: function() {
|
|
this.showfuwudialog = true;
|
|
},
|
|
hidefuwudetail: function() {
|
|
this.showfuwudialog = false
|
|
},
|
|
showcuxiaodetail: function() {
|
|
this.showcuxiaodialog = true;
|
|
},
|
|
hidecuxiaodetail: function() {
|
|
this.showcuxiaodialog = false
|
|
},
|
|
getcoupon: function() {
|
|
this.showcuxiaodialog = false;
|
|
this.getdata();
|
|
},
|
|
onPageScroll: function(e) {
|
|
var that = this;
|
|
var scrollY = e.scrollTop;
|
|
if (scrollY > 200) {
|
|
that.scrolltopshow = true;
|
|
}
|
|
if (scrollY < 150) {
|
|
that.scrolltopshow = false
|
|
}
|
|
},
|
|
sharemp: function() {
|
|
app.error('点击右上角发送给好友或分享到朋友圈');
|
|
this.sharetypevisible = false
|
|
},
|
|
shareapp: function() {
|
|
var that = this;
|
|
that.sharetypevisible = false;
|
|
uni.showActionSheet({
|
|
itemList: ['发送给微信好友', '分享到微信朋友圈'],
|
|
success: function(res) {
|
|
if (res.tapIndex >= 0) {
|
|
var scene = 'WXSceneSession';
|
|
if (res.tapIndex == 1) {
|
|
scene = 'WXSenceTimeline';
|
|
}
|
|
var sharedata = {};
|
|
sharedata.provider = 'weixin';
|
|
sharedata.type = 0;
|
|
sharedata.scene = scene;
|
|
sharedata.title = that.product.sharetitle || that.product.name;
|
|
sharedata.summary = that.product.sharedesc || that.product.sellpoint;
|
|
sharedata.href = app.globalData.pre_url + '/h5/' + app.globalData.aid +
|
|
'.html#/pages/shop/product?scene=id_' + that.product.id + '-pid_' + app
|
|
.globalData.mid;
|
|
sharedata.imageUrl = that.product.pic;
|
|
var sharelist = app.globalData.initdata.sharelist;
|
|
if (sharelist) {
|
|
for (var i = 0; i < sharelist.length; i++) {
|
|
if (sharelist[i]['indexurl'] == '/pages/shop/product') {
|
|
sharedata.title = sharelist[i].title;
|
|
sharedata.summary = sharelist[i].desc;
|
|
sharedata.imageUrl = sharelist[i].pic;
|
|
if (sharelist[i].url) {
|
|
var sharelink = sharelist[i].url;
|
|
if (sharelink.indexOf('/') === 0) {
|
|
sharelink = app.globalData.pre_url + '/h5/' + app
|
|
.globalData.aid + '.html#' + sharelink;
|
|
}
|
|
if (app.globalData.mid > 0) {
|
|
sharelink += (sharelink.indexOf('?') === -1 ? '?' : '&') +
|
|
'pid=' + app.globalData.mid;
|
|
}
|
|
sharedata.href = sharelink;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
uni.share(sharedata);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showsubqrcode: function() {
|
|
this.$refs.qrcodeDialog.open();
|
|
},
|
|
closesubqrcode: function() {
|
|
this.$refs.qrcodeDialog.close();
|
|
},
|
|
addcart: function(e) {
|
|
console.log(e)
|
|
this.cartnum = this.cartnum + e.num;
|
|
this.goodscart = e
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.pages-product {
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
background: #F5F5F5;
|
|
padding-bottom: calc(124rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(124rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.icon2 {
|
|
height: 26rpx;
|
|
width: 50rpx;
|
|
}
|
|
|
|
.info_live {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
color: #999;
|
|
|
|
.left {
|
|
display: flex;
|
|
|
|
.icon {
|
|
padding: 0 10rpx;
|
|
border-radius: 6rpx;
|
|
color: #fff;
|
|
background-color: #f3bf72;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
|
|
.iconfont {
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_car {
|
|
position: fixed;
|
|
padding: 15rpx;
|
|
top: 4vh;
|
|
right: 30rpx;
|
|
width: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2;
|
|
background-color: #e2f7ef;
|
|
height: 80rpx;
|
|
border-radius: 80rpx;
|
|
box-shadow: 0 0 10rpx 0 #ccc;
|
|
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.follow_topbar {
|
|
height: 88rpx;
|
|
width: 100%;
|
|
max-width: 640px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 13;
|
|
}
|
|
|
|
.follow_topbar .headimg {
|
|
height: 64rpx;
|
|
width: 64rpx;
|
|
margin: 6px;
|
|
float: left;
|
|
}
|
|
|
|
.follow_topbar .headimg image {
|
|
height: 64rpx;
|
|
width: 64rpx;
|
|
}
|
|
|
|
.follow_topbar .info {
|
|
height: 56rpx;
|
|
padding: 16rpx 0;
|
|
}
|
|
|
|
.follow_topbar .info .i {
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #ccc;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.follow_topbar .info {
|
|
height: 80rpx;
|
|
float: left;
|
|
}
|
|
|
|
.follow_topbar .sub {
|
|
height: 48rpx;
|
|
width: auto;
|
|
background: #FC4343;
|
|
padding: 0 20rpx;
|
|
margin: 20rpx 16rpx 20rpx 0;
|
|
float: right;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
line-height: 52rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.qrcodebox {
|
|
background: #fff;
|
|
padding: 50rpx;
|
|
position: relative;
|
|
border-radius: 20rpx
|
|
}
|
|
|
|
.qrcodebox .img {
|
|
width: 400rpx;
|
|
height: 400rpx
|
|
}
|
|
|
|
.qrcodebox .txt {
|
|
color: #666;
|
|
margin-top: 20rpx;
|
|
font-size: 26rpx;
|
|
text-align: center
|
|
}
|
|
|
|
.qrcodebox .close {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
bottom: -100rpx;
|
|
left: 50%;
|
|
margin-left: -25rpx;
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
padding: 8rpx
|
|
}
|
|
|
|
.swiper-container {
|
|
position: relative;
|
|
height: 750rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-item-view {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
}
|
|
|
|
.swiper .img {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.imageCount {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 40rpx;
|
|
line-height: 50rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
position: absolute;
|
|
right: 13px;
|
|
bottom: 20rpx;
|
|
}
|
|
|
|
.provideo {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
width: 160rpx;
|
|
height: 54rpx;
|
|
padding: 0 20rpx 0 4rpx;
|
|
border-radius: 27rpx;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 50%;
|
|
margin-left: -80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.provideo image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.provideo .txt {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding-left: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #333
|
|
}
|
|
|
|
.videobox {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
text-align: center;
|
|
background: #000
|
|
}
|
|
|
|
.videobox .video {
|
|
width: 100%;
|
|
height: 650rpx;
|
|
}
|
|
|
|
.videobox .parsevideo {
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
color: #333;
|
|
background: #ccc;
|
|
width: 140rpx;
|
|
border-radius: 25rpx;
|
|
font-size: 24rpx
|
|
}
|
|
.product-detail__con {
|
|
padding: 24rpx;
|
|
.product-detail__info {
|
|
padding: 14rpx 24rpx 24rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
}
|
|
.current {
|
|
font-size: 56rpx;
|
|
color: #ED5925;
|
|
line-height: 80rpx;
|
|
padding-right: 20rpx;
|
|
&.small-current {
|
|
font-size: 40rpx;
|
|
}
|
|
.symbol {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.original {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
margin-right: 20rpx;
|
|
}
|
|
.txt {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
&:not(:last-child) {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.info-hd{
|
|
&__btn {
|
|
width: 104rpx;
|
|
height: 42rpx;
|
|
border-radius: 42rpx;
|
|
background: linear-gradient(to right, #00AE68 0%, #096742 100%);
|
|
padding: 0 8rpx 0 16rpx;
|
|
}
|
|
}
|
|
.btn-txt {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 34rpx;
|
|
}
|
|
.icon-box {
|
|
width: 22rpx;
|
|
height: 26rpx;
|
|
border-radius: 50%;
|
|
background: #FFFFFF;
|
|
}
|
|
.icon-arrow-right {
|
|
font-size: 20rpx;
|
|
}
|
|
.info-bd {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
line-height: 44rpx;
|
|
font-weight: bold;
|
|
}
|
|
.info-ft {
|
|
justify-content: flex-end;
|
|
margin-top: 46rpx;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 36rpx;
|
|
.iconfont {
|
|
font-size: 30rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
.share {
|
|
margin-left: 54rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-detail__info .sellpoint {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.product-detail__info .sales_stock {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
margin-top: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #777777
|
|
}
|
|
|
|
.product-detail__info .commission {
|
|
display: inline-block;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 20rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
padding: 0 20rpx
|
|
}
|
|
|
|
.product-detail__info .upsavemoney {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 20rpx;
|
|
height: 70rpx;
|
|
padding: 0 20rpx
|
|
}
|
|
|
|
.choose {
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
margin-top: 24rpx;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
padding: 20rpx 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.choose .f0 {
|
|
color: #999999;
|
|
padding-right: 26rpx;
|
|
}
|
|
|
|
.choose .f2 {
|
|
flex: 1;
|
|
}
|
|
|
|
.cuxiaodiv {
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
margin-top: 20rpx;
|
|
padding: 0 3%;
|
|
}
|
|
|
|
.fuwupoint {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
padding: 12rpx 0;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.fuwupoint .f0 {
|
|
color: #555;
|
|
font-weight: bold;
|
|
height: 32rpx;
|
|
font-size: 24rpx;
|
|
padding-right: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.fuwupoint .f1 {
|
|
margin-right: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden
|
|
}
|
|
|
|
.fuwupoint .f1 .t {
|
|
padding: 4rpx 20rpx 4rpx 0;
|
|
color: #777;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.fuwupoint .f1 .t:before {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-top: -4rpx;
|
|
margin-right: 10rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTOU5O+Q5POU5POQ4O+U4PN80P+M4O+Q4O+Q4POQ5POQ4OuQ4O+Q4O+I4PuQ5PJxkAycAAAAPdFJOUwAf+VSoeAvzws7ka7miLboUzckAAADJSURBVBjTY2BgYGCMWVR5VIABDBid/gPBFwjP/JOzQKKtfjGIzf3fEUSJ/N8AJO21Iao3fQbqqA+AcLi/CzCwfGGAAn8HBnlFMIttBoP4R4b4C2BOzk8G3q8M5w3AnPsLGZj/MKwHW8b6/QED4y8G/QQQx14ZSHwCcWYkMOtvAHOAyvqnPf8KcuMvkAGZP9eDjAQaEO/AwDb/D0gj0GiQpRnTQIYIfUR1DopDGexVIZygz8ieC4B6WyzRBOJtBkZ/pAABBZUWOKgAispF5e7ibycAAAAASUVORK5CYII=') no-repeat;
|
|
background-size: 24rpx auto;
|
|
}
|
|
|
|
.fuwupoint .f2 {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.fuwupoint .f2 .img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.fuwudialog-content {
|
|
font-size: 24rpx
|
|
}
|
|
|
|
.fuwudialog-content .f1 {
|
|
color: #333;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-weight: bold
|
|
}
|
|
|
|
.fuwudialog-content .f1:before {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-top: -4rpx;
|
|
margin-right: 10rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTOU5O+Q5POU5POQ4O+U4PN80P+M4O+Q4O+Q4POQ5POQ4OuQ4O+Q4O+I4PuQ5PJxkAycAAAAPdFJOUwAf+VSoeAvzws7ka7miLboUzckAAADJSURBVBjTY2BgYGCMWVR5VIABDBid/gPBFwjP/JOzQKKtfjGIzf3fEUSJ/N8AJO21Iao3fQbqqA+AcLi/CzCwfGGAAn8HBnlFMIttBoP4R4b4C2BOzk8G3q8M5w3AnPsLGZj/MKwHW8b6/QED4y8G/QQQx14ZSHwCcWYkMOtvAHOAyvqnPf8KcuMvkAGZP9eDjAQaEO/AwDb/D0gj0GiQpRnTQIYIfUR1DopDGexVIZygz8ieC4B6WyzRBOJtBkZ/pAABBZUWOKgAispF5e7ibycAAAAASUVORK5CYII=') no-repeat;
|
|
background-size: 24rpx auto;
|
|
}
|
|
|
|
.fuwudialog-content .f2 {
|
|
color: #777
|
|
}
|
|
|
|
.cuxiaopoint {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
padding: 12rpx 0;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.cuxiaopoint .f0 {
|
|
color: #555;
|
|
font-weight: bold;
|
|
height: 32rpx;
|
|
font-size: 24rpx;
|
|
padding-right: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.cuxiaopoint .f1 {
|
|
margin-right: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden
|
|
}
|
|
|
|
.cuxiaopoint .f1 .t {
|
|
margin-left: 10rpx;
|
|
border-radius: 3px;
|
|
font-size: 24rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding-right: 10rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden
|
|
}
|
|
|
|
.cuxiaopoint .f1 .t0 {
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.cuxiaopoint .f1 .t1 {
|
|
padding: 0 4px
|
|
}
|
|
|
|
.cuxiaopoint .f2 {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.cuxiaopoint .f2 .img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.cuxiaodiv .cuxiaoitem {
|
|
border-bottom: 1px solid #E6E6E6;
|
|
}
|
|
|
|
.cuxiaodiv .cuxiaoitem:last-child {
|
|
border-bottom: 0
|
|
}
|
|
|
|
.popup__container {
|
|
border-radius: 20rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
z-index: 10;
|
|
background: #fff
|
|
}
|
|
|
|
.popup__overlay {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 11;
|
|
opacity: 0.3;
|
|
background: #000
|
|
}
|
|
|
|
.popup__modal {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
color: #3d4145;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
opacity: 1;
|
|
padding-bottom: 20rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
z-index: 12;
|
|
min-height: 600rpx;
|
|
max-height: 1000rpx;
|
|
}
|
|
|
|
.popup__title {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
position: relative;
|
|
position: relative
|
|
}
|
|
|
|
.popup__title-text {
|
|
font-size: 32rpx
|
|
}
|
|
|
|
.popup__close {
|
|
position: absolute;
|
|
top: 34rpx;
|
|
right: 34rpx
|
|
}
|
|
|
|
.popup__content {
|
|
width: 100%;
|
|
max-height: 880rpx;
|
|
overflow-y: scroll;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.service-item {
|
|
display: flex;
|
|
padding: 0 40rpx 20rpx 40rpx;
|
|
}
|
|
|
|
.service-item .prefix {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.service-item .suffix {
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.service-item .suffix .type-name {
|
|
font-size: 28rpx;
|
|
color: #49aa34;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
|
|
.shop {
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: #fff;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 3%;
|
|
position: relative;
|
|
min-height: 100rpx;
|
|
}
|
|
|
|
.shop .p1 {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 6rpx;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.shop .p2 {
|
|
padding-left: 10rpx
|
|
}
|
|
|
|
.shop .p2 .t1 {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
color: #111;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.shop .p2 .t2 {
|
|
width: 100%;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
overflow: hidden;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
margin-top: 8rpx
|
|
}
|
|
|
|
.shop .p4 {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
color: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
margin-left: 20rpx;
|
|
flex-shrink: 0;
|
|
padding: 0 30rpx;
|
|
font-size: 24rpx;
|
|
font-weight: bold
|
|
}
|
|
|
|
.detail {
|
|
border-radius: 20rpx;
|
|
min-height: 200rpx;
|
|
}
|
|
|
|
.detail_title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 28rpx 0 24rpx;
|
|
}
|
|
|
|
.detail_title .t0 {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #0A5D3B;
|
|
line-height: 50rpx;
|
|
letter-spacing: 2rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.detail_title .t1 {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: rgba(253, 74, 70, 0.2);
|
|
transform: rotate(45deg);
|
|
margin: 0 4rpx;
|
|
margin-top: 6rpx
|
|
}
|
|
|
|
.detail_title .t2 {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
background: rgba(253, 74, 70, 0.4);
|
|
transform: rotate(45deg);
|
|
margin: 0 4rpx
|
|
}
|
|
|
|
.commentbox {
|
|
border-radius: 12rpx;
|
|
background: #fff;
|
|
padding: 20rpx 24rpx 28rpx;
|
|
margin-top: 24rpx;
|
|
font-weight: 500;
|
|
&-hd {
|
|
&__title {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 50rpx;
|
|
}
|
|
&__more {
|
|
font-size: 24rpx;
|
|
color: #0A5D3B;
|
|
line-height: 34rpx;
|
|
.iconfont {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
&-bd {
|
|
margin-top: 24rpx;
|
|
&__item {
|
|
&:not(:last-child) {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.item-hd {
|
|
&__userInfo {
|
|
flex: 1;
|
|
&-img {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
margin-right: 14rpx;
|
|
}
|
|
&-bd {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
}
|
|
&-name {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
}
|
|
&-time {
|
|
margin-top: 2rpx;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
}
|
|
&-ft {
|
|
.grade-star {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.item-bd {
|
|
margin-top: 16rpx;
|
|
&__txt {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 32rpx;
|
|
}
|
|
&__imgs {
|
|
margin: 24rpx -12rpx 0 0;
|
|
image {
|
|
margin-right: 12rpx;
|
|
width: 164rpx;
|
|
height: 164rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.commentbox .title .f1 {
|
|
flex: 1;
|
|
color: #333;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.commentbox .title .f2 {
|
|
color: #666;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.commentbox .nocomment {
|
|
height: 100rpx;
|
|
line-height: 100rpx
|
|
}
|
|
|
|
.comment {
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 200rpx;
|
|
}
|
|
|
|
.comment .item {
|
|
background-color: #fff;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comment .item .f1 {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.comment .item .f1 .t1 {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.comment .item .f1 .t2 {
|
|
padding-left: 10rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.comment .item .f1 .t3 {
|
|
text-align: right;
|
|
}
|
|
|
|
.comment .item .f1 .t3 .img {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx
|
|
}
|
|
|
|
.comment .item .score {
|
|
font-size: 24rpx;
|
|
color: #f99716;
|
|
}
|
|
|
|
.comment .item .score image {
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
vertical-align: middle;
|
|
margin-bottom: 6rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.comment .item .f2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.comment .item .f2 .t1 {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.comment .item .f2 .t2 {
|
|
display: flex;
|
|
width: 100%
|
|
}
|
|
|
|
.comment .item .f2 .t2 image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 10rpx;
|
|
}
|
|
|
|
.comment .item .f2 .t3 {
|
|
color: #aaa;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.comment .item .f3 {
|
|
margin: 20rpx auto;
|
|
padding: 0 30rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border: 1px solid #E6E6E6;
|
|
border-radius: 30rpx;
|
|
color: #111111;
|
|
font-weight: bold;
|
|
font-size: 26rpx
|
|
}
|
|
|
|
.bottombar {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0;
|
|
padding: 16rpx 24rpx 30rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.bottombar .f1 {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-right: 30rpx
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.bottombar .f1 .item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 80rpx;
|
|
position: relative
|
|
}
|
|
|
|
.bottombar .f1 .item .img {
|
|
width: 44rpx;
|
|
height: 44rpx
|
|
}
|
|
|
|
.bottombar .f1 .item .t1 {
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.bottombar .op {
|
|
width: 520rpx;
|
|
border-radius: 78rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.bottombar .tocart,.bottombar .tobuy {
|
|
flex: 1;
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold
|
|
}
|
|
.bottombar .tocart {
|
|
background: linear-gradient(to right,#e9faf4 0%,#c1f9e5 100%);
|
|
color: #0A5D3B;
|
|
}
|
|
.bottombar .tobuy {
|
|
background: linear-gradient(to right,#00ad68 0%,#096741 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.bottombar .cartnum {
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: -4rpx;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.sharetypecontent {
|
|
border-radius: 20rpx;
|
|
height: 250rpx;
|
|
width: 710rpx;
|
|
margin: 20rpx;
|
|
display: flex;
|
|
padding: 50rpx;
|
|
align-items: flex-end
|
|
}
|
|
|
|
.sharetypecontent .f1 {
|
|
color: #51c332;
|
|
width: 50%;
|
|
height: 150rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
border: 0
|
|
}
|
|
|
|
.sharetypecontent button::after {
|
|
border: 0
|
|
}
|
|
|
|
.sharetypecontent .f1 .img {
|
|
width: 90rpx;
|
|
height: 90rpx
|
|
}
|
|
|
|
.sharetypecontent .f2 {
|
|
color: #51c332;
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center
|
|
}
|
|
|
|
.sharetypecontent .f2 .img {
|
|
width: 90rpx;
|
|
height: 90rpx
|
|
}
|
|
|
|
.sharetypecontent .t1 {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
color: #666
|
|
}
|
|
|
|
.posterDialog {
|
|
border-radius: 20rpx;
|
|
position: fixed;
|
|
z-index: 9;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
top: var(--window-top);
|
|
left: 0
|
|
}
|
|
|
|
.posterDialog .main {
|
|
width: 80%;
|
|
margin: 60rpx 10% 30rpx 10%;
|
|
background: #fff;
|
|
position: relative;
|
|
border-radius: 20rpx
|
|
}
|
|
|
|
.posterDialog .close {
|
|
position: absolute;
|
|
padding: 20rpx;
|
|
top: 0;
|
|
right: 0
|
|
}
|
|
|
|
.posterDialog .close .img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.posterDialog .content {
|
|
width: 100%;
|
|
padding: 70rpx 20rpx 30rpx 20rpx;
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
text-align: center
|
|
}
|
|
|
|
.posterDialog .content .img {
|
|
width: 540rpx;
|
|
height: 960rpx
|
|
}
|
|
|
|
// 提示弹框
|
|
|
|
.hitn-n {
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #7F7F7F;
|
|
z-index: 3;
|
|
.hint-bx {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 6;
|
|
.hint-img {
|
|
width: 600rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
top: 180rpx;
|
|
left: 0;
|
|
.title {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 40rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|