fanyunAi/pages/index/index.vue

<template>
	<view class="outer">
		<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 class="subsection">
				<tn-subsection :current="current" :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)"
							>
							<!-- 这里使用.stop修饰符，阻止 -->
							<view class="item__image" >
								<tn-lazy-load :threshold="6000" height="100%"
									:image="item.imgs_file[0]?item.imgs_file[0]:item.previewUrl" :index="item.id"
									imgMode="widthFix">	</tn-lazy-load>
				<!-- 	<button class="item__btn" size="mini" @click="drawStyle">绘制同款</button> -->
				<view class="item__btn" @click.stop="drawStyle(item)">绘制同款</view>
							</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.previewUrl" :index="item.id"
									imgMode="widthFix">
									</tn-lazy-load>
										<view class="item__btn" @click.stop="drawStyle(item)">绘制同款</view>
							</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 :currTabIndex='0' v-if="appInfo.page_template == 3" :is_aipainting="appInfo.is_aipainting"
			:onTabbar="true" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
		<wike-tabbar :currTabIndex='0' 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>



		<!-- 初始引导界面 -->
		<div class="leadBg" v-if="showInitLead">
			<div class="leadBox1" v-if="showLead1" :style="{'background-image': `url(${leadBaseUrl}index_lead1.png)`}">
				<div class="nextBtn" @click="nextLead">
				</div>
			</div>
			<div class="leadBox2" v-if="showLead2" :style="{'background-image': `url(${leadBaseUrl}index_lead2.png)`}">
				<div class="nextBtn" @click="finishLead">
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl
	} from '@/common/request/request';
	import $platform from '@/common/platform';
	import BaseUrl from '@/common/config.js';

	let rewardedVideoAd = null;
	export default {
		mixins: [],
		components: {},
		data() {
			return {
				leadBaseUrl: BaseUrl.leadBaseUrl,
swiperList:[],
				showInitLead: false,
				showLead2: false,
				showLead1: true,

				list: [],
				drawList: [],
				subsectionlist: ['艺术照', 'MJ绘图', 'SD绘图'],
				engine: 'rh',
				current: 0,
				showskeleton: true,

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

		onLoad(o) {
			this.showInitLead = !uni.getStorageSync('showInitLead')

			if (o.uniacid) {
				uni.setStorageSync('uniacid', o.uniacid)
				console.log('onload获取的应用ID----paiting', uni.getStorageSync('uniacid'));
			}
		},
		onShow() {
			this.$http('user.info').then(res => {
				if (res.code == 0) {
					this.showFixInfo = res.data.is_new;
				}
			})

			// 网络变化检测
			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: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'logout']),
			nextLead() {
				this.showLead1 = false
				this.showLead2 = true
			},
			// gallerydetail(item){
			// 	let that = this
			// 	this.$http('gallery.detail',{
			// 		id:item.id,
			// 		type:item.engine
			// 	}).then(res=>{
			// 		if(res.code == 0){
			// 			if(this.engin == 'sd'){
			// 				for(var i =0;i<res.data.imgs_file.length;i++){
			// 			var url={
			// 				id: res.data.id,
			// 				type: 'image',
			// 				url: res.data.imgs_file[i],
			// 			}		
			// 				}
			// 			}
						
			// 		}
			// 	})
			// },
			
			
			
		
			
			drawStyle(item){
				 console.log(item)
			if(item.engine == 'rh'){
				uni.navigateTo({
					url:'/pages/painting/draw?rh_modalId=-1&rh_modalurl='+item.previewUrl
				})
				console.log('/pages/painting/draw?rh_modalId=-1&rh='+item.previewUrl,66666666666666)
			}else if(item.engine == 'mj'){
				uni.navigateTo({
					url:'/pages/painting/draw?prompt='+item.prompt+'&engine'+item.engine+'&model_name'+item.mode+'&refImg='+'undefined'
				})
			}
				console.log(3333333333,item)
			
			},
			finishLead() {
				this.showInitLead = false
				this.showLead2 = false
				uni.setStorageSync('showInitLead', true)
			},
			handleCancel() {
				this.showFixInfo = false
				this.logout()
				// uni.clearStorage()

				uni.reLaunch({
					url: '/pages/user/signin'
				})
			},
			handleConfirm() {
				uni.navigateTo({
					url: '/pages/user/userinfo?isNewUser=true'
				})
			},
			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.index);

				this.current = e.index
				this.engine = e.index == 0 ? 'rh' : 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 + '&from=' + this.engine
				})
			}
		}
	};
</script>

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