shuquAi/pages/template/template.vue

<template>
	<view>
		<wike-skeleton :count="4" v-if="list.length === 0"></wike-skeleton>
		<view 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>
		<wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let interstitialAd = null,
		timer,
		time2;
	export default {
		data() {
			return {
				tobheight: 45,
				platform: this.$platform.get(),
				list: []
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData'])
		},
		onLoad() {
			var that = this;
			this.getList();
		},
		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 == 1) {
							that.showInterstitial();
						}
					});
					interstitialAd.show().catch(err => {
						// console.error(err);
					});
				}
			}, 4000);
			// #endif
		},
		onUnload() {
			clearInterval(time2);
		},
		methods: {
			getList() {
				this.$http('template.list').then(res => {
					if (res.code == 0) {
						this.list = res.data;
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
					}
				});
			},
			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>