720 lines
30 KiB
Vue
720 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 状态栏 -->
|
|||
|
|
<status-nav v-if="invite_code==''" :titleVal="'商品详情'" :statusTitle="true"></status-nav>
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<view :style="{top: statusHNH+'px'}" 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 class="pad-x180" :style="{paddingTop: (statusHNH+50)+'px'}">
|
|||
|
|
<!-- 自定义轮播 -->
|
|||
|
|
<swiper-pu :browseP="true" :bannerList="bannerList" :newHeight="'250'" :newRadius="'0'" :newBottom="'5'"></swiper-pu>
|
|||
|
|
<view v-if="isLoading">
|
|||
|
|
<view v-show="cateCurrent==isNum">
|
|||
|
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<view class="mar-x20 fon36 col3 bold clips3">
|
|||
|
|
<span class="radius15 colf fon20" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">秃顶种植</span>
|
|||
|
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">团购</span>
|
|||
|
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</span>
|
|||
|
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">促销活动</span>
|
|||
|
|
<span style="line-height: 50rpx;">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人尖/头顶加密/微针/纤维/脱发</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon24" style="color: #7D7D7D;">无任何额外消费</view>
|
|||
|
|
<!-- 团购商品详情时显示 -->
|
|||
|
|
<view class="disjbac fon24 mar-s20" style="color: #7D7D7D;">
|
|||
|
|
<view>团购累计参与人员：300人</view>
|
|||
|
|
<view>还剩余：60人</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mar-s20" style="color: #F85050;font-size: 40rpx;font-weight: bold;"><span>团购价:</span>￥3888 <span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;margin-left: 20rpx;">￥4205</span></view>
|
|||
|
|
<view class="mar-s20" style="color: #F85050;font-size: 40rpx;font-weight: bold;"><span>拼团价:</span>￥3888 <span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;margin-left: 20rpx;">￥4205</span></view>
|
|||
|
|
<view class="disjbac" style="align-items: flex-end;margin-top: -20rpx;padding-bottom: 20rpx;">
|
|||
|
|
<view class="disac">
|
|||
|
|
<image class="flexs" src="/static/public/huiy.png" style="width: 42rpx;height: 30rpx;" mode="aspectFill"></image>
|
|||
|
|
<view class="fon24 col9">黄金会员可购买</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disac flexs">
|
|||
|
|
<view @tap="shareEv" class="disac fc mar-zy36 posir">
|
|||
|
|
<image src="/static/public/weix.png" style="width: 42rpx;height: 42rpx;" mode=""></image>
|
|||
|
|
<view class="fon24 col9">分享</view>
|
|||
|
|
<button class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button>
|
|||
|
|
<!-- <button v-if="haveImg" class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="disac fc" @tap="tapConllection">
|
|||
|
|
<image v-if="isDetailConllection" src="/static/public/yconllection.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
|||
|
|
<image v-else src="/static/public/conllection.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
|||
|
|
<view class="fon24 col9">收藏</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pad-x30 pad-s10" style="border-bottom: 2rpx solid #E6E6E6;">
|
|||
|
|
<view class="fon36 colf bold pbackc tc pad-sx20" style="border-radius: 45rpx;">倒计时：25小时35分26秒</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 规格 -->
|
|||
|
|
<view class="disjbac tc mar-s20">
|
|||
|
|
<view class="disjcac fon28 col3">规格：</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="fon26 col3 mar-x20">上市时间</view>
|
|||
|
|
<view class="fon24" style="color: #B3B3B3;">2021.02.01</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="fon26 col3 mar-x20">有效期</view>
|
|||
|
|
<view class="fon24" style="color: #B3B3B3;">三个月</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="fon26 col3 mar-x20">可用时间</view>
|
|||
|
|
<view class="fon24" style="color: #B3B3B3;">正常使用</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="fon26 col3 mar-x20">术前须知</view>
|
|||
|
|
<view class="fon24" style="color: #B3B3B3;">无</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 销量，库存 -->
|
|||
|
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
|||
|
|
<view class="fon28 disjbac">
|
|||
|
|
<view class="col3">销量：</view>
|
|||
|
|
<view style="color: #B3B3B3;">已售30件</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon28 disjbac mar-s40">
|
|||
|
|
<view class="col3">库存：</view>
|
|||
|
|
<view style="color: #B3B3B3;">剩余3000件</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 拼团 -->
|
|||
|
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
|||
|
|
<view class="fon28 col3">2人正在拼团，可以直接参与</view>
|
|||
|
|
<swiper :autoplay="true" :interval="3000" :duration="1000" circular="true" vertical="true" style="height: 176px;">
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="disjbac posir pad-sx20">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
|||
|
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
|||
|
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
|||
|
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
|||
|
|
<view>
|
|||
|
|
<view>还差1人拼成</view>
|
|||
|
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
|||
|
|
</view>
|
|||
|
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac posir pad-sx20">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
|||
|
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
|||
|
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
|||
|
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
|||
|
|
<view>
|
|||
|
|
<view>还差1人拼成</view>
|
|||
|
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
|||
|
|
</view>
|
|||
|
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view> -->
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="disjbac posir pad-sx20">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
|||
|
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
|||
|
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
|||
|
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
|||
|
|
<view>
|
|||
|
|
<view>还差1人拼成</view>
|
|||
|
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
|||
|
|
</view>
|
|||
|
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</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 class="pad20 bacf mar-zy20 radius20 mar-s20">
|
|||
|
|
<view class="fon28 col3 bold">医生</view>
|
|||
|
|
<view class="disjbac posir pad-sx20">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
|||
|
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
|||
|
|
<view class="fon28 col3" style="width: 50%;">廖恒利医生</view>
|
|||
|
|
<view class="fon24" style="color: #7D7D7D;width: 50%;">擅长：毛发种植</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac pad-sx20">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
|||
|
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
|||
|
|
<view class="fon28 col3" style="width: 50%;">廖恒利医生</view>
|
|||
|
|
<view class="fon24" style="color: #7D7D7D;width: 50%;">擅长：毛发种植</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 产品推荐 -->
|
|||
|
|
<view class="fon30 bold mar-s40 mar-x10 pad-zy50" style="color: #3875F6;">产品推荐</view>
|
|||
|
|
<shopList></shopList>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部导航 -->
|
|||
|
|
<view class="posixzy disjbac bacf pad-zy32 btnBKS">
|
|||
|
|
<view class="posir">
|
|||
|
|
<image @tap="backHome" class="posia backH" src="/static/public/back-home.png" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="disac fon26 colf">
|
|||
|
|
<view @tap="showTK=true" class="disjcac lianShare" style="background-color: #3875F6; border-top-left-radius: 51rpx;border-bottom-left-radius: 51rpx;">加入购物车</view>
|
|||
|
|
<view @tap="showTK=true" class="disjcac lianShare" style="background-color: #F85050;border-top-right-radius: 51rpx;border-bottom-right-radius: 51rpx;">立即购买</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 购物车 -->
|
|||
|
|
<navigator url="/pagesA/shopCart/shopCart" hover-class="none">
|
|||
|
|
<view style="position: fixed;right: 30rpx;bottom: 300rpx;">
|
|||
|
|
<view class="posir" style="width: 112rpx;height: 112rpx;">
|
|||
|
|
<image src="/static/public/cart.png" mode="aspectFill" style="width: 112rpx;height: 112rpx;"></image>
|
|||
|
|
<view class="posia" style="background: #F85050;width: 28rpx;height: 28rpx;border-radius: 100%;color: #FFFFFF;font-size: 24rpx;text-align: center;line-height: 28rpx;top: 20rpx;right: 20rpx;"><view style="transform: scale(.8);">99</view></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</navigator>
|
|||
|
|
<!-- 客服 -->
|
|||
|
|
<view style="position: fixed;right: 16rpx;bottom: 140rpx;">
|
|||
|
|
<view class="posir" style="width: 142rpx;height: 142rpx;">
|
|||
|
|
<image src="/static/public/kf-logo.png" mode="aspectFill" style="width: 142rpx;height: 142rpx;"></image>
|
|||
|
|
<button open-type="share" class="posia syxzo"></button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 立即购买，加入购物车弹框 -->
|
|||
|
|
<view v-if="showTK" class="posAll" @tap="showTK=false">
|
|||
|
|
<view class="bacf posixzy" @tap.stop="showTK=true" style="border-radius: 40rpx 40rpx 0rpx 0rpx;">
|
|||
|
|
<view class="disjb pad-zy50">
|
|||
|
|
<image src="/static/public/like.png" mode="aspectFill" style="width: 214rpx;height: 214rpx;border-radius: 15rpx;bottom: 0;flex-shrink: 0;margin-top: -107rpx;margin-right: 30rpx;"></image>
|
|||
|
|
<view class="disjb width100">
|
|||
|
|
<view>
|
|||
|
|
<view class="fon40 mar-sx10" style="color: #F85050;">￥3888</view>
|
|||
|
|
<view><span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;">￥4205</span></view>
|
|||
|
|
</view>
|
|||
|
|
<image @tap.stop="showTK=false" src="../../static/public/cha-close.png" style="width: 24px;height: 24px;margin-top: 20rpx;" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<view class="fon36 col3 bold clips3 pad-zy30 mar-s20">
|
|||
|
|
<span class="radius10 colf fon20" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">秃顶种植</span>
|
|||
|
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">团购</span>
|
|||
|
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</span>
|
|||
|
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">促销活动</span>
|
|||
|
|
<span style="line-height: 50rpx;">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人尖/头顶加密/微针/纤维/脱发</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac mar-sx40 pad-zy30 col3">
|
|||
|
|
<view class="fon28">类型：</view>
|
|||
|
|
<view class="fon26 disac">
|
|||
|
|
<view @tap="chooselei(indexl)" v-for="(item,indexl) in leiList" :key="indexl" :class="leiIndex==indexl?'activelei':'molei'" :style="{background:leiIndex==indexl?publicColor:'#F2F2F2'}">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
|||
|
|
<view class="col3">库存：</view>
|
|||
|
|
<view class="fon26 col3" style="color: #5B5B5B;">1000件</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
|||
|
|
<view class="col3">购买数量：</view>
|
|||
|
|
<view class="fon26 col3 disac bold">
|
|||
|
|
<image src="../../static/public/del.png" mode="" style="width: 65rpx;height: 30px;"></image>
|
|||
|
|
<input type="text" value="1" style="width: 100rpx;height: 28px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
|
|||
|
|
<image src="../../static/public/add.png" mode="" style="width: 65rpx;height: 30px;"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 加入购物车，立即购买 -->
|
|||
|
|
<view class="disjbac pad-zy30 colf fon28 mar-x20">
|
|||
|
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #3875F6;">加入购物车</view>
|
|||
|
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #F85050;">立即购买</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 单独购买，立即拼团 -->
|
|||
|
|
<view class="disjbac pad-zy30 colf fon28 mar-x20">
|
|||
|
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #C8C8C8;">单独购买</view>
|
|||
|
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #F85050;">立即拼团</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 去拼单弹框 -->
|
|||
|
|
<view v-if="showPD" @tap.stop="showPD=false" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 6;background: rgba(0,0,0,.54);display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<view class="bacf radius20 width100 posir" @tap.stop="showPD=true" style="font-weight: 500;text-align: center;margin: 0 85rpx;height: 458rpx;">
|
|||
|
|
<view class="fon28 col3" style="margin: 34rpx 0 27rpx 0;">参与廖恒利的拼单</view>
|
|||
|
|
<view class="fon24 col3" style="margin-bottom: 63rpx;">仅剩1个名额，19:05:28后结束</view>
|
|||
|
|
<view class="disjcac" style="margin-bottom: 77rpx;">
|
|||
|
|
<image src="/static/public/like.png" mode="" style="width: 100rpx;height: 100rpx;border-radius: 100%;"></image>
|
|||
|
|
<image src="/static/public/pin-jie.png" mode="" style="width: 42rpx;height: 42rpx;margin: 0 47rpx;"></image>
|
|||
|
|
<image src="/static/public/weiz.png" mode="" style="width: 100rpx;height: 100rpx;border-radius: 100%;"></image>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 464rpx;height: 60rpx;line-height: 60rpx;color: #FFFFFF;background: #F85050;border-radius: 10rpx;margin: 0 auto;font-size: 28rpx;">参与拼单</view>
|
|||
|
|
<image @tap.stop="showPD=false" src="../../static/public/pin-close.png" class="posia" style="width: 77rpx;height: 77rpx;right: -30rpx;top: -30rpx;" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 返回顶部 -->
|
|||
|
|
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
|||
|
|
<!-- 弹框授权 -->
|
|||
|
|
<empower @buttonH="buttonH" :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
|
|||
|
|
<!-- 弹框 -->
|
|||
|
|
<view v-if="isShowP" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
|||
|
|
<view class="bacf radius20 width100 tank-box">
|
|||
|
|
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
|||
|
|
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
|||
|
|
<view @tap="isShowP=false" class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
|||
|
|
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
|||
|
|
立即绑定
|
|||
|
|
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import listDoctor from '@/components/list-doctor.vue';
|
|||
|
|
import swiperPu from '@/components/swiper-pu.vue';
|
|||
|
|
import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
|
|||
|
|
import empower from '@/components/empower.vue';
|
|||
|
|
import shopList from '@/components/shop-list.vue';
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
listDoctor,
|
|||
|
|
swiperPu,
|
|||
|
|
empower,
|
|||
|
|
shopList
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
|||
|
|
isLoading:true,
|
|||
|
|
vision:false,
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
publicColor:uni.getStorageSync('publicColor') || '#3875F6',//主题颜色
|
|||
|
|
cateCurrent:0,
|
|||
|
|
haveImg:true,
|
|||
|
|
cateList:[
|
|||
|
|
{
|
|||
|
|
id:1,
|
|||
|
|
title:'商品详情',
|
|||
|
|
pid:11,
|
|||
|
|
sort:4
|
|||
|
|
},{
|
|||
|
|
id:2,
|
|||
|
|
title:'问题',
|
|||
|
|
pid:22,
|
|||
|
|
sort:4
|
|||
|
|
},{
|
|||
|
|
id:3,
|
|||
|
|
title:'案例日记',
|
|||
|
|
pid:33,
|
|||
|
|
sort:4
|
|||
|
|
},{
|
|||
|
|
id:4,
|
|||
|
|
title:'效果模拟',
|
|||
|
|
pid:33,
|
|||
|
|
sort:4
|
|||
|
|
},{
|
|||
|
|
id:5,
|
|||
|
|
title:'科普视频',
|
|||
|
|
pid:33,
|
|||
|
|
sort:4
|
|||
|
|
}],
|
|||
|
|
bannerList:[
|
|||
|
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:true,poster:''},
|
|||
|
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''}
|
|||
|
|
],//轮播
|
|||
|
|
xgList:[//相关推荐
|
|||
|
|
],
|
|||
|
|
dataList:[//推荐医生
|
|||
|
|
],
|
|||
|
|
showTop:false,
|
|||
|
|
isDetailConllection:false,//是否已收藏
|
|||
|
|
isNum:0,
|
|||
|
|
listArrone:[],//问题
|
|||
|
|
listArrtwo:[//案例日记
|
|||
|
|
],
|
|||
|
|
listArrthree:[//效果模拟
|
|||
|
|
],
|
|||
|
|
listArrfour:[//科普视频
|
|||
|
|
],
|
|||
|
|
detailObj:{},//详情
|
|||
|
|
detailInfo:'',//富文本
|
|||
|
|
category_id:'',//栏目ID
|
|||
|
|
active:'',//是否是详情页
|
|||
|
|
// jieDuan:false,
|
|||
|
|
share_id:0,
|
|||
|
|
invite_code:'',
|
|||
|
|
isShowP:false,
|
|||
|
|
showTK:false,
|
|||
|
|
leiIndex:0,
|
|||
|
|
leiList:['体验装','正式装'],
|
|||
|
|
showPD:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|||
|
|
},
|
|||
|
|
onReachBottom() {//触底事件
|
|||
|
|
// for (let i = 0; i < 4; i++) {
|
|||
|
|
// if(this.cateCurrent==0) {
|
|||
|
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉？',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:0}
|
|||
|
|
// this.listArrone.push(obj)
|
|||
|
|
// }
|
|||
|
|
// if(this.cateCurrent==1) {
|
|||
|
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉？',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:1}
|
|||
|
|
// this.listArrtwo.push(obj)
|
|||
|
|
// }
|
|||
|
|
// if(this.cateCurrent==2) {
|
|||
|
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉？',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:2}
|
|||
|
|
// this.listArrthree.push(obj)
|
|||
|
|
// }
|
|||
|
|
// if(this.cateCurrent==3) {
|
|||
|
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉？',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:3}
|
|||
|
|
// this.listArrfour.push(obj)
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
onShareTimeline() {},
|
|||
|
|
onShareAppMessage(res) {
|
|||
|
|
var ya = this;
|
|||
|
|
this.$requst.post('user/record',{type:'content',action:'share',id:this.detailObj.id}).then(res=>{console.log('分享成功：',res);},error=>{})
|
|||
|
|
let maiOjb = {
|
|||
|
|
e:4,//内容分享
|
|||
|
|
c:this.detailObj.id*1,
|
|||
|
|
t:new Date().getTime()//当前时间戳
|
|||
|
|
}
|
|||
|
|
this.$toolAll.tools.maiDian(maiOjb)
|
|||
|
|
var shareObj = {
|
|||
|
|
title: `${ya.detailObj.title}`, // 默认是小程序的名称(可以写slogan等)
|
|||
|
|
path: `/pagesB/problemDetail/problemDetail?id=${this.detailObj.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() {
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
if(options.category_id!=undefined) {
|
|||
|
|
this.category_id = options.category_id
|
|||
|
|
this.conid = options.id
|
|||
|
|
this.invite_code = options.invite_code
|
|||
|
|
uni.setStorageSync('ninvite_code',this.invite_code)
|
|||
|
|
if(this.invite_code!='' && this.invite_code!=undefined){
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: (res)=> {
|
|||
|
|
if (res.code) {
|
|||
|
|
var params = {
|
|||
|
|
code:res.code,
|
|||
|
|
invite_code:this.invite_code,//用户邀请码
|
|||
|
|
}
|
|||
|
|
this.$requst.post('user/login',params).then(res => {
|
|||
|
|
if(res.data.token!=''){
|
|||
|
|
if(res.data.is_active==0) {
|
|||
|
|
this.haveImg = false
|
|||
|
|
this.vision = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.overdue()
|
|||
|
|
this.$toolAll.tools.isLogin()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// this.checkDetail(this.conid)
|
|||
|
|
if(options.share_id!=undefined) this.share_id = options.share_id
|
|||
|
|
let maiOjb = {
|
|||
|
|
e:4,//内容分享
|
|||
|
|
c:this.conid*1,
|
|||
|
|
t:new Date().getTime()//当前时间戳
|
|||
|
|
}
|
|||
|
|
this.$toolAll.tools.maiDian(maiOjb)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
comeTuan(){//去拼单
|
|||
|
|
this.showPD = true;
|
|||
|
|
},
|
|||
|
|
chooselei(index){//类型选择
|
|||
|
|
this.leiIndex = index
|
|||
|
|
},
|
|||
|
|
moveHandle(){//禁止底层滑动
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
getphonenumber(e){//授权绑定手机号
|
|||
|
|
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
|||
|
|
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
|||
|
|
// console.log('手机号信息：',res);
|
|||
|
|
if(res.code==0){
|
|||
|
|
this.isShowP = false
|
|||
|
|
this.$toolAll.tools.showToast('手机号绑定成功','success')
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
} else {
|
|||
|
|
this.isShowP = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
chooseLike(e){//收藏事件
|
|||
|
|
// console.log(this.dataList[e].is_collected);
|
|||
|
|
let cateId = ''
|
|||
|
|
let newArr = []
|
|||
|
|
if(this.cateCurrent==0) {
|
|||
|
|
newArr = this.listArrone
|
|||
|
|
cateId = newArr[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==1) {
|
|||
|
|
newArr = this.listArrtwo
|
|||
|
|
cateId = newArr[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==2) {
|
|||
|
|
newArr = this.listArrthree
|
|||
|
|
cateId = newArr[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==3) {
|
|||
|
|
newArr = this.listArrfour
|
|||
|
|
cateId = newArr[e].id
|
|||
|
|
}
|
|||
|
|
if(newArr[e].is_collected==0){
|
|||
|
|
newArr[e].is_collected = 1
|
|||
|
|
// 调用收藏事件
|
|||
|
|
collectionEV({action:'collect',archive_id:cateId})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
comfirmev(e){//确认取消收藏事件
|
|||
|
|
let cateId = ''
|
|||
|
|
if(this.cateCurrent==0) {
|
|||
|
|
this.listArrone[e].is_collected = 0
|
|||
|
|
cateId = this.listArrone[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==1) {
|
|||
|
|
this.listArrtwo[e].is_collected = 0
|
|||
|
|
cateId = this.listArrtwo[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==2) {
|
|||
|
|
this.listArrthree[e].is_collected = 0
|
|||
|
|
cateId = this.listArrthree[e].id
|
|||
|
|
}
|
|||
|
|
if(this.cateCurrent==3) {
|
|||
|
|
this.listArrfour[e].is_collected = 0
|
|||
|
|
cateId = this.listArrfour[e].id
|
|||
|
|
}
|
|||
|
|
this.$toolAll.tools.showToast('正在取消...','loading')
|
|||
|
|
// 调用取消收藏事件
|
|||
|
|
cancleCollectionEV({action:'collect',archive_id:cateId})
|
|||
|
|
},
|
|||
|
|
chooseLikex(e){//收藏事件
|
|||
|
|
if(this.xgList[e].is_collected==0){
|
|||
|
|
this.xgList[e].is_collected = 1
|
|||
|
|
// 调用收藏事件
|
|||
|
|
collectionEV({action:'collect',archive_id:this.xgList[e].id})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
comfirmevx(e){//确认取消收藏事件
|
|||
|
|
this.xgList[e].is_collected = 0
|
|||
|
|
this.$toolAll.tools.showToast('正在取消...','loading')
|
|||
|
|
// 调用取消收藏事件
|
|||
|
|
cancleCollectionEV({action:'collect',archive_id:this.xgList[e].id})
|
|||
|
|
},
|
|||
|
|
buttonH(e){//授权成功
|
|||
|
|
this.haveImg = e
|
|||
|
|
if(e) {
|
|||
|
|
this.vision = false
|
|||
|
|
this.isShowP = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cancleEv(e){//取消授权
|
|||
|
|
if(e==0) this.vision = false
|
|||
|
|
},
|
|||
|
|
backHome(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/tabbar/pagehome/pagehome'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
shareEv(){
|
|||
|
|
if(this.haveImg == false) {
|
|||
|
|
this.vision = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// checkDetail(newId){
|
|||
|
|
// this.$requst.post('archives/detail',{id:newId,share_id:this.share_id}).then(res=>{
|
|||
|
|
// // console.log('详情数据：',res);
|
|||
|
|
// if(res.code==0){
|
|||
|
|
// this.isLoading=true
|
|||
|
|
// // 栏目类别
|
|||
|
|
// if(res.data.category.length!=0){
|
|||
|
|
// res.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.detail
|
|||
|
|
// let maiOjb = {
|
|||
|
|
// e:1,//内容访问
|
|||
|
|
// c:this.detailObj.id*1,
|
|||
|
|
// 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)
|
|||
|
|
// })
|
|||
|
|
// // 存视频
|
|||
|
|
// 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)
|
|||
|
|
// // 相关推荐xgList
|
|||
|
|
// if(res.data.diary.length!=0){
|
|||
|
|
// res.data.diary.forEach(item=>{
|
|||
|
|
// let tObj = {
|
|||
|
|
// 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:item.video.includes(".mp4")//是否是视频
|
|||
|
|
// }
|
|||
|
|
// if(item.cover!='' && item.video==''){
|
|||
|
|
// this.xgList.push(tObj)
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// // 推荐医生
|
|||
|
|
// if(res.data.doctor.length!=0){
|
|||
|
|
// res.data.doctor.forEach(item=>{
|
|||
|
|
// let doObj = {
|
|||
|
|
// 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.dataList.push(doObj)
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// this.choosecateEv(this.cateCurrent)
|
|||
|
|
// }
|
|||
|
|
// },error=>{})
|
|||
|
|
// },
|
|||
|
|
choosecateEv(e){
|
|||
|
|
this.cateCurrent = e
|
|||
|
|
this.$requst.post('archives/category',{category_id:this.cateList[e].id,keyword:''}).then(res=>{
|
|||
|
|
// console.log('该分类下的列表：',res);
|
|||
|
|
if(res.code==0){
|
|||
|
|
if(e==0 && this.active!=e) this.listArrone = []
|
|||
|
|
if(e==1 && this.active!=e) this.listArrtwo = []
|
|||
|
|
if(e==2 && this.active!=e) this.listArrthree = []
|
|||
|
|
if(e==3 && this.active!=e) this.listArrfour = []
|
|||
|
|
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!=''){
|
|||
|
|
if(e==0 && this.active!=e) this.listArrone.push(arrObj)
|
|||
|
|
if(e==1 && this.active!=e) this.listArrtwo.push(arrObj)
|
|||
|
|
if(e==2 && this.active!=e) this.listArrthree.push(arrObj)
|
|||
|
|
if(e==3 && this.active!=e) this.listArrfour.push(arrObj)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
},
|
|||
|
|
tapConllection(){//收藏、取消收藏事件
|
|||
|
|
let isLikeCon = 'collect'
|
|||
|
|
// if(!this.jieDuan){
|
|||
|
|
// let isAuth = this.$toolAll.tools.returnAuth()
|
|||
|
|
// if(!isAuth){
|
|||
|
|
// 调用收藏事件
|
|||
|
|
if(!this.isDetailConllection) collectionEV({action:isLikeCon,archive_id:this.detailObj.id})
|
|||
|
|
// 调用取消收藏事件
|
|||
|
|
else cancleCollectionEV({action:isLikeCon,archive_id:this.detailObj.id})
|
|||
|
|
this.isDetailConllection = !this.isDetailConllection
|
|||
|
|
// } else this.jieDuan = true
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
backTop(){//回到顶部事件
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: 0,
|
|||
|
|
duration: 300
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
</style>
|