<template>
    <view>
        <!-- 卡激活 -->
        <view class="activate-back">
        	<image class="activate-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/activate-back.jpg" mode="aspectFill"></image>
        	<view class="activate-cont">
        		<view class="activate-title">消费红包【储值卡】</view>
        		<form @submit="cardform" class="activate-form">
        			<view class="activate-label">
        				<label>输入激活卡号（16位） <text>例：Byt2020090800020</text></label>
        				<input maxlength="16" name="code"></input>
        			</view>
        			<view class="activate-label">
        				<label>输入激活卡密（16位） <text>例：8888 8888 8888 8888</text></label>
        				<input maxlength="19" type="pass" @input="carmiTab" :value="carmi"/>
        			</view>
        			<view class="activate-btn">
        				<button form-type="submit">立即激活</button>
        			</view>
        		</form>
        		<view class="activate-tips">
        			<view class="activate-tips-title">温馨提示：</view>
        			<view class="activate-tips-text">
        				尊敬的会员：储值后，将开启您，愉快的消费之旅！
        			</view>
        		</view>
        	</view>
        </view>
    </view>
</template>

<script>
    import { cards } from '@/apis/interfaces/auth'
    export default {
    	data() {
    		return {
                carmi: ''  // 卡密
            }
        },
        onLoad(options) {},
        methods:{
            // 卡激活
            cardform(e) {
                cards({
                    code: e.detail.value.code,
                    code: this.carmi
                }).then(res=>{
                    // if(res.type == "silver") {
                    //     app.globalData.userCurrent = 0
                    // }else if(res.type == "gold") {
                    //     app.globalData.userCurrent = 1
                    // }else if(res.type == "drill") {
                    //     app.globalData.userCurrent = 2
                    // }else {
                    //     return
                    // }
        
                    // 写入缓存
                    // uni.setStorage({
                    //     key     : 'current',
                    //     data    : app.globalData.userCurrent
                    // })
        
                    uni.showToast({
                        title: res.message,
                        icon : 'none'
                    })
                    setTimeout(()=>{
                        uni.switchTab({
                            url: '/pages/user/index'
                        })
                    },2000)
                })
            },
        
            // 获取卡密
            carmiTab(e){
                var number = e.detail.value
                var change = number.replace(/(\d{4})(?=\d)/g, "$1-");
                this.carmi = change
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 卡激活 */
    .activate-back {
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        position: relative;
        .activate-img {
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        .activate-cont {
            position: absolute;
            top: 0;
            left: 0;
            padding: 60rpx;
            width: 100%;
            box-sizing: border-box;
            z-index: 9;
            .activate-title {
                font-size: 60rpx;
                font-weight: 600;
                text-align: center;
                margin: 20rpx 0 100rpx;
            }
            .activate-label, .activate-pass {
                margin-bottom: 60rpx;
            }
            .activate-label label, .activate-pass label {
                margin-bottom: 40rpx;
                display: block;
                font-weight: 600;
                font-size: 34rpx;
            }
            .activate-label input, .activate-pass input {
                background: rgba(255, 255, 255, .3);
                border-radius: 60rpx;
                height: 90rpx;
                line-height: 90rpx;
                padding: 0 1rem;
                box-sizing: border-box;
                box-shadow: inset -2px 2px 4px 1.5px rgba(0, 0, 0, 0.7);
            }
            .activate-label input {
                width: 100%;
            }
            .activate-label text {
                display: block;
                font-size: 32rpx;
                margin-top: 10rpx;
                font-weight: normal;
            }
            .activate-entry {
                display: flex;
                line-height: 80rpx;
                color: #fff;
                font-weight: 600;
                input {
                    background: #fff;
                    border-radius: 60rpx;
                    width: calc(25% - 1rem);
                    margin: 0 .5rem;
                    height: 80rpx;
                    line-height: 80rpx;
                }
            }
            .activate-btn {
                width: 100%;
                height: 90rpx;
                border: none;
                margin: 2rem 0 2.2rem;
                button {
                    width: 100% !important;
                    height: 100%;
                    line-height: 90rpx;
                    border-radius: 50rpx;
                    background: #000;
                    border: none;
                    font-size: 40rpx;
                    color: #fff;
                    margin: 0;
                    padding: 0;
                }
            }
            .activate-tips {
                color: #000;
                font-weight: 600;
                font-size: 32rpx;
                .activate-tips-text {
                    line-height: 46rpx;
                    margin-top: 20rpx;
                }
                .activate-tips-img {
                    width: 240rpx;
                    height: 240rpx;
                    border-radius: 50%;
                    margin: 2rem auto 0;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
</style>
