bnyer-cloud-hub/pages/index/index.vue

<template>
	<view class="container">
		<view class="top">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				field="content">
				<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in 3" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<view class="middle">
			<uni-group mode="card">
				<uni-grid :column="2" :square="true" :highlight="false" @change="change" :showBorder="true">
					<uni-grid-item v-for="(val, i) in funcList" :index="i" :key="i">
						<view class="grid-item-box">
							<uni-icons type="image" :size="30" color="#777" />
							<text class="text">{{ val.title }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-group>
		</view>
		
		<view class="foot">
				<uni-group mode="card" title="素材数据" style="text-align:center;">
					<uni-grid :column="3" :square="true" :highlight="false">
						<uni-grid-item v-for="(params, v) in list" :index="v" :key="v">
							<view class="grid-item-box">
								<uni-icons type="image" :size="30" color="#777" />
								<text class="text">{{ params.text }}</text>
								<text class="text">{{ params.num }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-group>
		</view>
		
	</view>
</template>

<script>
	import {
		queryCreatorTypeImgNum
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'nav',
				swiperDotIndex: 0,
				autoplay: true,
				interval: 5000,
				duration: 500,
				pageUrl:'',
				funcList: [{
					title: '素材管理',
					url: '/pages/index/material/material'
				}, {
					title: '上传素材',
					url: '/pages/index/upload/upload'
				}],
				list: [{
						typeId: 1,
						text: '头像',
						num: ''
					},
					{
						typeId: 2,
						text: 'Gif动图',
						num: ''
					},
					{
						typeId: 3,
						text: '手机壁纸',
						num: ''
					},
					{
						typeId: 4,
						text: '朋友圈动图',
						num: '',
					},
					{
						typeId: 5,
						text: '表情包',
						num: ''
					},
					{
						typeId: 6,
						text: 'apple watch',
						num: ''
					}
				]
			};
		},
		created(){
			this.queryCreatorTypeImgNum();
		},
		methods: {
			changeSwiper(e){
				this.current = e.detail.current;
			},
			change(e) {
				this.pageUrl = this.funcList[e.detail.index].url
				console.log('this.pageUrl',this.pageUrl)
				/** 跳转指定页面*/
				 uni.navigateTo({
				 	url: this.pageUrl
				 });
			},
			clickItem(e) {
				this.swiperDotIndex = e
				console.log('this.swiperDotIndex', this.swiperDotIndex) 
			},
			
			async queryCreatorTypeImgNum() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo) {
					console.log('havent userInfo')
					
				} else {
					console.log('have userInfo')
				}
				const res = await queryCreatorTypeImgNum(userInfo.id)
				console.log('res',res)
				if (res.data.code === 200) {
					this.list[0].num = res.data.data.headNum
					this.list[1].num = res.data.data.gifNum
					this.list[2].num = res.data.data.backNum
					this.list[3].num = res.data.data.friendNum
					this.list[4].num = res.data.data.emoNum
					this.list[5].num = res.data.data.watchNum
					console.log('list',this.list)
				} else {
					uni.showModal({
						content: '图片分页数量加载失败！',
						showCancel: false
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

</style>