<template>
    <view>
        <!-- <image class="campusBanner" src="/static/img/campusIdx_back.png" mode="widthFix"></image> -->
		<view class="bottomTop">
			<!-- 卡片轮播 -->
			<view class="indexBanner">
			    <view class="banner">
			        <swiper class="banner-swiper" interval="5000" autoplay indicator-dots>
			            <swiper-item >
			                <image class="banner-img" src="https://lifetest.ysd-bs.com/storage/materials/2023/09/20/微信图片_20230919170443.jpg"></image>
			            </swiper-item>
						<swiper-item >
						    <image class="banner-img" src="https://lifetest.ysd-bs.com/storage/materials/2023/09/20/微信图片_20230919170449.jpg"></image>
						</swiper-item>
						<swiper-item >
						    <image class="banner-img" src="https://lifetest.ysd-bs.com/storage/materials/2023/09/19/微信图片_20230919170456.jpg"></image>
						</swiper-item>
			        </swiper>
			    </view>
			</view>
			
			<view class="recommend">
			    <navigator hover-class="none" :url="'/pages/campus/buy?id=' + item.activity_school_id" class="recommend-label" v-for="(item, index) in topData" :key="index">
			        <view class="recommend-label-img">
			            <image :src="item.cover" mode="aspectFill"></image>
			        </view>
			        <view class="nowrap recommend-label-text">
			            {{ item.title }}<text>{{ item.name }}</text>
			        </view>
			    </navigator>
			</view>
			
			<!-- 39元套餐包年兑换480元消费金 -->
			<view class="film">
			    <view class="filmTitle">
			        39元套餐包年兑换480元消费金
			    </view>
			    <navigator hover-class="none" :url="'/pages/campus/buy?id=' + item.activity_school_id" class="filmList" v-for="(item, index) in filmData" :key="index">
			        <view class="filmList-top">
			            <view class="filmList-top-name">
			                {{ item.three_title || '-' }}<text>{{ item.two_title || '-'}}</text>
			            </view>
			            <view class="filmList-top-price">
							<view class="filmList-tag" v-if="item.label != null">{{item.label || '-'}}</view>
							<view v-if="item.button_text != null">
								<view v-for="(btnItem, btnIndex) in item.button_text" :key="btnIndex">{{btnItem}}</view>
							</view>
			            </view>
			        </view>
			        <view class="filmList-text" v-for="(items, index) in item.description" :key="index">
			            <text>{{ items }}</text>
			        </view>
			    </navigator>
			</view>
			
			<!--  59元套餐包年兑换720元消费金 -->
			<view class="film">
			    <view class="filmTitle">
			        59元套餐包年兑换720元消费金
			    </view>
			    <navigator hover-class="none" :url="'/pages/campus/buy?id=' + item.activity_school_id" class="filmList" v-for="(item, index) in bathData" :key="index">
			        <view class="filmList-top">
			            <view class="filmList-top-name">
			                {{ item.three_title || '-' }}<text>{{ item.two_title || '-'}}</text>
			            </view>
			            <view class="filmList-top-price">
							<view class="filmList-tag" v-if="item.label != null">{{item.label || '-'}}</view>
			                <view v-if="item.button_text != null">
			                	<view v-for="(btnItem, btnIndex) in item.button_text" :key="btnIndex">{{btnItem}}</view>
			                </view>
			            </view>
			        </view>
			        <view class="filmList-text" v-for="(items, index) in item.description" :key="index">
			            <text>{{ items }}</text>
			        </view>
			    </navigator>
			</view>
			
			<!-- 云盘套餐包年兑换180元消费金 -->
			<view class="film">
			    <view class="filmTitle">
			        云盘套餐包年兑换180元消费金
			    </view>
			    <navigator hover-class="none" :url="'/pages/campus/buy?id=' + item.activity_school_id" class="filmList" v-for="(item, index) in marketData" :key="index">
			        <view class="filmList-top">
			            <view class="filmList-top-name">
			                {{ item.three_title || '-' }}<text>{{ item.two_title || '-'}}</text>
			            </view>
			            <view class="filmList-top-price">
							<view class="filmList-tag" v-if="item.label != null">{{item.label || '-'}}</view>
							<view v-if="item.button_text != null">
								<view v-for="(btnItem, btnIndex) in item.button_text" :key="btnIndex">{{btnItem}}</view>
							</view>
			            </view>
			        </view>
			        <view class="filmList-text" v-for="(items, index) in item.description" :key="index">
			            <text>{{ items }}</text>
			        </view>
			    </navigator>
			</view>
			
			<!-- 99元套餐包年兑换960元消费金 -->
			<view class="film">
			    <view class="filmTitle">
			        99元套餐包年兑换960元消费金
			    </view>
			    <navigator hover-class="none" :url="'/pages/campus/buy?id=' + item.activity_school_id" class="filmList" v-for="(item, index) in repastData" :key="index">
			        <view class="filmList-top">
			            <view class="filmList-top-name">
			                {{ item.three_title || '-' }}<text>{{ item.two_title || '-'}}</text>
			            </view>
			            <view class="filmList-top-price">
							<view class="filmList-tag" v-if="item.label != null">{{item.label || '-'}}</view>
			                <view v-if="item.button_text != null">
			                	<view v-for="(btnItem, btnIndex) in item.button_text" :key="btnIndex">{{btnItem}}</view>
			                </view>
			            </view>
			        </view>
			        <view class="filmList-text" v-for="(items, index) in item.description" :key="index">
			            <text>{{ items }}</text>
			        </view>
			    </navigator>
			</view>
		</view>
        <!-- 按钮 -->
        <view class="campusBtn">
			<view class="campusBtn-go"  @click="userNav('/pages/giftPack/superRed')">
				领取消费金
			</view>
		</view>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/campus'
    export default {
        data() {
            return {
                topData     : [],  // 头部推荐
                filmData    : [],  // 电影活动列表
                marketData  : [],  // 超市活动列表
                bathData    : [],  // 洗浴活动列表
                repastData  : [],  // 餐饮活动列表
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {},
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-校园迎新活动
            getApp().globalData.envType = 'campusEnv'
            
            // 获取首页数据
            this.indexInfo();
        },
        methods: {
            // 首页数据
            indexInfo() {
                index().then(res=>{
                    this.topData = res.top
                    this.filmData = res.film
                    this.marketData = res.market
                    this.bathData = res.bath
                    this.repastData = res.repast
                }).catch(err=>{
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/campus/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 处理未登录时的转跳
            userNav(url){
                let pageUrl = url
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: pageUrl
                    })
                    return
                }
                // 去登录
                uni.navigateTo({
                    url: '/pages/campus/signin'
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
        padding-bottom: 100rpx;
    }
    
    // banner
    .campusBanner {
        width: 100%;
    }
	
	.indexBanner {
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.banner {
	    position: relative;
	    padding-top: 48%;
	    width: 100%;
	    background: white;
	    overflow: hidden;
	    z-index: 99;
		border-radius: 10rpx;
	    .banner-swiper {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        .banner-img {
	            width: 100%;
	            height: 100%;
	            vertical-align: top;
	        }
	    }
	}
    
    // 推荐
    .recommend {
        overflow: hidden;
        padding: 0 30rpx;
        box-sizing: border-box;
        .recommend-label {
            text-align: center;
            width: calc(50% - 20rpx);
            float: left;
            margin: 0 10rpx 30rpx;
            .recommend-label-img {
                width: 150rpx;
                height: 150rpx;
                margin: 0 auto 10rpx;
                background: linear-gradient(to bottom, #293350, #484e74);
                box-shadow: 0px 8px 6px rgba(249,228,129,.5);
                border-radius: 50%;
                box-sizing: border-box;
                image {
                    width: 80rpx;
                    height: 80rpx;
                    margin: 35rpx;
                }
            }
            .recommend-label-text {
                font-weight: 600;
                text {
                    display: block;
                    font-size: 30rpx;
                }
            }
        }
    }
    
    // 列表
    .film {
        width: 100%;
        padding: 10rpx 30rpx;
        box-sizing: border-box;
    }
    .filmTitle {
        background: linear-gradient(to right, #feefce, #fbe9c0, #e8d19b);
        line-height: 80rpx;
        box-shadow: -4px 0 10px rgba(134,97,33,.2);
        text-align: center;
        border-radius: 10rpx 10rpx 0 0;
        color: #a47d53;
        font-weight: 600;
        margin: 0 20rpx;
    }
    .filmList {
        background: linear-gradient(to right, #494e75, #27314d);
        box-shadow: 0px 6px 10px rgba(134,97,33,.5);
        border-radius: 10rpx;
        padding: 50rpx 30rpx 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        &:last-child {
            margin-bottom: 0;
        }
        .filmList-top {
            display: flex;
            margin-bottom: 10rpx;
            .filmList-top-name {
                width: calc(100% - 160rpx);
                margin-right: 20rpx;
                color: #fce2ae;
                font-size: 34rpx;
				font-weight: bold;
                text {
                    display: block;
                    font-size: 25rpx;
                    margin-top: 10rpx;
					font-weight: normal;
                }
            }
            .filmList-top-price {
				position: relative;
                background: linear-gradient(to right, #d3ad68, #cda65f);
                box-shadow: 0px 2px 10px rgba(249,228,129,.5);
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                color: #FFFFFF;
                text-align: center;
                padding-top: 20rpx;
                font-size: 30rpx;
                box-sizing: border-box;
                text {
                    display: block;
                    text-shadow: 0px 6px 10px rgba(134,97,33,.5);
                }
				.filmList-tag{
					position: absolute;
					background: #ff0000;
					color: white;
					font-size: 20rpx;
					top: -10%;
					left: 20%;
					width: 120rpx;
					padding: 0 10rpx;
					line-height: 40rpx;
					border-radius: 15rpx;
					transform: scale(0.58)
				}
            }
        }
        .filmList-text {
            font-size: 20rpx;
            color: #c1c1c1;
			// margin-left: -70rpx;
            text {
                display: block;
				// transform: scale(0.8)
            }
        }
    }
    
    // 按钮
	.bottomTop {
		border-bottom: 80rpx solid transparent;
	}
	
    .campusBtn {
		position: fixed;
		width: 100%;
		z-index: 9;
		bottom: 0;
		left: 0;
		padding:30rpx;
		box-sizing: border-box;
		background-color: #cbaf7f;
        .campusBtn-go {
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
			line-height: 100rpx;
			height: 100rpx;
			color: #FFFFFF;
			border-radius: 60rpx;
			width: 100%;
			background: linear-gradient(to right, #474d73, #28314e);
			box-shadow: 0px 6px 10px rgba(188,152,90,.5);
		}
    }
</style>
