<template>
    <view>
        <image class="campusBanner" src="/static/img/unicomIdx_back.png" mode="widthFix"></image>
        <view class="recommend">
            <navigator hover-class="none" :url="'/pages/unicom/buy?id=' + item.advert_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>
        
        <!-- 中石油优惠券 -->
        <view class="film">
            <view class="filmTitle"></view>
            <navigator hover-class="none" :url="'/pages/unicom/buy?id=' + item.activity_unicom_id" class="filmList" v-for="(item, index) in oilPetro" :key="index">
                <view class="filmList-top">
                    <view class="filmList-top-name">
                        老用户回馈抽奖链接
                    </view>
                    <view class="filmList-top-price">
        				<text>立即参与</text>
                    </view>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/unicom'
    export default {
        data() {
            return {
                topData     : [],  // 头部推荐
                oilMarket   : [],  // 中石油优惠券
                oilPetro    : [],  // 超市购物券
                adverts     : []
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {},
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-中国联通回馈活动
            getApp().globalData.envType = 'unicomEnv'
            
            // 获取首页数据
            this.indexInfo();
        },
        methods: {
            // 首页数据
            indexInfo() {
                index().then(res=>{
                     this.oilPetro   = res.lists.cost
                }).catch(err=>{
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/unicom/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 处理未登录时的转跳
            userNav(url){
                let pageUrl = url
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: pageUrl
                    })
                    return
                }
                // 去登录
                uni.navigateTo({
                    url: '/pages/unicom/signin'
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
        padding-bottom: 100rpx;
        height: 100vh;
    }
    
    // banner
    .campusBanner {
        width: 100%;
    }
    
    // 推荐
    .recommend {
        overflow: hidden;
        margin-top: -60rpx;
        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);
        height: 80rpx;
        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 {
        position: relative;
        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;
        overflow: hidden;
        &:last-child {
            margin-bottom: 0;
        }
        .filmList-tag {
            transform: rotate(45deg);
            position: absolute;
            padding: 10px 0;
            right: -33px;
            top: -10px;
            width: 150px;
            background: red;
            .filmList-tag-text {
                position: absolute;
                color: #FFFFFF;
                right: 20px;
                text-align: center;
                top: 2px;
                font-size: 12px;;
                transform:rotate(-360deg);
            }
        }
        .filmList-top {
            display: flex;
            margin-bottom: 10rpx;
            .filmList-top-name {
                width: calc(100% - 160rpx);
                margin-right: 20rpx;
                color: #fce2ae;
                font-size: 48rpx;
                line-height: 120rpx;
            }
            .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;
                    word-wrap: break-word;
                    word-break: break-all;
                    width: 50%;
                    margin: 0 auto;
                }
            }
        }
    }
</style>
