<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>
|
<!--幻灯片-->
|
<u-swiper height="calc(750rpx * 6 / 6)" radius="0" :list="goodsInfo.album" :autoplay="autoplay" indicator indicatorMode="line" circular @click="clickImg"></u-swiper>
|
|
<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>
|
</view>
|
<view class="coreshop-flex coreshop-text-left coreshop-margin-left-12 coreshop-margin-top-6 coreshop-justify-start coreshop-align-center">
|
<view class="coreshop-font-16 coreshop-text-gray coreshop-text-through">¥{{ priceSection }}</view>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-margin-top-12" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && product.pointsDeduction > 0">
|
<view class="coreshop-padding-bottom-5 coreshop-font-12">
|
兑换价：{{pointDiscountedProportion * product.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(product.price-product.pointsDeduction).toFixed(2)}}元
|
</view>
|
<view class="coreshop-font-12 coreshop-margin-left-12" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">买就送：{{product.points}}{{ pointShowName}}</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-column coreshop-margin-left-12" v-else>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row">
|
<view class="coreshop-font-12" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">买就送：{{product.points}}{{ pointShowName}}</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" v-if="promotion.length > 0" @tap="promotionTap">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-gray">促销</text>
|
</view>
|
<view class="coreshop-basis-7">
|
<view v-for="(item, index) in promotion" :key="index" :class="index> 1 ? 'coreshop-margin-top-10':''">
|
<text class="cu-tag line-orange sm radius">{{item.name}}</text>
|
</view>
|
</view>
|
<view class="coreshop-basis-1">
|
<view class="coreshop-float-right">
|
<u-icon name="arrow-right-double"></u-icon>
|
</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" @tap="promotionListTap" v-if="promotionList.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="info-circle" size="12" labelSize="12" color="#e54d42" :label="item.name" v-for="(item, index) in promotionList" :key="index" style="margin-right: 10px; margin-bottom: 10px;"></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="promotionList.length>0" />
|
<!--服务-->
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10" @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-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white" v-if="userAgent && userAgentGrade">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
|
<view class="coreshop-basis-4">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">代理价格</text>
|
</view>
|
<view class="coreshop-basis-6">
|
<view class="coreshop-float-right">
|
您的等级：{{userAgentGrade.name}}
|
</view>
|
</view>
|
</view>
|
<view v-if="agentProducts.length">
|
<view class="goods-agent-box">
|
<view class="goods-agent-line">
|
<view class="name coreshop-line-height-34">
|
<text>货品名称</text>
|
</view>
|
<view class="productPrice coreshop-line-height-34">
|
<text>销售价</text>
|
</view>
|
<view class="agentGradePrice coreshop-line-height-34">
|
<text>代理价</text>
|
</view>
|
<view class="profit coreshop-line-height-34">
|
<text>利润</text>
|
</view>
|
</view>
|
<view class="goods-agent-line" v-for="(item, index) in agentProducts" :key="index">
|
<view class="name coreshop-line-height-24 coreshop-padding-4">
|
<text>{{item.name}}</text>
|
</view>
|
<view class="productPrice coreshop-display-flex coreshop-align-center coreshop-justify-center">
|
<text>{{item.productPrice}}</text>
|
</view>
|
<view class="agentGradePrice coreshop-display-flex coreshop-align-center coreshop-justify-center">
|
<text>{{item.agentGradePrice}}</text>
|
</view>
|
<view class="profit coreshop-display-flex coreshop-align-center coreshop-justify-center">
|
<text>{{ parseFloat(item.productPrice-item.agentGradePrice).toFixed(2)}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-font-12 coreshop-line-height-34">
|
注：此利润不为最终用户下单后利润，因为订单可能存在优惠。
|
</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">
|
<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>
|
|
<!-- 分享弹窗 -->
|
<view class="coreshop-padding-0">
|
<u-popup mode="bottom" :show="shareBox" ref="share">
|
<!-- #ifdef MP-WEIXIN -->
|
<coreshop-share-wx :shareType='$globalConstVars.shareType.goods' :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.goods' :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>
|
|
<!--占位底部距离-->
|
<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="coreshop-border-radius-20 coreshop-flex coreshop-align-end coreshop-flex-sub">
|
<view class="btn-add-shopcar" @click="openSkuPopup">
|
<text>加入购物车</text>
|
</view>
|
<view class="btn-buy" @click="openSkuPopup">
|
<text>立即购买</text>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<!--弹出框-->
|
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" @close="hideModal" :closeable="true" :safeAreaInsetTop="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" style="max-height: calc(100vh - 327.5px); overflow-y: auto; ">
|
<!--服务区域-->
|
<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 class="coreshop-common-view-box promotion" v-if="modalType=='promotionList'">
|
<view class="coreshop-solid coreshop-padding-10 coreshop-margin-bottom-10" v-for="(item, index) in promotionList" :key="index">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-bottom-10">
|
<u--text :text="'活动'+(index+1)+'：'+item.name" size="17" bold="true" :lines="2"></u--text>
|
</view>
|
<u-line margin="10rpx 0"></u-line>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-top-8" v-if="item.conditions">
|
<view class="coreshop-text-grey coreshop-font-14 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
|
<view class="coreshop-margin-right-5">
|
<u-icon name="setting" size="18"></u-icon>
|
</view>
|
<view class="coreshop-text-grey coreshop-font-13 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
|
满足条件：<view class="coreshop-text-red">要求同时满足下面所有条件</view>
|
</view>
|
</view>
|
</view>
|
<u-line margin="10rpx 0"></u-line>
|
<view class="coreshop-flex coreshop-flex-direction coreshop-justify-start">
|
<text class="coreshop-font-sm coreshop-margin-bottom-5 coreshop-margin-top-5" style="line-height: 20px;" v-for="(itemC, indexC) in item.conditions" :key="indexC">
|
条件{{indexC+1}} ：{{itemC}}
|
</text>
|
</view>
|
<u-line margin="10rpx 0"></u-line>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-top-8" v-if="item.results">
|
<view class="coreshop-text-grey coreshop-font-14 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
|
<view class="coreshop-margin-right-5">
|
<u-icon name="bell" size="18"></u-icon>
|
</view>
|
<view class="coreshop-text-grey coreshop-font-13 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
|
活动结果：<view class="coreshop-text-red">{{item.results[0]}}</view>
|
</view>
|
</view>
|
</view>
|
<u-line margin="10rpx 0"></u-line>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-bottom-10">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
|
<view class="coreshop-margin-right-5">
|
<u-icon name="calendar" size="18"></u-icon>
|
</view>
|
<view class="coreshop-text-grey coreshop-font-13">
|
活动时间：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd hh:MM')}} 至 {{$u.timeFormat(item.endTime, 'yyyy-mm-dd hh:MM')}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
|
|
<vk-data-goods-sku-popup ref="skuPopup"
|
v-model="skuKey"
|
border-radius="20"
|
:amount-type="0"
|
:localdata="goodsSkuInfo"
|
:mode="skuMode"
|
@open="onOpenSkuPopup"
|
@close="onCloseSkuPopup"
|
@add-cart="addCart"
|
@buy-now="buyNow"></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,
|
// SKU弹窗模式
|
skuMode: 1,
|
// 后端返回的商品信息
|
goodsSkuInfo: {},
|
goodsId: 0, // 商品id
|
goodsInfo: {}, // 商品详情
|
cartNums: 0, // 购物车数量
|
product: {}, // 货品详情
|
priceSection: '',
|
shopRecommendData: [], // 本店推荐数据
|
goodsParams: [], // 商品参数信息
|
goodsComments: [], // 商品评论信息
|
commentsCount: 0, // 商品评论信息
|
type: 2, // 1加入购物车 2购买
|
cartType: this.$globalConstVars.paymentType.common,
|
isfav: false, // 商品是否收藏
|
bottomModal: false,
|
modalTitle: '',
|
modalType: 'promotion',
|
selectType: '',
|
shareUrl: this.$globalConstVars.shareUrl,
|
shareBox: false,
|
serviceDescription: {
|
commonQuestion: [],
|
delivery: [],
|
service: [],
|
},
|
autoplay: true,
|
userAgent: {},
|
userAgentGrade: {},
|
agentProducts: [],
|
promotionList: [],
|
}
|
},
|
onLoad(options) {
|
//获取商品ID
|
if (options.id != '') {
|
this.goodsId = options.id;
|
}
|
if (this.goodsId) {
|
this.getServiceDescription();
|
this.getGoodsDetail();
|
this.getGoodsParams();
|
this.getGoodsComments();
|
} else {
|
this.$refs.uToast.show({
|
message: '获取失败', type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
}
|
// 获取购物车数量
|
this.getCartNums();
|
//获取推荐商品数据
|
this.getGoodsRecommendList();
|
|
var _this = this
|
if (this.$db.get('userToken')) {
|
this.$u.api.userInfo().then(res => {
|
if (res.status) {
|
_this.userInfo = res.data
|
_this.hasLogin = true;
|
// #ifdef MP-WEIXIN
|
//微信小程序打开客服时，传递用户信息
|
var kefupara = {}
|
kefupara.nickName = res.data.nickname
|
kefupara.tel = res.data.mobile
|
_this.kefupara = JSON.stringify(kefupara)
|
// #endif
|
}
|
})
|
};
|
this.getPromotionList();
|
},
|
onShow() {
|
},
|
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;
|
// #endif
|
},
|
},
|
methods: {
|
wapperClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
imageClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
// 打开sku弹出
|
openSkuPopup() {
|
this.skuKey = true;
|
},
|
closeSkuPopup() {
|
this.skuKey = false;
|
},
|
// sku组件监听
|
onOpenSkuPopup() {
|
//console.log("监听 - 打开sku组件");
|
},
|
onCloseSkuPopup() {
|
//console.log("监听 - 关闭sku组件");
|
},
|
// 加入购物车按钮
|
addCart(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: 1,
|
}
|
this.$u.api.addCart(data).then(res => {
|
if (res.status) {
|
uni.hideLoading();
|
that.getCartNums(); // 获取购物车数量
|
that.$refs.uToast.show({ message: res.msg, type: 'success' });
|
} else {
|
that.$u.toast(res.msg);
|
uni.hideLoading();
|
}
|
});
|
}
|
that.closeSkuPopup();
|
},
|
// 立即购买
|
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
|
}
|
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
|
});
|
}
|
})
|
}
|
})
|
},
|
// 获取商品详情
|
getGoodsDetail() {
|
let _this = this;
|
let data = {
|
id: parseInt(this.goodsId),
|
data: true
|
}
|
// 如果用户已经登录 要传用户token
|
let userToken = this.$db.get("userToken");
|
if (userToken) {
|
this.$u.api.goodsDetailByToken(data).then(res => {
|
if (res.status == true) {
|
let info = res.data;
|
_this.product = res.data.product;
|
_this.goodsInfo = info;
|
_this.goodsSkuInfo = res.data.skuList;
|
if (res.otherData.agentProducts) {
|
for (var i = 0; i < res.otherData.agentProducts.length; i++) {
|
for (var j = 0; j < res.data.skuList.sku_list.length; j++) {
|
if (res.data.skuList.sku_list[j]._id == res.otherData.agentProducts[i].productId) {
|
res.otherData.agentProducts[i].name = res.data.skuList.sku_list[j].sku_name_arr[0];
|
break;
|
}
|
}
|
}
|
console.log(res.otherData.agentProducts);
|
_this.agentProducts = res.otherData.agentProducts;
|
}
|
|
if (res.otherData && res.otherData.userAgentGrade) {
|
_this.userAgentGrade = res.otherData.userAgentGrade;
|
} else {
|
_this.userAgentGrade = null;
|
}
|
|
if (res.otherData && res.otherData.userAgent) {
|
_this.userAgent = res.otherData.userAgent;
|
} else {
|
_this.userAgent = null;
|
}
|
|
//价格区间
|
if (res.data.minPrice != res.data.maxPrice) {
|
_this.priceSection = res.data.minPrice + '~' + res.data.maxPrice;
|
} else {
|
_this.priceSection = res.data.product.mktprice;
|
}
|
|
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 = res.data.isFav;
|
// 判断如果登录用户添加商品浏览足迹
|
if (userToken) {
|
_this.goodsBrowsing();
|
}
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
} else {
|
this.$u.api.goodsDetail(data).then(res => {
|
if (res.status == true) {
|
_this.goodsInfo = res.data;
|
_this.product = res.data.product;
|
_this.goodsSkuInfo = res.data.skuList;
|
|
if (res.otherData && res.otherData.userAgentGrade) {
|
_this.userAgentGrade = res.otherData.userAgentGrade;
|
} else {
|
_this.userAgentGrade = null;
|
}
|
|
if (res.otherData && res.otherData.userAgent) {
|
_this.userAgent = res.otherData.userAgent;
|
} else {
|
_this.userAgent = null;
|
}
|
|
//价格区间
|
if (res.data.minPrice != res.data.maxPrice) {
|
_this.priceSection = res.data.minPrice + '~' + res.data.maxPrice;
|
} else {
|
_this.priceSection = res.data.product.mktprice;
|
}
|
|
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 = res.data.isFav;
|
// 判断如果登录用户添加商品浏览足迹
|
if (userToken) {
|
_this.goodsBrowsing();
|
}
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
}
|
},
|
// 获取推荐商品信息
|
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 => { });
|
},
|
// 跳转到h5分享页面
|
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.goods,
|
params: {
|
goodsId: this.goodsInfo.id,
|
}
|
};
|
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();
|
},
|
promotionListTap() {
|
this.modalTitle = "全平台促销优惠";
|
this.modalType = 'promotionList';
|
this.showModal();
|
},
|
showModal() {
|
this.bottomModal = true;
|
},
|
hideModal(e) {
|
this.bottomModal = false;
|
this.modalTitle = "";
|
this.modalType = '';
|
},
|
getPromotionList() {
|
let data = {
|
id: this.$globalConstVars.promotionType.promotion,
|
};
|
this.$u.api.getPromotionList(data).then(res => {
|
if (res.status) {
|
this.promotionList = res.data;
|
}
|
console.log(data);
|
});
|
},
|
},
|
watch: {
|
goodsInfo: {
|
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>
|
