MoeNovaClient/pages/make/index.vue

<template>
	<view :style="{ height: windowHeight + 'px',background:'#1a1a1a'}">
		<image src="/static/image/black-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
		<z-paging-swiper :style="{ height: windowHeight - 50 + 'px',width:'750rpx;'}">
			<template #top>
				<page-navbar>
					<template #navLeft>
						<view style="background: #90d369;
							width: 126rpx;height: 48rpx;
							border-radius: 10rpx;
							display: flex;flex-direction: row;
							align-items: center;
							justify-content: space-around;
							">
							<image src="/static/icon/caidou.png" mode="" style="width:36rpx;height: 38rpx;">
							</image>
							<view style="height: 30rpx;border-right: 4rpx #478C2A solid;"></view>
							<text style="font-size: 29rpx;color: #478C2A;">437</text>
						</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>
				<uv-subsection :list="tabList" :current="tabCurrent" @change="tabChange"
					custom-style="width:710rpx; margin-left:20rpx;" bgColor="#000000" inactive-color="#ffffff"
					active-color="#000000"
					custom-item-style="background: #90d369;border-radius: 11rpx;"></uv-subsection>
			</template>
			<swiper class="swiper" :current="tabCurrent" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<swiper-item-list :tabIndex="index" :currentIndex="tabCurrent" @query="queryData">
						<z-paging-cell>
							<view class="classModel">
								<view class="classModel-item" @click="goMake">
									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
									<image class="classModel-img" src="/static/zhHans-text-icon/text-7.png" mode="">
									</image>
								</view>
								<view class="classModel-item" @click="goMake2">
									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
									<image class="classModel-img" src="/static/zhHans-text-icon/text-5.png" mode="">
									</image>
								</view>
								<view class="classModel-item">
									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
									<image class="classModel-img" src="/static/zhHans-text-icon/text-6.png" mode="">
									</image>
								</view>
							</view>
						</z-paging-cell>
						<z-paging-cell>
							<view class="history">
								<image class="history-img" src="/static/zhHans-text-icon/text-8.png" mode=""></image>
							</view>
						</z-paging-cell>
						<z-paging-cell>
							<image src="/static/zhHans-text-icon/text-9.png"
								style="width: 452rpx;height: 34rpx;margin:0 0 31rpx 25rpx;"></image>
						</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="#000000"></card>
								</template>
							</w-waterfall>
						</z-paging-cell>
					</swiper-item-list>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
	</view>
</template>

<script>
	import sortble from "@/components/sortble/sortble.vue";
	import tabbarView 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 swiperItemList from "@/components/swiper-item-list/swiper-item-list.vue";
	import card from "@/components/card/card.vue";
	export default {
		components: {
			sortble,
			tabbarView,
			pageNavbar,
			wWaterfall,
			swiperItemList
		},
		mixins: [tabbar],
		data() {
			return {
				refreshing: false,
				loadinging: false,
				windowHeight: uni.getWindowInfo().windowHeight,
				bannerList: [
					'https://e.zhichao.art/AI_images/1112 (1).png',
					'https://e.zhichao.art/AI_images/1112 (101).png',
					'https://e.zhichao.art/AI_images/1112 (102).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: [],
				tabList: ['收藏', '关注', '推荐', '音频', '视频', '图片'],
				tabCurrent: 0
			}
		},
		onLoad() {
			this.getData().then(res => {
				this.list = res.data;
			});
		},

		// 下拉刷新数据
		methods: {
			goMake() {
				uni.navigateTo({
					url: '/pages/make/make'
				})
			},
			goMake2() {
				uni.navigateTo({
					url: '/pages/make/make2'
				})
			},
			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);
			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			// swiper change时触发
			swiperChange(e) {
				let current = e.target.current || e.detail.current;
				this.tabChange(current);
			},
			queryData(params) {
				const {
					pageNo,
					pageSize,
					type,
					complete
				} = params;
				this.getData(pageNo, pageSize).then(res => {
					const dataList = complete(res.data);
					this.list = pageNo !== 1 ? [...this.list, ...dataList] : dataList;
				});
			},
			// 模拟的后端数据
			getData(pageNo, pageSize) {
				return new Promise((resolve) => {
					const imgs = [{
							url: 'https://e.zhichao.art/AI_images/1112 (103).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (104).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (116).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
						},
						{
							url: 'https://e.zhichao.art/AI_images/1112 (116).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">
	.swiper {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.swiper-list-item-n {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.classModel {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 28rpx;
		margin-bottom: 22rpx;

		.classModel-item {
			position: relative;

			.classModel-bgimg {
				width: 216rpx;
				height: 190rpx;
			}

			.classModel-img {
				position: absolute;
				top: 15rpx;
				left: 15rpx;
				width: 106rpx;
				height: 157rpx;
			}
		}


	}

	.history {
		width: 657rpx;
		height: 163rpx;
		background-color: #3f4140;
		border-radius: 16rpx;
		margin-left: 46.5rpx;
		margin-bottom: 62rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.history-img {
			width: 100rpx;
			height: 96rpx;
		}
	}
</style>