<template>
	<view class="container">
		
		<block v-if="isload">
			<no-none-two/>
		</block>
		
		<block v-else>
		<swiper class="card-swiper square-dot"  
		:indicator-dots="true" 
		 :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" 
		 indicator-color="#8799a3"
		 indicator-active-color="#0081ff" >
			<swiper-item v-for="(item,index) in bannerList" :key="index"
			 :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.path" ></image>
					<!-- <video :src="item.path" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</view>
			</swiper-item>
		</swiper>
		<view class="block-title flex-row">
			<image src="../../static/images/icon_1.png" mode="aspectFit" class="icon"></image>
			<view class="title">推荐功能</view>
		</view>

		<view class="nav-list">
			<block v-for="(item,index) of list" :key='index'>

				<navigator v-if="item.id==1" url="/pages/index/enable" class="nav">
					<image src="../../static/images/index_1.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">收款码{{$test.$test}}</view>
							<view class="desc">{{$test.$desc}}</view>
						</view>
						<view class="btn" style="background-color: #43b2ff;">立即推广</view>
					</view>
				</navigator>
				
				<navigator v-if="item.id==2" url="/pages/index/article" class="nav">
					<image src="../../static/images/index_2.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">网站{{$test.$test}}</view>
							<view class="desc">网页/活动链接/百度文章{{$test.$test}}</view>
						</view>
						<view class="btn" style="background-color: #AF8DFF;">立即推广</view>
					</view>
				</navigator>

				<navigator v-if="item.id==3" url="/pages/index/public" class="nav">
					<image src="../../static/images/index_3.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">公众号{{$test.$test}}</view>
							<view class="desc">公众号文章/关注公众号{{$test.$test}}</view>
						</view>
						<view class="btn" style="background-color: #FFBC26;">立即推广</view>
					</view>
				</navigator>
				
				<navigator v-if="item.id==4" url="/pages/index/standard" class="nav">
					<image src="../../static/images/index_1.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">二维码{{$test.$test}}</view>
							<view class="desc">链接二维码/文章二维码</view>
						</view>
						<view class="btn" style="background-color: #43b2ff;">立即推广</view>
					</view>
				</navigator>
				
				<navigator v-if="item.id==5" url="/pages/replace/replace" class="nav">
					<image src="../../static/images/index_2.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">智能替换</view>
							<view class="desc">替换图片二维码</view>
						</view>
						<view class="btn" style="background-color: #AF8DFF;">立即尝鲜</view>
					</view>
				</navigator>
				
				<navigator v-if="item.id==6" url="/pages/index/video" class="nav">
						<image src="../../static/images/index_3.png" class="bg-img"></image>
						<view class="content flex-row-between">
							<view class="info">
								<view class="title">视频{{$test.$test}}</view>
								<view class="desc">视频链接{{$test.$test}}/本地视频{{$test.$test}}</view>
							</view>
							<view class="btn" style="background-color: #FFBC26;">立即推广</view>
						</view>
				</navigator>
	
				<navigator v-if="item.id==7" url="/pages/index/games" class="nav">
					<image src="../../static/images/index_2.png" class="bg-img"></image>
					<view class="content flex-row-between">
						<view class="info">
							<view class="title">小游戏</view>
							<view class="desc">大转盘/砸金蛋</view>
						</view>
						<view class="btn" style="background-color: #AF8DFF;">立即尝鲜</view>
					</view>
				</navigator>
			
			</block>
		</view>
	   </block>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dotStyle:true,
				bannerList: [],
				info: {
					youbi: 0
				},
				$test: this.$test.$test,
				list: [],
				cardCur: 0,
				isload:true
			}
		},
		
		onLoad() {
			
			if (uni.getStorageSync("is_login")==3 && uni.getStorageSync("store_id")) {
				uni.reLaunch({
				    url: "../../storeInfoIng/storeInfo"
				})
				return;
			}
			
			if (uni.getStorageSync("is_login")==2 && uni.getStorageSync("admin_id")) {
				uni.reLaunch({
				    url: "../../statistics/index/index"
				})
				return;
			}
			
			this.types();
			this.getname();
			this.banner();
		},
		
		onShareAppMessage(e) {

		},
		
		onShow() {
			
			if (uni.getStorageSync("is_login")=="3"||uni.getStorageSync("is_login")=="2") {
				return;
			}
			
			this.request({
				url: "Spread/index",
				data: {
					token: uni.getStorageSync("token"),
				},
				showLoading: true,
			}).then(res => {
				console.log(res, "res")
				if (res.code === '200') {
					this.info = res.data;
				}
			}).catch((res) => {});
		},
		
		methods: {
			
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			
			types() {
				this.request({
					url: "index/types",
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code == "200") {
						this.isload = false;
						this.list = res.data;
					}
				}).catch((res) => {

				});
			},

			getname() {
				this.request({
					url: "index/login_name",
				}).then(res => {
					console.log(res, "res")
					if (res.code == "200") {
						this.isload = false;
						if (res.data.funeng) {
							this.$test.setTest(res.data.funeng, res.data.desc)
						}
					}
				}).catch((res) => {

				});
			},

			banner() {
				//请求验证码
				this.request({
					url: "index/banner",
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.isload = false;
						this.bannerList = res.data
					}
				}).catch((res) => {});
			},
		}
	}
</script>

<style>
	.page-title {
		padding: 32rpx 40rpx;
		font-size: 48rpx;
		color: #242424;
		font-weight: 500;
	}

/* 	.swiper {
		width: 670rpx;
		height: 320rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 20rpx #ccc;
	}

	.swiper .img {
		display: block;
		width: 100%;
		height: 100%;
	} */

/* ==================
         轮播
 ==================== */


/* swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
	content: "";
	position: absolute;
	width: 10upx;
	height: 10upx;
	top: 0upx;
	left: 0upx;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #ffffff;
	border-radius: 20upx;
} */


.screen-swiper {
	min-height: 375upx;
}

.screen-swiper image,
.screen-swiper video,
.swiper-item image,
.swiper-item video {
	width: 100%;
	display: block;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.card-swiper {
	height: 420upx !important;
}

.card-swiper swiper-item {
	width: 610upx !important;
	left: 70upx;
	box-sizing: border-box;
	padding: 40upx 0upx 70upx;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 10upx;
	transform: scale(0.9);
	transition: all 0.2s ease-in 0s;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
}


	.block-title {
		width: 670rpx;
		margin: 20rpx auto 19rpx;
	}

	.block-title .icon {
		display: block;
		flex: none;
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.block-title .title {
		font-size: 36rpx;
		color: #242424;
		font-weight: 500;

	}

	.nav-list .nav {
		display: block;
		width: 718rpx;
		height: 228rpx;
		margin: 0 auto;
		position: relative;
	}

	.nav-list .nav .bg-img {
		position: absolute;
		left: 0;
		top: 0;
		/* z-index: -1; */
		display: block;
		width: 100%;
		height: 100%;
	}

	.nav-list .nav .content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 63rpx 0 87rpx;
		position: relative;
	}

	.nav-list .nav .content .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #fff;
		margin-bottom: 6rpx;
	}

	.nav-list .nav .content .desc {
		font-size: 26rpx;
		font-weight: 400;
		color: #fff;
		margin-bottom: 6rpx;
	}

	.nav-list .nav .content .desc_ci {
		font-size: 22rpx;
		font-weight: 400;
		color: #fff;
	}



	.nav-list .nav .content .btn {
		width: 165rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
	}
</style>
