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="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" >
				<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
					:interval="interval" :duration="duration" circular>
					<swiper-item v-for="(item, index) in banner" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
							<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<view class="middle">
      <view class="middle-div">
        <view class="middle-btn-item" v-for="(val, i) in funcList" :index="i" :key="i">
          <view class="grid-item-box" @click="change(val.url)">
            <!-- <uni-icons type="image" :size="30" color="#777" /> -->
            <text class="text uni-white">{{ val.title }}</text>
            <image :src="val.icon" class="iconImage" mode="aspectFill" />
          </view>
        </view>
      </view>
		</view>
		
		<view class="foot">
      <view class="foot-div">
        <view class="grid-item-box uni-white" v-for="(params, v) in list" :index="v" :key="v">
          <!-- <uni-icons type="image" :size="30" color="#777" /> -->
          <view class="icom-div">
            <image :src="params.icon" class="listIconImage" mode="aspectFill" />
          </view>
          <text class="text">{{ params.text }}</text>
          <text class="text">{{ params.num }}</text>
        </view>
      </view>
		</view>
		
	</view>
</template>

<script>
	import {
		queryCreatorTypeImgNum,
		listBanner
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfo:{},
				banner:[
					{
						bannerImg: "/static/material.png"
					}
				],
				current: 0,
				mode: 'default',
        dotsStyles: {
          backgroundColor: 'rgba(255, 255, 255, .5)',
          border: '1px rgba(0, 0, 0, .3) solid',
          color: '#fff',
          selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
          selectedBorder: '1px rgba(0, 0, 0, .9) solid',
          bottom: 50
        },
				swiperDotIndex: 0,
				autoplay: true,
				interval: 5000,
				duration: 500,
				pageUrl:'',
				funcList: [{
					title: '素材管理',
					url: '/pages/index/material/material',
					icon: '/static/material.png'
				}, {
					title: '上传素材',
					url: '/pages/index/upload/upload',
					icon: '/static/upload.png'
				}],
				list: [{
						typeId: 1,
						text: '头像',
						num: '10',
						icon: '/static/headBack.png'
					},
					{
						typeId: 2,
						text: 'Gif动图',
						num: '10',
						icon: '/static/gifBack.png'
					},
					{
						typeId: 3,
						text: '手机壁纸',
						num: '20',
						icon: '/static/phoneBack.png'
					},
					{
						typeId: 4,
						text: '背景图',
						num: '10',
						icon: '/static/friendBack.png'
					},
					{
						typeId: 5,
						text: '表情包',
						num: '15',
						icon: '/static/emoBack.png'
					},
					{
						typeId: 6,
						text: 'iwatch',
						num: '3',
						icon: '/static/iwatchBack.png'
					}
				]
			};
		}, 
		created(){
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
        this.queryCreatorTypeImgNum();
        this.getBanner();
			}
			
		},
		onLoad(){

		},
    onShow(){
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.queryCreatorTypeImgNum();
        this.getBanner();
      }
    },
    onPullDownRefresh() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.queryCreatorTypeImgNum();
        this.getBanner();
      }
    },
		methods: {
			changeSwiper(e){
				this.current = e.detail.current;
			},
			change(e) {
				// this.pageUrl = this.funcList[e.detail.index].url
				/** 跳转指定页面*/
				 uni.navigateTo({
					url: e
				 	// url: this.pageUrl
				 });
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			// 跳转banner详情页
			linkTo(item) {
				if (item.id) {
					uni.navigateTo({
						url: '../index/banner'
					});
				}
			},
			
			// 获取banner列表
			async getBanner() {
				let that = this;
				const res = await listBanner() 
				if (res.data.code === 200) {
					that.banner = res.data.data
					console.log('banner',that.banner)
				} else {
					uni.showModal({ 
						content: 'banner加载失败！',
						showCancel: false
					});
				}
			},
			
			// 查询艺术家图片分类数量
			async queryCreatorTypeImgNum() {
				let that = this;
				const res = await queryCreatorTypeImgNum(that.userInfo.id)
				// console.log('res',res)
				if (res.data.code === 200) {
					that.list[0].num = res.data.data.headNum
					that.list[1].num = res.data.data.gifNum
					that.list[2].num = res.data.data.backNum
					that.list[3].num = res.data.data.friendNum
					that.list[4].num = res.data.data.emoNum
					that.list[5].num = res.data.data.watchNum
					//console.log('list',that.list)
				} else {
					uni.showModal({
						content: '图片分页数量加载失败！',
						showCancel: false
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
	}
	.img {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.grid-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}

  .swiper-box {
    height: 50vh;
  }

	.swiper-item {
    background-color: rgba(255, 255, 255, .3);
	}


	/* #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: 375rpx) {
		.uni-swiper-dot-box {
			width: 100%;
			height: 100%;
			// margin: 0 auto;
			// margin-top: 8rpx;
		}

		.image {
			width: 100%;
		}
	}
	
	.container {
		min-height: 100vh;
		background: #141b29;
		border-top: 2rpx solid #141b29;
    position: relative;
		
		.top {
			width: 100%;
      height: 50vh;
		}
		
		.middle {
      position: absolute;
      top: calc(50vh - 60rpx);
      left: 0;
      right: 0;

      .middle-div {
        width: 670rpx;
        height: calc(20vh - 30rpx);
        margin: 0 auto;
        background: #1d2734;
        border-radius: 40rpx;

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .middle-btn-item {
          width: 50%;
        }

      }

			.grid-item-box {
				height: 100%;
				
				.text {
					font-size: 36rpx;
          margin-bottom: 20rpx;
				}
				
				.iconImage {
					width: 100rpx;
					height: 100rpx;
				}
				
			}
		}
		
		.foot {
      position: absolute;
      top: calc(70vh - 40rpx);
      left: 0;
      right: 0;
      height: calc(30vh - 30rpx);

      .foot-div {
        width: 670rpx;
        height: 100%;
        margin: 0 auto;
        background: #1d2734;
        border-radius: 40rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

      }

			.grid-item-box {
        width: 170rpx;
        height: 50%;
        //padding: 40rpx;
				
				.icom-div {
					//background: #0a6375;
					border-radius: 24rpx;
					
					.listIconImage {
						height: 80rpx;
						width: 80rpx;
						
					}
					
				}
				
				.text {
					text-align: center;
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: 10rpx;
				}
				
			}
		}
	}
</style>