digitalMen/pages/painting/painting.vue

<template>
	<view>
		<!-- <view class="subsection">
			<tn-subsection :list="subsectionlist" mode="button" :borderRadius="50"
				animationType="cubic-bezier" bold :height="90" @change="getsubsection"></tn-subsection>
		</view> -->
		<wike-skeleton :count="4" v-if="showskeleton"></wike-skeleton>
		<view style="height: 66px;"></view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="drawList" @query="queryList">
			<!-- <view slot="top" class="z_tabs" :style="{ marginTop: 66 + 'px' ,background: 'none'}"></view> -->
			<view class="subsection">
				<tn-subsection :list="subsectionlist" mode="button" :borderRadius="50" animationType="cubic-bezier" bold
					:height="90" @change="getsubsection"></tn-subsection>
			</view>

			<view style="padding: 150rpx 15rpx 30rpx 15rpx;">
				<view v-if="homeTemplate&&homeTemplate.banner&&homeTemplate.banner.length>0" class="wike_ad">
					<wike-ad></wike-ad>
				</view>

				<tn-waterfall v-if="drawList.length>0" ref="waterfall" v-model="drawList"
					@finish="handleWaterFallFinish">
					<template v-slot:left="{ leftList }">
						<view v-for="(item, index) in leftList" :key="item.id" class="product__item"
							@click="tnproduct(item.id)">
							<view class="item__image">
								<tn-lazy-load :threshold="6000" height="100%"
									:image="item.imgs_file[0]?item.imgs_file[0]:item.origin_url" :index="item.id"
									imgMode="widthFix"></tn-lazy-load>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view v-for="(item, index) in rightList" :key="item.id" class="product__item"
							@click="tnproduct(item.id)">
							<view class="item__image">
								<tn-lazy-load :threshold="6000" height="100%"
									:image="item.imgs_file[0]?item.imgs_file[0]:item.origin_url" :index="item.id"
									imgMode="widthFix"></tn-lazy-load>
							</view>
						</view>
					</template>
				</tn-waterfall>
				<!-- <wike-waterfall :dataList="data" :column="columns" @click="click" :radius="20" :margin="10"></wike-waterfall> -->
			</view>
			<view slot="bottom" class="z_tabs" :style="{ marginBottom: 72 + 'px' }"></view>
		</z-paging>

		<view @click="getcreate" class="suspension u-flex align-center justify-center">
			AI创作
		</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';
	import {
		apiurl
	} from '@/common/request/request';
	import $platform from '@/common/platform';
	let rewardedVideoAd = null;
	export default {
		mixins: [],
		components: {},
		data() {
			return {
				list: [],
				drawList: [],
				subsectionlist: ['StableDiffusion绘图', 'MidJourney绘图'],
				engine: 'sd',
				showskeleton: true

			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'homeTemplate'])
		},

		onLoad() {
			// this.getRandomData()
		},
		onShow() {
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;

			});
		},
		onReady() {
			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd && this.appInfo.video_status == 1) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: this.appInfo.video_id
				});
				rewardedVideoAd.onLoad(() => {
					console.log('onLoad event emit');
				});
				rewardedVideoAd.onError(err => {
					console.log('onError event emit', err);
				});
				rewardedVideoAd.onClose(res => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						this.memberAddCoin();
						this.showcoin = false;
					} else {
						// 播放中途退出，不下发游戏奖励
						uni.showToast({
							title: '看完广告后才可获得积分哦',
							icon: 'none'
						});
					}
				});
			}
			// #endif
			this.loading = false;
		},
		methods: {
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					limit: pageSize,
					engine: this.engine
				};
				this.$http('gallery.all', params).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						this.showskeleton = false
						if (pageNo == 1) {
							this.drawList = []
						}
						this.$refs.paging.complete(res.data.data);
						this.isLoading = false;
					}
				});
			},
			getsubsection(e) {
				// console.log(e);
				this.engine = e.index == 1 ? 'mj' : 'sd'
				this.drawList = []
				this.$refs.paging.reload(true);
			},
			getcreate() {
				uni.navigateTo({
					url: '/pages/painting/draw'
				})
			},
			/* 瀑布流*/
			// 获取随机数据
			getRandomData() {
				// console.log(13);
				// this.loadStatus = 'loading'
				for (let i = 0; i < 10; i++) {
					let index = this.$t.number.randomInt(0, this.data.length - 1)

					let item = JSON.parse(JSON.stringify(this.data[index]))
					item.id = this.$t.uuid()
					this.list.push(item)
					// console.log(this.list);
				}
			},
			// 瀑布流加载完毕事件
			handleWaterFallFinish() {
				// this.loadStatus = 'loadmore'
			},
			tnproduct(id) {

				uni.navigateTo({
					url: '/pages/painting/details?urls=' + id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './painting.scss';
</style>