fanyunAi/pages/template/template.vue

<template>
	<view>
		<div class="addFix" v-if="showInitLead">
			<div class="leadBg">
				<div class="leadBox1" v-if="showLead1" :style="{'background-image': `url(${leadBaseUrl}yy_lead.png)`}">
					<div class="nextBtn" @click="nextLead">
					</div>
				</div>
				<div class="leadBox2" v-if="showLead2">
					<div class="nextBtn" @click="finishLead">
					</div>
				</div>
			</div>
		</div>


		<wike-skeleton :count="4" v-if="list.length === 0"></wike-skeleton>
		<!-- 新增顶部搜索框 -->
		<view class="searchBox">
			<uni-search-bar @confirm="searchConfirm" @input="handleInput" v-model="searchKey" placeholder="请输入关键词"
				radius="50" cancelButton="none" bgColor="#F3F4F6"></uni-search-bar>
		</view>

		<view class=" " v-if="searchKey">
			<view class="searchResList" v-if="searchList.length">
				<navigator class="item" v-for="(item,index) in searchList"
					:url="'/pages/template/detail?id=' + item.id">
					<view class="title">{{item.title}} </view>
					<view class="sub_title"> {{item.sub_title}}</view>
				</navigator>
			</view>
			<view class="" style="padding-top:162rpx ;" v-else>
				<u-empty mode="search" icon="/static/empty.png">
				</u-empty>
			</view>


		</view>
		<view class="" v-else style="		padding-top: 130rpx;">
			<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" style="">
							<u--text style="position:relative;z-index:0" class="tagColor" :text="item.title"
								iconStyle="font-size: 21px;color:#207CF7;" size="15" prefixIcon="tags" :lines="1" bold
								block lineHeight="20"></u--text>
						</view>
						<!-- <view class="u-flex flex-wrap justify-between align-center"> -->
						<view class="" style="display: flex;flex-wrap: wrap;justify-content:space-between;">
							<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>
		</view>
		<wike-tabbar2 :currTabIndex='1' v-if="appInfo.page_template == 3" :is_aipainting="appInfo.is_aipainting"
			:onTabbar="true" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
		<wike-tabbar :currTabIndex='1' v-else :onTabbar="true" :is_aipainting="appInfo.is_aipainting"
			:isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar>

		<u-modal @cancel="handleCancel" @confirm="handleConfirm" cancelText='退出登录' showCancelButton :show="showFixInfo"
			confirmColor="#26b3a0" confirmText="完善信息" title="请完善个人手机号信息后使用本应用"
			content='您已充值,但未绑定手机号,请完善信息以方便为您提供进一步的服务'></u-modal>
	</view>
</template>

<script>
	import BaseUrl from '@/common/config.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let interstitialAd = null,
		timer,
		time2;
	export default {
		data() {
			return {
				leadBaseUrl: BaseUrl.leadBaseUrl,

				showInitLead: false,
				showLead2: false,
				showLead1: true,

				searchKey: '',
				searchList: [],

				tobheight: 45,
				pageheight: 0,
				platform: this.$platform.get(),
				list: [],
				itemInfo: {},
				is_aipainting: '',

				showFixInfo: false,
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData'])
		},

		watch: {
			searchKey(n, o) {
				if (n) {
					// uni.showLoading()
					setTimeout(() => {
						this.getSearchList(n)
					}, 1000)
				}
			}
		},

		onLoad() {
			this.showInitLead = !uni.getStorageSync('showInitLead_yy')
			console.log("uni.getStorageSync('showInitLead')", uni.getStorageSync('showInitLead_yy'));

			var that = this;

			this.getList();
		},
		onShow() {
			if (getApp().lastPage == 'templateDes') {
				getApp().lastPage = null
			} else {
				this.searchKey = ''
				this.searchList = []
			}

			this.$http('user.info').then(res => {
				if (res.code == 0) {
					console.log('用户是否是首次支付成功，但未填写手机号', res.data.is_new);
					this.showFixInfo = res.data.is_new;
					// this.showFixInfo = true;
				}
			})

			// #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: {
			nextLead() {
				// this.showLead1 = false
				// this.showLead2 = true

				this.showInitLead = false
				this.showLead1 = false
				uni.setStorageSync('showInitLead_yy', true)
			},
			finishLead() {
				this.showInitLead = false
				this.showLead2 = false
				uni.setStorageSync('showInitLead_yy', true)
			},

			async getSearchList(search) {
				this.$http('template.list', {
					search
				}).then(res => {
					if (res.code == 0) {
						this.searchList = res.data;
						console.log('getSearchList返回值：', res);
					}
				});
			},
			handleInput() {

			},
			searchConfirm() {

			},

			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'logout']),
			handleCancel() {
				this.showFixInfo = false
				this.logout()
				// uni.clearStorage()

				uni.reLaunch({
					url: '/pages/user/signin'
				})
			},
			handleConfirm() {
				uni.navigateTo({
					url: '/pages/user/userinfo?isNewUser=true'
				})
			},


			leftClick(e) {

			},

			getList() {
				this.$http('template.list').then(res => {
					if (res.code == 0) {
						this.list = res.data;
						// this.list = [];

						console.log('应用数据返回值------：', this.list);
						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" scoped>
	@import '@/pages/template/template.scss';

	.tagColor {
		color: $tc;
	}

	.directask {
		padding: 30rpx 30rpx 200rpx;
		// border-top: 1px solid #ededed;

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

		.helpme {
			// background: #f5f8f7;
			background: rgba(0, 53, 95, 0.06);
			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>