digitalMen/pages/template/template.vue

<template>
	<view>
		<wike-skeleton :count="4" v-if="list.length === 0"></wike-skeleton>
		<view  v-if="appInfo.page_template == 1 ||appInfo.page_template == 2 || !appInfo.page_template">
			<view v-if="appInfo.template_style&&appInfo.template_style == 1" class="directask">
						<block v-for="(item, index) in list" :key="index">
							<!-- #ifdef MP-WEIXIN -->
							<view v-if="index == 0">
								<view class="wxad" v-if="appInfo.wxad_template && appInfo.wxad_template >= 1">
									<view style="width: 100%">
										<wike-flow-main :flowtype="appInfo.wxad_template" :banner_id="appInfo.banner_id"
											:video_banner_id="appInfo.video_banner_id"
											:native_id="appInfo.native_id"></wike-flow-main>
									</view>
								</view>
							</view>
							<!-- #endif -->
							<view class="askaquestion u-flex align-center justify-between">
								<u--text :text="item.title" iconStyle="font-size: 21px;color: #26B3A0" size="15" prefixIcon="tags"
									:lines="1" bold block lineHeight="20"></u--text>
							</view>
							<view class="u-flex flex-wrap justify-between align-center">
								<navigator class="helpme" :url="'/pages/template/detail?id=' + row.id"
									v-for="(row, index2) in item.children" :key="index2">
									<view class="title">{{ row.title }}</view>
									<view class="sub_title">{{ row.sub_title }}</view>
								</navigator>
							</view>
						</block>
						<wike-ad></wike-ad>
					</view>
					<block v-else>
						<wike-scrollview v-if="list.length > 0" :viewList="list"  :scrollHeight="pageheight" @leftClick="leftClick" @rightClick="rightClick"></wike-scrollview>
					</block>
			
			
		</view>
		<view v-else>
			<u-sticky bgColor="#fff"><u-tabs :list="list" @click="tabsClick" keyName="title"></u-tabs></u-sticky>
			<view class="directask">
			<view class="askaquestion u-flex align-center justify-between">
				<u--text :text="itemInfo.title" iconStyle="font-size: 21px;color: #26B3A0" size="15" prefixIcon="tags" :lines="1" bold block lineHeight="20"></u--text>
			</view>
			<view class="u-flex flex-wrap justify-between align-center">
				<navigator class="helpme" :url="'/pages/template/detail?id=' + row.id" v-for="(row, index2) in itemInfo.children" :key="index2">
					<view class="title">{{ row.title }}</view>
					<view class="sub_title">{{ row.sub_title }}</view>
				</navigator>
			</view>
			</view>
		</view>
		
		<wike-tabbar2 v-if="appInfo.page_template == 3" :is_aipainting="appInfo.is_aipainting" :onTabbar="true" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
		<wike-tabbar v-else :onTabbar="true" :is_aipainting="appInfo.is_aipainting" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar>
		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let interstitialAd = null,
		timer,
		time2;
	export default {
		data() {
			return {
				tobheight: 45,
				pageheight: 0,
				platform: this.$platform.get(),
				list: [],
				itemInfo:{},
				is_aipainting:''
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData'])
		},
		
		onLoad() {
			var that = this;
			
			this.getList();
		},
		onShow() {
			// #ifdef H5
			this.pageheight = uni.$u.sys().windowHeight - 70
			// #endif
			// #ifdef MP-WEIXIN
			this.pageheight = uni.$u.sys().windowHeight
			// #endif
		},
		onReady() {
			let that = this;
			// #ifdef MP-WEIXIN
			clearTimeout(timer);
			// 在适合的场景显示插屏广告
			timer = setTimeout(function() {
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd && that.appInfo.interstitial_status == 1) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: that.appInfo.interstitial_id
					});
					interstitialAd.onLoad(() => {});
					interstitialAd.onError(err => {});
					interstitialAd.onClose(() => {
						if (that.appInfo.interstitial_infinite_status  && that.appInfo.interstitial_infinite_status == 1) {
						         that.showInterstitial();
						 }else{
						        interstitialAd.show().catch(err => {
						        console.error(err);
						});
						}
					});
					interstitialAd.show().catch(err => {
						// console.error(err);
					});
				}
			}, 4000);
			// #endif
		},
		onUnload() {
			clearInterval(time2);
		},
		methods: {
			leftClick(e) {
				
			},
			
			getList() {
				this.$http('template.list').then(res => {
					if (res.code == 0) {
						this.list = res.data;
						this.itemInfo=res.data[0]
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
					}
				});
			},
			tabsClick(e){
				// console.log(e);
				this.itemInfo =e
			},
			ondetails(id) {
				uni.navigateTo({
					url: '/pages/template/detail?id=' + id
				});
			},
			showInterstitial() {
				time2 = setInterval(
					function() {
						interstitialAd.show().catch(err => {
							// console.error(err);
						});
					},
					this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
				);
			}
		}
	};
</script>

<style lang="scss">
	.directask {
		padding: 30rpx 30rpx 200rpx;
		border-top: 1px solid #ededed;

		.askaquestion {
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}

		.helpme {
			background: #f5f8f7;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 48%;

			margin-bottom: 30rpx;

			// height: 92px;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 18rpx;
				color: #000;
				overflow:hidden; text-overflow:ellipsis; white-space:nowrap
			}

			.sub_title {
				color: #8f9ca2;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}

	.wxad {
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>