MoeNovaClient/pages/index/index.vue

<template>
	<view :style="{ height: windowHeight + 'px'}">
		<view style="display: flex;justify-content: flex-end;">
			<view class="view0 step1"></view>
		</view>
		<view class="view1 step2"></view>
		<view class="view2 step3"></view>
		<view class="view3 step4"></view>
		<view class="view4 step5"></view>
		<view class="view5 step6"></view>
		<view style="display: flex;justify-content: flex-end;">
			<view class="view6 step7"></view>
		</view>
		<image src="@/static/image/white-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 50 + 'px'}"
			:show-scrollbar="false">
			<template #top>
				<page-navbar>
					<template #navLeft>
						<view style="display:flex;flex-direction: row;justify-content: center; align-items: center;">
							<image src="@/static/icon/loacltion.png" style="width: 30rpx; height: 38rpx;"></image>
							<text style="margin-left:10rpx;font-size: 28rpx;">
								杭州
							</text>
							<image src="@/static/icon/down.png" style="width: 30rpx; height: 16rpx;"></image>
						</view>
					</template>
					<template #navCenter>
						<view style="width: 520rpx;height: 50rpx;margin-left:126rpx;">
							<uv-input placeholder="“潮玩大作战” 派对季重磅开启!" border="none"
								:custom-style="{background:'#8BDB67',paddingLeft:'20rpx'}" shape="circle">
								<template #prefix>
									<image src="@/static/icon/fiery.png" style="width: 14px;height: 18px;"></image>
								</template>
								<template #suffix>
									<view style="width: 77rpx;height: 42rpx;
										background-color: #57A335;border-radius: 20rpx;
										margin-right: 5rpx;display: flex;align-items: center;justify-content: center;">
										<image src="@/static/icon/search.png" style="width: 32rpx;height: 32rpx;">
										</image>
									</view>
								</template>
							</uv-input>
						</view>
					</template>
				</page-navbar>
			</template>
			<z-paging-cell>
				<sortble :default-sorts="['uvSwiper','classModel','uvSwiperCard']">
					<template #uvSwiper>
						<uv-swiper :list="bannerList" :autoplay="true" circular :interval="5000" indicator
							indicator-mode="dot" height='380' radius='0'></uv-swiper>
					</template>
					<template #classModel>
						<view class="classModel">
							<view class="classModel-bg classModel-bg1" ref="classModel1">
								<image class="classModel-img" src="@/static/zhHans-text-icon/text-2.png" mode="">
								</image>
							</view>
							<view class="classModel-bg classModel-bg2" ref="classModel2">
								<image class="classModel-img" src="@/static/zhHans-text-icon/text-3.png" mode="">
								</image>
							</view>
							<view class="classModel-bg" ref="classModel3">
								<image class="classModel-img" src="@/static/zhHans-text-icon/text-4.png" mode="">
								</image>
							</view>
						</view>
					</template>
					<template #uvSwiperCard>
						<view style="background: #fff;padding: 30rpx 0;">
							<image src="/static/zhHans-text-icon/text-1.png" ref="classModel4"
								style="width: 432rpx;height: 34rpx;margin-left: 28rpx;margin-bottom: 43rpx"></image>
							<swiper-card :width="257" :height="290">
								<template v-for="(item,index) in cardList" :slot="`card-${index}`">
									<view style="position: relative;align-items: center;"
										:style="{width:`${257}rpx`,height:`${290}rpx`}">
										<image style="position: absolute;top:15px;" :src="item.img"
											:style="{width:`${257}rpx`,height:`${290}rpx`}">
										</image>
										<image style="position: absolute;" :src="item.bgimg"
											:style="{width:`${257}rpx`,height:`${290}rpx`}"></image>
									</view>
								</template>
							</swiper-card>
						</view>
					</template>
				</sortble>
			</z-paging-cell>
			<z-paging-cell>
				<w-waterfall :data="list">
					<template v-slot:content="{item,width}">
						<card :item="item" :width="width" :custom-style="{background:'#fff'}" textColor="#000"></card>
					</template>
				</w-waterfall>
			</z-paging-cell>
		</z-paging>
		<tabbar-vue :tabbars="tabbars" :currentIndex="0" ref="tabbar"></tabbar-vue>

		<novice-guidance :step="step"></novice-guidance>
	</view>
</template>

<script>
	import sortble from "@/components/sortble/sortble.vue";
	import tabbarVue from "@/components/tabbar/tabbar.vue";
	import pageNavbar from "@/components/page-navbar/page-navbar.vue";
	import wWaterfall from "@/components/w-waterfall/w-waterfall.vue";
	import tabbar from "@/mixins/tabbar";
	import card from "@/components/card/card.vue";
	// import noviceGuidance from "@/components/novice-guidance/index.vue";
	export default {
		components: {
			sortble,
			tabbarVue,
			pageNavbar,
			wWaterfall,
			// noviceGuidance
		},
		mixins: [tabbar],
		data() {
			return {
				step: {
					name: 'workbenchSet5',
					guideList: [{
						el: '.step1',
						tips: '这里是第一步的介绍~',
						next: '下一步',
					}, {
						el: '.step2',
						tips: '这里是第二步的介绍~',
						next: '下一步',
					}, {
						el: '.step3',
						tips: '这里是第三步的介绍~',
						next: '下一步',
					}, {
						el: '.step4',
						tips: '这里是第四步的介绍~',
						next: '下一步',
					}, {
						el: '.step5',
						tips: '这里是第五步的介绍~',
						next: '下一步',
					}, {
						el: '.step6',
						tips: '这里是第六步的介绍~',
						next: '下一步',
					}, {
						el: '.step7',
						tips: '最后一步啦~',
						next: '完成',
					}]
				},
				windowHeight: uni.getWindowInfo().windowHeight,
				bannerList: [
					'https://e.zhichao.art/AI_images/a_1112_10.png',
					'https://e.zhichao.art/AI_images/a_1112_108.png',
					'https://e.zhichao.art/AI_images/a_1112_113.png',
				],
				cardList: [{
					img: '/static/img/img-1.png',
					bgimg: '/static/image/bg-2.png'
				}, {
					img: '/static/img/img-3.png',
					bgimg: '/static/image/bg-3.png'
				}, {
					img: '/static/img/img-2.png',
					bgimg: '/static/image/bg-1.png'
				}, ],
				list: [], // 瀑布流全部数据
				dataList: [],
			}
		},
		onLoad() {
			let that = this;
			// this.$nextTick(() => {
			// 	let step = [{
			// 		el: '.step1',
			// 		tips: '这里是第一步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step2',
			// 		tips: '这里是第二步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step3',
			// 		tips: '这里是第三步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step4',
			// 		tips: '这里是第四步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step5',
			// 		tips: '这里是第五步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step6',
			// 		tips: '这里是第六步的介绍~',
			// 		next: '下一步',
			// 	}, {
			// 		el: '.step7',
			// 		tips: '最后一步啦~',
			// 		next: '完成',
			// 	}]
			// 	for (var i = 0; i < step.length; i++) {
			// 		that.step.guideList.push(step[i])
			// 	}
			// 	setTimeout(() => {
			// 		// that.$refs.guidance.start(that.step)
			// 	}, 1000)
			// })
			this.getData().then(res => {
				this.list = res.data;
			});
		},
		// 下拉刷新数据
		methods: {
			queryList() {
				this.getData().then(res => {
					this.list = res.data;
					this.$refs.paging.complete(this.list);
				});
			},
			async init() {
				const {
					data
				} = await this.getData();
				this.list.push.apply(this.list, data);
			},
			// 模拟的后端数据
			getData() {
				return new Promise((resolve) => {
					const imgs = [{
							url: 'https://e.zhichao.art/AI_images/a_1112_10.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1112_108.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1112_113.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1112_13.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1112_137.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1112_141.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__562.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__568.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__569.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__570.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__571.png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/a_1114__575.png',
						},


					];
					let list = [];
					const doFn = (i) => {
						const randomIndex = Math.floor(Math.random() * 10);
						return {
							allowEdit: i == 0,
							image: imgs[randomIndex].url,
							w: imgs[randomIndex].width,
							h: imgs[randomIndex].height,
							title: i % 2 == 0 ? `玛丽` : `凌音`,
							desc: i % 2 == 0 ?
								`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
						}
					};
					// 模拟异步
					setTimeout(() => {
						for (let i = 0; i < 20; i++) {
							list.push(doFn(i));
						}
						resolve({
							data: list
						});
					}, 200)
				})
			}
		}
	}
</script>

<style lang="scss">
	.classModel {
		width: 750rpx;
		height: 110rpx;
		// #ifndef APP-NVUE
		display: flex;
		// #endif
		// #ifdef APP-NVUE
		flex-direction: row;
		// #endif 
		justify-content: space-around;
		margin-bottom: 20rpx;

		.classModel-bg {
			width: 210rpx;
			height: 90rpx;
			background-color: #3F4141;
			border-radius: 60rpx;
			box-shadow: 3px 3px 2px rgba(174, 230, 93, 1);



			.classModel-img {
				width: 175rpx;
				height: 75rpx;
			}
		}
	}
</style>