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">
	.subsection{
		margin: 0rpx 25rpx 0;
		position: fixed;
		width: 93.8%;
		top: 30rpx;
		// top: 30rpx;
		z-index: 9999;
	}
	/* 瀑布流*/
	.product__item {
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 0 10rpx;
		margin-bottom: 20rpx;
		// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

		.item {

			/* 图片 start */
			&__image {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				border: 1rpx solid #F8F7F8;
				// border-radius: 20rpx;
				overflow: hidden;
			}

			/* 图片 end */

			/* 内容 start */
			&__data {
				padding: 14rpx 0rpx;
			}

			/* 标题 start */
			&__title-container {
				text-align: justify;
				line-height: 38rpx;
				vertical-align: middle;
			}

			&__store-type {
				height: 28rpx;
				font-size: 20rpx;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 4rpx;
				border-radius: 6rpx;
				white-space: nowrap;
				text-align: center;
				top: -2rpx;
				margin-right: 6rpx;
			}

			&__title {
				font-size: 30rpx;
			}

			/* 标题 end */

			/* 标签 start */
			&__tags-container {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
			}

			&__tag {
				margin: 10rpx;
				color: #7C8191;
				background-color: #F3F2F7;
				padding: 4rpx 14rpx 6rpx;
				border-radius: 10rpx;
				font-size: 20rpx;

				&:first-child {
					margin-left: 0rpx !important;
				}
			}

			/* 标签 end */
			/* 内容 end */
		}
	}
	.suspension{
		background: linear-gradient(to right, #00ca88, #00BCD4);
		color: #fff;
		width: 132rpx;
		height: 130rpx;
		border-radius: 50%;
		position: fixed;
		right: 30rpx;
		bottom: 220rpx;
		font-weight: bold;
		font-size: 30rpx;
		
	}
	.wike_ad{
		margin: 0 6px 11px;
	}
	.db{
		height: 83px;
	}
</style>