<template>
    <view class="content">
		<view class="user">
		   <image src="/static/img/giftPackCoupon_user.png" mode=""></image> 尊敬的<text>{{ userTel }}</text>, 欢迎参加此活动
		</view>
        	
        <!-- 我的卡券 -->
		<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>
			</view>
			
			<!-- 卡券列表 -->
			<view class="coupon" v-if="coupons.length > 0" :class="{active : coupons.length < 1}">
				<view class="couponItem" v-for="(item, index) in coupons" :key="index" :class="{active: item.status != 0}">
					<view class="couponItem-cont">
						<view class="couponItem-top">
							<view class="couponItem-cont-image">
								<image :src="item.cover" mode="widthFix"></image>
							</view>
						   <view class="couponItem-cont-name">
								<view class="nowrap couponItem-cont-title">
									{{item.name}}
								</view>
								<view class="couponItem-cont-show" @click="moreCoupon(index)">
									详细信息<image src="/static/icon/giftPack-icon.png" class="couponItem-cont-icon" :class="{active: item.couponShow }" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view v-if="item.status == 0" class="couponItem-btn" @click="couponUrl(item.id, item.from)">
							立即使用
						</view>
						<view v-else-if="item.status == 1" class="couponItem-btn">
							已使用
						</view>
						<view v-else class="couponItem-btn">
							已过期
						</view>
					</view>
					
					<view class="couponItem-cont-text" v-if="item.couponShow">
						<rich-text :nodes="item.remark"></rich-text>
					</view>
				</view>
			</view>
			
			<!-- 列表为空 -->
			<view class="campusTips" v-else>
			    <view class="campusTips-cont">
			    	<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
			    	<view>暂无优惠券</view>
			    </view>
			</view>
			
		</view>
        
        <!-- 漂浮窗 -->
        <!-- <view class="indexFloat" @click="followBtn">
        	<image src="/static/img/subscribe.jpg" mode="aspectFill" class="indexFloat-animation"></image>
            <view class="indexFloat-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.jpg" 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, shopsUrl } from '@/apis/interfaces/giftPack'
    export default {
        data() {
            return {
                userTel     : '',   //用户者手机号
                coupons     : [],   //优惠券列表
                //优惠券Tab列表
                couponLabel : [
                    { title : "未使用", used: 0 },
                    { title : "已使用", used: 1 },
                    { title : "已过期", used: 2 }
                ],
                stateType   : '0', //卡券状态
                type        : '',  //卡券来源
                followState : false, //二维码弹出状态
				page        : 1,     //分页
				lodingStats : 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/giftPack/signin'
                                });
                            }
                        }
                    });
                }
            });
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-本时大礼包新活动
            getApp().globalData.envType = 'giftPEnv'
            
            // 获取列表
            this.couponInfo();
        },
        methods: {
            // 卡券列表
            couponInfo(page) {
                coupon({
                    status	: this.stateType,
					page    : page || ''
                }).then(res=>{
					let newStores = this.coupons,
					    newData = []
					if(page == 1 || page == undefined) newStores = []
					newData = newStores.concat(res.data)
					for(let val in newData){
						newData[val].couponShow = false
					}
					
					this.coupons        = newData
					this.page        = res.page
					this.lodingStats = false
					uni.stopPullDownRefresh()
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    wx.redirectTo({
                                        url: '/pages/giftPack/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // tabs 选项卡
            orderTab(e){
                this.stateType = e.currentTarget.dataset.state
				
                // 获取卡权益
                this.couponInfo()
            },
            
            // 已兑换细信息展开
            moreCoupon(index) {
            	this.coupons[index].couponShow = !this.coupons[index].couponShow
            },
            
            // 优惠券跳转详情
            couponUrl(id, from) {
				if(from == 'washcar') {
				    shopsUrl(id).then(res=>{
				        const newUrl = res.url
						window.location.href = newUrl
				    })
					return
				}
				
                // 跳转分类页
                uni.navigateTo({
                    url: '/pages/giftPack/details?id=' + id
                })
            },
            
            // 公众号展示
            followBtn() {
                this.followState = !this.followState
            },
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取团购列表
			    this.couponInfo();
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
			        this.couponInfo(pageNumber)
			    }
			}
        }
    }
</script>

<style lang="scss" scoped>
    /* 用户信息 */
    .user {
        width: 100%;
        background: #fff;
        font-size: 28rpx;
        padding: 20rpx;
        box-sizing: border-box;
        color: #a85920;
        display: flex;
        line-height: 48rpx;
    }
    
    .user text {
        font-weight: 600;
        padding: 0 10rpx;
    }
    
    .user image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 10rpx;
    }
    
    .campusCont {
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .campusCont.active {
        border-bottom: 140rpx solid transparent;
    }
    
    .couponTab{
		display: flex;
    }
    
    .couponTab-label {
        flex: 3;
        text-align: center;
        font-size: 30rpx;
		position: relative;
		padding-bottom: 20rpx;
		&::after {
			position: absolute;
			content: '';
			left: calc(50% - 20rpx);
			bottom: 0;
			width: 40rpx;
			height: 8rpx;
			background-color: transparent;
			border-radius: 40rpx;
		}
		&.active {
			color: #a85920;
			font-weight: 600;
		}
		&.active::after {
			background-color: #a85920;
		}
    }

    .couponTab-label view {
        font-size: 24rpx;
        margin-top: 6rpx;
    }
    
    .coupon {
        padding-bottom: 10rpx;
        box-sizing: border-box;
    }
    
    /* 漂浮弹出层 */
    .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;
    }
	
	// 优惠券
	.coupon {
		margin-top: 40rpx;
		.couponItem {
			margin-bottom: 30rpx;
			.couponItem-cont {
				background-color: #caa668;
				border-radius: 10rpx;
				position: relative;
				height: 140rpx;
				overflow: hidden;
				.couponItem-top {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					background-image: linear-gradient(to right, #fffbf5, #f2e2cc);
					width: calc(100% - 160rpx);
					display: flex;
					border-radius: 0 15rpx 15rpx 0;
					.couponItem-cont-number {
						width: 100rpx;
						line-height: 84rpx;
						color: #a85920;
						text {
							font-size: 54rpx;
						}
					}
					.couponItem-cont-image {
						width: 88rpx;
						height: 88rpx;
						margin-right: 10rpx;
						border-radius: 50%;
						padding: 10rpx;
						box-sizing: border-box;
						background-color: #fff1dd;
						image {
							width: 100%;
							border-radius: 50%;
						}
					}
					.couponItem-cont-name {
						color: #72411f;
						padding-left: 40rpx;
						box-sizing: border-box;
						width: calc(100% - 100rpx);
						position: relative;
						&::after {
							position: absolute;
							content: '';
							left: 13rpx;
							top: 10%;
							background-color: #ecd5c1;
							width: 2rpx;
							height: 80%;
						}
						.couponItem-cont-title {
							font-size: 30rpx;
						}
						.couponItem-cont-show {
							display: flex;
							font-size: 26rpx;
							padding-top: 13rpx;
							.couponItem-cont-icon {
								width: 32rpx;
								margin-left: 5rpx;
							}
						}
					}
				}
				.couponItem-btn {
					line-height: 140rpx;
					position: absolute;
					right: 0;
					top: 0;
					width: 160rpx;
					height: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
				}
			}
			.couponItem-cont-text {
				background-image: linear-gradient(-20deg, #fffbf5, #fbefdf);
				padding: 30rpx;
				box-sizing: border-box;
				color: #bc8863;
				line-height: 48rpx;
				font-size: 24rpx;
				margin-top: -4rpx;
				text-align: justify;
				border-radius: 0 0 15rpx 15rpx;
			}
			.couponItem-cont-show {
				display: flex;
				font-size: 26rpx;
				padding-top: 13rpx;
				.couponItem-cont-icon {
					width: 34rpx;
					height: 34rpx;
					vertical-align: -6rpx;
					margin-left: 5rpx;
					transition: .2s;
					&.active {
						 transform:rotate(-180deg);
					}
				}
			}
			&.active .couponItem-cont {
				background: #c1c1c1;
			}
			&.active .couponItem-top {
				background-image: linear-gradient(to right, #d9d9d9, #d9d9d9);
			}
			&.active .couponItem-cont-number,
			&.active .couponItem-cont-title,
			&.active .couponItem-cont-show {
				color: #7e7e7e !important;
			}
			&.active .couponItem-cont-icon {
				filter: grayscale(100%);
			}
			&.active .couponItem-cont-text{
				background-image: linear-gradient(to right, #eaeaea, #eaeaea);
				color: #7e7e7e !important;
			}
		}
	}
	
	.campusTips {
		margin-top: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.campusTips-cont {
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			padding: 80rpx;
			box-sizing: border-box;
			color: #9c7557;
			image {
				width: 340rpx;
				height: 280rpx;
				margin-bottom: 30rpx;
			}
			.campusTips-cont-go {
				display: inline-block;
				border: #9c7557 2rpx solid;
				line-height: 66rpx;
				padding: 0 40rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				border-radius: 90rpx;
			}
		}
	}
</style>
