hengmei-two/pagesB/shopDetail/shopDetail.vue

923 lines
35 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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: statusHNH+'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: statusHNH+'px'}" v-else class="posiszy" style="height: 50px;"></view>
<view class="pad-x180" :style="{paddingTop: isNei!=3?(statusHNH+60)+'px':statusHNH+'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">无任何额外消费</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 @tap="shareEv" 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!='活动已结束'">倒计时:{{daoTime}}</view>
<view class="fon36 colf bold pbackc tc pad-sx20 radius45" v-else>{{daoTime}}</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">医生</view>
<view @tap="goDoctor(item.id)" v-for="(item,index) in doctorList" :key="index" class="disjbac posir pad-sx20">
<image :src="item.imgSrc" mode="aspectFill" class="flexs big-img"></image>
<view class="disjbac width100 mar-z20 pad-sx20">
<view class="fon28 col3 width50">{{item.name}}</view>
<view class="fon24 width50 col7D">擅长:{{item.goodAt}}</view>
</view>
<view v-if="(doctorList.length-1)!=index" class="duan-xian"></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="showTK = true" class="disjcac lianShare addCart-btn"><span v-if="isNei!=1">加入购物车</span><span v-else>单独购买</span></view>
<view @tap="showTK = true" class="disjcac lianShare mai-btn"><span v-if="isNei!=1">立即购买</span><span v-else>发起拼团</span></view>
</view>
</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 v-if="haveImg" 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" 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="background: #C8C8C8;">单独购买</view>
<view @tap.stop="goGetReadyDan(0)" class="ev-btn bcf8">发起拼团</view>
</view>
</view>
</view>
<!-- 返回顶部 -->
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
<!-- 弹框授权 -->
<empower @buttonH="buttonH" :vision="vision" :isWhere="2"></empower>
<!-- -->
<auth-phone v-if="isShowP"></auth-phone>
</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';
export default {
components:{
listDoctor,
swiperPu,
shopList
},
data() {
return {
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
isLoading:false,
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor') || '#3875F6',//主题颜色
cateCurrent:0,
swiperHeight:uni.getSystemInfoSync().windowWidth,
haveImg:true,
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,
vision:false,
isShowP:false,
page:1,
size:20,
total:0,
isZanw:true,
allList:[]
}
},
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) {
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=>{})
let maiOjb = {
e:this.detailObj.is_activity==0 ? 10 : 11,//商品分享10普通商品11活动商品
c: this.detailObj.is_activity==0 ? this.detailObj.id*1 : this.detailObj.activity_id,
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
if(ya.detailObj.share_img==null) ya.detailObj.share_img = ya.detailObj.cover;
var shareObj = {
     title: `${ya.detailObj.name}`, // 默认是小程序的名称(可以写slogan等)
     path: `/pagesB/shopDetail/shopDetail?id=${this.detailObj.spu_id}&category_id=${this.category_id}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面,必须是以‘/’开头的完整路径
     imageUrl: ya.$http + ya.detailObj.share_img//自定义图片路径可以是本地文件路径、代码包文件路径或者网络图片路径支持PNG及JPG不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  };
  return shareObj;
},
onShow() {
uni.removeStorageSync('chooseAddress');
this.isAutoPlay = true;
},
onHide() {
this.isAutoPlay = false;
},
onUnload() {
clearInterval(this.timera);
clearInterval(this.timerp);
clearInterval(this.timerServer);
this.isAutoPlay = false;
},
onLoad(options) {
//查询过期时间和是否有token并调用登录事件
this.$toolAll.tools.overdue();
if(uni.getStorageSync('is_active')!=1){
this.vision = true;
this.loginEv(options);
}
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;}
this.checkDetail(options.id,options.is_activity);
this.cartNumEv();
// 如果链接是拼团链接,则调起发起拼团人的商品
if(options.shareCate==1) {
// options.checkGrounpI商品id
// options.share_id:拼团人id
this.sharePin(options.checkGrounpId,options.share_id);
}
},
methods: {
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);
})
},
loginEv(options){
uni.login({
provider: 'weixin',
success: (res)=> {
if (res.code) {
var params = {
code:res.code,
invite_code:options.invite_code || '',//用户邀请码
source_code:options.source_code || '',
channel:options.channel || ''
}
this.$requst.post('user/login',params).then(res => {
if(res.data.token!=''){
if(res.data.is_active==0) {
this.haveImg = false;
}
}
},error => {})
}
},
});
},
buttonH(e){//授权成功
this.haveImg = e
if(e) {
this.vision = false
this.isShowP = true
}
},
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:`https://hengmei.scdxtc.cn/api/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);
}
})
},
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.detailObj.score;
} else nprice = this.skuDetail.price/100;
this.ispt = index;
if(index==2){nprice = this.skuDetail.original_price/100;}
let params = {
id:this.detailObj.spu_id,
imgSrc:this.$http + this.detailObj.cover,
coding:this.skuDetail.coding,
price:nprice,
num:this.buyNum,
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
}
let newList = [params];
uni.setStorageSync('orderList',newList);
uni.navigateTo({
url:`/pagesA/getReadyDan/getReadyDan?isNei=${this.isNei}`
})
},
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;
}
})
}
},
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(){//客服
// if(!this.jieDuan){
// let isAuth = this.$toolAll.tools.returnAuth()
// if(!isAuth){
if(this.haveImg == false) {
this.vision = true
} else {
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=>{})
let maiOjb = {
e:this.detailObj.is_activity==0 ? 13:14,//商品咨询13普通商品14活动商品
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
}
// } else this.jieDuan = true
// }
},
chooseLike(e) { //收藏事件
// console.log(this.dataList[e].is_collected);
if (this.allList[e].is_collected == 0) {
this.allList[e].is_collected = 1
// 调用收藏事件
collectionEV({
action: 'collect',
archive_id: this.allList[e].id
})
}
},
comfirmev(e) { //确认取消收藏事件
this.allList[e].is_collected = 0;
this.$toolAll.tools.showToast('正在取消...', 'loading')
// 调用取消收藏事件
cancleCollectionEV({
action: 'collect',
archive_id: this.allList[e].id
})
},
backHome(){
uni.navigateTo({
url:'/pages/tabbar/pagehome/pagehome'
})
},
shareEv(){
if(this.haveImg == false) {
this.vision = true
}
},
checkDetail(newId,is_activity){
uni.request({
url:`https://hengmei.scdxtc.cn/api/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) => {
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
})
}
if(this.invite_code!='' && this.invite_code!=undefined){
const query = wx.createSelectorQuery()
query.select('.statusHNH').boundingClientRect((rect) => {
// console.log('状态栏+标题栏:',rect);
this.statusHNH = rect.height
// console.log(this.statusHNH );
}).exec()
}
// 详情
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)
}
}
let maiOjb = {
e:this.detailObj.is_activity==0 ? 8 : 9,//商品访问8普通9活动
c: this.detailObj.is_activity==0 ? this.detailObj.id*1 : this.detailObj.activity_id,
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
// 轮播
// 图片字符串转数组
let arrImg = this.detailObj.images.split(',')
arrImg.forEach(item=>{
let newImgObj = {
imgSrc:this.$http + item,
url:'',
isVideo:false,
poster:'',
}
// 存图片
this.bannerList.push(newImgObj)
})
console.log(this.bannerList);
// 存视频
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,
name:item.name,
goodAt:item.skill
}
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:`https://hengmei.scdxtc.cn/api/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)
})
}
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 arrObj = {
category_id: item.category_id, //栏目ID
id: item.id,
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: '/static/public/logo.png', //发布者头像
name: '恒美植发', //发布者昵称
isVideo: isVideo //是否是视频
}
if (item.cover != '') {
this.allList.push(arrObj);
}
})
}
this.cateCurrent = e;
} else this.$toolAll.tools.showToast(res.msg);
}, error => {})
},
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>