951 lines
37 KiB
Vue
951 lines
37 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav v-if="invite_code==''" :titleVal="'商品详情'" :statusTitle="true"></status-nav>
|
||
<view v-if="invite_code!=''" class="status-box statusHNH" style="background-color: #FFFFFF;">
|
||
<view :style="{height:statusBarHeight+'px'}"></view>
|
||
<view class="status-nav">
|
||
<!-- 标题 -->
|
||
<view class="tab-title tcenter" style="color: #000000;">商品详情</view>
|
||
</view>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view :style="{top: statusHeight+'px'}" v-if="isNei!=3" class="posiszy" style="height: 50px;">
|
||
<view class="bacf pad-zy32 pad-sx20">
|
||
<cate-pu @choosecateEv="choosecateEv" :activeb="invite_code!=''?'#3875F6':publicColor" :newCurrent="cateCurrent*1" :newbmo="'#F2F2F2'" :isCenter="false" :newcateList="cateList"></cate-pu>
|
||
</view>
|
||
</view>
|
||
<view :style="{top: statusHeight+'px'}" v-else class="posiszy" style="height: 50px;"></view>
|
||
<view class="pad-x180" :style="{paddingTop: isNei!=3?(statusHeight+60)+'px':statusHeight+'px'}">
|
||
<!-- 自定义轮播 -->
|
||
<view v-if="isLoading">
|
||
<swiper-pu v-if="cateCurrent==0" :isplay="isAutoPlay" :browseP="true" :bannerList="bannerList" :newHeight="swiperHeight" :newRadius="'0'" :newBottom="'5'"></swiper-pu>
|
||
<!-- <view v-if="isNei==3" class="score-box">积分：{{detailObj.score}}</view> -->
|
||
<view v-show="cateCurrent==isNum">
|
||
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||
<!-- 标题 -->
|
||
<view class="mar-x20 fon36 col3 bold clips3 shop-title-box line-h50">
|
||
<view style="margin-top: -8rpx;margin-right: 10rpx;">
|
||
<span v-if="isNei!=3" class="radius15 colf fon20" :style="{background:publicColor}">{{detailObj.disease_name}}</span>
|
||
<span v-if="isNei==0" class="radius15 colf fon20 mar-z10">团购</span>
|
||
<span v-if="isNei==1" class="radius15 colf fon20 mar-z10">拼团活动</span>
|
||
<span v-if="isNei==2" class="radius15 colf fon20 mar-z10">促销活动</span>
|
||
</view>
|
||
<span>{{detailObj.name}}</span>
|
||
</view>
|
||
<view class="fon24 col7D">{{detailObj.subtitle || '无任何额外消费'}}</view>
|
||
<!-- 团购商品详情时显示 -->
|
||
<view v-if="isNei==0" class="disjbac fon24 mar-s20 col7D">
|
||
<view>团购累计参与人员：{{detailObj.activity_order_num}}人</view>
|
||
<view>还剩余：{{detailObj.group_surplus_num}}人</view>
|
||
</view>
|
||
<!-- <view class="mar-s20 shop-price" v-if="isNei!=3"><span v-if="isNei==0">团购价:</span><span v-if="isNei==1">拼团价:</span>￥{{detailObj.price/100}} <span v-if="isNei!=10">￥{{detailObj.original_price/100}}</span></view> -->
|
||
<view class="mar-s20 shop-price" v-if="isNei!=3"><span v-if="isNei==0">团购价:</span><span v-if="isNei==1">拼团价:</span>￥{{detailObj.price/100}} <span>￥{{detailObj.original_price/100}}</span></view>
|
||
<view class="mar-s20 shop-price" v-else>积分：{{detailObj.score}}</view>
|
||
<view class="disjbac shar-box" style="align-items: flex-end;">
|
||
<view>
|
||
<view class="disac" v-if="detailObj.level_text!=''">
|
||
<image class="flexs" src="/static/public/huiy.png" mode="aspectFill"></image>
|
||
<view class="fon24 col9">{{detailObj.level_text}}</view>
|
||
</view>
|
||
<view v-else class="fon24 col9">全部人员可买</view>
|
||
</view>
|
||
<view class="disac flexs">
|
||
<view class="disac fc mar-zy36 posir">
|
||
<image src="/static/public/weix.png" class="wh42" mode=""></image>
|
||
<view class="fon24 col9">分享</view>
|
||
<button class="posia-op" open-type="share">分享</button>
|
||
</view>
|
||
<view class="disac fc" @tap="tapConllection">
|
||
<image v-if="isDetailConllection" src="/static/public/yconllection.png" class="wh44" mode=""></image>
|
||
<image v-else src="/static/public/conllection.png" class="wh44" mode=""></image>
|
||
<view class="fon24 col9">收藏</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pad-x30 pad-s10 borbot" v-if="isNei==0 || isNei==1 ||isNei==2">
|
||
<view class="fon36 colf bold pbackc tc pad-sx20 radius45" v-if="daoTime!='活动已结束' && detailObj.is_close==0">倒计时：{{daoTime}}</view>
|
||
<view class="fon36 colf bold pbackc tc pad-sx20 radius45" v-else>{{[daoTime,'活动已结束'][detailObj.is_close]}}</view>
|
||
</view>
|
||
<!-- 规格 -->
|
||
<view class="dis tc mar-s20 fon28">
|
||
<view class="col3 flexs" style="margin-top: 6rpx;">类型：</view>
|
||
<view class="width100 disac fw" style="justify-content: flex-end;">
|
||
<view class="col6 mar-z30 mar-x20 molei" style="background: #F2F2F2;" v-for="(item,index) in skuCate" :key="index">{{item.title}}</view>
|
||
</view>
|
||
<!-- <view>
|
||
<view class="fon26 col3 mar-x20">上市时间</view>
|
||
<view class="fon24 colB3">{{detailObj.param_maket_time||'今年'}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="fon26 col3 mar-x20">有效期</view>
|
||
<view class="fon24 colB3">{{detailObj.param_validity_time||'永久'}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="fon26 col3 mar-x20">可用时间</view>
|
||
<view class="fon24 colB3">{{detailObj.param_use_time||'长期'}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="fon26 col3 mar-x20">术前须知</view>
|
||
<view class="fon24 colB3">{{detailObj.param_notice||'无'}}</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 销量，库存 -->
|
||
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||
<view class="fon28 disjbac">
|
||
<view class="col3">销量：</view>
|
||
<view class="colB3">已售{{detailObj.amount}}件</view>
|
||
</view>
|
||
<view class="fon28 disjbac mar-s40">
|
||
<view class="col3">库存：</view>
|
||
<view class="colB3">剩余{{detailObj.stock}}件</view>
|
||
</view>
|
||
</view>
|
||
<!-- 拼团 -->
|
||
<view v-if="isNei==1 && len!=0" class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||
<view class="fon28 col3">{{len}}人正在拼团，可以直接参与</view>
|
||
<swiper :autoplay="true" :interval="3000" :duration="1000" circular="true" class="shop-swiper" :style="{height: (len==1 && pingArr[0].length==1)?'110rpx':'280rpx'}" vertical="true">
|
||
<swiper-item v-if="pingArr[index].length!=0" v-for="(item,index) in pingArr" :key="index">
|
||
<view class="disjbac posir pad-x20" v-for="(itemt,indext) in item" :key="indext">
|
||
<image :src="itemt.imgSrc" mode="aspectFill" class="flexs big-img"></image>
|
||
<view class="disjbac width100 mar-z20 pad-sx20">
|
||
<view class="fon28 col3 width45">{{itemt.name}}</view>
|
||
<view class="fon28 disjbac width100 col7D">
|
||
<view class="flexs">
|
||
<view>还差{{itemt.num}}人拼成</view>
|
||
<view style="margin-top: 7rpx;">{{itemt.time_text}}</view>
|
||
</view>
|
||
<view @tap="comeTuan(itemt.id,index,indext)" class="colf bold flexs">去拼单</view>
|
||
</view>
|
||
</view>
|
||
<!-- 短线 -->
|
||
<view class="duan-xian"></view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 去拼单弹框 -->
|
||
<!-- <view v-if="showPD" class="pd-tk-box" @tap.stop="showPD=false"> -->
|
||
<view v-if="showPD" class="pd-tk-box">
|
||
<view class="bacf radius20 width100 posir">
|
||
<view class="fon28 col3">参与{{pinInfo.name}}的拼单</view>
|
||
<view class="fon24 col3">仅剩{{pinInfo.num}}个名额，{{pinDao}}后结束</view>
|
||
<view class="disjcac">
|
||
<image :src="pinInfo.imgSrc" mode="aspectFill"></image>
|
||
<image src="/static/public/pin-jie.png" mode=""></image>
|
||
<image src="/static/public/weiz.png" mode=""></image>
|
||
</view>
|
||
<view @tap="atOnceSpellOrder(1)">参与拼单</view>
|
||
<image @tap="atOnceSpellOrder(0)" src="/static/public/pin-close.png" class="posia" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 详情 -->
|
||
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||
<view class="fon28 col3 bold">产品详情</view>
|
||
<view class="fon28 mar-s20" style="color: #1A1A1A; line-height: 40rpx;">
|
||
<rich-text :nodes="detailInfo"></rich-text>
|
||
</view>
|
||
</view>
|
||
<!-- 医生 -->
|
||
<view v-if="doctorList.length!=0" class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||
<view class="fon28 col3 bold mar-x20">医生</view>
|
||
<!-- 推荐医生列表 -->
|
||
<list-doctor v-if="doctorList.length!=0" :list="doctorList"></list-doctor>
|
||
<view v-if="doctorList.length==0" class="disjcac fc" style="margin-top: 10%;">
|
||
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
|
||
<!-- <view class="fon24 col3">暂无推荐医生</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 产品推荐 -->
|
||
<view v-if="dataList.length!=0" class="fon30 bold mar-s40 mar-x10 pad-zy50 pcol">产品推荐</view>
|
||
<shopList :dataList="dataList" v-if="dataList.length!=0"></shopList>
|
||
</view>
|
||
<view v-if="cateCurrent!=isNum">
|
||
<view v-if="allList.length!=0" class="pad-zy20">
|
||
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="allList"></list-pu>
|
||
</view>
|
||
<view v-else class="disjcac fc" style="margin-top: 40%;">
|
||
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
|
||
<view class="fon24 col3">暂无内容</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部导航 -->
|
||
<view class="posixzy disjbac bacf pad-zy32 btnBKS">
|
||
<view class="posir">
|
||
<image @tap="backHome" class="posia backH" src="/static/public/back-home-02.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="disac fon26 colf">
|
||
<view @tap="tuneUp(0)" class="disjcac lianShare addCart-btn"><span v-if="isNei!=1">加入购物车</span><span v-else>单独购买</span></view>
|
||
<view @tap="tuneUp(1)" class="disjcac lianShare mai-btn"><span v-if="isNei!=1">立即购买</span><span v-else>发起拼团</span></view>
|
||
</view>
|
||
</view>
|
||
<!-- 分享 -->
|
||
<view @tap="shareImgEv" class="detail-cart-box" style="display: flex;justify-content: center;align-items: center;width: 112rpx;height: 112rpx;border-radius: 100%;background-color: #0fac29;bottom: 436rpx;color: #FFFFFF;">
|
||
<image class="zanw-img" src="/static/public/share-pyq.png" mode="aspectFill" style="width: 64rpx;height: 81rpx;"></image>
|
||
</view>
|
||
<!-- 购物车 -->
|
||
<view @tap="goShopCart" class="detail-cart-box">
|
||
<view class="posir">
|
||
<image src="/static/public/cart.png" mode="aspectFill"></image>
|
||
<view class="posia" v-if="cartNum!=0"><view>{{cartNum}}</view></view>
|
||
</view>
|
||
</view>
|
||
<!-- 客服 -->
|
||
<view @tap="lianK" class="shopKf">
|
||
<view class="posir">
|
||
<image src="/static/public/kf-logo.png" mode="aspectFill" style="width: 142rpx;height: 142rpx;"></image>
|
||
<button open-type="contact" class="posia-op"></button>
|
||
</view>
|
||
</view>
|
||
<!-- 立即购买，加入购物车弹框 -->
|
||
<view v-if="showTK" class="posAll" style="z-index: 1000;" @tap="showTK=false">
|
||
<view class="bacf posixzy bottom-popu" @tap.stop="showTK=true">
|
||
<view class="disjb pad-zy50">
|
||
<image :src="zhuImg" mode="aspectFill"></image>
|
||
<view class="disjbac width100">
|
||
<view v-if="isNei!=3">
|
||
<view class="fon40 mar-sx10 colf8">￥{{skuDetail.price/100}}</view>
|
||
<!-- <view v-if="isNei!=10"><span class="yuan-price">￥{{skuDetail.original_price/100}}</span></view> -->
|
||
<view><span class="yuan-price">￥{{skuDetail.original_price/100}}</span></view>
|
||
</view>
|
||
<view v-else><view class="fon40 mar-sx10 colf8">积分：{{skuDetail.score}}</view></view>
|
||
<image @tap.stop="showTK=false" src="/static/public/cha-close.png" style="margin-right: 0rpx;" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="fon36 col3 bold clips3 pad-zy30 mar-s20 shop-title-box line-h50">
|
||
<view style="margin-top: -8rpx;margin-right: 10rpx;">
|
||
<span class="radius15 colf fon20" :style="{background:publicColor}">{{detailObj.disease_name}}</span>
|
||
<span class="radius15 colf fon20 mar-z10" v-if="isNei==0">团购</span>
|
||
<span class="radius15 colf fon20 mar-z10" v-if="isNei==1">拼团活动</span>
|
||
<span class="radius15 colf fon20 mar-z10" v-if="isNei==2">促销活动</span>
|
||
</view>
|
||
<span>{{detailObj.name}}</span>
|
||
</view>
|
||
<view class="dis mar-sx40 pad-zy30 col3">
|
||
<view class="fon28 flexs" style="margin-top: 6rpx;">类型：</view>
|
||
<view class="fon26 disac fw width100" style="justify-content: flex-end;">
|
||
<view @tap="chooselei(indexl)" class="mar-x20" v-for="(item,indexl) in allRes.sku" :key="indexl" :class="leiIndex==indexl?'activelei':'molei'" :style="{background:leiIndex==indexl?publicColor:'#F2F2F2'}">{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
||
<view class="col3">库存：</view>
|
||
<view class="fon26 col3" style="color: #5B5B5B;">{{skuDetail.stock}}件</view>
|
||
</view>
|
||
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
||
<view class="col3">购买数量：</view>
|
||
<view class="fon26 col3 disac bold">
|
||
<image @tap="buyNum!=1?buyNum--:''" src="/static/public/del.png" class="del-btn" mode=""></image>
|
||
<input type="text" @input="inputNum" v-model="buyNum" class="num-input"/>
|
||
<image @tap="buyNum++" src="/static/public/add.png" class="add-btn" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 加入购物车，立即购买 -->
|
||
<view v-if="isNei!=1" class="disjbac pad-zy30 colf fon32 mar-x50">
|
||
<view @tap="addCart" class="ev-btn pbackc">加入购物车</view>
|
||
<view v-if="isNei!=3" @tap.stop="goGetReadyDan(0)" class="ev-btn bcf8">立即购买</view>
|
||
<view v-else @tap.stop="goGetReadyDan(0)" class="ev-btn bcf8">立即兑换</view>
|
||
</view>
|
||
<!-- 单独购买，立即拼团 -->
|
||
<view v-else class="disjbac pad-zy30 colf fon32 mar-x50">
|
||
<view @tap.stop="goGetReadyDan(2)" class="ev-btn" :style="{backgroundColor: ifAlone ? '#F85050' : '#C8C8C8'}">单独购买</view>
|
||
<view @tap.stop="goGetReadyDan(0)" class="ev-btn bcf8" :style="{backgroundColor: ifAlone ? '#C8C8C8' : ''}">发起拼团</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 用户信息授权，手机号授权 -->
|
||
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import listDoctor from '@/components/list-doctor.vue';
|
||
import swiperPu from '@/components/swiper-pu.vue';
|
||
import {cancleCollectionShopEV,collectionShopEV} from '@/jsFile/publicAPI.js';
|
||
import shopList from '@/components/shop-list.vue';
|
||
import { base64ToPath } from '@/jsFile/base64-src.js';
|
||
export default {
|
||
components:{
|
||
listDoctor,
|
||
swiperPu,
|
||
shopList
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
||
isLoading:false,
|
||
cateCurrent:0,
|
||
swiperHeight:uni.getSystemInfoSync().windowWidth,
|
||
cateList:[{
|
||
id:1,
|
||
title:'商品详情',
|
||
pid:11,
|
||
sort:4
|
||
}],
|
||
bannerList:[],//轮播
|
||
//相关推荐
|
||
xgList:[],
|
||
//产品推荐
|
||
dataList:[],
|
||
showTop:false,
|
||
isDetailConllection:false,//是否已收藏
|
||
isNum:0,
|
||
listArrone:[],//问题
|
||
//案例日记
|
||
listArrtwo:[],
|
||
//效果模拟
|
||
listArrthree:[],
|
||
//科普视频
|
||
listArrfour:[],
|
||
//医生列表
|
||
doctorList:[],
|
||
detailObj:{},//详情
|
||
detailInfo:'',//富文本
|
||
category_id:'',//栏目ID
|
||
active:'',//是否是详情页
|
||
share_id:0,
|
||
invite_code:'',
|
||
showTK:false,
|
||
leiIndex:0,
|
||
showPD:false,
|
||
isNei:'',//什么类型的商品
|
||
pingArr:[],//拼团列表
|
||
len:0,//正在拼团人数
|
||
pinInfo:{},//拼单人信息
|
||
allRes:{},//所有订单信息
|
||
zhuImg:'',//cover图
|
||
skuDetail:{},//sku详情
|
||
buyNum:1,//购买数量
|
||
daoTime:'',//储存倒计时
|
||
csNum:0,//点击次数,
|
||
isBuy:0,//
|
||
ispt:0,//拼团的方式0默认发起拼团，1参与平台 2单独购买
|
||
isScore:0,//是否是积分
|
||
cartNum:0,
|
||
skuCate:[],//类型
|
||
pinDao:'',//平团倒计时
|
||
serverTime:'',//服务器时间
|
||
timerServer:null,
|
||
timerp:null,
|
||
timera:null,
|
||
pinUserId:0,//发起拼单人ID
|
||
isAutoPlay:false,
|
||
page:1,
|
||
size:20,
|
||
total:0,
|
||
isZanw:true,
|
||
allList:[],
|
||
isactivity:0,//是不是活动商品0：不是，1：是
|
||
orderId:'',//商品id
|
||
timeout:null,
|
||
shareId:'',
|
||
shareFlag:true,
|
||
ifAlone:false
|
||
}
|
||
},
|
||
computed: {
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
}
|
||
},
|
||
onReachBottom() { //触底事件
|
||
if(this.cateCurrent!=this.isNum){
|
||
if(this.total!=this.allList.length){
|
||
this.page++
|
||
this.checkList(this.cateCurrent)//调用自主预约列表事件
|
||
} else {
|
||
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
|
||
this.isZanw = false
|
||
}
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
},
|
||
onShareAppMessage(res) {
|
||
let shareImgSrc = '';
|
||
var ya = this;
|
||
this.$requst.post('user/record',{type:this.detailObj.is_activity==0 ? 'spu':'activity',action:'share',id:this.detailObj.id}).then(res=>{console.log('分享成功：',res);},error=>{})
|
||
// 调用tools.js中的种植埋点事件
|
||
this.$toolAll.tools.plantPoint(this.detailObj.is_activity==0 ? 10 : 11,this.detailObj.is_activity==0 ? this.detailObj.id*1 : this.detailObj.activity_id);
|
||
if(ya.detailObj.share_img==null) ya.detailObj.share_img = ya.detailObj.cover;
|
||
var shareObj = {
|
||
title: `${ya.detailObj.subtitle || ya.detailObj.name}`, // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pagesB/shopDetail/shopDetail?id=${this.detailObj.is_activity==1?this.detailObj.activity_id:this.detailObj.id}&category_id=${this.category_id}&is_activity=${this.detailObj.is_activity==0 ? 0 : 1}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: `${ya.$http}${ya.detailObj.share_img || ya.detailObj.cover}`//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||
};
|
||
return shareObj;
|
||
},
|
||
onShow() {
|
||
uni.removeStorageSync('chooseAddress');
|
||
uni.removeStorageSync('payType');
|
||
this.isAutoPlay = true;
|
||
},
|
||
onHide() {
|
||
this.isAutoPlay = false;
|
||
},
|
||
onUnload() {
|
||
clearInterval(this.timera);
|
||
clearInterval(this.timerp);
|
||
clearInterval(this.timerServer);
|
||
this.isAutoPlay = false;
|
||
},
|
||
onLoad(options) {
|
||
this.isactivity = options.is_activity;
|
||
this.orderId = options.id;
|
||
if(options.category_id!=undefined) {
|
||
this.category_id = options.category_id
|
||
this.invite_code = options.invite_code
|
||
}
|
||
if(options.share_id!=undefined) this.share_id = options.share_id
|
||
if(options.isIntegral=="true"){this.isScore = 3;}
|
||
// if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
||
// 调用查询购物车数量
|
||
this.cartNumEv();
|
||
// 调用查询商品详情事件
|
||
this.checkDetail(options.id,options.is_activity);
|
||
// 如果链接是拼团链接，则调起发起拼团人的商品
|
||
if(options.shareCate==1) {
|
||
// options.checkGrounpI商品id
|
||
// options.share_id:拼团人id
|
||
this.sharePin(options.checkGrounpId,options.share_id);
|
||
}
|
||
// }
|
||
},
|
||
methods: {
|
||
// 分享图分享
|
||
shareImgEv(){
|
||
this.$toolAll.tools.showToast('分享图生成中...','none',10000);
|
||
if(this.shareFlag){
|
||
this.shareFlag = false;
|
||
this.$requst.post('spu/share',{id:this.orderId,is_activity:this.isactivity}).then(res=>{
|
||
base64ToPath(res.data.share_img).then(path=>{
|
||
uni.hideToast();
|
||
this.$toolAll.tools.showToast('正在调起分享...');
|
||
wx.showShareImageMenu({
|
||
path: path,
|
||
success:(res=>{
|
||
this.shareFlag = true;
|
||
this.$requst.post('user/record',{type:'content',action:'share',id:this.orderId}).then(res=>{console.log('分享成功：',res);},error=>{})
|
||
// 调用tools.js中的种植埋点事件
|
||
this.$toolAll.tools.plantPoint(4);
|
||
}),
|
||
fail:(err=>{
|
||
this.shareFlag = true;
|
||
})
|
||
})
|
||
})
|
||
})
|
||
} else {this.$toolAll.tools.showToast('请勿重复点击');}
|
||
},
|
||
// 调起弹框
|
||
tuneUp(index){
|
||
if(this.isNei!=1) {
|
||
|
||
} else {
|
||
if(index==1) {
|
||
this.ifAlone = false;
|
||
} else {
|
||
this.ifAlone = true;
|
||
}
|
||
}
|
||
if(this.detailObj.is_close==0){
|
||
this.showTK = true;
|
||
} else {
|
||
this.$toolAll.tools.showToast('该商品活动已结束')
|
||
}
|
||
},
|
||
// 数量输入事件
|
||
inputNum(e){
|
||
clearTimeout(this.timeout);
|
||
let str = e.detail.value;
|
||
this.timeout = setTimeout(()=>{
|
||
if(str=='' || str==0){
|
||
this.buyNum = 1;
|
||
}
|
||
},500)
|
||
},
|
||
sharePin(id,u_id){
|
||
// id:商品id
|
||
this.$requst.post('spu/group-list',{id:id}).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length){
|
||
res.data.forEach(item=>{
|
||
console.log(item.id,u_id);
|
||
if(item.id==u_id){
|
||
this.pinInfo = {
|
||
id:item.id,
|
||
imgSrc:item.cover,
|
||
name:item.name,
|
||
num:item.num
|
||
}
|
||
this.showPD = true;
|
||
this.detailPTime(item.time);
|
||
}
|
||
})
|
||
}
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},
|
||
cartNumEv(){//购物车数量
|
||
let ntype = 'spu'
|
||
if(this.isScore==3) ntype = 'score';
|
||
this.$requst.post('order/shopping-cart-count',{type:ntype}).then(res=>{
|
||
if(res.code==0){
|
||
this.cartNum = res.data.count;
|
||
}
|
||
})
|
||
},
|
||
checkPTList(id){//查询正在拼团的人数
|
||
uni.request({
|
||
url:`${uni.getStorageSync('hostapi')}spu/group-list`,
|
||
data:{id:id},
|
||
method:'post',
|
||
header:{
|
||
'Content-Type': 'application/json; charset=UTF-8',
|
||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||
},
|
||
success: (res) => {
|
||
if(res.data.code==0){
|
||
let ntime = new Date(res.header.Date).getTime();//服务器时间
|
||
this.timerServer = setInterval(()=>{
|
||
ntime = ntime + 1000
|
||
this.serverTime = new Date(ntime);
|
||
},1000);
|
||
if(res.data.data.length!=0){
|
||
res.data.data.forEach(item=>{
|
||
let pObj = {
|
||
id:item.id,
|
||
imgSrc:item.cover,
|
||
name:item.name,
|
||
num:item.num,//剩余拼团数量
|
||
time:item.time,//拼团截止时间
|
||
time_text:item.time_text//拼团截止时间展示文本
|
||
}
|
||
this.pingArr.push(pObj);
|
||
})
|
||
this.len = this.pingArr.length;
|
||
let n = 2; //假设每行显示2个
|
||
let lineNum = this.len % 2 === 0 ? this.len / 2 : Math.floor( (this.len / 2) + 2 );
|
||
let newPArr = [];
|
||
for (let i = 0; i < lineNum; i++) {
|
||
let temp = this.pingArr.slice(i*n, i*n+n);
|
||
newPArr.push(JSON.parse(JSON.stringify(temp)));
|
||
}
|
||
this.pingArr = newPArr;
|
||
}
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
},
|
||
fail:(err)=> {
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
}
|
||
})
|
||
},
|
||
goGetReadyDan(index){//弹框中的立即购买
|
||
this.showTK = false;
|
||
// {id:1,imgSrc:'/static/tabbar/mya.png',title:'【99皮皮节】【种植发际线】',price:3888,num:1,isActive:false},
|
||
let nprice = '';
|
||
if(this.isNei==3) {
|
||
nprice = this.skuDetail.score;
|
||
} else nprice = this.skuDetail.price/100;
|
||
this.ispt = index;
|
||
if(index==2){nprice = this.skuDetail.original_price/100;}
|
||
let params = {
|
||
id:this.detailObj.activity_id || this.detailObj.spu_id,
|
||
imgSrc:this.$http + this.detailObj.cover,
|
||
coding:this.skuDetail.coding,
|
||
price:nprice,
|
||
num:this.buyNum || 1,
|
||
title:this.detailObj.name,
|
||
sku_name:this.skuDetail.title,
|
||
is_score:this.detailObj.is_score,
|
||
group_id:this.ispt,//0发起拼团 1参与拼团 2单独购买
|
||
is_only:this.ispt,
|
||
pin_user_id:this.pinUserId,//发起拼单人ID
|
||
category_id:this.category_id,//病种ID
|
||
cateNum:this.isNei,
|
||
checkGrounpId:this.detailObj.id,//查询拼团列表ID
|
||
is_activity:this.detailObj.is_activity
|
||
}
|
||
//0：包邮，1：不包邮
|
||
uni.setStorageSync('has_postage',this.detailObj.has_postage);
|
||
let newList = [params];
|
||
uni.setStorageSync('orderList',newList);
|
||
if(this.isNei!=3) {
|
||
// 缓存支付方式
|
||
uni.setStorageSync('payType',this.detailObj.pay_type);
|
||
} else {uni.setStorageSync('payType','')}
|
||
uni.navigateTo({
|
||
// url:`/pagesA/getReadyDan/getReadyDan?isNei=${this.isNei}&isVirtual=${this.detailObj.spu_type}`
|
||
url:`/pagesA/getReadyDan/getReadyDan-two?isNei=${this.isNei}&isVirtual=${this.detailObj.spu_type}`
|
||
})
|
||
},
|
||
addCart(){//添加购物车事件
|
||
if(this.csNum==0){
|
||
this.csNum++;
|
||
this.$toolAll.tools.showToast('正在加入购物车...');
|
||
this.$requst.post('order/shopping-cart-add',{sku_id:this.skuDetail.id,num:this.buyNum}).then(res=>{
|
||
if(res.code==0) {
|
||
this.showTK = false;
|
||
this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
|
||
this.cartNumEv();
|
||
this.csNum = 0;
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
}
|
||
},
|
||
comeTuan(pinId,index,index2){//去拼单
|
||
this.showPD = true;
|
||
this.pinInfo = this.pingArr[index][index2];
|
||
this.pinDao = this.$toolAll.tools.dayTime(this.pinInfo.time,this.serverTime);
|
||
this.timerp = setInterval(()=>{
|
||
if((new Date(this.pinInfo.time).getTime()) - (new Date(this.serverTime).getTime())<=0){
|
||
this.pinDao = '已结束';
|
||
this.checkPTList(this.detailObj.id);
|
||
this.showPD = false;
|
||
clearInterval(this.timerp);
|
||
} else {
|
||
this.pinDao = this.$toolAll.tools.dayTime(this.pinInfo.time,this.serverTime);
|
||
}
|
||
},1000)
|
||
},
|
||
detailPTime(endtime){
|
||
this.pinDao = this.$toolAll.tools.dayTime(endtime,new Date());
|
||
this.timerp = setInterval(()=>{
|
||
if((new Date(endtime).getTime()) - (new Date().getTime())<=0){
|
||
this.pinDao = '已结束';
|
||
this.checkPTList(this.detailObj.id);
|
||
this.showPD = false;
|
||
clearInterval(this.timerp);
|
||
} else {
|
||
this.pinDao = this.$toolAll.tools.dayTime(endtime,new Date());
|
||
}
|
||
},1000)
|
||
},
|
||
atOnceSpellOrder(index){//参与拼单
|
||
if(index==1){
|
||
this.showTK = true;
|
||
this.pinUserId = this.pinInfo.id;
|
||
}
|
||
this.showPD = false;
|
||
clearInterval(this.timerp);
|
||
this.daoTime = '';
|
||
},
|
||
chooselei(index){//类型选择
|
||
this.leiIndex = index;
|
||
this.skuDetail = this.allRes.sku[index];
|
||
},
|
||
lianK(){//客服
|
||
// wx.openCustomerServiceChat({
|
||
// extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
|
||
// corpId: 'ww1f86f258d4ff5817',
|
||
// success(res) {}
|
||
// })
|
||
this.$requst.post('user/rand-bind-service').then(res=>{})
|
||
this.$toolAll.tools.closeTimer()//清空埋点倒计时
|
||
this.$requst.post('user/record',{type:'other',action:'ask',id:0}).then(res=>{},error=>{})
|
||
// 调用tools.js中的种植埋点事件 商品咨询（13普通商品，14活动商品）
|
||
this.$toolAll.tools.plantPoint(this.detailObj.is_activity==0 ? 13:14);
|
||
},
|
||
chooseLike(e) { //收藏事件
|
||
// console.log(this.dataList[e].is_collected);
|
||
if (this.allList[e].is_collected == 0) {
|
||
this.allList[e].is_collected = 1;
|
||
this.dataList[e].collects++;
|
||
// 调用收藏事件
|
||
collectionEV({
|
||
action: 'collect',
|
||
archive_id: this.allList[e].id
|
||
})
|
||
}
|
||
},
|
||
comfirmev(e) { //确认取消收藏事件
|
||
this.allList[e].is_collected = 0;
|
||
this.$toolAll.tools.showToast('正在取消...', 'loading');
|
||
this.dataList[e].collects--;
|
||
// 调用取消收藏事件
|
||
cancleCollectionEV({
|
||
action: 'collect',
|
||
archive_id: this.allList[e].id
|
||
})
|
||
},
|
||
backHome(){
|
||
uni.navigateTo({
|
||
url:'/pages/tabbar/pagehome/pagehome'
|
||
})
|
||
},
|
||
checkDetail(newId,is_activity){
|
||
uni.request({
|
||
url:`${uni.getStorageSync('hostapi')}spu/detail`,
|
||
data:{id:newId,is_activity:is_activity},
|
||
method:'post',
|
||
header:{
|
||
'Content-Type': 'application/json; charset=UTF-8',
|
||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||
},
|
||
success: (res) => {
|
||
console.log(res,'结果');
|
||
if(res.data.code==0){
|
||
this.allRes = res.data.data;
|
||
this.zhuImg = this.$http + res.data.data.detail.cover;
|
||
// 默认显示的sku
|
||
if(res.data.data.sku.length!=0){
|
||
res.data.data.sku.forEach(item=>{
|
||
if(item.is_default==1) {
|
||
this.skuDetail = item;
|
||
}
|
||
})
|
||
}
|
||
this.isLoading = true;
|
||
// 栏目类别
|
||
if(res.data.data.category.length!=0){
|
||
res.data.data.category.forEach((item,index)=>{
|
||
let cateObj = {
|
||
id:item.id,//栏目ID
|
||
title:item.title,//栏目名称
|
||
active:item.active,//是否选中
|
||
model_id:item.model_id,//模型ID
|
||
model_name:item.model_name,//模型标识
|
||
sort:item.sort
|
||
}
|
||
this.cateList.push(cateObj)
|
||
// 默认选中的栏目
|
||
if(item.active==1) this.active = this.cateCurrent = index
|
||
// 默认展示栏目详情
|
||
// if(this.category_id==item.id) this.isNum = index
|
||
})
|
||
}
|
||
// 详情
|
||
this.detailObj = res.data.data.detail;
|
||
// 类型
|
||
this.skuCate = res.data.data.sku;
|
||
if(this.detailObj.activity_type=='group_buy') this.isNei = 0;
|
||
if(this.detailObj.activity_type=='group_make') this.isNei = 1;
|
||
if(this.detailObj.activity_type=='limit_time') this.isNei = 2;
|
||
if(this.detailObj.activity_type=='normal') {
|
||
if(this.isScore==3) {
|
||
this.isNei = this.isScore;
|
||
} else this.isNei = 10;
|
||
}
|
||
if(res.data.data.detail.activity_end_at!=undefined){
|
||
let startTime = new Date(res.header.Date).getTime();
|
||
let endTime = new Date(res.data.data.detail.activity_end_at).getTime();
|
||
if(startTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
|
||
this.daoTime = "活动已结束";
|
||
clearInterval(this.timera);
|
||
} else {
|
||
this.daoTime = this.$toolAll.tools.dayTime(res.data.data.detail.activity_end_at,startTime);//初始化
|
||
this.timera = setInterval(()=>{//倒计时赋值
|
||
startTime = startTime + 1000;
|
||
this.daoTime = this.$toolAll.tools.dayTime(res.data.data.detail.activity_end_at,startTime);
|
||
},1000)
|
||
}
|
||
}
|
||
// 调用tools.js中的种植埋点事件 商品访问（8普通，9活动）
|
||
this.$toolAll.tools.plantPoint(this.detailObj.is_activity==0 ? 8 : 9,this.detailObj.is_activity==0 ? this.detailObj.id*1 : this.detailObj.activity_id);
|
||
// 轮播
|
||
// 图片字符串转数组
|
||
let arrImg = this.detailObj.images.split(',')
|
||
arrImg.forEach(item=>{
|
||
let newImgObj = {
|
||
imgSrc:this.$http + item,
|
||
url:'',
|
||
isVideo:false,
|
||
poster:'',
|
||
}
|
||
// 存图片
|
||
this.bannerList.push(newImgObj)
|
||
})
|
||
// 存视频
|
||
if(this.detailObj.video!=''){
|
||
this.bannerList[0] = {
|
||
imgSrc:this.$http + arrImg[0],
|
||
url:this.$http + this.detailObj.video,
|
||
isVideo:true,
|
||
poster:'',
|
||
}
|
||
}
|
||
// 默认显示是否收藏
|
||
if(this.detailObj.is_collected==0) this.isDetailConllection = false
|
||
if(this.detailObj.is_collected==1) this.isDetailConllection = true
|
||
// 富文本
|
||
this.detailInfo = this.$toolAll.tools.escape2Html(this.detailObj.content)
|
||
// 医生列表
|
||
if(res.data.data.doctor.length!=0){
|
||
res.data.data.doctor.forEach(item=>{
|
||
let docObj = {
|
||
id: item.id,
|
||
imgSrc: item.headimg != null ? item.headimg : '',
|
||
name: item.name,
|
||
cyear: parseFloat(item.work_time),
|
||
bmen: item.dept_name,
|
||
zcheng: '主任医师',
|
||
goodAt: item.diseases,
|
||
show_detail: item.show_detail
|
||
}
|
||
this.doctorList.push(docObj);
|
||
})
|
||
}
|
||
// 正在平团人数
|
||
if(this.isNei==1 && this.detailObj.activity_going.length!=0) {
|
||
this.checkPTList(this.detailObj.id);//查询商品正在拼团列表
|
||
}
|
||
this.checkShopList();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
checkShopList(){// 产品推荐
|
||
let params = {
|
||
keyword:'',//商品关键字 支持模糊搜索
|
||
page:1,
|
||
size:10,
|
||
doctor_role:'',//医生从职位标识 从商品筛选条件接口获取 目前为doctor=医生 design=设计师
|
||
doctor_name:'',//医生姓名 模糊搜索
|
||
activity:'',//活动类型 不填为普通商品+活动商品 normal=普通商品；group_make=拼团；group_buy=团购;limit_time=限时促销
|
||
disease_id:''//病种ID
|
||
}
|
||
uni.request({
|
||
url:`${uni.getStorageSync('hostapi')}spu/list`,
|
||
data:params,
|
||
method:'post',
|
||
header:{
|
||
'Content-Type': 'application/json; charset=UTF-8',
|
||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||
},
|
||
success: (res) => {
|
||
if(res.data.code==0){
|
||
this.dataList = [];
|
||
if(res.data.data.list.length!=0){
|
||
res.data.data.list.forEach(item=>{
|
||
let tuan = false,ping = false,xian = false,integral = false;
|
||
if(item.activity_type=='group_make') ping = true;
|
||
if(item.activity_type=='group_buy') tuan = true;
|
||
if(item.activity_type=='limit_time') xian = true;
|
||
let group_cover = [];
|
||
if(item.activity_group_cover.length!=0) {
|
||
item.activity_group_cover.forEach(item=>{
|
||
// group_cover.push(this.$http + item)
|
||
group_cover.push(item)
|
||
})
|
||
}
|
||
let obj = {
|
||
id:item.id,
|
||
imgSrc: this.$http + item.cover,
|
||
title: item.name,
|
||
zhePrice:item.price/100,
|
||
yuanPrice:item.original_price/100,
|
||
integral:'',
|
||
isTuan:tuan,//是否是团购
|
||
isPing:ping,//是否是拼团活动
|
||
isXian:xian,//是否是限时活动
|
||
isIntegral:integral,//是否是积分
|
||
grade:'',
|
||
disease_name:item.disease_name,//病种名称
|
||
disease_id:item.disease_id,//病种ID
|
||
reponseTime:res.header.Date,//接口响应时间
|
||
activity_end_at:item.activity_end_at,//限时结束时间
|
||
activity_group_cover:group_cover,//参团人的头像
|
||
activity_group_num:item.activity_group_num,//已经参团人数
|
||
activity_id:item.activity_id
|
||
}
|
||
this.dataList.push(obj)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goShopCart(){//去购物车事件
|
||
let isScore = '';
|
||
if(this.isNei==3) isScore = 'score';
|
||
uni.navigateTo({
|
||
url:`/pagesA/shopCart/shopCart?isScore=${isScore}`
|
||
})
|
||
},
|
||
goDoctor(id){
|
||
uni.navigateTo({
|
||
url:`/pagesB/doctorDetail/doctorDetail?doctor_id=${id}`
|
||
})
|
||
},
|
||
choosecateEv(e){//分类列表事件
|
||
this.$requst.post('archives/category', {
|
||
category_id: this.cateList[e].id,
|
||
keyword: '',
|
||
page:this.page,
|
||
size:this.size
|
||
}).then(res => {
|
||
// console.log('该分类下的列表：',res);
|
||
if (res.code == 0) {
|
||
if(this.page==1) {
|
||
if(this.active != e) this.allList = [];
|
||
uni.pageScrollTo({
|
||
scrollTop:0,
|
||
duration:0
|
||
})
|
||
}
|
||
this.total = res.data.list.total;
|
||
if (res.data.list.list.length != 0) {
|
||
res.data.list.list.forEach(item => {
|
||
let num = item.video.search(".mp4")
|
||
let isVideo = false
|
||
if (num != '-1') isVideo = true
|
||
let fabImg = '';
|
||
if (item.published_headimgurl != '' && item.published_headimgurl != null)
|
||
fabImg = this.$http + item.published_headimgurl
|
||
let arrObj = {
|
||
category_id: item.category_id, //栏目ID
|
||
id: item.id,
|
||
is_liked:item.is_liked,
|
||
likes:item.likes,
|
||
is_collected: item.is_collected, //是否已收藏
|
||
collects: item.collects, //收藏量
|
||
views: item.views, //查看量
|
||
main_img: this.$http + item.cover, //封面图
|
||
video: this.$http + item.video, //视频地址
|
||
title: item.title, //标题
|
||
content: item.subtitle, //副标题
|
||
head_img: fabImg || '/static/public/logo.png', //发布者头像
|
||
name: item.published_by || '恒美植发', //发布者昵称
|
||
isVideo: isVideo //是否是视频
|
||
}
|
||
if (item.cover != '') {
|
||
this.allList.push(arrObj);
|
||
}
|
||
})
|
||
}
|
||
this.cateCurrent = e;
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}, error => {this.$toolAll.tools.showToast(error.msg);})
|
||
},
|
||
tapConllection(){//收藏、取消收藏事件
|
||
let isLikeCon = 'collect';
|
||
let nid = '';
|
||
if(this.detailObj.is_activity==1) nid=this.detailObj.spu_id;
|
||
else nid=this.detailObj.id;
|
||
// 调用收藏事件
|
||
if(!this.isDetailConllection) collectionShopEV({action:isLikeCon,id:nid})
|
||
// 调用取消收藏事件
|
||
else cancleCollectionShopEV({action:isLikeCon,id:nid})
|
||
this.isDetailConllection = !this.isDetailConllection
|
||
},
|
||
backTop(){//回到顶部事件
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|