<template>
    <view>
        <image class="campusCoupon" src="/static/img/campusCoupon_img.png" mode="widthFix"></image>
        <view class="user">
           <image src="/static/img/campusCoupon_user.png" mode=""></image> 尊敬的<text>{{ userTel }}</text>, 欢迎参加校园迎新活动
        </view>
        <!-- 我的卡券 -->
        <view class="borderContent">
            <view class="campusCont">
                <!-- 卡券tab -->
                <view class="couponTab">
                    <view class="couponTab-label" :class="{active : stateType == item.used}" @tap="orderTab" v-for="(item, index) in couponLabel" :key="index" :data-index="(index)" :data-state="(item.used)">
                        {{ item.title }}
                        <view v-if="item.used == 0">({{count.init}}张)</view>
                        <view v-else-if="item.used == 1">({{count.used}}张)</view>
                        <view v-else>({{ count.pass }}张)</view>
                    </view>
                </view>
                
                <!-- 卡券列表 -->
                <view class="coupon" v-if="coupons.length > 0" :class="{active : coupons.length < 1}">
                    <view class="couponCont" :class="{active : item.status != 0}" v-for="(item, index) in coupons" :key="index">
                        <view hover-class="none" class="couponList" @tap="couponUrl" :data-id="(item.coupon_id)">
                            <view class="couponList-left">
                                <image class="couponList-img" src="/static/img/coupon_coupon_img.png"></image>
                                <!-- 优惠券 -->
                                <view class="couponList-icon" v-if="item.type == 'physical'">
                                    <image src="/static/img/coupon_icon_01.png"></image>
                                </view>
                
                                <!-- 实物 -->
                                <view class="couponList-icon" v-else>
                                    <image src="/static/img/coupon_icon_00.png"></image>
                                </view>
                            </view>
                            <view class="couponList-center" :class="{active : item.used_at != '' || item.status == 0}">
                                <view class="nowrap couponList-title">{{ item.name }}</view>
                                <view class="nowrap couponList-used" v-if="item.status == 0">活动来源： {{item.activity_name}}</view>
                                <view class="couponList-time">{{ item.startTime }} 至 {{ item.endTime }}</view>
                                <view class="couponList-used" v-if="item.used_at != ''">使用时间：{{item.used_at}}</view>
                            </view>
                            <block v-if="item.status == 0">
                                <view class="couponList-right">
                                    去使用
                                </view>
                            </block>
                            <image v-if="item.status == 1" src="/static/img/coupon_tips_00.png" class="coupoTips"></image>
                            <image v-if="item.status == 2" src="/static/img/coupon_tips_01.png" class="coupoTips"></image>
                        </view>
                        <view class="couponMore" v-if="item.count > 1" >
                            <view class="couponMore-text" @tap="couponTap" :data-id="(item.activityId)" :data-status="(item.status)">
                                <view class="couponMore-title">查看全部{{ item.count }}张卡券</view>
                                <image class="couponMore-arrow" src="/static/icon/arrow_left.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 优惠券为空 -->
                <view class="campus_tips" v-else>
                    <image src="/static/img/coupon_tips.png"></image>
                    <view>暂无优惠券</view>
                </view>
            </view>
        </view>
        <!-- 底部快捷导航 -->
        <view class="navFooter">
            <navigator hover-class="none" url="/pages/campus/index" class="navFooter-label">
                <image src="/static/icon/navFooter_icon_00.png" mode=""></image>
                活动中心
            </navigator>
            <view class="navFooter-label active">
                <image src="/static/icon/navFooter_icon_01_active.png" mode=""></image>
                我的优惠券
            </view>
        </view>
        
        <!-- 漂浮窗 -->
        <view class="indexFloat" @click="followBtn">
        	<image src="/static/img/subscribe.png" mode="aspectFill" class="indexFloat-animation"></image>
            <view class="indexFloat-text">
                <!-- <text>可查看大图</text> -->
                <text>关注公众号</text>
            </view>
        </view>
        
        <!-- 关注公众号弹出 -->
        <view class="followBack" :class="{active : followState}"></view>
        <view class="followPop" :class="{active : followState}">
            <image class="followPop-img" src="/static/img/subscribe.png" mode="widthFix"></image>
            <view class="followPop-text">
                <text>长按识别图中二维码</text>
                <image src="/static/img/follow_tips.png" mode="aspectFill"></image>
            </view>
            <view class="followPop-tips">
                本时生活平台优惠活动
            </view>
        </view>
        <image class="followPop-clos" :class="{active : followState}" src="/static/icon/add.png" mode="aspectFill" @click="followBtn"></image>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/user'
    import { coupon } from '@/apis/interfaces/campus'
    export default {
        data() {
            return {
                userTel     : '',   //用户者手机号
                coupons     : [],   //优惠券列表
                count       : '',   //优惠券-张数
                //优惠券Tab列表
                couponLabel : [
                    { title : "未使用", used: 0 },
                    { title : "已使用", used: 1 },
                    { title : "已过期", used: 2 }
                ],
                stateType   : '0', //卡券状态
                type        : '',  //卡券来源
                followState : false //二维码弹出状态
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            // 获取用户信息
            index().then(res => {
                this.userTel = res.info.username
            }).catch(err => {
                if (!err.login) {
                    uni.showModal({
                        title: '用户登录已过期',
                        content: '请重新登录',
                        showCancel: false,
                        success: res => {
                            if (res.confirm) {
                                uni.redirectTo({
                                    url: '/pages/campus/signin'
                                });
                            }
                        }
                    });
                }
            });
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-校园迎新活动
            getApp().globalData.envType = 'campusEnv'
            
            // 获取列表
            this.couponInfo();
        },
        methods: {
            // 卡券列表
            couponInfo() {
                coupon({
                    status: this.stateType,
                    type: 'school'
                }).then(res=>{
                    this.count   = res.count
                    this.coupons = res.list
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    wx.redirectTo({
                                        url: '/pages/campus/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // tabs 选项卡
            orderTab(e){
                if(this.stateType != e.currentTarget.dataset.state){
                    this.stateType = e.currentTarget.dataset.state
                    // 获取卡权益
                    this.couponInfo()
                }
            },
            
            // 查看优惠券分组
            couponTap(e) {
                let id      = e.currentTarget.dataset.id,
                    status  = e.currentTarget.dataset.status
                uni.navigateTo({
                    url: '/pages/campus/myList?id=' + id + '&status=' + status
                })
            },
            
            // 优惠券跳转详情
            couponUrl(e) {
                let newId     = e.currentTarget.dataset.id
                uni.navigateTo({
                    url: '/pages/campus/details?id=' + newId
                })
            },
            
            // 公众号展示
            followBtn() {
                this.followState = !this.followState
            }
        }
    }
</script>

<style>
    .campusCoupon {
        width: 100vw;
    }
    
    page {
        background-color: #c32631;
    }
    
    /* 用户信息 */
    .user {
        width: 100%;
        background: linear-gradient(to right, #f9ecb7, #eed276);
        font-size: 28rpx;
        padding: 20rpx;
        box-sizing: border-box;
        color: #da2025;
        display: flex;
        line-height: 48rpx;
    }
    
    .user text {
        font-weight: 600;
        padding: 0 10rpx;
    }
    
    .user image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 10rpx;
    }
    
    /* 优惠券 */
    .borderContent {
        border-bottom: 140rpx solid transparent;
    }
    
    .campusCont {
        background-color: #e83241;
        margin: 30rpx 20rpx;
        border-radius: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .campusCont.active {
        border-bottom: 140rpx solid transparent;
    }
    
    .couponTab{
        background-color: #d32838;
        color: #ffffff;
        display: flex;
        padding: 20rpx 40rpx 0;
        box-sizing: border-box;
        border-radius: 20rpx 20rpx 0 0;
    }
    
    .couponTab-label {
        flex: 3;
        text-align: center;
        position: relative;
        padding: 10rpx 20rpx;
        box-sizing: border-box;
        font-size: 30rpx;
        border-radius: 20rpx 20rpx 0 0;
    }
    
    .couponTab-label.active {
        background-color: #fdf4ed;
        color: #b9505f;
    }
    
    .couponTab-label view {
        font-size: 24rpx;
        margin-top: 6rpx;
    }
    
    .coupon {
        padding-bottom: 10rpx;
        box-sizing: border-box;
    }
    
    .couponCont {
        margin: 0 0 30rpx;
        width: 100%;
        border-radius: 10rpx;
        overflow: hidden;
    }
    
    .couponCont:last-child {
        margin-bottom: 0;
    }
    
    .couponList {
        background: #fdf4ed;
        width: 100%;
        height: 160rpx;
        position: relative;
    }
    
    .couponList-left {
        position: relative;
        left: 0;
        top: 0;
        width: 160rpx;
        height: 160rpx;
    }
    
    .couponList-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .couponList-icon {
        position: absolute;
        left: calc(50% - 56rpx);
        top: calc(50% - 50rpx);
        z-index: 2;
        width: 100rpx;
        height: 100rpx;
        background: #fff;
        border-radius: 50%;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .couponList-icon image {
        width: 100%;
        height: 100%;
    }
    
    .couponList-center {
        position: absolute;
        left: 180rpx;
        top: 35rpx;
        width: calc(100% - 330rpx);
    }
    
    .couponList-center.active {
        top: 15rpx;
    }
    
    .couponList-title {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #743e3e;
    }
    
    .couponList-time,
    .couponList-used {
        font-size: 24rpx;
        color: grey;
    }
    
    .couponList-used {
        margin-bottom: 14rpx;
        color: #855757;
    }
    
    .couponList-right {
        background: transparent;
        border: 2rpx solid #fc9f36;
        color: #f39124;
        border-radius: 30rpx;
        width: 110rpx;
        text-align: center;
        height: 50rpx;
        line-height: 50rpx;
        position: absolute;
        right: 20rpx;
        top: 55rpx;
        font-size: 24rpx;
    }
    
    .couponList-right.active {
        background: #dddddd;
    }
    
    .couponMore {
        font-size: 28rpx;
        color: #686868;
        position: relative;
        height: 120rpx;
    }
    
    .couponMore::after,
    .couponMore::before {
        position: absolute;
        content: '';
        height: 20rpx;
        border-radius: 10rpx;
        background: #fff;
        box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
        z-index: 1;
        height: 30rpx;
    }
    
    .couponMore::after {
        width: calc(100% - 40rpx);
        top: 70rpx;
        left: 20rpx;
    }
    
    .couponMore::before {
        width: calc(100% - 80rpx);
        top: 90rpx;
        left: 40rpx;
    }
    
    .couponMore-text {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 99;
        height: 80rpx;
        border-radius: 0 0 10rpx 10rpx;
        line-height: 80rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
    }
    
    .couponMore-title {
        flex: 1;
    }
    
    .couponMore-arrow {
        width: 28rpx;
        height: 28rpx;
        margin-top: 26rpx;
    }
    
    .couponCont.active .couponList-img,
    .couponCont.active .couponList-icon {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    
    .coupoTips {
        position: absolute;
        top: 22rpx;
        right: 20rpx;
        z-index: 99;
        width: 120rpx;
        height: 120rpx;
    }
    
    .campus_tips {
        text-align: center;
        width: 100%;
        background-color: #ffffff;
        border-radius: 0 0 20rpx 20rpx;
        padding: 80rpx 0;
        font-size: 28rpx;
    }
    
    .campus_tips image {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 20rpx;
    }
    
    /* 底部快捷导航 */
    .navFooter {
        position: fixed;
        width: 100%;
        height: 110rpx;
        background-color: #FFFFFF;
        z-index: 1000;
        left: 0;
        bottom: 0;
        font-size: 26rpx;
        display: flex;
    }
    
    .navFooter-label {
        flex: 2;
        text-align: center;
        width: 50%;
        color: #a2a2a2;
    }
    
    .navFooter-label.active {
        color: #c32631;
    }
    
    .navFooter-label image {
        width: 54rpx;
        height: 54rpx;
        display: block;
        margin: 8rpx auto 0;
    }
    
    
    /* 漂浮弹出层 */
    .indexFloat {
        position: fixed;
        right: 20rpx;
        bottom: 180rpx;
        z-index: 99;
    }
    
    .indexFloat-text {
        height: 40rpx;
        overflow: hidden;
        color: #000000;
    }
    
    .indexFloat-text text {
        line-height: 40rpx;
        display: block;
        font-size: 24rpx;
    }
    
    .indexFloat-animation {
        width: 130rpx;
        height: 130rpx;
        animation: shake 3s linear infinite;
    }
    
    @keyframes shake {
        70%, 80% {
          transform: rotate(7deg);
        }
        75% {
          transform: rotate(-7deg);
        }
       
        65%,
        85% {
          transform: rotate(0);
        }
    }
    
    /* 关注公众号弹出 */
    .followBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.7);
        left: 0;
        top: 0;
        z-index: 1000;
        display: none;
    }
    
    .followBack.active {
        display: block;
    }
    
    .followPop {
        position: fixed;
        z-index: 1001;
        height: 760rpx;
        left: 15%;
        right: 15%;
        top: 300rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        text-align: center;
        overflow: hidden;
        display: none;
    }
    
    .followPop.active {
        display: block;
    }
    
    .followPop-img {
        width: 70%;
        margin: 60rpx 0 50rpx;
    }
    
    .followPop-text {
        color: #7d7d7d;
        font-size: 32rpx;
        position: relative;
    }
    
    .followPop-text::after,
    .followPop-text::before {
        position: absolute;
        content: '';
        top: 25rpx;
        width: 60rpx;
        height: 2rpx;
        background-color: #cfcfcf;
    }
    
    .followPop-text::after {
        left: 30rpx;
    }
    
    .followPop-text::before {
        right: 30rpx;
    }
    
    .followPop-text image {
        width: 120rpx;
        height: 120rpx;
        margin: 10rpx auto 20rpx;
        display: block;
    }
    
    .followPop-tips {
        background-color: #e1e5ec;
        line-height: 90rpx;
        color: #7f8487;
    }
    
    .followPop-clos {
        position: fixed;
        top: 1100rpx;
        left: calc(50% - 25rpx);
        width: 50rpx;
        height: 50rpx;
        z-index: 1001;
        display: none;
        transform: rotate(45deg);
    }
    
    .followPop-clos.active {
        display: block;
    }
</style>
