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.
1237 lines
37 KiB
1237 lines
37 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view>
|
|
<view>
|
|
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
|
|
<view class="goods-container">
|
|
<!-- 商品媒体信息 -->
|
|
<view class="goods-media">
|
|
<!-- 商品图片 -->
|
|
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
|
|
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval"
|
|
:autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
|
|
<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index"
|
|
:item-id="'goods_id_' + index">
|
|
<view class="item" @click="previewMedia(index)">
|
|
<image :src="$util.img(item)" @error="swiperImageError(index)"
|
|
mode="aspectFit" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="img-indicator-dots">
|
|
<text>{{ swiperCurrent }}</text>
|
|
<text v-if="goodsSkuDetail.sku_images">
|
|
/{{ goodsSkuDetail.sku_images.length }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品视频 -->
|
|
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
|
|
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)"
|
|
:poster="$util.img(goodsSkuDetail.sku_image)" objectFit="cover"
|
|
:controls="true"></video>
|
|
</view>
|
|
|
|
<!-- 切换视频、图片 -->
|
|
<view class="media-mode" v-if="goodsSkuDetail.video_url != ''" style="bottom:76rpx">
|
|
<div class="media-mode-box">
|
|
<text :class="{ 'color-base-bg': switchMedia == 'video' }"
|
|
@click="switchMedia = 'video'">
|
|
视频
|
|
</text>
|
|
<text style="margin-left: 0rpx;" :class="{ 'color-base-bg': switchMedia == 'img' }"
|
|
@click="(switchMedia = 'img'), videoContext.pause()">
|
|
图片
|
|
</text>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 价格区域 -->
|
|
<view class="goods-gression">
|
|
<!-- 拼团 -->
|
|
<view class="goods-promotion">
|
|
<view class="price-info">
|
|
<view class="price-box">
|
|
<view class="promotion-text">
|
|
拼团价
|
|
<text class="price-symbol price-font">¥</text>
|
|
<text class="price price-font">
|
|
{{
|
|
parseFloat(goodsSkuDetail.bl_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price-symbol price-font">
|
|
.{{
|
|
parseFloat(goodsSkuDetail.bl_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</view>
|
|
<view class="sale-num">
|
|
原价
|
|
<text class="price-symbol price-font">¥</text>
|
|
<text class="price price-font">
|
|
{{
|
|
parseFloat(goodsSkuDetail.goods_money)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price-symbol price-font">
|
|
.{{
|
|
parseFloat(goodsSkuDetail.goods_money)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="countdown">
|
|
<view class="txt">距结束仅剩</view>
|
|
<view class="clockrun"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-wrap padding-top">
|
|
<view class="goods-module-wrap">
|
|
<text class="price-symbol price-font">¥</text>
|
|
<text class="price price-font">
|
|
{{
|
|
parseFloat(goodsSkuDetail.goods_money)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</text>
|
|
<text class="price-symbol price-font">
|
|
.{{
|
|
parseFloat(goodsSkuDetail.goods_money)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</text>
|
|
<view class="follow-and-share">
|
|
<text class="follow iconfont icon-fenxiang" @click="openSharePopup()"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="newdetail margin-bottom">
|
|
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0"
|
|
@click="$refs.deliveryType.open()">
|
|
<view class="label">配送</view>
|
|
<block v-if="deliveryType">
|
|
<view class="box">
|
|
<block v-for="(item, index) in deliveryType" :key="index">
|
|
<text v-if="
|
|
goodsSkuDetail.support_trade_type.indexOf(index) !=
|
|
-1
|
|
">
|
|
{{ item.name }}
|
|
</text>
|
|
</block>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
</block>
|
|
<block v-else>
|
|
<view class="box">商家未配置配送方式</view>
|
|
</block>
|
|
</view>
|
|
<!-- 配送方式 -->
|
|
<uni-popup ref="deliveryType" type="bottom">
|
|
<view class="deliverytype-popup-layer popup-layer">
|
|
<view class="head-wrap" @click="$refs.deliveryType.close()">
|
|
<text>配送</text>
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
<scroll-view scroll-y class="type-body">
|
|
<block v-for="(item, index) in deliveryType" :key="index">
|
|
<view class="type-item" :class="{
|
|
'not-support':
|
|
goodsSkuDetail.support_trade_type.indexOf(
|
|
index
|
|
) == -1
|
|
}">
|
|
<text class="iconfont" :class="item.icon"></text>
|
|
<view class="content">
|
|
<view class="title">{{ item.name }}</view>
|
|
<view class="desc">{{ item.desc }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
¸
|
|
<view class="item service" @click="openMerchantsServicePopup()"
|
|
v-if="goodsSkuDetail.goods_service.length">
|
|
<view class="label">服务</view>
|
|
<view class="list-wrap">
|
|
<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service"
|
|
:key="index" v-if="index < 3">
|
|
<view class="item-wrap-box">
|
|
<view class="item-wrap-icon">
|
|
<text class="iconfont icon-dui" v-if="
|
|
!item.icon ||
|
|
(!item.icon.imageUrl && !item.icon.icon)
|
|
"></text>
|
|
<image class="icon-img" v-else-if="item.icon.iconType == 'img'"
|
|
:src="$util.img(item.icon.imageUrl)" />
|
|
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'"
|
|
:icon="item.icon.icon"
|
|
:value="item.icon.style ? item.icon.style : null"></diy-icon>
|
|
</view>
|
|
<text>{{ item.service_name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品服务 -->
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="merchantsServicePopup" type="bottom">
|
|
<view class="goods-merchants-service-popup-layer popup-layer">
|
|
<view class="head-wrap" @click="closeMerchantsServicePopup()">
|
|
<text>商品服务</text>
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
<scroll-view scroll-y>
|
|
<view class="item" :class="{ 'empty-desc': !item.desc }"
|
|
v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
|
|
<view class="item-icon" :class="{ 'empty-desc': !item.desc }">
|
|
<text class="iconfont icon-dui color-base-text" v-if="
|
|
!item.icon ||
|
|
(!item.icon.imageUrl && !item.icon.icon)
|
|
"></text>
|
|
<image class="icon-img" v-else-if="item.icon.iconType == 'img'"
|
|
:src="$util.img(item.icon.imageUrl)" />
|
|
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'"
|
|
:icon="item.icon.icon"
|
|
:value="item.icon.style ? item.icon.style : null"></diy-icon>
|
|
</view>
|
|
<view class="info-wrap">
|
|
<text class="title">{{ item.service_name }}</text>
|
|
<text class="describe" v-if="item.desc">
|
|
{{ item.desc }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button-box">
|
|
<button type="primary" @click="closeMerchantsServicePopup()">
|
|
确定
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<!-- 业务区域 -->
|
|
<!-- SKU选择 -->
|
|
<ns-goods-sku v-if="goodsSkuDetail.goods_id" ref="goodsSku" @refresh="refreshGoodsSkuDetail"
|
|
:goods-id="goodsSkuDetail.goods_id" :goods-detail="goodsSkuDetail"
|
|
:max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy"
|
|
@getSkuId="setSkuId"></ns-goods-sku>
|
|
|
|
<!-- 组合套餐 -->
|
|
<view v-if="bundling.length && bundling[0].bl_name && addonIsExist.bundling">
|
|
<view class="group-wrap" @click="openBundlingPopup()">
|
|
<view class="goods-cell" @click="openBundlingPopup()">
|
|
<view class="box">
|
|
<text class="tit">组合套餐</text>
|
|
<text>{{ bundling[0].bl_name }}</text>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
<!-- <view class="more-img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
|
</view>
|
|
<scroll-view class="combo-goods-wrap color-tip" scroll-x="true">
|
|
<view class="goods-wrap">
|
|
<view class="goods-item" @click="toGoodsDetail(skuId)" v-if="bundlingType == true">
|
|
<view class="combo-img">
|
|
<image :src="
|
|
$util.img(goodsSkuDetail.sku_image, {
|
|
size: 'mid'
|
|
})
|
|
" @error="imageError()" />
|
|
<view class="price-wrap">
|
|
<text class="unit price-font">
|
|
{{ $lang('common.currencySymbol') }}
|
|
</text>
|
|
<text class="price price-font">
|
|
{{ goodsSkuDetail.price }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="name">{{ goodsSkuDetail.goods_name }}</text>
|
|
</view>
|
|
<block v-for="(item, index) in bundling[0].bundling_goods" :key="index">
|
|
<template v-if="index < 3">
|
|
<view class="goods-item" @click="toGoodsDetail(item.sku_id)">
|
|
<view class="combo-img">
|
|
<image :src="
|
|
$util.img(item.sku_image, {
|
|
size: 'mid'
|
|
})
|
|
" @error="bundlingImageError(0, index)" />
|
|
<view class="price-wrap">
|
|
<text class="unit price-font">
|
|
{{ $lang('common.currencySymbol') }}
|
|
</text>
|
|
<text class="price price-font">
|
|
{{ item.price }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="name">{{ item.sku_name }}</text>
|
|
</view>
|
|
</template>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="bundlingPopup" type="bottom">
|
|
<view class="bundling-popup-layer popup-layer">
|
|
<view class="head-wrap" @click="closeBundlingPopup()">
|
|
<text>组合套餐</text>
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
<scroll-view scroll-y class="bundling-body">
|
|
<view class="bundling-view">
|
|
<block v-for="(item, index) in bundling" :key="index">
|
|
<view class="bundling-item">
|
|
<view class="title" @click="toComoDetail(item.bl_id)">
|
|
<text>{{ item.bl_name }}</text>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
<scroll-view scroll-x>
|
|
<view class="goods-wrap">
|
|
<view class="goods-item" @click="toGoodsDetail(skuId)">
|
|
<view class="combo-img">
|
|
<image :src="
|
|
$util.img(
|
|
goodsSkuDetail.sku_image,
|
|
{ size: 'mid' }
|
|
)
|
|
" @error="imageError()" />
|
|
<view class="price-wrap">
|
|
<text class="unit price-font">
|
|
{{
|
|
$lang(
|
|
'common.currencySymbol'
|
|
)
|
|
}}
|
|
</text>
|
|
<text class="price price-font">
|
|
{{
|
|
goodsSkuDetail.price
|
|
}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="name">
|
|
{{ goodsSkuDetail.goods_name }}
|
|
</text>
|
|
</view>
|
|
<block v-for="(goods,
|
|
goods_index) in item.bundling_goods" :key="goods_index">
|
|
<template v-if="goods_index < 3">
|
|
<view class="goods-item" @click="
|
|
toGoodsDetail(
|
|
goods.sku_id
|
|
)
|
|
">
|
|
<view class="combo-img">
|
|
<image :src="
|
|
$util.img(
|
|
goods.sku_image,
|
|
{
|
|
size:
|
|
'mid'
|
|
}
|
|
)
|
|
" @error="
|
|
bundlingImageError(
|
|
index,
|
|
goods_index
|
|
)
|
|
" />
|
|
<view class="price-wrap">
|
|
<text class="unit price-font">
|
|
{{
|
|
$lang(
|
|
'common.currencySymbol'
|
|
)
|
|
}}
|
|
</text>
|
|
<text class="price price-font">
|
|
{{
|
|
goods.price
|
|
}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="name">
|
|
{{ goods.sku_name }}
|
|
</text>
|
|
</view>
|
|
</template>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="bundling-price-wrap">
|
|
<text class="label">套餐价</text>
|
|
<text class="unit price-color">
|
|
{{ $lang('common.currencySymbol') }}
|
|
</text>
|
|
<text class="price price-color">
|
|
{{ item.bl_price }}
|
|
</text>
|
|
<button type="primary" size="mini"
|
|
@click="toComoDetail(item.bl_id)">
|
|
立即购买
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-community"
|
|
v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_state == 1">
|
|
<view class="community-box">
|
|
<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill">
|
|
</image>
|
|
<view class="community-content">
|
|
<view class="community-title">
|
|
{{ goodsSkuDetail.qr_data.qr_name }}
|
|
</view>
|
|
<view class="community-txt">
|
|
{{ goodsSkuDetail.qr_data.community_describe }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="community-btn" @click="onCommunity()">添加</view>
|
|
</view>
|
|
|
|
<!-- 促销 -->
|
|
<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()"
|
|
v-show="isCommunity">
|
|
<view class="community-model-content" @click.stop>
|
|
<view class="community-model-content-radius">
|
|
<view>添加社群</view>
|
|
</view>
|
|
<view class="community-model-content-draw"
|
|
v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
|
|
<image :src="
|
|
goodsSkuDetail.qr_data.qr_img != '' &&
|
|
goodsSkuDetail.qr_data.qr_state == 1
|
|
? $util.img(goodsSkuDetail.qr_data.qr_img)
|
|
: $util.img('public/uniapp/goods/detail_erweiImage.png')
|
|
" mode="aspectFill" show-menu-by-longpress="true"></image>
|
|
</view>
|
|
<view class="community-model-content-text">
|
|
长按识别二维码，添加社群
|
|
</view>
|
|
</view>
|
|
<view class="community-model-close" @click.stop="onCloseCommunity()">
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 详情 -->
|
|
<view class="goods-detail-tab">
|
|
<view class="detail-tab">
|
|
<!-- <view class="tab-line"></view> -->
|
|
<view class="tab-item">商品详情</view>
|
|
<!-- <view class="tab-line"></view> -->
|
|
<!-- <view v-if="service.is_display == 1" class="tab-item" :class="detailTab == 1 ? 'active color-base-text' : ''" @click="detailTab = 1">售后保障</view> -->
|
|
</view>
|
|
|
|
<view class="detail-content active">
|
|
<view class="detail-content-item">
|
|
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
|
|
<rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)"
|
|
:data-nodes="goodsSkuDetail.goods_content"></rich-text>
|
|
</view>
|
|
<view class="goods-details active" v-else>
|
|
该商家暂无上传相关详情哦！
|
|
</view>
|
|
</view>
|
|
<!-- <block v-if="service">
|
|
<view class="detail-content-item" v-show="detailTab == 1 && service.is_display == 1">
|
|
<view class="goods-details" v-if="service.content">
|
|
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
|
|
</view>
|
|
<view class="goods-details active" v-else>该商品暂无相关售后哦！</view>
|
|
</view>
|
|
</block> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品推荐 -->
|
|
<ns-goods-recommend :goodsID="goodsSkuDetail.goods_id" ref="goodrecommend"
|
|
route="goodsdetail"></ns-goods-recommend>
|
|
|
|
<ns-copyright></ns-copyright>
|
|
|
|
<!-- 海报 -->
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
|
|
<template v-if="poster != '-1'">
|
|
<view>
|
|
<view class="image-wrap">
|
|
<image :src="$util.img(poster)" :show-menu-by-longpress="true" />
|
|
</view>
|
|
<!-- #ifdef MP || APP-PLUS -->
|
|
<view class="save" @click="saveGoodsPoster()">保存图片</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="save">长按保存图片</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
|
</template>
|
|
<view v-else class="msg">{{ posterMsg }}</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<!-- 分享弹窗 -->
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
|
<view>
|
|
<view class="share-title">分享</view>
|
|
<view class="share-content">
|
|
<!-- #ifdef MP -->
|
|
<view class="share-box">
|
|
<button class="share-btn" :plain="true" open-type="share">
|
|
<view class="iconfont icon-share-friend"></view>
|
|
<text>分享给好友</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="share-box" v-if="goodsCircle">
|
|
<button class="share-btn" :plain="true" @click="openBusinessView">
|
|
<view class="iconfont icon-haowuquan"></view>
|
|
<text>分享到好物圈</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<view class="share-box" @click="openPosterPopup">
|
|
<button class="share-btn" :plain="true">
|
|
<view class="iconfont icon-pengyouquan"></view>
|
|
<text>生成分享海报</text>
|
|
</button>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view class="share-box" @click="copyUrl">
|
|
<button class="share-btn" :plain="true">
|
|
<view class="iconfont icon-fuzhilianjie"></view>
|
|
<text>复制链接</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="share-footer" @click="closeSharePopup">
|
|
<text>取消分享</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作区域 -->
|
|
<!-- 商品底部导航 -->
|
|
<ns-goods-action :safeArea="isIphoneX">
|
|
<template v-if="goodsSkuDetail.goods_state == 1">
|
|
<ns-goods-action-icon text="收藏" @click="editCollection()" :icon="
|
|
whetherCollection == 1
|
|
? 'icon-likefill color-base-text'
|
|
: 'icon-guanzhu'
|
|
" />
|
|
<ns-goods-action-icon text="客服" @click="service()" icon="icon-kefu" :send-data="contactData"
|
|
:chatParam="chatRoomParams" />
|
|
<ns-goods-action-icon text="购物车" :cornerMarkBg="themeStyle.goods_detail.goods_cart_num_corner"
|
|
icon="icon-gouwuche2" :corner-mark="cartCount > 0 ? cartCount + '' : ''" @click="goCart" />
|
|
|
|
<block v-if="goodsSkuDetail.stock == 0 && !goodsSkuDetail.sku_spec_format">
|
|
<ns-goods-action-button class="goods-action-button active3" disabled-text="库存不足"
|
|
:disabled="true" />
|
|
<!-- <ns-goods-action-button v-if="goodsSkuDetail.sku_spec_format" class="goods-action-button active3" disabled-text="库存不足" :disabled="true" @click="joinCart" /> -->
|
|
<!-- <ns-goods-action-button v-else class="goods-action-button active3" disabled-text="库存不足" :disabled="true" /> -->
|
|
</block>
|
|
<block v-else-if="
|
|
goodsSkuDetail.is_limit == 1 &&
|
|
goodsSkuDetail.limit_type == 2 &&
|
|
goodsSkuDetail.max_buy != 0 &&
|
|
goodsSkuDetail.purchased_num >= goodsSkuDetail.max_buy
|
|
">
|
|
<!-- (goodsSkuDetail.is_limit == 1 && goodsSkuDetail.limit_type == 1 && goodsSkuDetail.max_buy != 0) -->
|
|
<ns-goods-action-button class="goods-action-button active3" disabled-text="已达最大限购数量"
|
|
:disabled="true" />
|
|
</block>
|
|
<block v-else>
|
|
<!-- :class="goodsSkuDetail.is_virtual == 0 ? 'active2' : 'active4'" -->
|
|
<ns-goods-action-button class="goods-action-button" :backgroundColor="themeStyle.bg_color"
|
|
:textColor="themeStyle.btn_text_color" text="立即购买" @click="buyNow" />
|
|
</block>
|
|
</template>
|
|
<template v-else>
|
|
<ns-goods-action-button class="goods-action-button active3" disabled-text="该商品已下架"
|
|
:disabled="true" />
|
|
</template>
|
|
</ns-goods-action>
|
|
</view>
|
|
|
|
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
|
<ns-login ref="login"></ns-login>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import nsGoodsAction from '@/components/ns-goods-action/ns-goods-action.vue';
|
|
import nsGoodsActionIcon from '@/components/ns-goods-action-icon/ns-goods-action-icon.vue';
|
|
import nsGoodsActionButton from '@/components/ns-goods-action-button/ns-goods-action-button.vue';
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
|
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
|
|
import detail from './public/js/detail.js';
|
|
import scroll from '@/common/js/scroll-view.js';
|
|
import toTop from '@/components/toTop/toTop.vue';
|
|
import goodsDetailBase from '@/common/js/goods_detail_base.js';
|
|
import goodsPrice from '@/components/goodsPrice.vue';
|
|
|
|
import xiaoStarComponent from '../components/xiao-star-component/xiao-star-component.vue';
|
|
// 商品详情视图
|
|
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
|
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
|
|
import detailView from '../components/goods-detail-view/detail.js';
|
|
|
|
export default {
|
|
components: {
|
|
nsGoodsAction,
|
|
nsGoodsActionIcon,
|
|
nsGoodsActionButton,
|
|
uniPopup,
|
|
nsGoodsSku,
|
|
uniCountDown,
|
|
toTop,
|
|
goodsPrice,
|
|
nsGoodsRecommend,
|
|
pengpaiFadeinOut
|
|
},
|
|
provide() {
|
|
return {
|
|
showDiscount: this.showDiscount
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
list: [],
|
|
|
|
//是否开启预览，0：不开启，1：开启
|
|
preview: 0,
|
|
token: '',
|
|
videoContext: '',
|
|
|
|
// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
|
|
swiperInterval: 1,
|
|
swiperAutoplay: false,
|
|
swiperCurrent: 1,
|
|
switchMedia: 'img',
|
|
|
|
isIphoneX: false, //判断手机是否是iphoneX以上
|
|
// 商品详情
|
|
goodsSkuDetail: {
|
|
goods_id: 0,
|
|
goods_service: []
|
|
},
|
|
|
|
deliveryType: null,
|
|
|
|
//组合套餐
|
|
bundlingType: false,
|
|
bundling: [{
|
|
bundling_goods: {
|
|
bl_name: '',
|
|
sku_image: ''
|
|
}
|
|
}],
|
|
|
|
// 是否可分享到好物圈
|
|
goodsCircle: false,
|
|
memberId: 0,
|
|
shareUrl: '', // 分享链接
|
|
source_member: 0, //分享人的id
|
|
isCommunity: false, //社群弹窗
|
|
|
|
poster: '-1', //海报
|
|
posterMsg: '', //海报错误信息
|
|
posterHeight: 0,
|
|
posterParams: {}, //海报所需参数
|
|
detailTab: 0,
|
|
goodsRoute: '',
|
|
posterApi: ''
|
|
};
|
|
},
|
|
mixins: [scroll],
|
|
onLoad(data) {
|
|
this.preview = data.preview || 0;
|
|
this.token = uni.getStorageSync('token');
|
|
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
|
this.blId = data.bl_id || 0;
|
|
|
|
// 分享关系
|
|
if (data.source_member) {
|
|
uni.setStorageSync('source_member', data.source_member);
|
|
this.source_member = data.source_member;
|
|
}
|
|
if (this.token && uni.getStorageSync('source_member')) {
|
|
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
|
}
|
|
// 小程序扫码进入
|
|
if (data.scene) {
|
|
var sceneParams = decodeURIComponent(data.scene);
|
|
sceneParams = sceneParams.split('&');
|
|
if (sceneParams.length) {
|
|
sceneParams.forEach(item => {
|
|
if (item.indexOf('m') != -1)
|
|
uni.setStorageSync('source_member', item.split('-')[1]);
|
|
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
|
|
});
|
|
}
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
this.getShareImg();
|
|
// #endif
|
|
},
|
|
async onShow() {
|
|
if (!this.token) return;
|
|
|
|
//同步获取商品详情
|
|
await this.getGoodsSkuDetail();
|
|
|
|
// 开启预览，禁止任何操作和跳转
|
|
if (this.preview == 0) {
|
|
//组合套餐
|
|
this.getBundling();
|
|
}
|
|
},
|
|
methods: {
|
|
service() {
|
|
uni.navigateTo({
|
|
url: '/pages_tool/news/chat'
|
|
});
|
|
},
|
|
zlsgz() {
|
|
uni.navigateTo({
|
|
url: '/page_goods/components/goods-detail-view/guiz'
|
|
});
|
|
},
|
|
// 获取商品详情
|
|
async getGoodsSkuDetail() {
|
|
let res = await this.$api.sendRequest({
|
|
url: '/bundling/api/bundling/detail',
|
|
async: false,
|
|
data: {
|
|
bl_id: this.blId
|
|
}
|
|
});
|
|
let data = res.data;
|
|
// 没有商品详情
|
|
if (!data) {
|
|
this.$util.redirectTo('/pages_tool/goods/not_exist', {}, 'redirectTo');
|
|
}
|
|
|
|
this.goodsSkuDetail = data;
|
|
// 分享参数、链接
|
|
this.shareQuery = 'bl_id=' + this.goodsSkuDetail.bl_id;
|
|
this.shareUrl = this.goodsRoute + '?' + this.shareQuery;
|
|
// 海报参数
|
|
this.posterParams = {
|
|
bl_id: this.goodsSkuDetail.bl_id
|
|
};
|
|
|
|
// 处理商品数据
|
|
this.handleGoodsSkuData();
|
|
|
|
// 隐藏loading
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
},
|
|
init(params) {
|
|
this.bl_id = params.bl_id;
|
|
this.preview = params.preview;
|
|
this.source_member = params.source_member;
|
|
this.whetherCollection = params.whetherCollection;
|
|
this.posterParams = params.posterParams;
|
|
|
|
this.shareUrl = params.shareUrl;
|
|
this.memberId = params.memberId;
|
|
this.goodsRoute = params.goodsRoute;
|
|
this.posterApi = params.posterApi;
|
|
this.getService();
|
|
|
|
// 评价设置
|
|
this.videoContext = uni.createVideoContext('goodsVideo');
|
|
|
|
// #ifdef MP-WEIXIN
|
|
this.goodsSyncToGoodsCircle();
|
|
// #endif
|
|
},
|
|
//获取当前商品关联的组合套餐
|
|
getBundling() {
|
|
this.$api.sendRequest({
|
|
url: '/bundling/api/bundling/lists',
|
|
data: {
|
|
sku_id: this.skuId
|
|
},
|
|
success: res => {
|
|
this.bundling = res.data;
|
|
if (res.data && res.data.length) {
|
|
for (var i = 0; i < this.bundling[0].bundling_goods.length; i++) {
|
|
if (this.bundling[0].bundling_goods[i].sku_id == this.skuId) {
|
|
this.bundlingType = true;
|
|
break;
|
|
} else {
|
|
this.bundlingType = false;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < this.bundling.length; i++) {
|
|
for (var j = 0; j < this.bundling[i].bundling_goods.length; j++) {
|
|
if (this.bundling[i].bundling_goods[j].sku_id == this.skuId) {
|
|
this.bundling[i].bundling_goods.splice(j, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 处理商品详情数据
|
|
handleGoodsSkuData() {
|
|
this.$langConfig.title(this.goodsSkuDetail.bl_name);
|
|
|
|
// 初始化商品详情视图数据
|
|
this.init({
|
|
bl_id: this.goodsSkuDetail.bl_id,
|
|
preview: this.preview,
|
|
source_member: this.source_member,
|
|
posterParams: this.posterParams,
|
|
posterApi: this.posterApi,
|
|
shareUrl: this.shareUrl,
|
|
memberId: this.memberId,
|
|
goodsRoute: this.goodsRoute
|
|
});
|
|
|
|
//媒体
|
|
if (this.goodsSkuDetail.video_url) this.switchMedia = 'video';
|
|
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || '件';
|
|
|
|
if (this.goodsRoute != '/page_goods/detail/detail') this.setPublicShare();
|
|
if (this.goodsSkuDetail.is_virtual == 0) this.getEnabledExpressType();
|
|
},
|
|
|
|
refreshGoodsSkuDetail(data) {
|
|
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
|
|
if (this.$refs.goodsPromotion)
|
|
this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
|
if (this.$refs.goodsDetailView) {
|
|
// 初始化商品详情视图数据
|
|
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || '件';
|
|
|
|
// 解决轮播图数量不一致时，切换到第一个
|
|
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
|
|
this.swiperAutoplay = true;
|
|
this.swiperCurrent = 1;
|
|
setTimeout(() => {
|
|
this.swiperAutoplay = false;
|
|
}, 40);
|
|
}
|
|
}
|
|
this.$langConfig.title(this.goodsSkuDetail.sku_name);
|
|
},
|
|
/**
|
|
* 设置公众号分享
|
|
*/
|
|
setPublicShare() {
|
|
let shareUrl = this.$config.h5Domain + this.shareUrl;
|
|
if (this.memberId) shareUrl += '&source_member=' + this.memberId;
|
|
|
|
this.$util.setPublicShare({
|
|
title: this.goodsSkuDetail.bl_name,
|
|
desc: '',
|
|
link: shareUrl,
|
|
imgUrl: typeof this.goodsSkuDetail.bundling_goods[0]
|
|
});
|
|
},
|
|
/**
|
|
* 查询启用的配送方式
|
|
*/
|
|
getEnabledExpressType() {
|
|
this.$api.sendRequest({
|
|
url: '/api/config/enabledexpresstype',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) this.deliveryType = res.data;
|
|
}
|
|
});
|
|
},
|
|
//售后保障查询
|
|
getService() {
|
|
this.$api.sendRequest({
|
|
url: '/api/goods/aftersale',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.service = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//-------------------------------------社群-------------------------------------
|
|
//添加福利群
|
|
onCommunity() {
|
|
this.isCommunity = true;
|
|
},
|
|
onCloseCommunity() {
|
|
this.isCommunity = false;
|
|
},
|
|
/**
|
|
* 将商品同步到微信圈子
|
|
*/
|
|
goodsSyncToGoodsCircle() {
|
|
this.$api.sendRequest({
|
|
url: '/goodscircle/api/goods/sync',
|
|
data: {
|
|
goods_id: this.goodsSkuDetail.goods_id
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.goodsCircle = true;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//-------------------------------------分享-------------------------------------
|
|
// 打开分享弹出层
|
|
openSharePopup() {
|
|
this.$refs.sharePopup.open();
|
|
},
|
|
// 关闭分享弹出层
|
|
closeSharePopup() {
|
|
this.$refs.sharePopup.close();
|
|
},
|
|
copyUrl() {
|
|
let text = this.$config.h5Domain + this.shareUrl;
|
|
if (this.memberId) text += '&source_member=' + this.memberId;
|
|
this.$util.copy(text, () => {
|
|
this.closeSharePopup();
|
|
});
|
|
},
|
|
//-------------------------------------海报-------------------------------------
|
|
// 打开海报弹出层
|
|
openPosterPopup() {
|
|
this.getGoodsPoster();
|
|
this.$refs.sharePopup.close();
|
|
this.$refs.posterPopup.open();
|
|
if (this.poster != '-1') {
|
|
setTimeout(() => {
|
|
let view = uni
|
|
.createSelectorQuery()
|
|
.in(this)
|
|
.select('.poster-layer .image-wrap');
|
|
view.fields({
|
|
size: true
|
|
},
|
|
data => {
|
|
let posterWhith = data.width;
|
|
let ratio = parseFloat((740 / posterWhith).toFixed(2));
|
|
if (this.token != '') {
|
|
this.posterHeight = parseInt(1240 / ratio);
|
|
} else {
|
|
this.posterHeight = parseInt(1100 / ratio);
|
|
}
|
|
}
|
|
).exec();
|
|
}, 100);
|
|
}
|
|
},
|
|
// 关闭海报弹出层
|
|
closePosterPopup() {
|
|
this.$refs.posterPopup.close();
|
|
},
|
|
//生成海报
|
|
getGoodsPoster() {
|
|
uni.showLoading({
|
|
title: '海报生成中...'
|
|
});
|
|
//活动海报信息
|
|
if (this.memberId) this.posterParams.source_member = this.memberId;
|
|
|
|
this.$api.sendRequest({
|
|
url: this.posterApi,
|
|
data: {
|
|
page: this.goodsRoute,
|
|
qrcode_param: JSON.stringify(this.posterParams)
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.poster = res.data.path + '?time=' + new Date().getTime();
|
|
} else {
|
|
this.posterMsg = res.message;
|
|
}
|
|
uni.hideLoading();
|
|
},
|
|
fail: err => {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
},
|
|
// 预览图片
|
|
previewMedia(index) {
|
|
var paths = [];
|
|
for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
|
|
paths.push(
|
|
this.$util.img(this.goodsSkuDetail.sku_images[i])
|
|
);
|
|
}
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: paths
|
|
// longPressActions: {
|
|
// itemList: ['发送给朋友', '保存图片', '关注'],
|
|
// success: function(data) {
|
|
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
// },
|
|
// fail: function(err) {
|
|
// console.log(err.errMsg);
|
|
// }
|
|
// }
|
|
});
|
|
},
|
|
swiperImageError(index) {
|
|
this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import '@/common/css/goods_detail.scss';
|
|
@import './public/css/detail.scss';
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
/deep/ .action-icon-wrap .iconfont.icon-shouye1 {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
/deep/ .uni-video-cover {
|
|
background: none;
|
|
}
|
|
|
|
/deep/ .uni-video-cover-duration {
|
|
display: none;
|
|
}
|
|
|
|
/deep/ .uni-video-cover-play-button {
|
|
border-radius: 50%;
|
|
border: 4rpx solid #fff;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-size: 30%;
|
|
}
|
|
|
|
.poster-layer {
|
|
.uni-popup__wrapper-box {
|
|
max-height: initial !important;
|
|
}
|
|
}
|
|
|
|
/deep/ .sku-layer .uni-popup__wrapper-box {
|
|
overflow-y: initial !important;
|
|
}
|
|
|
|
.goods-promotion .countdown .clockrun {
|
|
/deep/.uni-countdown__number {
|
|
min-width: 32rpx;
|
|
height: 32rpx;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
padding: 4rpx;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.goods-promotion .countdown .clockrun {
|
|
/deep/ .uni-countdown__splitor {
|
|
width: 10rpx;
|
|
height: 32rpx;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.goods-promotion .countdown .clockrun {
|
|
/deep/ .uni-countdown__splitor.day {
|
|
width: initial;
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
max-height: unset !important;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active1 {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active2 {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active3 {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active4 {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper.bottom {
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active1 .action-buttom-wrap {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active2 .action-buttom-wrap {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active3 .action-buttom-wrap {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
/deep/ .goods-action-button.active4 .action-buttom-wrap {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
/* 拼团样式 */
|
|
.pintuan {
|
|
width: 702rpx;
|
|
// height: 240rpx;
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
margin: 0 auto;
|
|
margin-bottom: 26rpx;
|
|
padding: 42rpx 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.su {
|
|
width: 6rpx;
|
|
height: 28rpx;
|
|
background: linear-gradient(180deg, #21bbf3 0%, rgba(33, 187, 243, 0.14) 100%);
|
|
border-radius: 4rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.pintuanname {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
line-height: 48rpx;
|
|
|
|
span {
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
.guiz {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #f08433;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.img {
|
|
margin-top: 36rpx;
|
|
|
|
.qupin {
|
|
width: 144rpx;
|
|
height: 72rpx;
|
|
background: #f33b50;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.imgdiv {
|
|
position: relative;
|
|
|
|
div {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border: 4rpx solid red;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
div:nth-child(2) {
|
|
left: 70rpx;
|
|
}
|
|
|
|
div:nth-child(3) {
|
|
left: 140rpx;
|
|
}
|
|
|
|
div:nth-child(4) {
|
|
left: 210rpx;
|
|
}
|
|
|
|
div:nth-child(5) {
|
|
left: 280rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|