hengmei-two/pages/tabbar/cate/cate.vue

630 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode 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 :statusBack="false" :titleVal="'分类'" :statusTitle="true"></status-nav>
<view class="disje mar-zy20" :style="{paddingTop: (statusHeight+10)+'px'}">
<template v-if="cateList.length!=0">
<view class="cate-box" :style="{paddingTop:statusHeight+'px'}" style="overflow: hidden;overflow-y: scroll;">
<view class="fon26">
<view class="mar-s20 flexs" :style="{color : ccurrent==indexc ? publicColor:''}"
:class="ccurrent==indexc?'bold cateActive':'catemo'"
v-for="(itemc,indexc) in cateList" :key="indexc"
@tap="chooseCate(indexc)">{{itemc.title}}</view>
</view>
</view>
<view :style="{width:cateW+'px'}" class="flexs" style="height: 10px;"></view>
<view v-show="isLoading" class="pad-x260" style="width: 74%;">
<!-- 热门推荐 -->
<template>
<!-- 自定义轮播 -->
<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'154'" :newRadius="'10'" :newBottom="'10'"></swiper-pu>
<!-- 自定义二级分类 -->
<view class="mar-x20 mar-s40">
<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
</view>
<!-- 列表 -->
<block v-if="!isHot">
<view v-if="dataList.length!=0">
<list-pu @chooseLike="chooseLike" @praise="praiseEv" @comfirmev="comfirmev" :nFon="'14'" :radiu="true" :nmarz="'6'" :nWidth="'90'" :nHeight="'90'" :list="dataList"></list-pu>
</view>
<view v-else style="padding-top: 150rpx;">
<list-pu @chooseLike="chooseLike" @praise="praiseEv" @comfirmev="comfirmev" :list="dataList"></list-pu>
</view>
</block>
<block v-else>
<view v-if="dataShopList.length!=0" style="margin-top: -20rpx;">
<view class="pad-sx20">
<view style="width: 48.6%;float: left;">
<view v-if="index1%2==0" v-for="(item1,index1) in dataShopList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
</view>
<view class="disac">
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing">拼团价</span>
<span v-if="item1.isXian">促销价</span>
¥{{item1.zhePrice}}
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间:{{item1.activity_end_at}}</view>
</view>
</view>
</view>
<view style="width: 48.6%;float: right;">
<view v-if="index1%2!=0" v-for="(item1,index1) in dataShopList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
</view>
<view class="disac">
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing">拼团价</span>
<span v-if="item1.isXian">促销价</span>
¥{{item1.zhePrice}}
</view>
</view>
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间:{{item1.activity_end_at}}</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="disjcac fc" style="margin-top: 34%;">
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
<view class="fon24 col3">暂无内容</view>
</view>
</block>
</template>
<!-- 秃顶种植 -->
<!-- <template v-if="ccurrent!=0">
<view v-if="tuList.length!=0">
<cate-tu :isDetail="true" :list="tuList"></cate-tu>
</view>
<view v-else class="disjcac fc" style="margin-top: 60%;">
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
<view class="fon24 col3">暂无内容</view>
</view>
</template> -->
</view>
</template>
</view>
<!-- 底部tab -->
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
<!-- 返回顶部 -->
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
<!-- 用户信息授权手机号授权 -->
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
</view>
</template>
<script>
import swiperPu from '@/components/swiper-pu.vue';
import cateTu from '@/components/cate-items/cate-tu.vue';
import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
export default {
components:{
swiperPu,
cateTu
},
data() {
return {
ccurrent:0,
cateList:[],
cateListTwo:[//二级分类
],
dataList:[//小课堂数据列表
],
showTop:false,//是否显示返回顶部
tuList:[],
newCurrent:0,
cateW:'',//分类宽度
isLoading:false,
page:1,
size:10,
total:'',//总数
isZanw:true,
category_id:'',//栏目ID
disease_id:'',//一级病种ID 可不填
bannerList:[],
zanArr:[],
dataShopList:[],
timeList:[],
isHot:false,
isAutoPlay:false,
}
},
computed: {
// 底部标题
titleList() {
return this.$store.state.titleList
},
// 底部图标
imgList() {
return this.$store.state.imgList
},
// 主题颜色
publicColor() {
return this.$store.state.publicColor
},
statusHeight() {
return this.$store.state.statusHeight
}
},
onPageScroll(e) {
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
},
onReachBottom() {//触底事件
if(this.total!=this.dataList.length){
this.page++
if(this.ccurrent==0){
if(this.cateListTwo[this.newCurrent].title!='热门商品') {
this.checkCate(this.category_id)//调用分类列表事件
}
} else {
this.otherEv(this.cateList[this.ccurrent].children[this.newCurrent].id)
}
} else {
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
this.isZanw = false
}
},
onUnload() {
this.isAutoPlay = false;
},
onHide() {
this.isAutoPlay = false;
},
onLoad(options) {
if(options.index==undefined) {
this.ccurrent = 0;
} else {
this.ccurrent = options.index*1;
}
// 调用tools.js中的种植埋点事件
this.$toolAll.tools.plantPoint(7);
this.checkSwi()
},
onShow() {
this.isAutoPlay = true;
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
this.checkBZ()//调用病种列表事件
if(this.ccurrent==0) {
if(this.category_id!='') this.checkCate(this.category_id)//调用左侧列表点击事件
}
}
},
methods: {
checkSwi(){
checkBanner({position:'category-hot-banner'}).then(res=>{
if(res.code==0){
if(res.data.length!=0){
res.data.forEach(item=>{
let isVideo = false
if(item.type!='img') isVideo = true
let banObj = {
imgSrc:this.$http + item.src,
url:item.url,
isVideo:isVideo,
poster:this.$http + item.src,
}
this.bannerList.push(banObj)
})
}
//
}
})
},
chooseLike(e){//收藏事件
// console.log(this.dataList[e].is_collected);
if(this.dataList[e].is_collected==0){
this.dataList[e].is_collected = 1
this.dataList[e].collects++;
// 调用收藏事件
collectionEV({action:'collect',archive_id:this.dataList[e].id})
}
},
praiseEv(e){ // 点赞事件
// console.log(this.dataList[e].is_collected);
if(this.dataList[e].is_liked==0){
this.dataList[e].is_liked = 1;
this.dataList[e].likes++;
if(this.dataList[e].likes>1000) this.dataList[e].likes = '999+'
// 调用收藏事件
collectionEV({action:'like',archive_id:this.dataList[e].id})
}
},
comfirmev(e){//确认取消收藏事件
this.dataList[e].is_collected = 0
this.$toolAll.tools.showToast('正在取消...','loading')
this.dataList[e].collects--;
// 调用取消收藏事件
cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})
},
checkBZ(){//病种列表
this.$requst.post('archives/disease').then(res=>{
// console.log('病种列表:',res);
if(res.code==0 && res.data.length!=0){
this.cateList=[]
res.data.forEach(item=>{
let obj = {
id:item.id,
title:item.name,
pid:item.pid,
sort:item.sort,
children: item.children
}
this.cateList.push(obj)
})
let reObj = {
id:this.cateList[0].id,
title:'热门推荐',
pid:this.cateList[0].pid,
sort:this.cateList[0].sort
}
this.cateList.unshift(reObj)
if(this.ccurrent==0){
this.checkCate(this.category_id)//调用热门分类列表事件
} else {
this.chooseCate(this.ccurrent);
if(this.cateList[this.ccurrent].length) {
this.otherEv(this.cateList[this.ccurrent].children[0].id);//调用其他分类列表事件
}
}
if(this.cateList.length!=0){
setTimeout(()=>{
const query = wx.createSelectorQuery()
query.select('.cate-box').boundingClientRect((rect) => {
// console.log('分类宽度:',rect.width);
this.cateW = rect.width
}).exec()
},300)
}
setTimeout(()=>{this.isLoading = true},500)
}
})
},
checkCate(category_id){//分类列表事件
this.dataShopList = [];
// this.$toolAll.tools.showToast('加载中...')
this.$requst.post('archives/hot',{category_id:category_id,page:this.page,size:this.size}).then(res=>{
// console.log('分类列表:',res);
if(res.code==0){
if(this.category_id==''){
if(res.data.category.length!=0){
this.cateListTwo = []
res.data.category.forEach(item=>{
let cateObj = {
id:item.id,
model:item.model,
model_id:item.model_id,
sort:item.sort,
title:item.title
}
this.cateListTwo.push(cateObj)
})
this.cateListTwo.push({title:'热门商品'})
this.cateListTwo.push({title:'筛选'})
this.category_id = this.cateListTwo[0].id
}
}
// 获取列表
if(this.page==1) {
this.dataList = [];
uni.pageScrollTo({
scrollTop:0,
duration:0
})
}
if(res.data.list.list.length!=0){
this.total = res.data.list.total
res.data.list.list.forEach(item=>{
let fabImg = '';
if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
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: fabImg || '/static/public/logo.png',//发布者头像
name:item.published_by || '恒美植发',//发布者昵称
isVideo:item.video.includes(".mp4"),//是否是视频
likes:item.likes,//点赞数量
is_liked:item.is_liked//是否已点赞
}
this.dataList.push(tObj);
})
}
}
},error=>{})
},
checkData(disease_id){//一级病种列表事件
this.$requst.post('archives/disease-question',{disease_id:disease_id}).then(res=>{
// console.log('一级病种列表内容:',res);
if(res.code==0){
this.tuList = []
if(res.data.list.length!=0){
res.data.list.forEach(item=>{
let arr = []
if(item.children.length!=0){
item.children.forEach(itemt=>{
let objt = {
category_id:itemt.category_id,
content:itemt.title,
id:itemt.id,
disease_id:itemt.disease_id,//一级病种ID 1
disease_second_id:itemt.disease_second_id,//二级病种ID 12
subtitle:itemt.subtitle//内容副标题
}
arr.push(objt)
})
}
let obj = {
title:item.name,
src:'',
list:arr
// {content:'秃顶种植保养周期'},
// {content:'秃顶种植保养手册'},
// {content:'秃顶种植保养项目'},
// {content:'那些人需要保养'},
// ]
}
this.tuList.push(obj)
})
}
}
},error=>{})
},
chooseCate(index){//分类选中事件
this.page = 1;
this.ccurrent = index;
this.newCurrent = 0;
if(this.ccurrent!=0){
// this.checkData(this.cateList[index].id);
if(this.cateList[index].children.length){
this.cateListTwo = []
this.cateList[index].children.forEach(item=>{
let cateObj = {
id:item.id,
title:item.name
}
this.cateListTwo.push(cateObj)
})
this.cateListTwo.push({title:'筛选'})
this.category_id = this.cateListTwo[0].id
this.otherEv(this.cateList[index].children[0].id);
} else {
this.cateListTwo = [];
this.dataList = [];
}
} else {
this.category_id = '';
this.checkCate('');
}
// console.log('分类选中:',index);
},
otherEv(id){
this.$requst.post('archives/disease-second-question',{disease_second_id:id,page:this.page,size:this.size}).then(res=>{
// 获取列表
if(this.page==1) {
this.dataList = [];
uni.pageScrollTo({
scrollTop:0,
duration:0
})
}
if(res.data.list.list.length!=0){
this.total = res.data.list.total
res.data.list.list.forEach(item=>{
let fabImg = '';
if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
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: fabImg || '/static/public/logo.png',//发布者头像
name:item.published_by || '恒美植发',//发布者昵称
isVideo:item.video.includes(".mp4"),//是否是视频
likes:item.likes,//点赞数量
is_liked:item.is_liked//是否已点赞
}
this.dataList.push(tObj);
})
} else {
this.dataList = [];
}
})
},
chooseTwo(index){//二级分类选择
this.newCurrent = index
this.isZanw = true;
this.isHot = false;
this.page = 1
this.category_id = this.cateListTwo[index].id
// console.log('二级分类:',this.cateListTwo[index].title);
if(this.cateListTwo[index].title=='筛选'){
uni.navigateTo({
url:'/pagesB/searchPage/searchPage'
})
} else if(this.cateListTwo[index].title=='热门商品'){
this.isHot = true;
this.checkSotList()
} else {
if(this.ccurrent==0){
this.checkCate(this.cateListTwo[index].id)
} else {
this.otherEv(this.cateListTwo[index].id);
}
}
},
checkSotList(){
this.dataList = [];
let params = {
page:1,
size:2000,
is_hot:1
}
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){
clearInterval(this.timer);
// if(this.page==1) {
this.zanArr = [];
this.dataShopList = [];
this.timeList = [];
// }
this.total = res.data.total;
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,//病种名称
reponseTime:res.header.Date,//接口响应时间
activity_end_at:item.activity_end_at,//限时结束时间
activity_group_cover:group_cover,//参团人的头像
activity_group_num:item.activity_group_num,//已经参团人数
}
this.zanArr.push(obj)
})
this.zanArr.forEach((item,index)=>{
if(item.activity_end_at!='') {
let obj = {
id:item.id,
reponseTime:item.reponseTime,
time:item.activity_end_at,
nIndex:index
}
this.timeList.push(obj);
}
})
if(this.timeList!=0){
this.$toolAll.tools.showToast('加载中...')
this.timer = setInterval(()=>{//定时器
if(this.timeList.length!=0){
this.timeList.forEach((item,index)=>{
if(item.id==this.zanArr[item.nIndex].id){
let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增,即:开始时间
if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
this.zanArr[item.nIndex].activity_end_at = "活动已结束";
} else {
// 继续进行倒计时
this.zanArr[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
}
}
})
}
},1000)
setTimeout(()=>{
this.dataShopList = this.zanArr;
},1000)
} else {
this.dataShopList = this.zanArr;
}
}
}
}
})
},
goPage(id,index){//进入商品详情事件
uni.navigateTo({
url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataShopList[index].isIntegral}`
})
},
backTop(){//回到顶部事件
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
},
}
}
</script>
<style>
</style>