jiuyiUniapp/shop/pages/product/product.vue

1693 lines
49 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<template>
<view class="product">
<view class="rf-product-detail">
<!--顶部返回按钮-->
<!--#ifdef MP-WEIXIN-->
<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
<!--#endif-->
<!--header-->
<view class="detail" v-if="sku.name">
<!--顶部商品轮播图-->
<view class="carousel">
<swiper indicator-dots circular="true" duration="400" controls touchable>
<!--#ifdef APP-PLUS-->
<swiper-item class="swiper-item" v-if="productDetail.video">
<video muted :poster="productDetail.videoPic" object-fit="contain" :src="productDetail.video"></video>
</swiper-item>
<!--#endif-->
<swiper-item class="swiper-item" v-for="(item, index) in productDetail.images" :key="index">
<view class="image-wrapper">
<image :src="item" class="loaded" mode="aspectFill"></image>
</view>
<uni-tag class="content" circle size="small" :text="`${index + 1} / ${productDetail.images.length}`"></uni-tag>
</swiper-item>
</swiper>
</view>
<!--商品信息-->
<view class="introduce-section">
<view class="introduce-first-line">
<view class="price-box">
<view class="price-first-line">
<image class="member-level" v-if="productDetail.memberPrice" mode="aspectFit" :src="vipPrice">
</image>
<text class="tag" :class="'text-' + themeColor.name" v-if="productDetail.marketings[0]">{{productDetail.marketings[0].type |filterMarkingType}}</text>
<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ currentProductPrice }}</text>
</view>
<view class="m-price-wrapper">
价格 <text class="m-price">{{ moneySymbol }}{{ sku.price }}</text>
<span v-if="sku.commissionRate>0"> 一级佣金 {{ moneySymbol }}{{ sku.price*sku.commissionRate }}</span>
</view>
</view>
<view class="m-price-wrapper" v-if="productDetail.marketings[0] && productDetail.marketings[0].type=='10'">
<rf-count-down :show-day="true" :second="second(productDetail.marketings[0].endTime)" color="#FFFFFF"
:background-color="themeColor.color" :border-color="themeColor.color" />
</view>
<view class="collect" @tap="toFavorite">
<view class="iconfont" :class="[ favorite ? `text-${themeColor.name} iconshixin1` : 'iconguanzhu']"></view>
<text>收藏</text>
</view>
</view>
<view class="introduce-second-line">
<view class="title">
<text>{{ sku.name }}</text>
<text class="sketch">{{ productDetail.sketch }}</text>
</view>
<view class="share">
<rf-tag type="gray" size="small" tui-tag-class="tui-tag-share tui-size" shape="circleLeft">
<button class="share-btn" open-type="share" :class="'text-' + themeColor.name" @tap.stop="share()">
<text class="iconfont iconfenxiang"></text>
<text class="tui-share-text tui-gray">分享</text>
</button>
</rf-tag>
</view>
</view>
<view class="data" v-if="product">
<text class="item">快递: {{ productDetail.shipping_type === '1' ? '包邮' : '买家自付' }}</text>
<text class="item">库存 {{ productDetail.stock }}</text>
<text class="item in1line">{{Areaaddress}}</text>
</view>
</view>
<!--商品参数-->
<view class="c-list">
<!--商品库存-->
<rf-item-popup title="商品库存" :isEmpty="(currentStock || productDetail.stock)=== 0" empty="库存不足">
<view slot="content">
{{ currentStock || productDetail.stock || 0 }} {{ productDetail.unit || '件' }}
</view>
</rf-item-popup>
<!--满减送
<rf-item-popup
v-if="productDetail.fullGiveRule.length > 0"
title="满减送"
@hide="hideService"
@show="
showPopupService(
'fullGiveClass',
productDetail.fullGiveRule
)
"
:specClass="fullGiveClass"
>
<view slot="content" class="con-list">
<text :class="'text-' + themeColor.name">{{ productDetail.fullGiveRule[0] }}</text>
</view>
<view slot="right" v-if="productDetail.fullGiveRule.length > 0"
><text class="iconfont iconyou"></text
></view>
<view slot="popup" class="service">
<view class="content">
<view
class="row"
v-for="(item, index) in productDetail.fullGiveRule"
:key="index"
>
<text>{{ item }}</text>
</view>
</view>
<button class="btn" :class="'bg-' + themeColor.name" @tap="hideService">完成</button>
</view>
</rf-item-popup>
-->
<!--满包邮
<rf-item-popup
v-if="productDetail.fullMail && productDetail.fullMail.is_open === '1' && productDetail.shipping_type !== '1'"
title="满包邮"
>
<view slot="content" :class="'text-' + themeColor.name">{{ productDetail.fullMail.full_mail_money }}元包邮</view>
</rf-item-popup> -->
<!--购买类型-->
<rf-item-popup title="购买类型" @hide="hideService" :specClass="specClass" @show="toggleSpec">
<view slot="content">
<text class="selected-text" v-if="currentSkuName === singleSkuText">{{ currentCartCount }} {{ productDetail.unit || '' }}</text>
<text class="selected-text" v-else-if="currentSkuName">{{ currentSkuName }} * {{ currentCartCount }}</text>
<text class="selected-text" v-else>请选择规格</text>
</view>
<view slot="right"><text class="iconfont iconyou"></text></view>
<view slot="popup" @click.stop="stopPrevent">
<rf-attr-content :type="type" :product="product" :minNum="minNum" :maxNum="maxNum" @toggle="toggleSpec"></rf-attr-content>
</view>
</rf-item-popup>
<!-- 拼团数据 -->
<view class="eva-section" v-if="productDetail.marketings[0] && productDetail.marketings[0].type=='10' && productGroupList">
<view class="e-header">
<text class="tit">{{ productGroupList.length || 0 }}人在拼单,可直接参与</text>
<text class="tip" v-if="productGroupList.length>0" @tap="toGroupList">查看更多</text>
<text class="tip" v-else>暂无拼单信息</text>
<i class="iconfont iconyou"></i>
</view>
<view class="eva-box" v-for="(item, index) in productGroupList" :key="index" v-if="productGroupList && productGroupList.length > 0">
<image class="portrait" :src="
item.customerPic || headImg "
mode="aspectFill"></image>
<image v-if="item.groupMemberOrders && item.groupMemberOrders.length > 0"
v-for="(item1, index1) in item.groupMemberOrders" :key="index1"
class="portrait" :src="
item1.customerPic || headImg "
mode="aspectFill"></image>
<view class="right">
<view class="bot">
<text class="attr">还差{{
(item.groupNum-1-item.groupMemberOrders.length)
}}人拼成</text>
<text class="time">
<rf-count-down :show-day="false" :second="secondToday(item.payTime)" color="#FFFFFF" :background-color="themeColor.color"
:border-color="themeColor.color" />
</text>
<button class="btn" :class="'bg-' + themeColor.name" @tap="showColorModal(item)">
去拼单
</button>
</view>
</view>
</view>
</view>
<!--优惠券-->
<rf-item-popup title="优惠券" @hide="hideService" :specClass="couponClass" @show="showPopupService('couponClass', productDetail.coupons)"
:isEmpty="productDetail.coupons.length === 0" empty="暂无可领取优惠券">
<view slot="content">
<text class="con t-r">领取优惠券</text>
</view>
<view slot="right" v-if="productDetail.coupons.length > 0"><text class="iconfont iconyou"></text></view>
<view slot="popup" class="service">
<!-- 优惠券列表 -->
<view class="sub-list valid">
<view class="row" v-for="(item, index) in productDetail.coupons" :key="index" @tap.stop="getCoupon(item)">
<view class="carrier">
<view class="title">
<view>
<text class="cell-icon" :class="'bg-' + themeColor.name">{{
parseInt(item.type, 10) === 1 ? '满减' : '直降'
}}</text>
<text class="cell-title">{{ item.name }}</text>
</view>
<view :class="'text-' + themeColor.name">
<text class="price" v-if="item.type === 1">{{ moneySymbol }}{{ item.couponFull.price }}</text>
<text class="price-discount" v-else>直降{{ item.couponFall && item.couponFall.price }}</text>
</view>
</view>
<view class="term">
<text>{{ item.startTime }} ~ {{ item.endTime }}</text>
<text class="at_least" v-if="item.type === 1">{{ item.couponFull.fullPrice }}可用</text>
</view>
<view class="usage">
<text>
{{
parseInt(item.status, 10) === 1
? '已领完'
: '未领完'
}}
</text>
<view>
{{
`每人限领${item.limitNum}`
}}
总数 {{ item.num }}
<text class="last" v-if="item.percentage">剩余{{ item.percentage }}%</text>
</view>
</view>
</view>
</view>
</view>
</view>
</rf-item-popup>
<!--商品促销-->
<rf-item-popup v-if="productDetail.marketings[0]" title="商品促销" @hide="hideService" :specClass="marketingClass"
@show="showPopupService('marketingClass', productDetail.marketings)" :isEmpty="productDetail.marketings.length === 0"
empty="暂无商品促销">
<view slot="content">
<text class="con t-r">{{ productDetail.marketings[0].marketingDesc || '查看商品促销' }}</text>
</view>
<view slot="right" v-if="productDetail.marketings.length > 0"><text class="iconfont iconyou"></text></view>
<view slot="popup" class="service">
<!-- 商品促销列表 -->
<view class="sub-list valid">
<view class="row" v-for="(item, index) in productDetail.marketings" :key="index">
<view class="carrier">
<view class="title">
<view>
<text class="cell-icon" :class="'bg-' + themeColor.name">11</text>
<text class="cell-title">{{ item.type |filterMarkingType }}</text>
<text class="cell-title" v-if="item.type === '2'">{{ item.marketingDesc }}</text>
</view>
<view :class="'text-' + themeColor.name">
<text class="price" v-if="item.type === '1'">直降{{ moneySymbol }}{{ item.fall.price }}</text>
<text v-else-if="item.type === '2'" v-for="(item1, index1) in item.fullGifts[0].giftSkuInfos" :key="index1">
<view class="description"> {{ item1.sku.name }}</view>
</text>
<text v-else-if="item.type === '4'" v-for="(item2, index2) in item.fullDowns" :key="index2">
<view class="description">{{item2.fullPrice}} {{ item2.price }}</view>
</text>
<text v-else-if="item.type === '5'" v-for="(item3, index3) in item.fullDiscounts" :key="index3">
<view class="description">{{item3.fullPrice}}{{ item3.discount*10 }}</view>
</text>
<text class="price" v-if="item.type === '10'">{{ item.groupMarketing.groupNum }}人成团限购{{ item.groupMarketing.limitNum }}</text>
</view>
</view>
<view class="term">
<text>{{ item.startTime }} ~ {{ item.endTime }}</text>
<text class="at_least" v-if="item.type === 1">{{ item.couponFull.fullPrice }}可用</text>
</view>
<view class="usage" v-if="item.type === '7' && item.preSale">
<text>
定金{{ moneySymbol }}{{ sku.price*item.preSale.depositPre/100 }}
</text>
<view>
尾款{{ moneySymbol }}{{ (sku.price*(1-item.preSale.depositPre/100)).toFixed(2) }}
</view>
</view>
</view>
</view>
</view>
</view>
</rf-item-popup>
<!--限购说明-->
<rf-item-popup title="限购说明" v-if="type === 'buy_now' && parseInt(productDetail.max_buy, 10) > 0">
<view slot="content">
<text>{{ `${productDetail.max_buy} ${productDetail.unit || '件'}` }}</text>
</view>
</rf-item-popup>
<!--积分活动-->
<rf-item-popup title="积分活动" v-if="productDetail.point_exchange_type == '1'">
<view slot="content" class="con-list">
<text v-if="productDetail.point_exchange_type">兑换类型: {{ productDetail.point_exchange_type | pointExchangeTypeFilter }}</text>
<text v-if="parseInt(productDetail.give_point, 10) > 0">赠送类型: {{ productDetail.integral_give_type | integralGiveTypeFilter }}</text>
<text v-if="parseInt(productDetail.give_point, 10) > 0">下单可获得: {{ product | givePointFilter }}积分</text>
<text v-if="productDetail.point_exchange != 0">兑换所需积分: {{ productDetail.point_exchange }}
</text>
<text v-if="productDetail.max_use_point != 0">可使用抵扣积分: {{ productDetail.max_use_point }}</text>
<text class="buy-now" @tap="addCart('buy', true)" v-if="productDetail.point_exchange_type == 3">积分兑换 >>
</text>
</view>
</rf-item-popup>
<!--服务-->
<rf-item-popup v-if="productDetail.spuServiceSupports.length > 0" title="服务" @hide="hideService" @show="showPopupService('serviceClass', productDetail.spuServiceSupports)"
:specClass="serviceClass">
<view slot="content">
<text>{{ productDetail.spuServiceSupports[0].serviceSupport.name }}</text>
</view>
<view slot="right" v-if="productDetail.spuServiceSupports.length > 0"><text class="iconfont iconyou"></text></view>
<view slot="popup" class="service">
<view class="content">
<view class="row" v-for="(item, index) in productDetail.spuServiceSupports" :key="index">
<view class="description">{{ item.serviceSupport.name }}</view>
</view>
</view>
<button class="btn" :class="'bg-' + themeColor.name" @tap="hideService">完成</button>
</view>
</rf-item-popup>
<!--商品参数-->
<rf-item-popup title="商品参数" @hide="hideService" @show="
showPopupService(
'attributeValueClass',
productDetail.spuAttributeValues
)
"
:specClass="attributeValueClass" v-if="productDetail.spuAttributeValues.length > 0">
<view slot="content">
<text>
{{
`${productDetail.spuAttributeValues &&
productDetail.spuAttributeValues[0] &&
productDetail.spuAttributeValues[0]
.attributeName}: ${productDetail.spuAttributeValues &&
productDetail.spuAttributeValues[0] &&
productDetail.spuAttributeValues[0].attributeValue}`
}}</text>
</view>
<view slot="right" v-if="productDetail.spuAttributeValues.length > 0"><text class="iconfont iconyou"></text></view>
<view slot="popup" class="service">
<view class="content">
<view class="row" v-for="(item, index) in productDetail.spuAttributeValues" :key="index">
<view class="title">
{{ `${item.attributeName}: ${item.attributeValue}` }}
</view>
</view>
</view>
<button class="btn" :class="'bg-' + themeColor.name" @tap="hideService">完成</button>
</view>
</rf-item-popup>
</view>
<!-- #ifdef MP-WEIXIN -->
<ad unit-id="adunit-2360481bbd1bd497" ad-type="video" ad-theme="white"></ad>
<!-- #endif -->
<view class="eva-section">
<view class="eva-box" @tap="joinStore()">
<image class="portrait" :src="
store.avatarPicture ||
headImg "
mode="aspectFill"></image>
<view class="right">
<view class="name">
<text>
{{
store.storeName
}}
</text>
</view>
<text class="con in2line">{{
store.companyName ||
'商城自营'
}}</text>
<view class="bot">
<text class="attr">联系方式{{
store.contactPhone ||
'13146587711'
}}</text>
<button :class="'bg-' + themeColor.name" @tap="joinStore()">
进店逛逛
</button>
</view>
</view>
</view>
</view>
<!-- 评价 -->
<view class="eva-section" @tap="toEvaluateList">
<view class="e-header">
<text class="tit">评价({{ commentCount.allCommentCount || 0 }})</text>
<text class="tip" v-if="commentList">好评率 {{ commentCount.goodPert || 0 }}%</text>
<text class="tip" v-else>暂无评价信息</text>
<i class="iconfont iconyou"></i>
</view>
<view class="eva-box" v-if="commentList && commentList.length > 0">
<image class="portrait" :src="
(commentList &&
commentList[0] &&
commentList[0].customerImage) ||
headImg
"
mode="aspectFill"></image>
<view class="right">
<view class="name">
<text>
{{
(commentList &&
commentList[0] &&
commentList[0].customerName) ||
'匿名用户'
}}
</text>
<rf-rate v-if="evaluateList.length > 0" size="16" disabled="true" :value="evaluateList[0].score" :active-color="themeColor.color" />
</view>
<text class="con in2line">{{
(commentList &&
commentList[0] &&
commentList[0].comment) ||
'这个人很懒,什么都没留下~'
}}</text>
<view class="bot">
<text class="attr">购买类型{{
(commentList &&
commentList[0] &&
commentList[0].sku_name) ||
singleSkuText
}}</text>
<text class="time">{{
commentList &&
commentList[0] &&
commentList[0].createTime
}}</text>
</view>
</view>
</view>
</view>
<!--底部商品详情-->
<view class="detail-desc">
<view class="d-header">
<text>商品详情</text>
</view>
<rf-parser :html="productDetail.mobileDesc" lazy-load></rf-parser>
</view>
<!-- 底部操作菜单 -->
<view class="page-bottom">
<view class="page-bottom-bth-wrapper">
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
<i class="iconfont iconzhuyedefuben"></i>
<text>首页</text>
</navigator>
<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn cart">
<i class="iconfont icongouwuche2"></i>
<text>购物车</text>
<rf-badge v-if="hasLogin && cartNum && cartNum > 0" type="error" size="small" class="badge" :text="cartNum"></rf-badge>
</navigator>
<!-- #ifdef MP-WEIXIN -->
<button open-type="contact" class='contacButton'>
<view style="padding-bottom: 8rpx;" class="item">
<view class="iconfont iconkefu2"></view>
<text>客服</text>
</view>
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<view @tap="kefuShowCli" class="action-btn" open-type="contact">
<i class="iconfont iconkefu2"></i>
<text>客服</text>
</view>
<!-- #endif -->
</view>
<view class="action-btn-group" v-if="(currentStock || productDetail.stock)> 0">
<button v-if="productDetail.marketings[0] && productDetail.marketings[0].type=='7'" class="action-btn" :class="'bg-' + themeColor.name"
:disabled="buyBtnDisabled" @tap="addCart('buy')">
<text>支付定金</text>
</button>
<button v-if="!productDetail.marketings[0] || (productDetail.marketings[0] && (productDetail.marketings[0].type!='10' && productDetail.marketings[0].type!='7'))"
:disabled="addCartBtnDisabled" class="action-btn" :class="'bg-' + themeColor.name" @tap="addCart('cart')">
加入购物车
</button>
<button v-if="!productDetail.marketings[0] || (productDetail.marketings[0] && (productDetail.marketings[0].type!='10' && productDetail.marketings[0].type!='7'))"
class="action-btn" :class="'bg-' + themeColor.name" :disabled="buyBtnDisabled" @tap="addCart('buy')">
立即购买
</button>
<button v-if="productDetail.marketings[0] && productDetail.marketings[0].type=='10'" class="btnIn2Line" :class="'bg-' + themeColor.name"
:disabled="buyBtnDisabled" @tap="addCart('buy')">
{{ moneySymbol }}{{ productDetail.marketings[0].groupMarketing.price }}拼单
</button>
</view>
<view class="action-btn-group" v-else>
<button v-if="(currentStock || productDetail.stock)=== 0" class="action-btn-submit" :disabled="buyBtnDisabled">
库存不足
</button>
</view>
</view>
</view>
<!-- 选择颜色模态框 -->
<view class="cu-modal" :class="{ show: colorModal }">
<view class="cu-dialog">
<view class="cu-bar justify-end solid-bottom">
<view class="content">参与{{groupUser.customerName}}的拼团</view>
<view class="action" @tap="colorModal = false">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="h-list">
<view class="h-item" v-for="(item, index) in groupUserList" :key="index" @tap="SetColor(item)">
<image class="h-item-img" :src="item.customerPic || headImg" mode="aspectFill"></image>
</view>
</view>
<button v-if="productDetail && productDetail.marketings[0] && productDetail.marketings[0].type=='10'" class="btnIn2Line"
:class="'bg-' + themeColor.name" @tap="addCart('buy', true,groupUser.groupId)">
<span class="text"> {{ moneySymbol }}{{ productDetail.marketings[0].groupMarketing.price }}</span>
<span class="after"> 参与拼单</span>
</button>
</view>
</view>
<!-- 分享引导 -->
<view class="popup spec show" v-if="shareClass === 'show'" @touchmove.stop.prevent="stopPrevent" @tap="hideShareSpec">
<!-- 遮罩层 -->
<view class="mask" @tap="hideShareSpec"></view>
<view class="share-bg">
<image :src="shareBg"></image>
</view>
</view>
<view class="hideCanvasView" v-if="canvasShow">
<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
</view>
<!--回到顶部-->
<rf-live v-if="sku.name"></rf-live>
<!--#ifdef MP-->
<rf-nav></rf-nav>
<!--#endif-->
<view class="popup spec show" v-if="kefuShow" @touchmove.stop.prevent="stopPrevent" @tap="hide">
<!-- 遮罩层 -->
<view class="mask" @tap="hide"></view>
<view class="kefu-bg">
<image :src="appServiceQr"></image>
</view>
</view>
</view>
<!--回到顶部-->
<rf-back-top :scrollTop="scrollTop"></rf-back-top>
<!-- 404页面 -->
<view v-if="!productDetail && !loading">
<rf-no-data :custom="true">
<view class="no-data-title">
{{ errorInfo || '暂无数据' }}
</view>
<view @tap="getProductDetail(productDetail.id)" slot="refresh" class="spec-color">重新加载</view>
</rf-no-data>
</view>
<!--顶部下拉菜单-->
<rf-nav-detail @hide="hideNavDetail" :popupShow="navDetailShow">
</rf-nav-detail>
<!--页面加载动画-->
<rfLoading isFullScreen :active="loading"></rfLoading>
</view>
</template>
<script>
/**
* @des 商品详情
*
* @author 237524947@qq.com
* @date 2020-03-23 15:04
* @copyright 2019
*/
import mConstData from '@/config/constData.config';
import indexConstData from '@/config/index.config';
import rfItemPopup from '@/components/rf-item-popup';
import moment from '@/common/moment';
import rfAttrContent from '@/components/rf-attr-content';
import rfRate from '@/components/rf-rate/rf-rate';
import rfBadge from '@/components/rf-badge/rf-badge';
import uniTag from '@/components/uni-tag/uni-tag';
import rfNav from '@/components/rf-nav';
import rfCountDown from '@/components/rf-count-down';
import rfLive from '@/components/rf-live';
import StorePoster from "@/components/StorePoster";
import {
cartItemCount,
productDetail,
cartItemCreate,
queryskucomments,
querycommentsummarize,
querystoreinfo,
productGroupDetail
} from '@/api/product';
import {
collectCreate,
collectDel,
pickupPointIndex,
transmitCreate
} from '@/api/basic';
import {
couponReceive,
addbrowserecord,
addressList
} from '@/api/userInfo';
import {
couponList,
acceptCoupon
} from '@/api/sms';
import {
mapMutations
} from 'vuex';
import rfBackTop from '@/components/rf-back-top';
import rfNoData from '@/components/rf-no-data';
export default {
components: {
StorePoster,
rfNav,
rfCountDown,
rfItemPopup,
rfBadge,
rfLive,
rfRate,
uniTag,
rfAttrContent,
rfBackTop,
rfNoData
},
data() {
return {
productDetail: {},
sku: {},
product: {},
loading: true,
errorInfo: '',
userInfo: {},
scrollTop: 0,
currentUrl: '',
navDetailShow: false,
appName: this.$mSettingConfig.appName,
appServiceQr: this.$mSettingConfig.appServiceQr,
kefuShow: false,
url: '',
favorite: false,
addressClass: 'none',
canvasShow: true,
logo: this.$mSettingConfig.appLogo,
vipPrice: this.$mAssetsPath.vipPrice,
posterShow: false,
posters: false,
serviceClass: 'none', // 服务弹窗
ladderPreferentialClass: 'none', // 阶梯优惠弹窗
attributeValueClass: 'none', // 商品参数弹窗
colorModal: false,
specClass: 'none', // 商品参数弹窗
couponClass: 'none', // 优惠券弹窗
marketingClass: 'none', // 促销弹窗
shareClass: 'none', // 分享引导弹窗
fullGiveClass: 'none', // 满减送弹窗
cartType: null, // 下单类型
couponList: [], // 优惠券列表
productGroupList: [], // 拼团列表
groupUser: {},
groupUserList: [],
commentCount: {},
commentList: [],
currentStock: 0,
currentSkuPrice: 0,
currentSkuName: null,
currentSkuId: 0,
currentCartCount: 1,
evaluateList: [],
shareInfoStatus: false,
weixinStatus: false,
mapShow: false,
mapKey: "",
posterData: {
image: "",
title: "",
price: "",
code: "",
},
posterImageStatus: false,
Areaaddress: '',
hasLogin: this.$mStore.getters.hasLogin,
cartNum: uni.getStorageSync('cartNum'),
addressTypeList: this.$mConstDataConfig.addressTypeList,
store: {},
tabCurrentIndex: 0,
loading: true,
errorInfo: '',
marketingType: this.$mConstDataConfig.marketingType,
headImg: this.$mAssetsPath.headImg,
isPointExchange: false,
groupId: 0,
shareBg: this.$mAssetsPath.shareBg,
appServiceType: this.$mSettingConfig.appServiceType,
productPosterQrType: this.$mSettingConfig.productPosterQrType,
appName: this.$mSettingConfig.appName,
shareFrom: '',
poster: {},
promoCode: '',
addressList: [],
moneySymbol: this.moneySymbol,
state: 1,
singleSkuText: this.singleSkuText,
thirdPartyQrCodeImg: ''
};
},
// #ifndef MP
onNavigationBarButtonTap(e) {
const index = e.index;
if (index === 0) {
this.navDetailShow = true;
}
},
// #endif
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 小程序分享
onShareAppMessage() {
if (!this.hasLogin) {
let userInfo = uni.getStorageSync('userInfo')
return {
title: `购买${this.sku.name},不错的选择`,
path: '/pages/product/product?id=' + this.sku.spuId + '&skuId=' + this.sku.id + '&recommondCode=' + userInfo.selfRecommendCode
};
} else {
return {
title: `购买${this.sku.name},不错的选择`,
path: '/pages/product/product?id=' + this.sku.spuId + '&skuId=' + this.sku.id
};
}
},
async onLoad(options) {
if (options.recommondCode) {
uni.setStorageSync('recommondCode', options.recommondCode)
}
this.productId = options.id;
this.currentSkuId = options.skuId || '';
this.userInfo = uni.getStorageSync('userInfo') || {};
await this.initData();
this.currentSkuId = options.skuId || this.sku.id;
// await this.getLocationInfo();
await this.getCoommentList();
if (this.productDetail && this.productDetail.marketings && this.productDetail.marketings[0] && this.productDetail.marketings[
0].type == '10') {
await this.getProductGroupList();
}
},
filters: {
time(val) {
return moment(val * 1000).format('YYYY-MM-DD HH:mm');
},
filterMarkingType(val) {
let state;
mConstData.marketingType.forEach(orderItem => {
if (orderItem.key === parseInt(val, 10)) {
state = orderItem.value;
}
});
return state + '商品';
},
pointExchangeTypeFilter(val) {
const type = [
'',
'非积分兑换',
'积分加现金',
'积分兑换或直接购买',
'只支持积分兑换'
];
return type[parseInt(val, 10)];
},
integralGiveTypeFilter(val) {
const type = ['固定积分', '百分比'];
return type[parseInt(val, 10)];
},
givePointFilter(val) {
return val.integral_give_type === '1' ?
Math.round((parseInt(val.give_point, 10) / 100) * parseInt(val.minSkuPrice, 10)) :
parseInt(val.give_point, 10);
}
},
computed: {
type() {
return 'buy_now';
},
// 购买按钮禁用
buyBtnDisabled() {
return parseInt(this.currentStock || this.productDetail.stock, 10) === 0;
},
// 添加购物车按钮禁用
addCartBtnDisabled() {
return (
this.productDetail.point_exchange_type === '2' ||
this.productDetail.point_exchange_type === '4' ||
parseInt(this.currentStock || this.productDetail.stock, 10) === 0 ||
this.productDetail.isVirtual === '1'
);
},
// 最小购买数量
minNum() {
return 1;
},
// 最小购买数量
maxNum() {
let maxNum = 0;
return maxNum;
},
favorite1() {
return !!this.productDetail.hasAtten;
},
// 计算倒计时时间
second() {
return function(val) {
return Math.floor((new Date(val) - new Date()) / 1000);
};
},
secondToday() {
return function(val) {
return Math.floor((new Date(new Date(val).getTime()+24*60*60*1000) - new Date()) / 1000);
};
},
currentProductPrice() {
let price;
if (this.type === 'buy_now') {
// eslint-disable-next-line
price = this.currentSkuPrice;
if (this.productDetail && this.productDetail.marketings && this.productDetail.marketings[0]) {
if (this.productDetail.marketings[0].type == 1) {
price = price - this.productDetail.marketings[0].fall.price
price = price < 0 ? 0 : price
} else if (this.productDetail.marketings[0].type == 7) {
price = '定金:' + price * this.productDetail.marketings[0].preSale.depositPre / 100 + ';尾款:' + (price * (1 - this.product
.marketings[
0].preSale.depositPre / 100)).toFixed(2)
} else if (this.productDetail.marketings[0].type == 14) {
price = '定金:' + price * this.productDetail.marketings[0].preSale.depositPre / 100 + ';尾款:' + (price * (1 - this.product
.marketings[
0].preSale.depositPre / 100)).toFixed(2)
} else if (this.productDetail.marketings[0].type == 10) {
price = this.productDetail.marketings[0].groupMarketing.price
}
}
return price;
}
return parseFloat(price || '0').toFixed(1);
}
},
methods: {
...mapMutations(['setCartNum']),
// 返回上一页
navBack() {
this.$mRouter.back();
},
showColorModal(item) {
this.groupUser = item;
var userInfo = uni.getStorageSync('userInfo');
let newgroupMemberOrders = [item, ...item.groupMemberOrders];
newgroupMemberOrders = [...newgroupMemberOrders, {
groupHead: 1,
customerName: userInfo.username,
customerPic: userInfo.image
}];
this.groupUserList = newgroupMemberOrders;
this.colorModal = true;
},
kefuShowCli() {
if (this.store.id == 0) {
window.location.href =
'https://kf.dycrfov.cn/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1'
} else {
window.location.href =
'https://kefu.24yc.net/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1'
}
},
setShareInfoStatus: function() {
this.shareInfoStatus = !this.shareInfoStatus;
this.posters = false;
},
shareCode: function() {
var that = this;
getProductCode(that.id).then((res) => {
that.posterData.code = res.data.code;
that.listenerActionSheet();
});
},
setPosterImageStatus: function() {
this.posterImageStatus = !this.posterImageStatus;
this.posters = false;
},
// 评论类型 -1 全部 1 好评 2 中评 3 差评
async getCoommentList() {
if(!this.productDetail.spuId){
return false;
}
await this.$http
.get(`${querycommentsummarize}`, {
spuId: this.productDetail.spuId,
type: -1
})
.then(async r => {
this.commentCount = r;
})
.catch(err => {
this.errorInfo = err;
});
await this.$http
.get(`${queryskucomments}`, {
spuId: this.productDetail.spuId,
type: -1
})
.then(async r => {
this.commentList = r.list;
})
.catch(err => {
this.errorInfo = err;
});
},
async getCouponList() {
await this.$http
.get(`${couponList}`, {
storeId: this.productDetail.storeId
})
.then(async r => {
this.couponList = r.list;
})
.catch(err => {
this.errorInfo = err;
});
},
async getProductGroupList() {
await this.$http
.get(`${productGroupDetail}`, {
marketingId: this.productDetail.marketings[0].id,
skuId: this.currentSkuId
})
.then(async r => {
this.productGroupList = r.list;
})
.catch(err => {
this.errorInfo = err;
});
},
hide() {
this.kefuShow = false;
},
// 分享商品
share() {
let userInfo = uni.getStorageSync('userInfo')
if (userInfo) {
this.url = this.$mConfig.hostUrl + '/pages/product/product?id=' + this.sku.spuId + '&skuId=' + this.sku.id +
'&recommondCode=' + userInfo.selfRecommendCode
} else {
this.url = this.$mConfig.hostUrl + '/pages/product/product?id=' + this.sku.spuId + '&skuId=' + this.sku.id
}
// #ifdef H5
if (this.$mPayment.isWechat()) {
this.shareClass = 'show';
} else {
this.$mHelper.h5Copy(this.url);
}
// #endif
// #ifdef APP-PLUS
this.$mHelper.handleAppShare(this.url, this.appName, this.productDetail.name, this.productDetail.picture);
// #endif
},
// 通用跳转
navTo(route) {
if (this.appServiceType === '1' && route === '/pages/product/service/index') {
this.kefuShow = true;
return;
}
if (!this.hasLogin) {
this.$mHelper.backToLogin();
} else {
if (this.appServiceType === '0') {
this.$mHelper.toast('暂不提供客服功能');
} else {
this.$mRouter.push({
route
});
}
}
},
// 弹窗显示
showPopupService(type, list) {
if (list.length === 0) return;
this[type] = 'show';
//this.couponClass = 'show';
},
// 关闭服务弹窗
hideService() {
this.specClass = 'none';
this.couponClass = 'none';
this.marketingClass = 'none';
this.serviceClass = 'none';
this.ladderPreferentialClass = 'none';
this.attributeValueClass = 'none';
this.fullGiveClass = 'none';
},
// 获取优惠券
async getCoupon(item) {
if (!this.hasLogin) {
await this.$mHelper.backToLogin();
return;
}
await this.$http
.get(`${acceptCoupon}`, {
id: item.id
})
.then(r => {
// 成功 -1参数不全 -2活动已过期 -3优惠券已领完 -4用户领取的优惠券已达上限 -5优惠券已失效(删除状态) -6 系统繁忙,请重试
if (r == 1) {
this.$mHelper.toast('领取成功');
} else if (r == -1) {
this.$mHelper.toast('参数不全');
return false;
} else if (r == -2) {
this.$mHelper.toast('活动已过期');
return false;
} else if (r == -3) {
this.$mHelper.toast('优惠券已领完');
return false;
} else if (r == -4) {
this.$mHelper.toast('用户领取的优惠券已达上限');
return false;
} else if (r == -5) {
this.$mHelper.toast('优惠券已失效(删除状态)');
return false;
} else if (r == -6) {
this.$mHelper.toast('系统繁忙,请重试');
return false;
}
});
},
async getLocationInfo() {
var qqKey = `${this.$mConfig.qqMapKey}`;
var _this = this;
uni.getLocation({
type: 'wgs84',
success(res) {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
uni.request({
header: {
"Content-Type": "application/text"
},
url: 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
'&key=LXFBZ-BEZC4-4W6UE-XOBM4-WHA5E-C6FHZ', //TODO
success(re) {
_this.Areaaddress = re.data.result.address;
if (re.statusCode === 200) {
} else {
}
}
});
}
});
},
toGroupList() {
this.$mRouter.push({
route: `/pages/product/grouppingList?skuId=${
this.currentSkuId
}&marketingId=${this.productDetail.marketings[0].id}`
});
},
// 跳转至评价列表
toEvaluateList() {
this.$mRouter.push({
route: `/pages/order/evaluation/list?spuId=${
this.productDetail.spuId
}&evaluateStat=${JSON.stringify(this.commentCount)}`
});
},
// 顶部tab点击
tabClick(index, state) {
this.pageNum = 0;
this.addressList.length = 0;
this.tabCurrentIndex = index;
this.state = state;
const api = (this.state === 1 ? addressList : pickupPointIndex);
this.getAddressList(api);
}, // 获取收货地址列表
async getAddressList(api) {
await this.$http
.get(api, {})
.then(r => {
this.addressList = r;
});
},
// 规格弹窗开关
toggleSpec(row) {
if (!this.productDetail.id) return;
if (this.specClass === 'show') {
this.currentStock = row.stock;
this.currentSkuPrice = row.price;
this.currentSkuId = row.skuId;
this.currentSkuName = row.skuName;
this.currentCartCount = row.cartCount;
const skuId = row.skuId;
this.getProductDetail();
if (this.productDetail.marketings[0] && this.productDetail.marketings[0].type == '10') {
this.getProductGroupList();
}
if (parseInt(this.currentStock, 10) === 0) {
this.$mHelper.toast('库存不足');
return;
}
if (this.cartType === 'cart') {
this.handleCartItemCreate(skuId, this.productDetail.spuId);
} else if (this.cartType === 'buy') {
this.buy(skuId);
}
this.cartType = null;
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
} else if (this.specClass === 'none') {
this.specClass = 'show';
}
},
// 海报弹窗开关
listenerActionSheet: function() {
if (isWeixin() === true) {
this.weixinStatus = true;
}
this.posters = true;
},
listenerActionClose: function() {
this.posters = false;
},
hideSpec() {
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
},
hideShareSpec() {
this.shareClass = 'hide';
setTimeout(() => {
this.shareClass = 'none';
}, 250);
},
// 添加商品至购物车
async handleCartItemCreate(skuId, spuId) {
await this.$http
.post(`${cartItemCreate}`, {
spuId: spuId,
skuId: skuId,
num: this.currentCartCount
})
.then(() => {
this.$mHelper.toast('添加购物车成功');
this.$http.get(`${cartItemCount}`).then(r => {
this.setCartNum(r);
this.cartNum = r;
});
});
},
// 收藏
async toFavorite() {
if (!this.productDetail.id) return;
if (!this.hasLogin) {
this.specClass = 'none';
await this.$mHelper.backToLogin();
} else {
this.favorite ? this.handleCollectDel() : this.handleCollectCreate();
this.favorite = !this.favorite
}
},
// 收藏商品
async handleCollectCreate() {
await this.$http
.get(`${collectCreate}`, {
skuId: this.productDetail.id
})
.then(() => {
this.$mHelper.toast('收藏成功');
this.$emit('product');
});
},
// 取消收藏商品
async handleCollectDel() {
await this.$http
.delete(`${collectDel}?skuId=${this.productDetail.id}`)
.then(() => {
this.$mHelper.toast('取消收藏成功');
this.$emit('product');
});
},
async buy(skuId) {
const params = {};
params.skuInfo = skuId + ',' + this.currentCartCount;
params.isGroup = 0;
params.ids = '';
if (this.productDetail.marketings[0] && this.productDetail.marketings[0].type == '10') {
params.isGroup = 1;
if (this.groupId != 0) {
params.groupId = this.groupId;
}
}
if (
this.productDetail.point_exchange_type === '2' ||
this.productDetail.point_exchange_type === '4' ||
(this.productDetail.point_exchange_type === '3' &&
this.isPointExchange)
) {
params.type = 'point_exchange';
} else {
params.type = this.type;
}
this.$mRouter.push({
route: `/pages/order/create/order?data=${JSON.stringify(params)}&promo_code=${this.promoCode}`
});
},
joinStore() {
if (this.store.id == 0) {
uni.switchTab({
url: '/pages/index/index'
});
} else {
this.$mRouter.push({
route: `/pages/index/storeDetail?id=${this.store.id}`
});
}
},
addCart(type, isPointExchange, groupId) {
this.colorModal = false;
if (!this.productDetail.id) return;
if (!this.hasLogin) {
this.$mHelper.backToLogin();
return;
}
this.specClass = 'show';
this.cartType = type;
this.groupId = groupId;
this.isPointExchange = isPointExchange;
},
stopPrevent() {},
// 隐藏顶部导航
hideNavDetail() {
this.navDetailShow = false;
},
// 数据初始化
async initData() {
if (this.userInfo.promo_code) {
this.currentUrl =
`${this.$mConfig.hostUrl}/pages/product/product?id=${this.productId}&promo_code=${this.userInfo.promo_code}`;
} else {
this.currentUrl = `${this.$mConfig.hostUrl}/pages/product/product?id=${this.productId}`;
}
this.hasLogin = this.$mStore.getters.hasLogin;
await this.getProductDetail();
},
// 获取产品详情
async getProductDetail() {
await this.$http
.get(`${productDetail}`, {
goodsId: this.productId,
skuId: this.currentSkuId == undefined ? '' : this.currentSkuId
})
.then(async r => {
this.loading = false;
this.productDetail = r;
this.product = r;
if (!this.productDetail) {
this.$mHelper.toast('商品不存在或者已下架');
return false;
}
this.favorite = this.productDetail.hasAtten
this.sku = r.sku;
this.store = r.storeScore.storeInfo
this.currentStock = this.sku.stock;
this.currentSkuPrice = this.sku.price;
this.currentSkuId = this.sku.id;
await this.addbrowserecord(this.sku.id)
uni.setNavigationBarTitle({
title: this.sku.name
});
// await this.$mHelper.handleWxH5Share(this.appName, this.sku.name, this.currentUrl, r.picture);
})
.catch(err => {
this.loading = false;
this.errorInfo = err;
});
},
async addbrowserecord(skuId) {
await this.$http
.get(`${addbrowserecord}`, {
skuId: skuId
})
.then(async r => {
})
.catch(err => {
this.loading = false;
this.errorInfo = err;
});
},
},
};
</script>
<style scoped lang="scss">
page {
background: $page-color-base;
}
.rf-product-detail {
.back-btn {
position: fixed;
left: 40upx;
z-index: 9999;
padding-top: var(--status-bar-height);
top: 40upx;
font-size: 40upx;
color: $font-color-dark;
}
.carousel {
height: 722upx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
image {
width: 100%;
height: 100%;
}
.content {
position: absolute;
right: $spacing-base;
bottom: $spacing-base;
}
}
}
.detail {
padding-bottom: 60upx;
}
.service {
padding: $spacing-base $spacing-lg 0;
.row {
font-size: $font-lg;
margin-bottom: $spacing-sm;
}
}
.selected-text {
margin-right: 4upx;
}
.sub-list {
margin: 40upx 0 80upx;
.row {
width: 100%;
margin-bottom: $spacing-lg;
}
}
.share-bg {
image {
position: fixed;
z-index: 100;
width: 70vw;
height: 45vw;
right: $spacing-base;
top: $spacing-base;
}
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.rf-list {
max-height: 60vh;
padding-bottom: 0;
margin-bottom: $spacing-sm;
}
}
// 拼团公告
.rf-swiper-slide {
margin-top: 20upx;
.label {
margin-left: 10upx;
}
}
// 玩法介绍
.play-way {
background-color: $color-white;
padding: 0 20upx;
margin: 20upx 0;
font-size: $font-base;
.title {
border-bottom: 1px solid #eee;
padding: $spacing-base 0;
display: flex;
justify-content: space-between;
.iconfont {
margin-left: 0.13rem;
font-size: 0.28rem;
color: #717171;
}
}
.way {
font-size: $font-base - 2upx;
padding: 20upx 0;
display: flex;
.item {
flex: 1;
text-align: center;
.tip {
font-size: 0.22rem;
color: #a5a5a5;
}
}
.arrow {
width: 40upx;
.iconfont {
color: $font-color-light;
font-weight: 100;
}
}
}
}
.assemble {
background-color: #fff;
.assemble-item {
height: 120upx;
border-bottom: 1px solid #f0f0f0;
.pictxt {
display: flex;
justify-content: space-between;
.picture {
display: flex;
image {
width: 80upx;
height: 80upx;
margin: 20upx 0;
border-radius: 50%;
}
.text {
line-height: 120upx;
margin-left: 20upx;
}
}
.right {
display: flex;
align-items: center;
.time-wrapper {
text-align: right;
margin-right: 20upx;
.lack {
font-size: $font-sm;
.font-color-red {
margin: 0 4upx;
}
}
.time {
font-size: $font-sm;
color: $font-color-light;
}
}
.spellBnt {
font-size: $font-sm;
width: 120upx;
height: 48upx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 48upx;
}
}
}
}
}
.c-list {
font-size: $font-sm + 2upx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20upx 30upx;
position: relative;
}
.tit {
width: 140upx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10upx;
}
}
.bz-list {
height: 40upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
text {
display: inline-block;
margin-right: 30upx;
}
}
.con-list {
flex: 1;
display: flex;
flex-direction: column;
color: $font-color-dark;
line-height: 40upx;
.buy-now {
color: $uni-color-primary;
}
}
.red {
color: $uni-color-primary;
}
}
.kefu-bg {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 98;
image {
width: 60vw;
height: 60vw;
border-radius: 12upx;
z-index: 98;
}
}
}
.user-info-box {
height: 180upx;
display: flex;
align-items: center;
position: relative;
z-index: 1;
justify-content: space-between;
.portrait-box {
display: flex;
align-items: center;
.portrait {
width: 130upx;
height: 130upx;
border: 5upx solid #fff;
border-radius: 50%;
}
.username {
font-size: $font-lg + 6upx;
color: $color-white;
margin-left: 20upx;
}
button {
background-color: transparent;
font-size: $font-lg + 6upx;
color: $font-color-dark;
border: none;
}
button::after {
border: none;
}
}
}
.h-list {
white-space: nowrap;
padding: 20upx 30upx 0;
.h-item {
display: inline-block;
font-size: $font-sm;
color: $font-color-base;
width: 160upx;
margin-right: 20upx;
border-radius: 10upx;
.h-item-img {
width: 160upx;
height: 160upx;
}
.h-item-text {
font-size: $font-sm;
}
}
}
</style>