hm-examples/pagesB/aboutUs/aboutUs.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'关于我们'" :statusTitle="true"></status-nav>
		<view :style="{paddingTop: statusHeight+'px'}" class="pad-zy32 pad-x180">
			<!-- 自定义轮播 -->
			<view class="mar-s20">
				<swiper-pu :isplay="isAutoPlay" :bannerList="bannerList" :newHeight="'200'" :newRadius="'10'" :newBottom="'5'"></swiper-pu>
			</view>
			<!-- 导航 -->
			<view class="mar-s50 pad-s10">
				<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" :isCenter="cateListTwo.length<=4?false:true" :newbmo="'#F5F5F5'" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
			</view>
			<!-- 列表 -->
			<view v-if="dataList.length!=0" class="mar-x20">
				<view @tap="goDetail(index)" class="pad-sx30 width100 disjb bbot" v-for="(item,index) in dataList" :key="index">
					<view class="disjb fc">
						<view class="fon30 col3 clips2" style="height: 84rpx;">{{item.title}}</view>
						<view class="fon24 col9 mar-s25">{{item.time}}</view>
					</view>
					<image v-if="item.imgSrc!=''" class="flexs mar-z30" style="width: 140rpx;height: 140rpx;" :src="item.imgSrc" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="dataList.length==0" class="disjcac fc" style="margin-top: 20%;">
				<image class="zanw-img" src="/static/public/zanwn.png" mode="aspectFill"></image>
				<view class="fon24 col3">暂无内容</view>
			</view>
		</view>
		<!-- 底部客服 -->
		<!-- <public-customer :nbottom="100"></public-customer> -->
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
		<!-- 底部导航 -->
		<view class="posixzy">
			<bottom-tab></bottom-tab>
		</view>
	</view>
</template>

<script>
	import swiperPu from '@/components/swiper-pu.vue';
	import {checkBanner} from '@/jsFile/publicAPI.js';
	import bottomTab from '@/components/bottom-tab.vue';
	export default {
		components:{
			swiperPu,
			bottomTab
		},
		data() {
			return {
				cateListTwo:[
					// {title:'热门问题'},
					// {title:'公司新闻'},
					// {title:'热点资讯'},
					// {title:'热点资讯'},
				],
				dataList:[
					// {title:'网红水果排毒真的减脂排毒吗？',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
					// {title:'网红水果排毒真的减脂排毒吗？美食创作人',time:'2021-07-08 10:30',imgSrc:'/static/public/like.png'},
				],
				showTop:false,
				newCurrent:0,
				category_id:'',
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				bannerList:[],
				isAutoPlay:false,
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			},
			appletImg() {
				return this.$store.state.appletImg
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.checkAbout(this.category_id)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			this.isAutoPlay = true;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onLoad(options) {
			this.checkSwi()
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkAbout(this.category_id)
			}
		},
		methods: {
			checkSwi(){
				checkBanner({position:'about-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 haveImg = ''
								if(item.src!='') haveImg = this.$http + item.src
								let banObj = {
									imgSrc:haveImg,
									url:item.url,
									isVideo:isVideo,
									poster:this.$http + item.src,
								}
								this.bannerList.push(banObj)
							})
						}
						// 
					}
				})
			},
			checkAbout(category_id){
				let params = {
					category_id:category_id,
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/about',params).then(res=>{
					// console.log('关于我们：',res);
					if(res.code==0){
						if(this.cateListTwo.length==0){
							if(res.data.category.length!=0){
								res.data.category.forEach(item=>{
									let cateObj = {
										id:item.id,
										mode_id:item.mode_id,
										title:item.title
									}
									this.cateListTwo.push(cateObj)
								})
							}
						}
						if(this.page==1) this.dataList = []
						if(res.data.list.list.length!=0){
							this.total = res.data.list.total
							res.data.list.list.forEach(item=>{
								let newImg = ''
								if(item.cover=='') newImg = this.appletImg;
								else newImg = this.$http + item.cover
								let aobj = {
									id:item.id,
									title:item.title,
									time:item.published_at,
									imgSrc:newImg
								}
								this.dataList.push(aobj)
							})
						}
					}
				},error=>{})
			},
			chooseTwo(index){//二级分类选择
				this.newCurrent = index
				console.log('二级分类：',index);
				this.isZanw = true
				this.page = 1
				this.category_id = this.cateListTwo[index].id
				this.checkAbout(this.cateListTwo[index].id)
			},
			goDetail(index){
				uni.navigateTo({
					url:'/pagesB/articleDetail/articleDetail?id='+this.dataList[index].id +"&category_id="+this.category_id
				})
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>
</style>