Huanyuyuehui/pages/goods_details/index.vue

2430 lines
72 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :style="viewColor">
<view class="product-con">
<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
<view class="head-menu">
<view class='iconfont icon-fanhui2' @click="returns"></view>
<view class="iconfont icon-gengduo5" @click="showNav"></view>
</view>
</view>
<!-- 导航小图标 -->
<view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
<view class="dialog_nav_item" :class="item.after" v-for="(item,index) in selectNavList" :key="index"
@click="linkPage(item.url)">
<text class="iconfont" :class="item.icon"></text>
<text class="pl-20">{{item.name}}</text>
</view>
</view>
<view v-if="storeInfo && storeInfo.merchant">
<scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style='"height:"+height+"px;"'
@scroll="scroll">
<view id="past0">
<!-- #ifdef MP || APP-PLUS -->
<view class="" :style="'width:100%;' + 'height:'+sysHeight + 'px'"></view>
<!-- #endif -->
<productConSwiper :imgUrls="storeInfo.slider_image" :videoCoverImg="videoCoverImg" :videoline="storeInfo.video_link"></productConSwiper>
<!--有氛围图-->
<view v-if="storeInfo.atmosphere_pic" :style="{ backgroundImage: `url(${storeInfo.atmosphere_pic})` }" class='nav acea-row row-between-wrapper'>
<view class='money skeleton-rect'>¥<text class='num'>{{storeInfo.price}}</text>
<text v-if="!svipData" class='y-money'>¥{{storeInfo.ot_price}}</text>
<view class="atmosphere" v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
<text class="vip-money">¥{{storeInfo.svip_price}}</text>
<image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
</view>
</view>
</view>
<view class='wrapper'>
<view v-if="storeInfo.atmosphere_pic" class='introduce skeleton-rect acea-row atmosphere'>
<view class="title">
<text v-if="(storeInfo.merchant && storeInfo.merchant.type_name)" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
<text v-else-if="(storeInfo.merchant && storeInfo.merchant.is_trader)" class="font-bg-red bt-color">自营</text>
{{storeInfo.store_name}}
</view>
<view class="fenxiang_btn">
<view @click="setCollect"><text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏</view>
<view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
</view>
</view>
<view v-if="storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
<text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
<text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
</view>
<!--无氛围图-->
<view v-else class='share acea-row row-between row-bottom'>
<view class='money p-color skeleton-rect' style="min-width: 70rpx;">
<text class='num'>{{storeInfo.price}}</text>
<view v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
<text class="vip-money">¥{{storeInfo.svip_price}}</text>
<image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
</view>
</view>
<view class="fenxiang_btn">
<view @click="setCollect">
<text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏
</view>
<view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
</view>
</view>
<view
v-if="svipData && !svipData.is_svip && svipData.show_svip"
class="svipCon acea-row row-between-wrapper skeleton-rect" style="margin-top: 20rpx;">
<view class="acea-row row-between-wrapper">
<image :src="`${domain}/static/images/svip_user.png`"></image>
<view class="">开通 SVIP会员
<block v-if="svipData.show_svip_price">立省<text>{{svipData.save_money}}元</text></block>
<block v-else><text>省钱多多,权益多多</text></block>
</view>
</view>
<navigator class="svipBtn" url="/pages/annex/vip_paid/index">
立即开通
<text class="iconfont icon-jiantou"></text>
</navigator>
</view>
<view v-if="!storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
<text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
<text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
</view>
<view v-if="!storeInfo.atmosphere_pic" class='introduce skeleton-rect'>
<text v-if="storeInfo.merchant.type_name" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
<text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red bt-color">自营</text>
{{storeInfo.store_name || ''}}
</view>
<view class='label acea-row row-between-wrapper' :style="{'padding-bottom':coupon.list.length || storeInfo.top_pid?0 :10+'px;'}">
<view class="skeleton-rect">市场价:¥{{storeInfo.ot_price || 0}}</view>
<view class="skeleton-rect">库存:{{storeInfo.stock ? storeInfo.stock : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
<view class="skeleton-rect">销量:{{storeInfo.sales ? storeInfo.sales : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
</view>
<navigator v-if="storeInfo.top_pid" hover-class='none' :url="`/pages/activity/rank/index?cate_id=${storeInfo.top_pid}`" class='label'>
<view class="rank_list acea-row row-between-wrapper">
<view class="acea-row row-between-wrapper">
<text class="rank_title"></text>
<view>{{ storeInfo.top_name }} · 第{{ storeInfo.top_num }}名</view>
</view>
<text class="iconfont icon-xiala1"></text>
</view>
</navigator>
<view class='coupon acea-row row-between-wrapper skeleton-rect' @click='couponTap' style="margin-top: 20rpx;" v-if="coupon.list.length > 0">
<view class='hide line1 acea-row'>
优惠券:
<view class='activity' v-for="(item,index) in coupon.list" :key="index">满{{item.use_min_price}}减{{item.coupon_price}}</view>
</view>
<view class='iconfont icon-jiantou'></view>
</view>
</view>
<view class='attribute acea-row row-between-wrapper skeleton-rect' @click="selecAttr">
<view class="acea-row row-between-wrapper">{{attrTxt}}
<text class='atterTxt'>{{attrValue}}</text>
</view>
<view class='iconfont icon-jiantou'></view>
</view>
<view v-if="specsInfo.params && specsInfo.params.length>0" class="attribute acea-row row-between-wrapper" @click="seeSpecs">
<view class="acea-row row-middle">
参数:
<view class="list line1">
<text class="item params" v-for="(item,index) in specsInfo.params" :key="index"
v-if="index<2">{{item.name}}</text>
<text>...</text>
</view>
</view>
<view class="iconfont icon-jiantou"></view>
</view>
<!--运费-->
<view v-if="shipping || shippingValue" class='attribute acea-row row-between-wrapper' @click="showShip">
<view class="acea-row row-between-wrapper">运费:
<text class='atterTxt'>{{shippingValue}}</text>
</view>
<view class='iconfont icon-jiantou'></view>
</view>
<!--保障-->
<view v-if="guarantee && guarantee.length" class='attribute acea-row row-between-wrapper' @click="showGuaranee">
<view class="acea-row row-between-wrapper">保障:
<view class="guaranteeAttr">
<text class='atterTxt1' :class="item.guarantee_name ? 'hasAttr' : ''" v-for="(item,index) in guarantee">
{{item.guarantee_name ? item.guarantee_name : ''}}
</text>
</view>
</view>
<view class='iconfont icon-jiantou'></view>
</view>
</view>
<!--优惠套餐-->
<view class='combo' v-if="comboList && comboList.length>0">
<view class='title acea-row row-between-wrapper'>
<view>优惠套餐({{comboTotal}}) </view>
<view class='praise' @click="openCombo">
查看全部
<text class='iconfont icon-jiantou'></text>
</view>
</view>
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;height: 180rpx;" show-scrollbar="false">
<view class="img-box">
<view class="combo_item" v-for="(item,index) in comboList" :key="index">
<view class="img-item" v-for="(itemn,indexn) in item.discountsProduct" :key="indexn">
<image :src="itemn.image" mode="" @click="openCombo"></image>
<text v-if="indexn != item.count-1" class="iconfont icon-jiahao2"></text>
</view>
<view class="list_total">
<view class="list_num">共{{item.count}}件</view>
<view class="list_price p-color">省 ¥{{item.max_price}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class='userEvaluation' id="past1" v-if="replyCount && replyCount>0">
<view class='title acea-row row-between-wrapper skeleton-rect'>
<view>用户评价({{replyCount}})</view>
<navigator class='praise' hover-class='none' :url='"/pages/users/goods_comment_list/index?product_id="+id'>
<text class='t-color'>{{replyChance}}</text>好评率
<text class='iconfont icon-jiantou'></text>
</navigator>
</view>
<block v-if="replyCount && replyCount>0">
<userEvaluation :reply="reply"></userEvaluation>
</block>
</view>
<!-- 种草秀 -->
<view class='userPlant' v-if="storeInfo.community && storeInfo.community.length>0">
<view class='title acea-row row-between-wrapper'>
<view>种草秀 </view>
<navigator class='praise' hover-class='none' :url="'/pages/plantGrass/plant_show/index?spu_id='+storeInfo.spu_id">
查看全部
<text class='iconfont icon-jiantou'></text>
</navigator>
</view>
<view class="imgList acea-row">
<view class="pictrue" v-for="(item, index) in storeInfo.community" :key="index" v-if="index<=2"
@click="goPlant(item)">
<image :src="item.image[0]" class="image"></image>
<image v-if="item.is_type == 2" class="video_img" src="@/static/images/stop.png" mode=""></image>
</view>
</view>
</view>
<!-- 商铺信息 -->
<view class="store-wrapper" v-if="storeInfo.merchant && hide_mer_status !=1">
<view class="store-hd skeleton-rect">
<view v-if="storeInfo.merchant&&hide_mer_status != 1" class="store-info">
<navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="logo">
<image :src="storeInfo.merchant.mer_avatar" mode=""></image>
</navigator>
<navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="info">
<view class="name line1">
<text>{{storeInfo.merchant.mer_name ? storeInfo.merchant.mer_name : ''}}</text>
<image v-if="margin_ico_switch==1 && margin_ico && storeInfo.merchant.is_margin == 10" :src="margin_ico" class="store-margin"></image>
<text v-if="storeInfo.merchant.type_name" class="font-bg-red ml8 bt-color">{{storeInfo.merchant.type_name}}</text>
<text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red ml8 bt-color">自营</text>
</view>
<view v-if="storeInfo.merchant.care_count" class="txt">
{{storeInfo.merchant.care_count < 10000 ? storeInfo.merchant.care_count : (storeInfo.merchant.care_count/10000).toFixed(2)+'万'}}人关注
</view>
<view v-else class="txt">0人关注</view>
</navigator>
<navigator v-if="hide_mer_status != 1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class="link"
hover-class="none">进店</navigator>
</view>
<view class="score-wrapper">
<view class="item">
商品描述<text>{{storeInfo.merchant.product_score}}</text>
</view>
<view class="item">
卖家服务<text>{{storeInfo.merchant.service_score}}</text>
</view>
<view class="item">
物流服务<text>{{storeInfo.merchant.postage_score}}</text>
</view>
</view>
</view>
<view v-if="recommend && recommend.length > 0" class="con-box">
<view class="acea-row row-between">
<view class="title">店铺推荐</view>
<navigator v-if="hide_mer_status!=1" class="moer-btn" :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none">
查看更多<text class='iconfont icon-jiantou'></text></navigator>
</view>
<!-- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
<view class="img-box">
<view class="img-item" v-for="(item,index) in storeInfo.merchant.recommend" :key="index" @click="goProDetail(item)">
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
<view class="txt">
<view class="title line1">{{item.store_name}}</view>
<view class="price">
<text>¥</text>{{item.price}}
</view>
</view>
</view>
</view>
</scroll-view> -->
<view class="swiper page_swiper">
<swiper
indicator-dots="true"
:autoplay="false"
:circular="circular"
:interval="interval"
:duration="duration"
:current="swiperCur"
style="750rpx;"
>
<block v-for="(item,index) in recommend" :key="index">
<swiper-item class="swiper-item">
<view class="img-box">
<view class="img-item" v-for="(itm,idx) in item" :key="idx" @click="goProDetail(itm)">
<easy-loadimage mode="widthFix" :image-src="itm.image"></easy-loadimage>
<view class="txt">
<view class="title line1">{{itm.store_name}}</view>
<view class="price">
<text>¥</text>{{itm.price}}
</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
<view class='product-intro' id="past3">
<view class='title'>产品介绍</view>
<view class='conter' v-if="description">
<!-- #ifndef APP-PLUS -->
<jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view>
<!-- #endif -->
<view v-else class="product_content">
<view v-if="description.content && description.content.title" class="title">{{description.content.title}}</view>
<view v-if="description.content && description.content.image" class="pictures">
<image v-for="(item,index) in description.content.image" :key="index" :src="item"></image>
</view>
</view>
</view>
<!-- 价格说明 -->
<view v-if="priceRule.content" class="price-info">
<view class="price-title">{{priceRule.rule_name}}</view>
<!-- #ifndef APP-PLUS -->
<jyf-parser :domain='domain' :html="priceRule.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="description" v-html="priceRule.content.replace(/<br\/>/ig, '')"></view>
<!-- #endif -->
</view>
</view>
<view style='height:120rpx;'></view>
</scroll-view>
</view>
<view class='footer acea-row row-between-wrapper' :class="{'footpl':hide_mer_status==1}">
<navigator v-if="hide_mer_status !=1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class='item skeleton-rect'>
<view class='iconfont icon-dianpu2'></view>
<view>店铺</view>
</navigator>
<block v-if="storeInfo.merchant">
<view v-if="storeInfo.merchant.services_type== 0" class="item skeleton-rect" @click="goCustomer">
<view class="iconfont icon-kefu"></view>
<view>客服</view>
</view>
<view v-else class="item skeleton-rect" @click="call">
<view class="iconfont icon-kefu"></view>
<view>客服</view>
</view>
</block>
<navigator open-type='switchTab' class="animated item skeleton-rect" :class="animated==true?'bounceIn':''" url='/pages/order_addcart/order_addcart'
hover-class="none">
<view class='iconfont icon-gouwuche1'>
<text v-if="CartCount>0" class='num'>{{CartCount || 0}}</text>
</view>
<view>购物车</view>
</navigator>
<view v-if="attr.productSelect.stock != 0" class='bnt acea-row skeleton-rect'>
<form @submit="joinCart" report-submit='true'>
<button v-if="storeInfo.type != 1&&storeInfo.type != 2&&!storeInfo.mer_form_id" class='joinCart bnts' form-type="submit">加入购物车</button>
</form>
<form @submit="goBuy" report-submit='true' v-if="attr.productSelect">
<button class='buy bnts' :class="(storeInfo.type == 1 || storeInfo.type == 2 || storeInfo.mer_form_id) ? 'virtual_buy' : ''" form-type="submit" :disabled="attr.productSelect.stock == 0">立即购买</button>
</form>
</view>
<view v-else class='bnt acea-row skeleton-rect'>
<form report-submit='true'>
<button v-if="procudt_increase_status == 1" class='buy bnts sold_out' form-type="submit" @click="arrivalNotice">到货通知</button>
<button v-else class='buy bnts sold_out' form-type="submit" disabled>商品已售罄</button>
</form>
</view>
</view>
<block v-if="sharePacket.max&&sharePacket.max>0">
<shareRedPackets :sharePacket="sharePacket" @listenerActionSheet="listenerActionSheet" @closeChange="closeChange"
:showAnimate="showAnimate" @boxStatus="boxStatus"></shareRedPackets>
</block>
<!-- 组件 -->
<productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
@attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window' :payLimit="pay_limit" :maxCount="max_count" :minCount="min_count" :svipPrice="svipPrice" :image="storeInfo.image"></productWindow>
<block v-if="coupon.coupon">
<couponListWindow :coupon='coupon' @ChangCouponsClose="ChangCouponsClose" @ChangCoupons="ChangCoupons"
@ChangCouponsUseState="ChangCouponsUseState"></couponListWindow>
</block>
<specs :specsInfo="specsInfo" @myevent="mySpecs"></specs>
<!-- 分享按钮 -->
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
<!-- #ifndef MP -->
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
<view class="iconfont icon-weixin3"></view>
<view class="">发送给朋友</view>
</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
<view class="iconfont icon-weixin3"></view>
<view class="">发送给朋友</view>
</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="item" @click="appShare('WXSceneSession')">
<view class="iconfont icon-weixin3"></view>
<view class="">分享给好友</view>
</view>
<!-- #endif -->
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="goPoster">
<view class="iconfont icon-haibao"></view>
<view class="">生成海报</view>
</button>
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="copyPwd">
<view class="iconfont icon-fuzhikouling1"></view>
<view>生成口令</view>
</button>
</view>
<view class="mask" v-if="posters" @click="listenerActionClose"></view>
<view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
<!--口令复制结果-->
<copyPassword :isCopy='isCopy' :copyUrl='copyUrl' @close="closeCopy"></copyPassword>
<!-- 海报展示 -->
<view class='poster-pop' v-if="posterImageStatus">
<image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
<image :src='posterImage'></image>
<!-- #ifndef H5 -->
<view class='save-poster' @click="savePosterPath">保存到手机</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="keep">长按图片可以保存到手机</view>
<!-- #endif -->
</view>
<view class='mask' v-if="posterImageStatus"></view>
<canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox = false"></image>
</view>
<guaranteeTemplate ref="guartemplate" :guarantee='guarantee' :shipping='shipping'></guaranteeTemplate>
<!-- #ifndef H5 -->
<passwordPopup></passwordPopup>
<!-- #endif -->
<!--套餐产品弹窗-->
<discounts-goods ref="discounts" :uid="uid"></discounts-goods>
</view>
</view>
</template>
<script>
var sysHeight = uni.getSystemInfoSync().statusBarHeight;
import { arrivalSubscribe } from '@/utils/SubscribeMessage.js';
import {
getProductDetail,
getProductParmas,
getProductCode,
collectAdd,
collectDel,
postCartAdd,
arrivalNoticeApi,
copyPasswordApi, getDiscountsLst, priceRuleApi
} from '@/api/store.js';
import { getOrderConfirm } from '@/api/order.js';
import { getUserInfo, imgToBase } from '@/api/user.js';
import { getCoupons,getShopCoupons } from '@/api/api.js';
import { getCartCounts } from '@/api/order.js';
import { mapGetters } from "vuex";
import { configMap } from "@/utils";
import { imageBase64 } from "@/api/public";
import productConSwiper from '@/components/productConSwiper';
import couponListWindow from '@/components/couponListWindow';
import copyPassword from '@/components/copyPassword';
import productWindow from '@/components/productWindow';
import userEvaluation from '@/components/userEvaluation';
import shareRedPackets from '@/components/shareRedPackets';
import specs from '@/components/specs/index.vue';
import Cache from '@/utils/cache';
import { toLogin } from '@/libs/login.js';
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
// #endif
import { HTTP_REQUEST_URL } from '@/config/app';
import { CART_TIME,CART_ID} from '@/config/cache';
import home from '@/components/home';
import { silenceBindingSpread } from "@/utils";
import parser from "@/components/jyf-parser/jyf-parser";
import history from "@/mixins/history";
import shareScence from "@/libs/spread";
import guaranteeTemplate from '@/components/freightGuarantee';
import discountsGoods from './discountsGoods';
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
let app = getApp();
export default {
components: {
// #ifndef H5
passwordPopup,
// #endif
productConSwiper,
couponListWindow,
productWindow,
userEvaluation,
shareRedPackets,
home,
guaranteeTemplate,
copyPassword,
discountsGoods,
"jyf-parser": parser,
easyLoadimage,
specs,
},
mixins: [history],
data() {
let that = this;
return {
isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
sysHeight: sysHeight, //系统导航条高度
//属性是否打开
coupon: {
'coupon': false,
list: [],
},
attrTxt: '选择', //属性页面提示
attrValue: '', //已选属性
animated: false, //购物车动画
id: 0, //商品id
replyCount: 0, //总评论数量
reply: [], //评论列表
storeInfo: {
merchant: {}
}, //商品详情
productValue: [], //系统属性
couponList: [], //优惠券
cart_num: 1, //购买数量
isOpen: false, //是否打开属性组件
actionSheetHidden: true,
posterImageStatus: false,
storeImage: '', //海报产品图
PromotionCode: '', //二维码图片
canvasStatus: false, //海报绘图标签
posterImage: '', //海报路径
posterbackgd: '/static/images/posterbackgd.png',
source: '',
sharePacket: {
isState: true, //默认不显示
}, //分销商详细
// uid: 0, //用户uid
circular: false,
autoplay: false,
interval: 3000,
duration: 500,
swiperCur: 0,
clientHeight: "",
systemStore: {}, //门店信息
replyChance: 0,
CartCount: 0,
isDown: true,
storeSelfMention: true,
posters: false,
weixinStatus: false,
attr: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
description: '',
navActive: 0,
H5ShareBox: false, //公众号分享图片
activity: [],
retunTop: true, //顶部返回
navH: "",
navList: [],
opacity: 0,
scrollY: 0,
topArr: [],
toView: '',
height: 0,
heightArr: [],
lock: false,
scrollTop: 0,
tagStyle: {
img: 'width:100%;display:block;'
},
// 动画状态
showAnimate: true,
domain: HTTP_REQUEST_URL,
currSpid: '',
codeImg: "",
videoCoverImg: "",
shipping: "",
guarantee: [],
shippingValue: "",
uniqueValue: "",
priceRule: "",
isCopy: false,
copyUrl: '',
comboTotal: 0,
comboList: [],
max_count: 0,
min_count: 0,
pay_limit: 1,
svipData: {},
svipPrice: false,
specsInfo: {
show: false,
params: []
},
recommend: [],
serviceInfo: {},
currentPage: false,
homeTop: 59,
selectNavList: [{
name: '首页',
icon: 'icon-shouye8',
url: '/pages/index/index',
after: 'dialog_after'
},
{
name: '搜索',
icon: 'icon-sousuo6',
url: '/pages/columnGoods/goods_search_con/index',
after: 'dialog_after'
},
{
name: '购物车',
icon: 'icon-gouwuche7',
url: '/pages/order_addcart/order_addcart',
after: 'dialog_after'
},
{
name: '我的收藏',
icon: 'icon-shoucang3',
url: '/pages/users/user_goods_collection/index',
after: 'dialog_after'
},
{
name: '个人中心',
icon: 'icon-gerenzhongxin1',
url: '/pages/user/index'
},
],
};
},
computed:{
...configMap(['margin_ico_switch','margin_ico','hide_mer_status','procudt_increase_status','site_name','share_pic'], mapGetters(['isLogin','uid','viewColor'])),
},
onLoad(options) {
let that = this
if (options.spid) {
app.globalData.spid = options.spid;
that.currSpid = options.spid
}
var pages = getCurrentPages();
let curPage = pages[pages.length - 1];
if (pages.length <= 1) {
that.retunTop = false
}
let curParam = curPage.options || curPage.$route.query;
that.source = curParam.source;
that.navH = app.globalData.navHeight+10;
//页面中需要计算的一些值
// #ifdef APP-PLUS
that.homeTop = (that.sysHeight + 8)*2;
// #endif
// #ifdef H5
that.homeTop = 10;
// #endif
that.id = options.id;
uni.getSystemInfo({
success: function(res) {
that.height = res.windowHeight
//res.windowHeight:获取整个窗口高度为px*2为rpx98为头部占据的高度
that.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 91;
},
});
//扫码携带参数处理
// #ifdef MP
if (options.scene) {
let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
if (value.id) options.id = value.id;
//记录推广人uid
if (value.spid) {
app.globalData.spid = value.spid;
that.currSpid = value.spid
}
}
if (!options.id && !options.scene) {
return this.$util.Tips({
title: '缺少参数无法查看商品'
}, {
tab: 3,
url: 1
});
} else {
this.id = options.id
}
//记录推广人uid
if (options.spid) app.globalData.spid = options.spid;
// #endif
shareScence(that.currSpid, that.isLogin)
this.getGoodsDetails();
this.getDiscountsData();
//#ifdef H5
this.isLogin && silenceBindingSpread();
//#endif
if (this.isLogin) {
this.downloadFilePromotionCode();
this.getHistory()
}
},
onReady() {
this.isNodes++;
this.$nextTick(function() {
// #ifdef MP
const menuButton = uni.getMenuButtonBoundingClientRect();
const query = uni.createSelectorQuery().in(this);
query
.select('#home')
.boundingClientRect(data => {
this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
})
.exec();
// #endif
});
},
onShow() {
let that = this
// that.getConfig();
uni.hideLoading();
},
/**
* 用户点击右上角分享
*/
// #ifdef MP
onShareAppMessage: function() {
let that = this;
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
return {
title: that.storeInfo.store_name || '',
imageUrl: that.storeInfo.image || '',
path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid,
}
},
onShareTimeline: function() {
let that = this;
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
return {
title: that.storeInfo.store_name || '',
query: {
id: that.id,
spid: that.uid
},
imageUrl: that.storeInfo.image || ''
}
},
// #endif
methods: {
call: function(){
let that = this;
if(that.storeInfo.merchant.service_phone){
uni.showModal({
title: '提示',
content: '暂无在线客服,确定拨打客服电话:'+that.storeInfo.merchant.service_phone+'吗?',
success: function(res) {
if (res.confirm) {
uni.makePhoneCall({
// 手机号
phoneNumber: that.storeInfo.merchant.service_phone,
// 成功回调
success: (res) => {},
// 失败回调
fail: (res) => {}
});
}
}
})
}else{
return that.$util.Tips({
title: '暂无可用客服'
})
}
},
getConfig() {
let self = this
// 获取配置
getconfig().then(res => {
}).catch(err => {})
},
/**到货通知*/
arrivalNotice(){
let that = this;
// #ifdef MP
arrivalSubscribe().then((res) => {
that.arrivalNoticeFun();
}).catch(err => {
console.log(err)
});
// #endif
// #ifndef MP
that.arrivalNoticeFun();
// #endif
},
arrivalNoticeFun(){
let that = this;
let uniqueValue = that.uniqueValue;
let typeValue = 0;
// #ifdef MP
typeValue = 3
// #endif
// #ifdef H5
if(this.$wechat.isWeixin() === true){
typeValue = 2
}else{
typeValue = 1
}
// #endif
arrivalNoticeApi({ unique: uniqueValue,type:typeValue,product_id: that.id }).then(res => {
return that.$util.Tips({
title: res.message
})
}).catch(err => {
//状态异常返回上级页面
return that.$util.Tips({
title: err
})
})
},
goProDetail(item) {
uni.redirectTo({
url: '/pages/goods_details/index?id=' + item.product_id
})
},
//下拉导航页面跳转
linkPage(url) {
if (['/pages/index/index', '/pages/order_addcart/order_addcart',
'/pages/user/index', '/pages/plant_grass/index'
].indexOf(url) > -1) {
uni.switchTab({
url
})
} else {
uni.navigateTo({
url
})
}
this.currentPage = false
},
boxStatus(data) {
this.showAnimate = data
},
closeChange: function() {
this.$set(this.sharePacket, 'isState', true);
},
showNav() {
this.currentPage = !this.currentPage;
},
hideNav() {
this.currentPage = false;
},
/**查看运费说明*/
showShip: function() {
this.$refs.guartemplate.showShippingTel();
},
/**查看服务保障*/
showGuaranee: function() {
this.$refs.guartemplate.showGuaranteeTel();
},
/*查看套餐详情*/
openCombo(){
this.$refs.discounts.showPopup(this.id);
},
seeSpecs() {
this.specsInfo.show = true;
},
mySpecs() {
this.$set(this.specsInfo, 'show', false);
},
/*获取套餐列表数据*/
getDiscountsData(){
getDiscountsLst({product_id: this.id}).then(res => {
this.comboTotal = res.data.count;
res.data.list.forEach((item, index) => {
item.save_price = 0;
item.discountsProduct.forEach((v, i) => {
item.save_price += parseFloat(v.product.ot_price) - parseFloat(v.product.price)
})
})
this.comboList = res.data.list;
}).catch(err => {
});
},
/*获取价格说明*/
getPricrRule() {
priceRuleApi(this.storeInfo.cate_id).then(res => {
this.priceRule = res.data
}).catch(err => {
});
},
goActivity: function(e) {
let item = e;
if (item.type === "1") {
uni.navigateTo({
url: `/pages/activity/goods_seckill_details/index?id=${item.id}&time=${item.time}&status=1`
});
} else if (item.type === "2") {
uni.navigateTo({
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`
});
} else {
uni.navigateTo({
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
});
}
},
/**
* 购物车手动填写
*
*/
iptCartNum: function(e) {
this.$set(this.attr.productSelect, 'cart_num', e);
},
// 后退
returns: function() {
uni.navigateBack()
},
// 首页
goHome() {
uni.switchTab({
url: '/pages/index/index'
});
},
// 种草详情
goPlant(item){
if(item.is_type == 1){
uni.navigateTo({
url: '/pages/plantGrass/plant_detail/index?id='+item.community_id
});
}else{
uni.navigateTo({
//#ifdef APP
url: '/pages/short_video/appSwiper/index?id='+item.community_id+'&tab=1'
//#endif
//#ifndef APP
url: '/pages/short_video/nvueSwiper/index?id='+item.community_id+'&tab=1'
//#endif
});
}
},
tap: function(index) {
var id = "past" + index;
var index = index;
var that = this;
this.$set(this, 'toView', id);
this.$set(this, 'navActive', index);
this.$set(this, 'lock', true);
this.$set(this, 'scrollTop', index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]);
},
scroll: function(e) {
var that = this,
scrollY = e.detail.scrollTop;
var opacity = scrollY / 200;
opacity = opacity > 1 ? 1 : opacity;
that.$set(that, 'showAnimate', false);
that.$set(that, 'opacity', opacity);
that.$set(that, 'scrollY', scrollY);
if (that.lock) {
that.$set(that, 'lock', false)
return;
}
for (var i = 0; i < that.topArr.length; i++) {
if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
that.$set(that, 'navActive', i)
break
}
}
uni.$emit('scroll');
},
ChangCouponsClose: function() {
this.$set(this.coupon, 'coupon', false)
},
/**
* 购物车数量加和数量减
*
*/
ChangeCartNum: function(changeValue) {
//changeValue:是否 加|减
//获取当前变动属性
let productSelect = this.productValue[this.attrValue];
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length)
productSelect = this.attr.productSelect;
//无属性值即库存为0不存在加减
if (productSelect === undefined) return;
let stock = productSelect.stock || 0;
let num = this.attr.productSelect;
if (changeValue) {
num.cart_num++;
if (num.cart_num > stock) {
this.$set(this.attr.productSelect, "cart_num", stock);
this.$set(this, "cart_num", stock);
}
if(num.cart_num > this.storeInfo.once_max_count&&this.storeInfo.once_max_count!=0&&this.storeInfo.pay_limit!=0){
this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_max_count);
this.$set(this, "cart_num", this.storeInfo.once_max_count);
return this.$util.Tips({
title: "单次购买件数不能超过"+this.storeInfo.once_max_count+"件!"
});
}
} else {
num.cart_num--;
if (num.cart_num < 1) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
}
if(num.cart_num < this.storeInfo.once_min_count&&this.storeInfo.once_min_count!=0){
this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_min_count);
this.$set(this, "cart_num", this.storeInfo.once_min_count);
return this.$util.Tips({
title: "单次购买件数不能少于"+this.storeInfo.once_min_count+"件!"
});
}
}
},
attrVal(val) {
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
},
/**
* 属性变动赋值
*
*/
ChangeAttr: function(res) {
let productSelect = this.productValue[res];
if(productSelect)this.$set(this, "uniqueValue", productSelect.unique);
if (productSelect && productSelect.stock > 0) {
this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this, "uniqueValue", productSelect.unique);
if (productSelect.stock == 0) {
this.$set(this.attr.productSelect, "cart_num", 0);
} else {
this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
}
this.$set(this, "attrValue", res);
this.$set(this, "attrTxt", "选择");
}
else {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this, "attrValue", res);
this.$set(this, "attrTxt", "选择");
}
},
/**
* 领取完毕移除当前页面领取过的优惠券展示
*/
ChangCoupons: function(e) {
let coupon = e;
let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id);
this.$set(this, 'couponList', couponList);
this.getCouponList();
},
setClientHeight: function() {
let that = this;
let view = uni.createSelectorQuery().in(this).select("#list0");
view.fields({
size: true,
}, data => {
that.$set(that, 'clientHeight', data.height + 20)
}).exec();
},
/**
* 获取产品详情
*
*/
getGoodsDetails: function() {
uni.showLoading({
title: '加载中',
mask: true
});
let that = this;
getProductDetail(that.id).then(res => {
uni.hideLoading();
let storeInfo = res.data;
if (storeInfo.video_link && storeInfo.slider_image.length > 1) {
this.videoCoverImg = storeInfo.slider_image[0]
storeInfo.slider_image.splice(0, 1)
} else if (storeInfo.video_link && storeInfo.slider_image.length === 1) {
this.videoCoverImg = storeInfo.slider_image[0]
}
that.$set(that, 'storeInfo', storeInfo);
that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
that.$set(that.attr, 'productAttr', res.data.attr);
that.$set(that, 'productValue', res.data.sku);
that.$set(that.sharePacket, 'priceName', res.data.priceName);
that.$set(that.sharePacket, 'max', res.data.max_extension);
that.$set(that.sharePacket, 'min', res.data.min_extension);
that.$set(that, 'systemStore', res.data.system_store);
that.$set(that, 'storeSelfMention', res.data.store_self_mention);
that.$set(that, 'PromotionCode', storeInfo.code_base);
that.$set(that, 'activity', res.data.activity ? res.data.activity : []);
that.$set(that, 'max_count', res.data.once_max_count);
that.$set(that, 'pay_limit', res.data.pay_limit);
that.$set(that, 'min_count', res.data.once_min_count);
that.$set(that, 'svipData', res.data.show_svip_info || null);
that.$set(that, 'svipPrice', res.data.show_svip_info && res.data.show_svip_info.show_svip_price || false);
uni.setNavigationBarTitle({
title: storeInfo.store_name.substring(0, 7) + "..."
})
that.$set(that, 'storeImage', that.storeInfo.image);
getProductParmas(that.id).then((res) => {
that.$set(that, 'description', res.data.content);
if (that.description.type == 0) {
that.description.content = that.description.content.replace(
/<img/gi,
'<img style="max-width:100%;height:auto;float:left;display:block" '
);
that.description.content = that.description.content.replace(
/<video/gi,
'<video style="width:100%;height:300px;display:block" '
);
}
that.$set(that, 'guarantee', res.data.guarantee ? res.data.guarantee : []);
that.$set(that, 'shippingValue', res.data.temp ? res.data.temp.name : '');
that.$set(that, 'shipping', res.data.temp ? res.data.temp.info : '');
that.$set(that.specsInfo, 'params', res.data.params);
that.$set(that.storeInfo, 'merchant', res.data.merchant);
that.$set(that.storeInfo, 'spu_id', res.data.spu_id);
that.$set(that.storeInfo, 'community', res.data.community);
that.$set(that.storeInfo, 'atmosphere_pic', res.data.atmosphere_pic);
that.$set(that.storeInfo, 'top_pid', res.data.top_pid);
that.$set(that.storeInfo, 'top_num', res.data.top_num);
that.$set(that.storeInfo, 'top_name', res.data.top_name);
var recommendArr = [];
for(var i=0,len=res.data.merchant.recommend.length;i<len;i+=6){
recommendArr.push(res.data.merchant.recommend.slice(i,i+6));
}
that.recommend = recommendArr
})
if (that.isLogin) {
that.downloadFilePromotionCode();
that.getCartCount();
};
// #ifdef H5
that.ShareInfo();
// #endif
setTimeout(function() {
that.infoScroll();
}, 500);
that.DefaultSelect();
that.getPricrRule(that.storeInfo.cate_id)
that.$nextTick(function() {
that.getCouponList();
})
}).catch(err => {
//状态异常返回上级页面
return that.$util.Tips({
title: err
}, {
tab: 3,
url: 1
});
})
},
infoScroll: function() {
var that = this,
topArr = [],
heightArr = [];
for (var i = 0; i < that.navList.length; i++) { //productList
//获取元素所在位置
var query = uni.createSelectorQuery().in(this);
var idView = "#past" + i;
query.select(idView).boundingClientRect();
query.exec(function(res) {
var top = res[0].top;
var height = res[0].height;
topArr.push(top);
heightArr.push(height);
that.$set(that, 'topArr', topArr);
that.$set(that, 'heightArr', heightArr);
});
};
},
/**
* 默认选中属性
*
*/
DefaultSelect: function() {
let productAttr = this.attr.productAttr;
let value = [];
let arr = []
let unSortArr = []
for (var key in this.productValue) {
if (this.productValue[key].stock > 0) {
value = this.attr.productAttr.length ? key.split(",") : [];
break;
}
}
for (let i = 0; i < productAttr.length; i++) {
this.$set(productAttr[i], "index", value[i]);
}
//sort();排序函数:数字-英文-汉字;
let productSelect = this.productValue[value.join(",")];
if (productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name
);
this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this, "uniqueValue", productSelect.unique);
this.$set(this, "attrValue", value.join(","));
this.$set(this, "attrTxt", "选择");
if (productSelect.stock == 0) {
this.$set(this.attr.productSelect, "cart_num", 0);
} else {
this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
}
} else if (!productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this, "uniqueValue", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "选择");
} else if (!productSelect && !productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
this.$set(this.attr.productSelect, "unique", this.storeInfo.unique || "");
this.$set(this, "uniqueValue", this.storeInfo.unique || "");
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "选择");
} else if (productSelect && !productAttr.length) {
this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this, "uniqueValue", productSelect.unique);
this.$set(this, "attrValue", value.join(","));
this.$set(this, "attrTxt", "选择");
if (productSelect.stock == 0) {
this.$set(this.attr.productSelect, "cart_num", 0);
} else {
this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
}
}
},
/**
* 获取优惠券
*
*/
getCouponList() {
let that = this;
let goodsArr = []
let couponList = [];
let activeList = []
getCoupons({
ids: that.id
}).then(res => {
goodsArr = res.data
getShopCoupons(that.storeInfo.mer_id).then(({
data
}) => {
couponList = goodsArr.concat(data)
that.$set(that.coupon, 'list', couponList);
for (let i = 0; i < couponList.length; i++) {
if (!couponList[i].issue && activeList.length < 2) {
activeList.push(couponList[i]);
}
}
that.$set(that, 'couponList', activeList);
})
});
},
ChangCouponsUseState(index) {
let that = this;
that.$set(that.coupon, 'coupon', false);
},
/**
*
*
* 收藏商品
*/
setCollect: function() {
if (this.isLogin === false) {
toLogin()
} else {
let that = this;
if (this.storeInfo.isRelation) {
collectDel({
type: 0,
type_id: this.id
}).then(res => {
that.$util.Tips({
title: '已取消收藏'
});
that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
}).catch(err=>{
that.$util.Tips({
title: err
});
})
} else {
collectAdd({
type_id: this.id,
type: 0
}).then(res => {
that.$util.Tips({
title: '收藏成功'
});
that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
}).catch(err=>{
that.$util.Tips({
title: err
});
})
}
}
},
/**
* 打开属性插件
*/
selecAttr: function() {
this.$set(this.attr, 'cartAttr', true);
this.$set(this, 'isOpen', true);
},
/**
* 打开优惠券插件
*/
couponTap: function() {
let that = this;
if (that.isLogin === false) {
toLogin()
} else {
that.$set(that.coupon, 'coupon', true);
}
},
goCustomer: function() {
let that = this;
if (that.isLogin === false) {
toLogin()
} else {
uni.navigateTo({
url: `/pages/chat/customer_list/chat?mer_id=${that.storeInfo.mer_id}&uid=${that.uid}&productId=${that.id}`
});
}
},
onMyEvent: function() {
this.$set(this.attr, 'cartAttr', false);
this.$set(this, 'isOpen', false);
},
/**
* 打开属性加入购物车
*
*/
joinCart: function(e) {
//是否登录
if (this.isLogin === false) {
toLogin()
} else {
this.goCat();
}
},
/*
* 加入购物车
*/
goCat: function(news) {
let that = this,
productSelect = that.productValue[this.attrValue];
//打开属性
if (that.attrValue) {
//默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
that.attr.cartAttr = !that.isOpen ? true : false;
// if(!that.isOpen)that.attr.cartAttr = true
} else {
if (that.isOpen) that.attr.cartAttr = true;
else
that.attr.cartAttr = !that.attr.cartAttr;
}
//只有关闭属性弹窗时进行加入购物车
if (that.attr.cartAttr === true && that.isOpen === false)
return (that.isOpen = true);
that.isOpen = that.attr.cartAttr = true;
//如果有属性,没有选择,提示用户选择
if (
that.attr.productAttr.length &&
that.isOpen === true &&
productSelect.stock == 0
)
return that.$util.Tips({
title: "产品库存不足,请选择其它"
});
if (that.attr.productSelect.cart_num == 0) {
return that.$util.Tips({
title: '购买个数不能为0'
})
}
let q = {
is_new: news === undefined ? 0 : 1,
product_id: that.id,
cart_num: that.attr.productSelect.cart_num,
product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : "",
source: this.source,
product_type: 0,
spread_id: this.currSpid
};
postCartAdd(q)
.then(function(res) {
that.isOpen = that.attr.cartAttr = false;
let cartId = res.data.cart_id
let arr = (Cache.get(CART_ID)&&JSON.parse(Cache.get(CART_ID))) || []
// let arr = []
arr.push(cartId)
Cache.set(CART_ID, Array.from([...new Set(arr)]))
const timestamp = Date.now();
Cache.set(CART_TIME,timestamp)
if (news) {
uni.navigateTo({
url: '/pages/users/order_confirm/index?cartId=' + cartId
});
} else {
that.$util.Tips({
title: "添加购物车成功",
success: () => {
that.getCartCount(true);
}
});
}
})
.catch(res => {
return that.$util.Tips({
title: res
});
});
},
/**
* 获取购物车数量
* @param boolean 是否展示购物车动画和重置属性
*/
getCartCount: function(isAnima) {
let that = this;
const isLogin = that.isLogin;
if (isLogin) {
getCartCounts().then(res => {
that.CartCount = res.data[0].count;
//加入购物车后重置属性
if (isAnima) {
that.animated = true;
setTimeout(function() {
that.animated = false;
}, 500);
}
});
}
},
/**
* 立即购买
*/
goBuy: function(e) {
if (this.isLogin === false) {
toLogin()
} else {
this.goCat(true);
}
},
/**
* 分享打开
*
*/
listenerActionSheet: function() {
if (this.isLogin === false) {
toLogin()
} else {
// #ifdef H5
if (this.$wechat.isWeixin() === true) {
this.weixinStatus = true;
}
// #endif
this.posters = true;
}
},
// 分享关闭
listenerActionClose: function() {
this.posters = false;
this.currentPage = false;
},
//隐藏海报
posterImageClose: function() {
this.posterImageStatus = false
},
//替换安全域名
setDomain: function(url) {
url = url ? url.toString() : '';
//本地调试打开,生产请注销
if (url.indexOf("https://") > -1) return url;
else return url.replace('http://', 'https://');
},
/**
* 获取产品分销二维码
* @param function successFn 下载完成回调
*
*/
downloadFilePromotionCode: function(successFn) {
let that = this;
let type;
// #ifndef MP
type = 'wechat'
// #endif
// #ifdef MP
type = 'routine'
// #endif
getProductCode(that.id, {
type: type,
product_type: 0
}).then(async res => {
that.codeImg = res.data.url
that.$set(that, 'isDown', false);
}).catch(err => {
that.$set(that, 'isDown', false);
that.$set(that, 'PromotionCode', '');
});
},
// 小程序关闭分享弹窗;
goFriend: function() {
this.posters = false;
this.currentPage = false;
},
/**
* 生成海报
*/
async goPoster() {
if (this.posterImage) {
this.posterImageStatus = true
this.posters = false
return
}
let that = this;
let arr2
that.posters = false;
that.$set(that, 'canvasStatus', true);
uni.showLoading({
title: '海报生成中',
mask: true
});
// #ifdef MP || APP-PLUS
arr2 = [that.posterbackgd, await that.fileStoreImage(that.storeImage), await that.fileStoreImage(
that.codeImg), await that.fileStoreImage(that.share_pic)];
// #endif
// #ifdef H5
arr2 = [that.posterbackgd, await that.imgToBase(that.storeImage), await that.imgToBase(that.codeImg), await that.imgToBase(that.share_pic)];
// #endif
console.log(arr2);
//生成推广海报
that.$util.goodsPosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, that.site_name, that.storeInfo.ot_price, function(tempFilePath) {
that.$set(that, 'posterImage', tempFilePath);
that.$set(that, 'posterImageStatus', true);
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
that.$set(that, 'canvasStatus', false);
}, (err) => {
that.$set(that, 'canvasStatus', false);
});
},
//图片转符合安全域名路径
fileStoreImage(url) {
// #ifdef MP || APP-PLUS
let ishttps = url.split('//')[0] == 'https:'
if (!ishttps) {
url = 'https://'+url.split('//')[1]
}
// #endif
return new Promise((resolve, reject) => {
let that = this;
uni.downloadFile({
url: url,
success: function(res) {
resolve(res.tempFilePath);
},
fail: function() {
return that.$util.Tips({
title: ''
});
}
});
})
},
/*
* 保存到手机相册
*/
// #ifdef MP
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
})
}
})
} else {
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
},
})
}
}
})
},
// #endif
// #ifdef APP-PLUS
savePosterPath(){
let that = this
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
},
})
},
// #endif
//#ifdef H5
ShareInfo() {
let data = this.storeInfo;
let href = location.href;
if (this.$wechat.isWeixin()) {
getUserInfo().then(res => {
href =
href.indexOf("?") === -1 ?
href + "?spid=" + res.data.uid :
href + "&spid=" + res.data.uid;
let configAppMessage = {
desc: data.store_info,
title: data.store_name,
link: href,
imgUrl: data.image
};
this.$wechat.wechatEvevt([
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline"
], configAppMessage).then(res => {
}).catch(err => {
console.log(err);
})
});
}
},
//#endif
async imgToBase(url) {
let res = await imgToBase({
image: url
})
return res.data.image
},
//复制口令
copyPwd(){
let that = this;
copyPasswordApi({
id: that.id,
product_type: 0
}).then(async res => {
that.copyUrl = res.data.str;
that.posters = false
that.isCopy = true;
})
},
closeCopy(){
this.isCopy = false
},
// APP分享
appShare(scene){
let that = this
uni.showLoading({
title: '加载中',
mask: true
});
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由,也就是最后一个打开的页面路由
uni.share({
provider: "weixin",
scene: scene,
type: 0,
href: `${HTTP_REQUEST_URL}${curRoute}&spid=${that.uid}`,
title: that.storeInfo.store_name,
summary: that.storeInfo.store_info,
imageUrl: that.storeInfo.image,
success: function(res) {
uni.showToast({
title: '分享成功',
icon: 'success'
})
that.posters = false;
uni.hideLoading();
},
fail: function(err) {
uni.showToast({
title: '分享失败',
icon: 'none',
duration: 2000
})
that.posters = false;
uni.hideLoading();
}
});
}
}
}
</script>
<style lang="scss" scoped>
.ml8{
top:2rpx
}
.activity_pin {
width: auto;
height: 44rpx;
line-height: 44rpx;
background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
opacity: 1;
border-radius: 22rpx;
padding: 0 15rpx;
margin-left: 19rpx;
}
.activity_miao {
width: auto;
height: 44rpx;
line-height: 44rpx;
padding: 0 15rpx;
background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
opacity: 1;
border-radius: 22rpx;
margin-left: 19rpx;
}
.iconfonts {
color: #fff !important;
font-size: 28rpx;
}
.activity_title {
font-size: 24rpx;
color: #fff;
}
.activity_kan {
width: auto;
height: 44rpx;
line-height: 44rpx;
padding: 0 15rpx;
background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
opacity: 1;
border-radius: 22rpx;
margin-left: 19rpx;
}
.t-color {
color: var(--view-theme);
}
.p-color {
color: var(--view-priceColor);
}
.bt-color {
background-color: var(--view-theme);
border: 1px solid var(--view-theme);
}
.head-bar {
background: #fff;
}
.generate-posters {
width: 100%;
height: 170rpx;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 388;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
border-top: 1px solid #eee;
}
.generate-posters.on {
transform: translate3d(0, 0, 0);
}
.generate-posters .item {
/* #ifdef H5 */
flex: 50%;
/* #endif */
/* #ifndef H5 */
flex: 33.33%;
/* #endif */
text-align: center;
font-size: 30rpx;
&.item3{
flex: 33.33%;
}
}
.generate-posters .item .iconfont {
font-size: 80rpx;
color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
color: #5391f1;
}
.generate-posters .item .iconfont.icon-fuzhikouling1 {
color: #FBB324;
}
.product-con .footer {
padding: 0 20rpx 0 40rpx;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
height: 100rpx;
height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
background-color: #fff;
z-index: 277;
border-top: 1px solid #f0f0f0;
&.footpl{
padding-left: 80rpx;
}
}
.product-con .footer .item {
font-size: 18rpx;
color: #666;
text-align: center;
}
.product-con .attribute .atterTxt {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
width: 400rpx;
}
.product-con .attribute .params{
margin-right: 20rpx;
font-size: 28rpx;
color: #282828;
&:nth-child(2){
margin-right: 0;
}
}
.product-con .attribute .atterTxt1{
color: #282828;
&.hasAttr{
&:after{
content: "";
display: inline-block;
position: relative;
top: -6rpx;
margin: 0 6rpx;
width: 5rpx;
height: 5rpx;
background-color: #282828;
border-radius: 100%;
}
&:last-child{
&:after{
display: none;
}
}
}
}
.product-con .wrapper .coupon .activity {
border: 1px solid var(--view-theme);
color: var(--view-theme);
&::before,&::after{
border: 1px solid var(--view-theme);
}
&::before{
border-left-color: #ffffff;
}
&::after{
border-right-color: #ffffff;
}
}
.product-con .guaranteeAttr{
display: inline-block;
width: 560rpx;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.product-con .footer .item .iconfont {
text-align: center;
font-size: 40rpx;
}
.fenxiang_btn{
.icon-yishoucang2{
color: var(--view-priceColor)!important;
}
}
.product-con .wrapper .introduce {
margin: 20rpx 30rpx 0;
&.atmosphere {
padding: 20rpx 30rpx;
margin: 0;
justify-content: space-between;
align-items: flex-start;
.title{
width: 540rpx;
}
}
.font-bg-red{
position: relative;
/* #ifdef H5 */
top: -2rpx;
/* #endif */
/* #ifndef H5 */
top: -4rpx;
/* #endif */
}
}
.product-con .footer .item .iconfont.icon-shoucang1 {
color: var(--view-priceColor);
}
.integral_count{
padding: 0 30rpx;
}
.product-con .integral{
display: inline-block;
margin: 20rpx 30rpx 0 0;
color: #FF9000;
background-color: #FFF4E6;
height: 40rpx;
line-height: 40rpx;
border-radius: 22rpx;
padding: 0 26rpx;
font-size: 24rpx;
font-weight: normal;
&:last-child{
margin-left: 0;
}
}
.product-con .footer .item .iconfont.icon-gouwuche1 {
font-size: 40rpx;
position: relative;
}
.product-con .footer .item .iconfont.icon-gouwuche1 .num {
color: #fff;
position: absolute;
font-size: 18rpx;
height: 30rpx;
border-radius: 200rpx;
padding: 0 8rpx;
box-sizing: border-box;
top: -10rpx;
right: -10rpx;
background-color: var(--view-theme);
min-width: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.product-con .footer .bnt {
width: 444rpx;
height: 76rpx;
}
.product-con .footer .bnt .bnts {
width: 222rpx;
text-align: center;
line-height: 76rpx;
color: #fff;
font-size: 28rpx;
&.sold_out {
width: 444rpx;
border-radius: 50rpx;
}
&.virtual_buy {
width: 444rpx;
border-radius: 50rpx;
}
}
.product-con .footer .bnt .joinCart {
border-radius: 50rpx 0 0 50rpx;
background-image: linear-gradient(90deg, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);
&.disabled{
background: #bbb;
}
}
.product-con .footer .bnt .buy {
border-radius: 0 50rpx 50rpx 0;
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
}
.product-con .footer .bnt .buy[disabled] {
background: #bbb;
}
.product-con .superior {
background-color: #fff;
margin-top: 20rpx;
padding-bottom: 10rpx;
}
.product-con .superior .title {
height: 98rpx;
}
.product-con .superior .title image {
width: 30rpx;
height: 30rpx;
}
.product-con .superior .title .titleTxt {
margin: 0 20rpx;
font-size: 30rpx;
background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.product-con .superior .slider-banner {
width: 690rpx;
margin: 0 auto;
position: relative;
}
.product-con .superior .slider-banner swiper {
height: 100%;
width: 100%;
}
.product-con .superior .slider-banner swiper-item {
height: 100%;
}
.product-con .superior .slider-banner .list {
width: 100%;
}
.product-con .superior .slider-banner .list .item {
width: 215rpx;
margin: 0 22rpx 30rpx 0;
font-size: 26rpx;
}
.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
margin-right: 0;
}
.product-con .superior .slider-banner .list .item .pictrue {
position: relative;
width: 100%;
height: 215rpx;
}
.product-con .superior .slider-banner .list .item .pictrue image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.product-con .superior .slider-banner .list .item .name {
color: #282828;
margin-top: 12rpx;
}
.product-con .superior .slider-banner .swiper-pagination-bullet {
background-color: #999;
}
.product-con .superior .slider-banner .swiper-pagination-bullet-active {
background-color: #e93323;
}
.svipCon {
height: 64rpx;
padding: 0 20rpx;
margin: 8rpx 20rpx 0;
background: #FAE3BB;
font-size: 24rpx;
color: #B37400;
border-radius: 10rpx;
image{
width: 38rpx;
height: 38rpx;
margin-right: 20rpx;
}
}
.svipCon .svipBtn {
font-size: 22rpx;
.iconfont{
font-size: 18rpx;
margin-left: 4rpx;
}
}
button {
padding: 0;
margin: 0;
line-height: normal;
background-color: #fff;
}
button::after {
border: 0;
}
action-sheet-item {
padding: 0;
height: 240rpx;
align-items: center;
display: flex;
}
.contact {
font-size: 16px;
width: 50%;
background-color: #fff;
padding: 8rpx 0;
border-radius: 0;
margin: 0;
line-height: 2;
}
.contact::after {
border: none;
}
.action-sheet {
font-size: 17px;
line-height: 1.8;
width: 50%;
position: absolute;
top: 0;
right: 0;
padding: 25rpx 0;
}
.canvas {
z-index: 300;
width: 750px;
height: 1190px;
}
.poster-pop {
width: 600rpx;
height: 897rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 399;
top: 50%;
margin-top: -500rpx;
}
.poster-pop image {
width: 100%;
height: 100%;
display: block;
}
.poster-pop .close {
width: 46rpx;
height: 75rpx;
position: fixed;
right: 0;
top: -73rpx;
display: block;
}
.poster-pop .save-poster {
background-color: #df2d0a;
font-size: 22rpx;
color: #fff;
text-align: center;
height: 76rpx;
line-height: 76rpx;
width: 100%;
border-radius: 43rpx;
margin-top: 20rpx;
}
.poster-pop .keep {
color: #fff;
text-align: center;
font-size: 25rpx;
margin-top: 10rpx;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9;
}
.pictrue_log {
width: 80upx;
height: 40upx;
border-radius: 6upx 0 12upx 0;
line-height: 40upx;
font-size: 24upx;
}
.pictrue_log_class {
z-index: 3;
background: -webkit-gradient(linear, left top, right top, from(rgba(246, 122, 56, 1)), to(rgba(241, 27, 9, 1)));
background: linear-gradient(90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
opacity: 1;
position: absolute;
top: 0;
left: 0;
color: #fff;
text-align: center;
}
.navbar .header {
height: 96rpx;
font-size: 30rpx;
color: #050505;
background-color: #fff;
/* #ifdef MP */
padding-right: 95rpx;
/* #endif */
}
.navbar .header .item {
position: relative;
margin: 0 25rpx;
}
.navbar .header .item.on:before {
position: absolute;
width: 60rpx;
height: 5rpx;
background-repeat: no-repeat;
content: "";
background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
bottom: -10rpx;
left: 50%;
margin-left: -28rpx;
}
.navbar {
position: fixed;
background-color: #fff;
top: 0;
left: 0;
z-index: 99;
width: 100%;
}
.navbar .navbarH {
position: relative;
}
.navbar .navbarH .navbarCon {
position: absolute;
bottom: 0;
height: 100rpx;
width: 100%;
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
.store-wrapper {
margin-top: 20rpx;
background-color: #fff;
.store-hd {
padding: 30rpx;
border-bottom: 1px solid #F5F5F5;
.store-info {
position: relative;
display: flex;
.store-margin{
width: 24rpx;
height: 26rpx;
margin-left: 10rpx;
}
.logo {
width: 86rpx;
height: 86rpx;
image {
width: 86rpx;
height: 86rpx;
border-radius: 6rpx;
}
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20rpx;
.name {
font-size: 28rpx;
color: #282828;
font-weight: bold;
display: flex;
align-items: center;
}
.txt {
margin-top: 8rpx;
color: #666666;
font-size: 22rpx;
}
}
.link {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 114rpx;
height: 50rpx;
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
border-radius: 25rpx;
color: #fff;
}
}
.score-wrapper {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
.item {
color: #948D8C;
font-size: 26rpx;
text {
margin-left: 10rpx;
color: var(--view-priceColor);
}
}
}
}
.con-box {
padding: 20rpx 30rpx 0;
.title {
font-size: 28rpx;
color: #282828;
}
.moer-btn{
font-size: 28rpx;
color: #999999;
}
.img-box {
.img-item {
width: 220rpx;
margin: 30rpx 15rpx 0 0;
display: inline-block;
&:nth-child(3n){
margin-right: 0;
}
/deep/image,/deep/uni-image,/deep/.easy-loadimage {
width: 218rpx;
height: 220rpx;
border-radius: 16rpx;
display: inline-block;
}
.txt {
.title {
font-size: 28rpx;
color: #282828;
margin-top: 15rpx;
}
.price {
color: var(--view-priceColor);
font-size: 28rpx;
text {
font-size: 20rpx;
}
}
}
}
}
/deep/.uni-swiper-dot{
width: 8rpx;
height: 4rpx;
background: rgba(0,0,0,.15);
}
/deep/.uni-swiper-dot-active{
width: 16rpx;
background: var(--view-theme);
}
.page_swiper,swiper {
height: 760rpx;
}
}
}
.sys-head {
background: transparent;
}
.swiper-item,/deep/uni-swiper-wrapper,/deep/uni-swiper{
height: 740rpx!important;
}
.head-wrapper {
z-index: 999;
display: flex;
align-items: center;
position: fixed;
left: 30rpx;
top: 0;
}
.head-menu {
display: flex;
align-items: center;
height: 58rpx;
width: 158rpx;
background: rgba(255,255,255,0.302);
border: 2rpx solid rgba(0,0,0,0.0588);
border-radius: 29rpx;
.iconfont {
flex: 1;
text-align: center;
color: #000000;
box-sizing: border-box;
&.icon-fanhui2 {
border-right: 1px solid rgba(0,0,0,0.2);;
}
}
}
</style>