<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="拼团详情" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
<!--幻灯片-->
|
<view class="coreshop-full-screen-banner-swiper-box">
|
<u-swiper height="calc(750rpx * 6 / 6)" radius="0" :list="goodsInfo.album" :autoplay="autoplay" indicator indicatorMode="line" circular @click="clickImg"></u-swiper>
|
</view>
|
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-16">¥</text>
|
<text class="coreshop-font-24">{{ price || '0.00' }}</text>
|
</view>
|
<view class="coreshop-flex coreshop-text-left coreshop-justify-center coreshop-align-center">
|
<view class="coreshop-text-right coreshop-time-right" v-if="goodsInfo.pinTuanRule && goodsInfo.pinTuanRule.pinTuanStartStatus == 1">
|
<u-count-down :time="goodsInfo.pinTuanRule.lastTime*1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange">
|
<view class="time">
|
<view class="coreshop-font-12">仅剩：</view>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.days }}</text>
|
</view>
|
<text class="time__doc">天</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
</view>
|
</view>
|
</u-count-down>
|
</view>
|
<view class="coreshop-text-right coreshop-time-right" v-if="goodsInfo.pinTuanRule && goodsInfo.pinTuanRule.pinTuanStartStatus == 2">
|
<u-count-down :time="goodsInfo.pinTuanRule.lastTime*1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange">
|
<view class="time">
|
<view class="coreshop-font-12">即将开团：</view>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.days }}</text>
|
</view>
|
<text class="time__doc">天</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
</view>
|
</view>
|
</u-count-down>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ goodsInfo.name || '' }}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14 coreshop-text-gray">{{ goodsInfo.brief || '' }}</text>
|
</view>
|
<view class="coreshop-flex coreshop-margin-top-8" v-if="goodsInfo.brand || goodsInfo.labels">
|
<u-tag :text="goodsInfo.brand.name" v-if="goodsInfo.brand"></u-tag>
|
<view class="coreshop-margin-left-6" v-for="item in goodsInfo.labels" :key="item.id">
|
<u-tag :text="item.name" :bgColor="item.style" :borderColor="item.style"></u-tag>
|
</view>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
|
<view class="coreshop-font-12">
|
<text>已售：</text>
|
<text class="font-color-orange">{{ goodsInfo.buyPinTuanCount || '0' }}</text>
|
</view>
|
<view class="coreshop-font-12">
|
<u-icon name="share-fill" size="18" label="分享" :labelSize="12" labelPos="right" @click="goShare"></u-icon>
|
</view>
|
<view class="coreshop-font-12">
|
<u-icon name="star-fill" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection" v-if="isfav"></u-icon>
|
<u-icon name="star" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection" v-else></u-icon>
|
</view>
|
</view>
|
</view>
|
|
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
|
<!--服务-->
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row" @tap="serviceTap" v-if="serviceDescription.service.length>0">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务</text>
|
</view>
|
<view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
|
<u-icon name="checkmark-circle" size="12" labelSize="12" color="#e54d42" :label="item.title" v-for="(item, index) in serviceDescription.service" :key="index" class="coreshop-margin-right-10"></u-icon>
|
</view>
|
</view>
|
<view class="coreshop-basis-1">
|
<view class="coreshop-float-right">
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
</view>
|
<!--发货/规格-->
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="serviceDescription.delivery.length>0" />
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row" v-if="serviceDescription.delivery.length>0">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">发货</text>
|
</view>
|
<view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
|
<text class="coreshop-font-sm" v-for="(item, index) in serviceDescription.delivery" :key="index">{{item.description}}</text>
|
</view>
|
</view>
|
|
</view>
|
|
<!-- 团购拼单 -->
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-margin-bottom-16">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">开团信息</text>
|
</view>
|
<view class="coreshop-cell-group coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="pinTuanRecord.length > 0">
|
<view class="coreshop-cell-item right-img">
|
<view class="coreshop-cell-item-hd">
|
<view class="coreshop-cell-hd-title">{{ teamCount || '0' }}人在拼单，可直接参与</view>
|
</view>
|
</view>
|
<view class="group-swiper">
|
<swiper class="group-swiper-c" :class="swiperSet.groupHeight" :indicator-dots="swiperSet.indicatorDots" :autoplay="swiperSet.autoplay" vertical="true" circular="true" :interval="swiperSet.interval" :duration="swiperSet.duration">
|
<swiper-item v-for="(item, index) in pinTuanRecord" :key="index">
|
<view class="swiper-item">
|
<view class="coreshop-cell-item" :class="item[0].isOverdue?'coreshop-lower-shelf':''">
|
<view class="coreshop-cell-item-bd">
|
<view class="coreshop-cell-bd-view">
|
<text class="coreshop-cell-bd-text coreshop-font-xs">
|
还差
|
<text class="coreshop-text-red">{{ item[0].teamNums || '' }}人</text>
|
拼成
|
</text>
|
</view>
|
<view class="coreshop-cell-bd-view coreshop-text-center coreshop-flex coreshop-flex-nowrap coreshop-justify-center coreshop-align-center">
|
<text class="coreshop-font-xs">剩余：</text>
|
<u-count-down :time="item[0].lastTime * 1000 " class="coreshop-font-11"></u-count-down>
|
</view>
|
</view>
|
<view class="img-lower-box" :class="item[0].isOverdue?'coreshop-lower-box':''" v-if="item[0].isOverdue">已结束</view>
|
<view class="coreshop-cell-item-hd">
|
<u-avatar-group :urls="item[0].teams" keyName="userAvatar" size="35" gap="0.2" random-bg-color="true"></u-avatar-group>
|
</view>
|
<view class="coreshop-cell-item-ft">
|
<u-button type="success" size="mini" @click="selectTap(2, item[0].teamId)" v-if="!item[0].isOverdue">去拼单</u-button>
|
<u-button type="default" size="mini" v-if="item[0].isOverdue">已结束</u-button>
|
</view>
|
</view>
|
<view class="coreshop-cell-item" v-if="item[1]" :class="item[1].isOverdue?'coreshop-lower-shelf':''">
|
<view class="coreshop-cell-item-bd">
|
<view class="coreshop-cell-bd-view">
|
<text class="coreshop-cell-bd-text coreshop-font-xs">
|
还差
|
<text class="coreshop-text-red">{{ item[1].teamNums || '' }}人</text>
|
拼成
|
</text>
|
</view>
|
<view class="coreshop-cell-bd-view coreshop-text-center coreshop-flex coreshop-flex-nowrap coreshop-justify-center coreshop-align-center">
|
<text class="coreshop-font-xs">剩余：</text>
|
<u-count-down :time="item[1].lastTime * 1000 " class="coreshop-font-11" @end="end(index,1)"></u-count-down>
|
</view>
|
</view>
|
<view class="img-lower-box" :class="item[1].isOverdue?'coreshop-lower-box':''" v-if="item[1].isOverdue">已结束</view>
|
<view class="coreshop-cell-item-hd">
|
<u-avatar-group :urls="item[1].teams" keyName="userAvatar" size="35" gap="0.2" random-bg-color="true"></u-avatar-group>
|
</view>
|
<view class="coreshop-cell-item-ft">
|
<u-button type="success" size="mini" @click="selectTap(2, item[1].teamId)" v-if="!item[1].isOverdue">去拼单</u-button>
|
<u-button type="default" size="mini" v-if="item[1].isOverdue">已结束</u-button>
|
</view>
|
</view>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
</view>
|
<view class="coreshop-cell-group coreshop-margin-top-10 coreshop-margin-bottom-10" v-else>
|
<view class="coreshop-cell-item right-img">
|
<view class="coreshop-cell-item-hd"><view class="coreshop-cell-hd-title">暂无开团信息</view></view>
|
</view>
|
</view>
|
</view>
|
|
<!--评论-->
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
|
<view class="coreshop-basis-3">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">评价（{{commentsCount}}）</text>
|
</view>
|
<view class="coreshop-basis-3"></view>
|
<view class="coreshop-basis-4">
|
<view class="coreshop-float-right">
|
<u-icon name="arrow-right" label="查看更多" labelPos="left" labelSize="12px" labelColor="color['u-content-color']" @tap="goGoodComments(goodsInfo.id)"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view v-if="goodsComments.length">
|
<view v-for="(item, index) in goodsComments" :key="index">
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-10 coreshop-flex-direction-row">
|
<view class="coreshop-basis-1">
|
<view class="coreshop-avatar sm round" :style="[{backgroundImage:'url('+ item.avatarImage +')'}]" />
|
</view>
|
<view class="coreshop-basis-9 coreshop-font-sm">
|
<view>{{ (item.nickName && item.nickName != '')?item.nickName:item.mobile }}</view>
|
<view class="coreshop-margin-top-10">{{ item.contentBody || ''}}</view>
|
<view class="coreshop-text-gray coreshop-margin-top-5">
|
<u-rate v-model="item.score" :count="5" size="15"></u-rate>
|
</view>
|
<view class="coreshop-margin-top-10" v-if="item.imagesArr">
|
<u-album :urls="item.imagesArr" rowCount="4"></u-album>
|
</view>
|
<view class="coreshop-text-gray coreshop-margin-top-5 coreshop-font-12">{{ item.createTime || ''}} {{ item.addon || ''}}</view>
|
<view class="coreshop-bg-gray coreshop-padding-10 coreshop-border-radius-tr-16 coreshop-margin-top-10" v-if="item.sellerContent">
|
商家回复：{{item.sellerContent}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-margin-top-8" v-else>
|
<text class="coreshop-text-gray coreshop-font-12">该商品暂无评价</text>
|
</view>
|
</view>
|
|
<!--参数-->
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white" v-if="goodsParams.length>0">
|
<view>
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">参数</text>
|
</view>
|
<view class="goods-param-box">
|
<view class="goods-param-line" v-for="(item, index) in goodsParams" :key="index">
|
<view class="name">
|
<text>{{item.name}}</text>
|
</view>
|
<view class="value">
|
<text>{{item.value}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!--内容区-->
|
<view class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
<view class="line-70"></view>
|
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
|
<view class="line-70"></view>
|
</view>
|
<view class="coreshop-margin-top-10 coreshop-bg-white">
|
<u-parse :content="goodsInfo.intro" :selectable="true" v-if="goodsInfo.intro"></u-parse>
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox coreshop-padding-10" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
|
</view>
|
</view>
|
|
<!--单个拼团数据展示-->
|
<u-popup mode="bottom" :show="pinTuanpop" closeable="true" @close="pinTuanHiiden()">
|
<view class="ig-top" v-if="teamInfo.teams.length > 0">
|
<view class="coreshop-flex coreshop-align-center coreshop-justify-center coreshop-margin-bottom-10">
|
<view class="">
|
剩余时间：
|
<u-count-down :time="teamInfo.lastTime * 1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒"></u-count-down>
|
</view>
|
</view>
|
<view class="ig-top-m coreshop-flex coreshop-align-center coreshop-justify-center coreshop-margin-bottom-10">
|
<view class="user-head-img-c" v-for="(item, index) in teamInfo.teams" :key="index">
|
<view class="user-head-img-tip" v-if="item.recordId == item.teamId">拼主</view>
|
<image class="user-head-img coreshop-head-icon " :src="item.userAvatar" mode=""></image>
|
</view>
|
<view class="user-head-img-c uhihn" v-if="teamInfo.teamNums" v-for="n in teamInfo.teamNums" :key="n"><text>?</text></view>
|
</view>
|
<view class="ig-top-b coreshop-flex coreshop-align-center coreshop-justify-center coreshop-margin-bottom-10 coreshop-flex-direction-column">
|
<view class="igtb-top">
|
还差
|
<text class="coreshop-text-red">{{ teamInfo.teamNums || '' }}</text>
|
人，赶快拼单吧
|
</view>
|
<view class="igtb-mid"><button class="coreshop-btn" @click="selectTap(2, teamInfo.id)">参与拼团</button></view>
|
</view>
|
</view>
|
</u-popup>
|
|
<!-- 分享弹窗 -->
|
<view class="coreshop-padding-0">
|
<u-popup mode="bottom" :show="shareBox" ref="share">
|
<!-- #ifdef MP-WEIXIN -->
|
<coreshop-share-wx :shareType='$globalConstVars.shareType.pinTuan' :goodsId="goodsInfo.id" :groupId="pinTuanId" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief" :shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
|
<!-- #endif -->
|
<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
|
<coreshop-share-app :shareType='$globalConstVars.shareType.pinTuan' :goodsId="goodsInfo.id" :groupId="pinTuanId" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief" :shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
|
<!-- #endif -->
|
</u-popup>
|
<div id="qrCode" ref="qrCodeDiv"></div>
|
</view>
|
|
<!--常见问题-->
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-margin-bottom-16">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
|
</view>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row" v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
|
<view class="coreshop-basis-2 coreshop-font-13">
|
{{item.title}}
|
</view>
|
<view class="coreshop-basis-8">
|
<view class="coreshop-font-12">{{item.description}}</view>
|
</view>
|
</view>
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
|
<view class="coreshop-text-center coreshop-text-blue coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
|
</view>
|
|
|
<!--为您推荐-->
|
<view class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
<view class="line-70"></view>
|
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
<view class="line-70"></view>
|
</view>
|
<view class="coreshop-margin-left-8 coreshop-margin-right-8 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- #endif -->
|
<!-- #ifndef MP-WEIXIN -->
|
<template v-slot:default="item">
|
<view class="goods">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<!-- #endif -->
|
</custom-waterfalls-flow>
|
</view>
|
|
<!--占位底部距离-->
|
<view class="coreshop-tabbar-height" />
|
<!--底部操作-->
|
<view class="coreshop-good-footer-fixed">
|
<view class="tabbar">
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
|
<!-- 客服按钮 -->
|
<!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
|
<view class="action" @click="showChat()">
|
<button class="noButtonStyle">
|
<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
|
</button>
|
</view>
|
<!-- #endif -->
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="action">
|
<button open-type="contact" bindcontact="showChat" class="noButtonStyle" :send-message-title="goodsInfo.name" :send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id" :send-message-img="goodsInfo.image" show-message-card="true">
|
<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" space="5px" labelPos="bottom"></u-icon>
|
</button>
|
</view>
|
<!-- #endif -->
|
<view class="action" @click="redirectCart">
|
<button class="noButtonStyle">
|
<u-badge type="warning" :value="cartNums" showZero="false" absolute="true" :offset="[1, 4]"></u-badge>
|
<u-icon name="shopping-cart-fill" :size="24" label="购物车" :labelSize="12" space="1px" labelPos="bottom"></u-icon>
|
</button>
|
</view>
|
</view>
|
<view class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-5">
|
<u-button type="error" size="normal" @click="selectTap(1)" shape="square">
|
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-line-height-initial">
|
<text class="price">￥{{ product.price || '0' }}</text>
|
<text class="coreshop-font-12">单独购买</text>
|
</view>
|
</u-button>
|
<u-button type="success" size="normal" @click="selectTap(2)" shape="square" v-if="goodsInfo.pinTuanRule && goodsInfo.pinTuanRule.pinTuanStartStatus == 1">
|
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-line-height-initial">
|
<text class="price">￥{{ pinTuanPrice || '0' }}</text>
|
<text class="coreshop-font-12">发起拼团</text>
|
</view>
|
</u-button>
|
<u-button type="primary" size="normal" shape="square" v-if="goodsInfo.pinTuanRule && goodsInfo.pinTuanRule.pinTuanStartStatus == 2">
|
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-line-height-initial">
|
<text class="price">￥{{ pinTuanPrice || '0' }}</text>
|
<text class="coreshop-font-12">即将开团</text>
|
</view>
|
</u-button>
|
<u-button type="default" size="normal" shape="square" v-if="goodsInfo.pinTuanRule && goodsInfo.pinTuanRule.pinTuanStartStatus == 3">
|
<view class="coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-line-height-initial">
|
<text class="price">￥{{ pinTuanPrice || '0' }}</text>
|
<text class="coreshop-font-12">拼团已结束</text>
|
</view>
|
</u-button>
|
</view>
|
</view>
|
</view>
|
|
<!--弹出框-->
|
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
|
<view class="radius coreshop-bg-white">
|
<!--标题-->
|
<view class="coreshop-text-black coreshop-text-center coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-font-lg coreshop-title-bar">
|
<text>{{modalTitle}}</text>
|
</view>
|
<!--内容区域-->
|
<view class="coreshop-modal-content">
|
<!--服务区域-->
|
<view class="coreshop-common-view-box service" v-if="modalType=='service'">
|
<view v-for="(item, index) in serviceDescription.service" :key="index">
|
<view class="coreshop-font-md coreshop-padding-bottom-10 coreshop-padding-top-10 coreshop-flex-direction-row">
|
<u-icon name="checkmark-circle" color="#e54d42" :label="item.title" labelSize="15px" label-pos="right"></u-icon>
|
</view>
|
<view class="coreshop-font-sm coreshop-text-gray coreshop-padding-bottom-5 coreshop-padding-top-5">
|
{{item.description}}
|
</view>
|
</view>
|
</view>
|
<!--促销区域-->
|
<view class="coreshop-common-view-box promotion" v-if="modalType=='promotion'">
|
<view class="text-view" v-for="(item, index) in promotion" :key="index">
|
<text class="cu-tag line-orange radius sm">{{item.name}}</text>
|
<text class="coreshop-margin-left-10 u-line-5 coreshop-text-black">{{item.name}}</text>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</u-popup>
|
|
|
<vk-data-goods-sku-popup v-model="skuSingleKey" border-radius="20" :amount-type="0" :localdata="goodsSkuInfo" mode="3" @open="openSkuSinglePopup" @close="closeSkuSinglePopup" @buy-now="buyNowForSingle" buy-now-text="单独购买"></vk-data-goods-sku-popup>
|
|
<vk-data-goods-sku-popup v-model="skuKey" border-radius="20" :amount-type="0" :localdata="discountsGoodsSkuInfo" mode="3" @open="openSkuPopup" @close="closeSkuPopup" @buy-now="buyNow" buy-now-text="发起拼团"></vk-data-goods-sku-popup>
|
|
<!-- 右边浮动球 -->
|
<coreshop-fab horizontal="right" vertical="bottom" direction="vertical"></coreshop-fab>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
|
</template>
|
<script>
|
import { mapState } from 'vuex';
|
|
|
export default {
|
|
data() {
|
return {
|
// 是否打开SKU弹窗
|
skuKey: false,
|
skuSingleKey: false,
|
// 后端返回的商品信息
|
goodsSkuInfo: {},
|
discountsGoodsSkuInfo: {},
|
goodsId: 0, // 商品id
|
pinTuanId: 0, // 拼团ID
|
goodsInfo: {}, // 商品详情
|
cartNums: 0, // 购物车数量
|
product: {}, // 货品详情
|
shopRecommendData: [], // 本店推荐数据
|
goodsParams: [], // 商品参数信息
|
goodsComments: [], // 商品评论信息
|
commentsCount: 0, // 商品评论信息
|
pinTuanType: 2, // 1单独购买 2拼团
|
type: 2,
|
cartType: this.$globalConstVars.paymentType.pinTuan,
|
isfav: false, // 商品是否收藏
|
//拼团列表滑动数据
|
swiperSet: {
|
indicatorDots: false,
|
autoplay: false,
|
interval: 2000,
|
duration: 500,
|
groupHeight: '',
|
},
|
pinTuanpop: false,
|
pinTuanPrice: 0,
|
discountAmount: 0, //拼团优惠金额
|
price: 0,
|
teamCount: 0, //已经有多少人拼团
|
pinTuanRecord: [], //拼团列表
|
|
teamId: 0, //去参团的teamid
|
teamInfo: {
|
teams: [],
|
lastTime: 0 //被邀请拼团倒计时
|
},
|
bottomModal: false,
|
modalTitle: '',
|
modalType: 'promotion',
|
selectType: '',
|
shareUrl: this.$globalConstVars.shareUrl,
|
shareBox: false,
|
serviceDescription: {
|
commonQuestion: [],
|
delivery: [],
|
service: [],
|
},
|
timeData: {},
|
};
|
},
|
onLoad(e) {
|
this.pinTuanId = e.id;
|
if (e.teamId && e.teamId > 0) {
|
this.teamId = e.teamId;
|
this.getTeam(this.teamId);
|
}
|
if (this.pinTuanId) {
|
this.getServiceDescription();
|
this.getGoodsInfo();
|
this.getGoodsParams();
|
this.getGoodsComments();
|
} else {
|
this.$refs.uToast.show({
|
message: '获取失败', type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
}
|
// 获取购物车数量
|
this.getCartNums();
|
//获取随机推荐数据
|
this.getGoodsRecommendList();
|
},
|
computed: {
|
...mapState({
|
hasLogin: state => state.hasLogin,
|
userInfo: state => state.userInfo,
|
}),
|
hasLogin: {
|
get() {
|
return this.$store.state.hasLogin;
|
},
|
set(val) {
|
this.$store.commit('hasLogin', val);
|
}
|
},
|
userInfo: {
|
get() {
|
return this.$store.state.userInfo;
|
},
|
set(val) {
|
this.$store.commit('userInfo', val);
|
}
|
},
|
pointSwitch() { return this.$store.state.config.pointSwitch },
|
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
|
pointShowName() { return this.$store.state.config.pointShowName },
|
pointGetModel() { return this.$store.state.config.pointGetModel },
|
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
shopName() {
|
return this.$store.state.config.shopName;
|
},
|
shareTitle() {
|
return this.$store.state.config.shareTitle;
|
},
|
shopLogo() {
|
return this.$store.state.config.shopLogo;
|
},
|
// 获取店铺联系人手机号
|
shopMobile() {
|
return this.$store.state.config.shopMobile || 0;
|
},
|
// 判断商品是否是多规格商品 (为了兼容小程序 只能写在计算属性里面了)
|
isSpes() {
|
if (this.product.hasOwnProperty('defaultSpecificationDescription') && this.product.defaultSpecificationDescription && Object.keys(this.product.defaultSpecificationDescription).length) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
// 优惠信息重新组装
|
promotion() {
|
let arr = [];
|
if (this.product.promotionList) {
|
for (let k in this.product.promotionList) {
|
arr.push(this.product.promotionList[k]);
|
}
|
}
|
return arr;
|
},
|
shareHref() {
|
let pages = getCurrentPages();
|
let page = pages[pages.length - 1];
|
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
|
return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.goodsId + '&pinTuanId=' + this.pinTuanId;
|
// #endif
|
},
|
defaultSpesDesc() {
|
return this.product.defaultSpecificationDescription;
|
}
|
},
|
methods: {
|
wapperClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
imageClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
onChange(e) {
|
this.timeData = e
|
},
|
|
// 立即购买
|
buyNow(selectShop) {
|
var that = this;
|
uni.showLoading({
|
title: '加载中'
|
});
|
if (!this.hasLogin) {
|
uni.hideLoading();
|
this.$store.commit('showLoginTip', true);
|
return false;
|
}
|
if (selectShop.buy_num > 0) {
|
let data = {
|
ProductId: selectShop._id,
|
Nums: selectShop.buy_num,
|
type: 2,
|
cartType: this.cartType,
|
objectId: this.pinTuanId,
|
teamId: this.teamId
|
};
|
this.$u.api.addCart(data).then(res => {
|
if (res.status) {
|
let cartIds = res.data;
|
if (this.teamId == 0) {
|
this.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds) + '&orderType=' + this.cartType + '&objectId=' + this.pinTuanId);
|
} else {
|
this.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds) + '&orderType=' + this.cartType + '&objectId=' + this.pinTuanId + '&teamId=' + this.teamId);
|
}
|
uni.hideLoading();
|
} else {
|
this.$u.toast(res.msg);
|
uni.hideLoading();
|
}
|
});
|
}
|
that.closeSkuPopup();
|
},
|
// 立即购买
|
buyNowForSingle(selectShop) {
|
var that = this;
|
uni.showLoading({
|
title: '加载中'
|
});
|
if (!this.hasLogin) {
|
uni.hideLoading();
|
this.$store.commit('showLoginTip', true);
|
return false;
|
}
|
if (selectShop.buy_num > 0) {
|
let data = {
|
productId: selectShop._id,
|
nums: selectShop.buy_num,
|
type: 2,
|
cartType: this.$globalConstVars.paymentType.common
|
}
|
this.$u.api.addCart(data).then(res => {
|
if (res.status) {
|
let cartIds = res.data;
|
that.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds));
|
uni.hideLoading();
|
} else {
|
this.$u.toast(res.msg);
|
uni.hideLoading();
|
}
|
});
|
}
|
that.closeSkuPopup();
|
},
|
getServiceDescription() {
|
let _this = this;
|
this.$u.api.getServiceDescription().then(res => {
|
if (res.status == true) {
|
_this.serviceDescription.commonQuestion = res.data.commonQuestion;
|
_this.serviceDescription.delivery = res.data.delivery;
|
_this.serviceDescription.service = res.data.service;
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
},
|
// 获取商品详情
|
getGoodsInfo() {
|
let data = {
|
id: this.pinTuanId,
|
data: true,
|
};
|
// 如果用户已经登录 要传用户token
|
let userToken = this.$db.get('userToken');
|
if (userToken) {
|
data.token = userToken
|
}
|
let _this = this;
|
_this.$u.api.pinTuanGoodsInfo(data).then(res => {
|
if (res.status) {
|
if (res.data.length < 1) {
|
_this.$refs.uToast.show({
|
message: '该商品不存在，请返回重新选择商品。', type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
} else if (res.data.isMarketable == false) {
|
_this.$refs.uToast.show({
|
message: '该商品已下架，请返回重新选择商品。', type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
} else {
|
let info = res.data;
|
this.product = res.data.product;
|
this.goodsId = info.id;
|
_this.goodsInfo = info;
|
this.goodsSkuInfo = res.data.skuList;
|
|
let sku = uni.$u.deepClone(res.data.skuList);
|
let discountAmount = res.data.pinTuanRule.discountAmount;
|
for (var i = 0; i < sku.sku_list.length; i++) {
|
sku.sku_list[i].price = sku.sku_list[i].price - discountAmount;
|
}
|
this.discountsGoodsSkuInfo = sku;
|
|
if (_this.goodsInfo.album) {
|
var albums = [];
|
for (var i = 0; i < _this.goodsInfo.album.length; i++) {
|
let album = {
|
url: _this.goodsInfo.album[i],
|
type: 'image'
|
}
|
albums.push(album);
|
}
|
_this.goodsInfo.album = albums;
|
if (_this.goodsInfo.video) {
|
let videoObj = {
|
url: _this.goodsInfo.video,
|
poster: _this.goodsInfo.image,
|
type: 'video'
|
}
|
_this.goodsInfo.album.unshift(videoObj);
|
_this.autoplay = false;
|
}
|
}
|
|
_this.discountAmount = parseFloat(info.pinTuanRule.discountAmount).toFixed(2);
|
|
_this.isfav = _this.goodsInfo.isfav;
|
_this.price = _this.pinTuanPrice = parseFloat(_this.product.price - _this.discountAmount).toFixed(2);
|
|
// 获取拼团记录
|
// 获取拼团记录
|
let pinTuanData = info.pinTuanRecord;
|
let newData = new Array();
|
for (var k = 0; k < pinTuanData.length; k++) {
|
if (k == 0 || k % 2 == 0) {
|
if (k + 1 < pinTuanData.length) {
|
var a = [pinTuanData[k], pinTuanData[k + 1]];
|
} else {
|
var a = [pinTuanData[k]];
|
}
|
newData.push(a);
|
}
|
}
|
pinTuanData.length < 2 ? (_this.swiperSet.groupHeight = 'groupHeight') : (_this.swiperSet.groupHeight = '');
|
if (pinTuanData.length > 1) {
|
_this.swiperSet.autoplay = true;
|
}
|
_this.pinTuanRecord = newData;
|
_this.teamCount = info.pinTuanRecordNums;
|
// 判断如果登录用户添加商品浏览足迹
|
if (userToken) {
|
_this.goodsBrowsing();
|
}
|
|
|
|
}
|
}
|
});
|
},
|
// 获取推荐商品信息
|
getGoodsRecommendList() {
|
let _this = this;
|
let recommenddata = {
|
id: 10,
|
data: true
|
}
|
_this.$u.api.getGoodsRecommendList(recommenddata).then(res => {
|
if (res.status) {
|
_this.shopRecommendData = _this.$u.randomArray(res.data);
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
});
|
},
|
// 获取通过分享进来的拼团数据
|
getTeam(id) {
|
this.$u.api.getOrderPinTuanTeamInfo(
|
{
|
teamId: id
|
}).then(res => {
|
if (res.status) {
|
this.teamInfo = res.data;
|
if (res.data.status == 1) {
|
this.pinTuanShow();
|
} else {
|
this.teamId = 0;
|
}
|
} else {
|
this.$u.toast(res.msg);
|
}
|
}
|
);
|
},
|
// 获取购物车数量
|
getCartNums() {
|
let userToken = this.$db.get('userToken');
|
if (userToken && userToken != '') {
|
// 获取购物车数量
|
this.$u.api.getCartNum().then(res => {
|
if (res.status) {
|
this.cartNums = res.data;
|
}
|
});
|
}
|
},
|
// 商品收藏/取消
|
collection() {
|
let data = {
|
id: this.goodsInfo.id
|
};
|
this.$u.api.goodsCollection(data).then(res => {
|
if (res.status) {
|
this.isfav = !this.isfav;
|
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false });
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
},
|
// 获取商品参数信息
|
getGoodsParams() {
|
this.$u.api.goodsParams(
|
{
|
id: this.goodsId
|
}).then(res => {
|
if (res.status == true) {
|
this.goodsParams = res.data;
|
}
|
}
|
);
|
},
|
// 获取商品评论信息
|
getGoodsComments() {
|
let data = {
|
page: 1,
|
limit: 5,
|
id: this.goodsId,
|
}
|
this.$u.api.goodsComment(data).then(res => {
|
if (res.status == true) {
|
let _list = res.data.list;
|
this.commentsCount = res.data.commentsCount;
|
// 如果评论没有图片 在这块作处理否则控制台报错
|
_list.forEach(item => {
|
if (!item.hasOwnProperty('images')) {
|
this.$set(item, 'images', [])
|
}
|
});
|
this.goodsComments = [...this.goodsComments, ..._list];
|
} else {
|
console.log("错误2");
|
this.$u.toast(res.msg);
|
}
|
})
|
},
|
|
// 添加商品浏览足迹
|
goodsBrowsing() {
|
let data = {
|
id: this.goodsInfo.id
|
};
|
this.$u.api.addGoodsBrowsing(data).then(res => { });
|
},
|
end(index, number) {
|
this.pinTuanRecord[index][number].isOverdue = true;
|
},
|
goShare() {
|
this.shareBox = true;
|
},
|
closeShare() {
|
this.shareBox = false;
|
},
|
// 拼团弹出层
|
pinTuanShow() {
|
this.pinTuanpop = true;
|
},
|
pinTuanHiiden() {
|
this.pinTuanpop = false;
|
},
|
// 图片点击放大
|
clickImg(index) {
|
if (this.goodsInfo.album[index].type == 'image') {
|
uni.previewImage({
|
urls: [this.goodsInfo.album[index].url],
|
});
|
}
|
},
|
//在线客服
|
showChat() {
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
this.$u.route('/pages/member/customerService/index');
|
// #endif
|
},
|
//获取分享URL
|
getShareUrl() {
|
let data = {
|
client: this.$globalConstVars.shareClient.wxMiNiProgram,
|
url: this.$globalConstVars.shareUrl,
|
type: this.$globalConstVars.shareModel.url,
|
page: this.$globalConstVars.shareType.pinTuan,
|
params: {
|
groupId: this.pinTuanId,
|
goodsId: this.goodsId,
|
teamId: this.teamId
|
}
|
};
|
this.$u.api.share(data).then(res => {
|
this.shareUrl = res.data
|
});
|
},
|
serviceTap() {
|
this.modalTitle = "说明";
|
this.modalType = 'service';
|
this.showModal();
|
},
|
promotionTap() {
|
this.modalTitle = "促销优惠";
|
this.modalType = 'promotion';
|
this.showModal();
|
},
|
// 显示modal弹出框
|
selectTap(type, teamId) {
|
if (this.pinTuanpop) {
|
this.pinTuanpop = false;
|
}
|
this.pinTuanType = type;
|
if (teamId) {
|
this.teamId = teamId;
|
} else {
|
this.teamId = 0;
|
}
|
if (this.pinTuanType == 2) {
|
this.price = this.pinTuanPrice;
|
} else {
|
this.price = this.product.price;
|
}
|
if (type === 1) {
|
this.openSkuSinglePopup();
|
} else if (type === 2) {
|
this.openSkuPopup();
|
}
|
},
|
// 打开sku弹出
|
openSkuPopup() {
|
this.skuKey = true;
|
this.skuSingleKey = false;
|
},
|
closeSkuPopup() {
|
this.skuKey = false;
|
this.skuSingleKey = false;
|
},
|
openSkuSinglePopup() {
|
this.skuSingleKey = true;
|
this.skuKey = false;
|
},
|
closeSkuSinglePopup() {
|
this.skuSingleKey = false;
|
this.skuKey = false;
|
},
|
showModal() {
|
this.bottomModal = true;
|
},
|
hideModal(e) {
|
this.bottomModal = false;
|
this.modalTitle = "";
|
this.modalType = '';
|
},
|
},
|
watch: {
|
goodsId: {
|
handler() {
|
this.getShareUrl();
|
},
|
deep: true
|
},
|
teamId: {
|
handler() {
|
this.getShareUrl();
|
},
|
deep: true
|
}
|
},
|
//分享
|
onShareAppMessage(res) {
|
return {
|
title: this.goodsInfo.name,
|
imageUrl: this.goodsInfo.image,
|
path: this.shareUrl
|
}
|
},
|
onShareTimeline(res) {
|
return {
|
title: this.goodsInfo.name,
|
imageUrl: this.goodsInfo.image,
|
path: this.shareUrl
|
}
|
},
|
};
|
</script>
|
<style lang="scss">
|
@import "details.scss";
|
image { display: block; }
|
</style>
|
