<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-border-radius-9" v-if="goodsInfo.groupPromotionResult">
|
<u-alert title="当前团购活动规则：" type="warning" effect="dark" closable="true" :description="goodsInfo.groupPromotionResult"></u-alert>
|
</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">{{ product.price || '0.00' }}</text>
|
<text class="coreshop-font-12 coreshop-text-gray coreshop-text-through coreshop-margin-left-8">¥{{ product.mktprice }}</text>
|
</view>
|
<view class="coreshop-flex coreshop-text-left coreshop-justify-center coreshop-align-center">
|
<view class="coreshop-text-right coreshop-time-right">
|
<u-count-down :time="goodsInfo.groupTimestamp*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.buyCount || '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-flex-direction-row coreshop-padding-top-10" 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 class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10" @tap="openSkuPopup">
|
<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">
|
<text class="coreshop-font-sm">{{ product.spesDesc || ''}}</text>
|
</view>
|
<view class="coreshop-basis-1">
|
<view class="coreshop-float-right">
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!--评论-->
|
<view class="coreshop-margin-top-10 coreshop-bg-white coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-10" v-if="goodsComments.length">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-md">评价（{{commentsCount}}）</text>
|
</view>
|
<view class="coreshop-basis-7"></view>
|
<view class="coreshop-basis-1">
|
<view class="coreshop-float-right">
|
<u-icon name="arrow-right" @tap="goGoodComments(goodsInfo.id)"></u-icon>
|
</view>
|
</view>
|
</view>
|
<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="13"></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-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>
|
|
<!-- 分享弹窗 -->
|
<view class="coreshop-padding-0">
|
<u-popup mode="bottom" :show="shareBox" ref="share">
|
<!-- #ifdef MP-WEIXIN -->
|
<coreshop-share-wx :shareType='$globalConstVars.shareType.group' :groupId="groupId" :goodsId="goodsInfo.id" :shareImg="goodsInfo.image" :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.group' :groupId="groupId" :goodsId="goodsInfo.id" :shareImg="goodsInfo.image" :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>
|
|
|
<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>
|
|
|
|
<!--占位底部距离-->
|
<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" 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="openSkuPopup" shape="circle" color="#f37b1d">立即团购</u-button>
|
</view>
|
</view>
|
</view>
|
|
<vk-data-goods-sku-popup ref="skuPopup"
|
v-model="skuKey"
|
border-radius="20"
|
:amount-type="0"
|
:localdata="goodsSkuInfo"
|
mode="3"
|
@add-cart="addCart"
|
@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 { mapMutations, mapActions, mapState } from 'vuex';
|
|
export default {
|
|
data() {
|
return {
|
// 是否打开SKU弹窗
|
skuKey: false,
|
// 后端返回的商品信息
|
goodsSkuInfo: {},
|
goodsId: 0, // 商品id
|
groupId: 0, // 团购ID
|
goodsInfo: {}, // 商品详情
|
cartNums: 0, // 购物车数量
|
product: {}, // 规格详情
|
goodsParams: [], // 商品参数信息
|
goodsComments: [], // 商品评论信息
|
commentsCount: 0, // 商品评论信息
|
shopRecommendData: [], // 本店推荐数据
|
type: 2,
|
cartType: this.$globalConstVars.paymentType.group,
|
isfav: false, // 商品是否收藏
|
//拼团列表滑动数据
|
swiperSet: {
|
indicatorDots: false,
|
autoplay: false,
|
interval: 2000,
|
duration: 500,
|
groupHeight: '',
|
},
|
bottomModal: false,
|
modalTitle: '',
|
modalType: 'promotion',
|
selectType: '',
|
shareUrl: this.$globalConstVars.shareUrl,
|
shareBox: false,
|
serviceDescription: {
|
commonQuestion: [],
|
delivery: [],
|
service: [],
|
},
|
timeData: {},
|
};
|
},
|
onLoad(e) {
|
this.groupId = e.id;
|
if (this.groupId) {
|
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;
|
},
|
// 优惠信息重新组装
|
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 + '&groupId=' + this.groupId;
|
// #endif
|
}
|
},
|
methods: {
|
wapperClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
imageClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
onChange(e) {
|
this.timeData = e
|
},
|
// 打开sku弹出
|
openSkuPopup() {
|
this.skuKey = true;
|
},
|
closeSkuPopup() {
|
this.skuKey = false;
|
},
|
// 立即购买
|
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: this.type,
|
cartType: this.cartType,
|
objectId: this.groupId
|
};
|
this.$u.api.addCart(data).then(res => {
|
if (res.status) {
|
let cartIds = res.data;
|
this.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds) + '&orderType=' + this.cartType + '&objectId=' + this.groupId);
|
uni.hideLoading();
|
} else {
|
this.$u.toast(res.msg);
|
uni.hideLoading();
|
}
|
});
|
}
|
that.closeSkuPopup();
|
},
|
getServiceDescription() {
|
let _this = this;
|
this.$u.api.getServiceDescription().then(res => {
|
console.log(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.groupId,
|
type: this.cartType,
|
needSku: true,
|
};
|
// 如果用户已经登录 要传用户token
|
let userToken = this.$db.get('userToken');
|
if (userToken) {
|
data.token = userToken;
|
}
|
let _this = this;
|
this.$u.api.groupInfo(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.goodsInfo = info;
|
_this.goodsId = info.id;
|
this.goodsSkuInfo = res.data.skuList;
|
|
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.isfav = _this.goodsInfo.isfav;
|
_this.type = _this.goodsInfo.groupType;
|
|
// 判断如果登录用户添加商品浏览足迹
|
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)
|
}
|
});
|
},
|
// 获取购物车数量
|
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 {
|
this.$u.toast(res.msg);
|
}
|
})
|
},
|
// 添加商品浏览足迹
|
goodsBrowsing() {
|
let data = {
|
id: this.goodsInfo.id
|
};
|
this.$u.api.addGoodsBrowsing(data).then(res => { });
|
},
|
// 点击弹出框确定按钮事件处理
|
clickHandle() {
|
if (!this.hasLogin) {
|
this.$store.commit('showLoginTip', true);
|
return false;
|
}
|
this.submitStatus = true;
|
this.buyNow();
|
},
|
goShare() {
|
this.shareBox = true;
|
},
|
closeShare() {
|
this.shareBox = 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.group,
|
params: {
|
groupId: this.groupId
|
}
|
};
|
let userToken = this.$db.get('userToken');
|
if (userToken && userToken != '') {
|
data.token = userToken
|
}
|
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();
|
},
|
showModal() {
|
this.bottomModal = true;
|
},
|
hideModal(e) {
|
this.bottomModal = false;
|
this.modalTitle = "";
|
this.modalType = '';
|
},
|
},
|
watch: {
|
goodsId: {
|
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">
|
image { display: block; }
|
</style>
|
