<template>
    <view>
        <!-- 卡券 -->
        <view class="contentBorder">
            <view class="contentTop">
                <view class="contentCard">
                    <view class="contentCard-mark">校园活动</view>
                    <view class="contentCard-top">
                        <image class="contentCard-top-img" src="/static/img/tel_img.png" mode="aspectFill"></image>
                        <view class="contentCard-top-title">
                            <view class="contentCard-top-text">
                                {{ detail.title }}
                            </view>
                            <view class="contentCard-top-copy">
                                {{ detail.type_no }}
                                <text>复制</text>
                            </view>
                        </view>
                    </view>
                    <view class="contentCard-bottom">
                        <view class="contentCard-bottom-explain" @click="noticeClick">
                            <image src="/static/icon/contentCard_icon.png" mode="aspectFill"></image>购买须知
                        </view>
                        <view class="contentCard-bottom-tips">
                            <view class="contentCard-bottom-title">限时活动</view>
                            <view class="contentCard-bottom-price">
                                <view class="contentCard-bottom-present">
                                    <text>￥</text>{{ detail.price }}
                                </view>
                                <view class="contentCard-bottom-cost">
                                    ￥{{ detail.price }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="contentTop">
                <view class="contentLabel">
                    <label>购买数量</label>
                    <view class="rightsAdd">
                        <view class="rightsAdd-btn" @tap="goodsNumber('remove')">-</view>
                        <input class="rightsAdd-input" :value="num" type="number" disabled=""></input>
                        <view class="rightsAdd-btn" @tap="goodsNumber('plus')">+</view>
                    </view>
                </view>
                <view class="contentLabel">
                    <label>支付方式</label>
                    <view class="contentLabel-right">
                        <view class="contentLabel-right-name">
                            在线支付
                        </view>
                        <view class="contentLabel-right-pay">
                            <text>沃支付</text>
                            <text>微信支付</text>
                        </view>
                    </view>
                </view>
                <view class="contentLabel">
                    <label v-if="detail.attribute">{{ detail.attribute.form_price }}</label>
                    <view class="contentLabel-right">
                        <view class="contentLabel-right-name">
                            ￥{{ detail.price }}
                        </view>
                    </view>
                </view>
                <view class="contentLabel">
                    <label v-if="detail.attribute">{{ detail.attribute.form_pay }}</label>
                    <view class="contentLabel-right">
                        <view class="contentLabel-right-name">
                            ￥{{ amount }}
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="contentTop contentMargin">
                <view class="contentTop-introduce">
                    <view class="contentTop-introduce-title">
                        内容介绍
                    </view>
                    <view class="contentTop-introduce-text">
                        <rich-text :nodes="content"></rich-text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 按钮 -->
        <view class="rightsBtn" @tap="payment">
            <button class="rightsBtn-btn" :disabled="disabled">立即购买</button>
        </view>
        
        <!-- 购买须知 -->
        <view class="popNoticeBack" :class="{active : noticeState}"></view>
        <view class="popNotice" :class="{active : noticeState}">
            <view class="popNotice-text">购买须知</view>
            <view class="popNotice-cont">
                <rich-text :nodes="remark"></rich-text>
            </view>
            <view class="popNotice-btn" @click="noticeClick">
                我知道了
            </view>
        </view>
    </view>
</template>

<script>
    import { buy, buySubmit } from '@/apis/interfaces/campus'
    export default {
        data() {
            return {
                groupId     : '',       //权益id
                detail      : '',       //权益详情
                amount      : '',       //总金额
                num         : 1,        //购买的数量
                content     : '',       //内容介绍
                notification: '',       //重要提示
                remark      : '',       //使用须知
                disabled    : false,    //购买按钮状态
                noticeState : false     //使用须知弹出层
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            this.groupId = options.id
            this.code    = options.code || ''
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 获取详情
            this.rightsInfo();
        },
        methods: {
            // 详情
            rightsInfo() {
                buy({activity_school_id: this.groupId, qty: this.num}).then(res => {
                    this.num    = res.qty
                    this.detail = res.detail
                    this.amount = res.amount
                    this.remark = res.detail.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.content= res.detail.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/campus/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 商品数量加减
            goodsNumber(val){
                let num = this.num
                if (val == 'plus'){
                    num ++;
                }else{
                    if (num > 1){
                        num --;
                    }else{
                        uni.showToast({
                            title   : '商品数量不能小于1',
                            icon    : 'none'
                        })
                    }
                }
                this.num = num
        
                // 获取详情
                this.rightsInfo()
            },
            
            // 购买须知弹框
            noticeClick() {
                this.noticeState = !this.noticeState
            },
            
            // 收银台跳转
            payment() {
                buySubmit({activity_school_id: this.groupId, qty: this.num, is_deliver: 1}).then(res => {
                    uni.navigateTo({
                        url: '/pages/cashier/index?tradeNo=' + res.trade_no + '&type=school' + '&price=' + this.amount
                    })
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/campus/signin'
                                    });
                                }
                            }
                        });
                    }
                });
            }
            
        }
    }
</script>

<style>
    .contentTop {
        width: 100vw;
        background: #FFFFFF;
        margin-bottom: 30rpx;
        border-bottom: 2rpx solid #efefef;
        border-top: 2rpx solid #efefef;
    }
    
    .contentCard {
        margin: 40rpx;
        width: calc(100% - 80rpx);
        background-color: #bc1d30;
        border-radius: 20rpx;
        overflow: hidden;
        color: #ffffff;
        position: relative;
    }
    
    .contentCard-mark {
        position: absolute;
        opacity: .9;
        background-color: #920011;
        font-size: 28rpx;
        padding: 10rpx 20rpx;
        right: 30rpx;
        top: 0;
    }
    
    .contentCard-top {
        text-align: center;
        padding: 60rpx 0;
        box-sizing: border-box;
    }
    
    .contentCard-top-img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
        border: 4rpx solid #fb7d7d;
        display: inline-block;
    }
    
    .contentCard-top-title {
        font-size: 28rpx;
    }
    
    .contentCard-top-text {
        font-size: 32rpx;
        margin-bottom: 20rpx;
    }
    
    .contentCard-top-copy {
        color: #ffc8cf;
    }
    
    .contentCard-top-copy text {
        border: 2rpx solid #ffc8cf;
        font-size: 24rpx;
        border-radius: 30rpx;
        padding: 0 10rpx;
        height: 32rpx;
        line-height: 32rpx;
        display: inline-block;
        margin-left: 15rpx;
        transform : scale(.85)
    }
    
    .contentCard-bottom {
        background-color: rgba(0,0,0,.15);
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
    }
    
    .contentCard-bottom-explain {
        display: flex;
        flex: 1;
        opacity: .8;
    }
    
    .contentCard-bottom-explain image {
        width: 42rpx;
        height: 42rpx;
        margin: 18rpx 10rpx 0 0;
    }
    
    .contentCard-bottom-tips,
    .contentCard-bottom-price {
        display: flex;
    }
    
    .contentCard-bottom-title {
        background-color: #e69500;
        height: 50rpx;
        line-height: 50rpx;
        padding: 0 15rpx;
        border-radius: 10rpx;
        margin-top: 16rpx;
        transform : scale(.85)
    }
    
    .contentCard-bottom-title::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-top: 25rpx solid transparent;
        border-left: 25rpx solid #e69500;
        border-bottom: 25rpx solid transparent;
    }
    
    .contentCard-bottom-present {
        margin: 0 10rpx;
        font-size: 40rpx;
    }
    
    .contentCard-bottom-present text,
    .contentCard-bottom-cost {
        font-size: 24rpx;
    }
    
    .contentCard-bottom-cost {
        text-decoration: line-through;
        padding-top: 4rpx;
    }
    
    .contentLabel {
        display: flex;
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        border-bottom: #efefef 2rpx solid;
        font-size: 30rpx;
    }
    
    .contentLabel:last-child {
        margin-bottom: 0;
        border: none;
    }
    
    .contentLabel label {
        flex: 1;
        line-height: 54rpx;
    }
    
    .contentLabel-right-name {
        text-align: right;
        margin-bottom: 10rpx;
    }
    
    .contentLabel-right-pay text {
        font-size: 26rpx;
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
        color: #e56012;
        border: 1rpx solid #e56012;
        margin-left: 15rpx;
    }
    
    .contentLabel-right-pay text:last-child {
        color: #29c529;
        border-color: #29c529;
    }
    
    .rightsAdd {
       display: flex;
       border: 2rpx solid #efefef;
    }
   
    .rightsAdd-btn {
        width: 54rpx;
        height: 54rpx;
        line-height: 54rpx;
        text-align: center;
        border-radius: 4rpx;
        font-size: 38rpx;
        color: #666666;
    }
    
    .rightsAdd-input {
        width: 80rpx;
        height: 54rpx;
        font-size: 30rpx;
        text-align: center;
        border-left: 2rpx solid #efefef;
        border-right: 2rpx solid #efefef;
    }
    
    .contentBorder {
        border-bottom: 140rpx solid transparent;
    }
    
    .contentTop-introduce-title {
        text-align: center;
        line-height: 100rpx;
        font-size: 34rpx;
        position: relative;
    }
    
    .contentTop-introduce-title::after,
    .contentTop-introduce-title::before{
        position: absolute;
        width: 100rpx;
        height: 2rpx;
        top: 50rpx;
        content: '';
        background-color: #dadada;
    }
    
    .contentTop-introduce-title::after {
        left: 20%;
    }
    
    .contentTop-introduce-title::before {
        right: 20%;
    }
    
    .contentTop-introduce-text {
        padding: 0 40rpx 40rpx;
        color: #a0a0a2;
        box-sizing: border-box;
        font-size: 30rpx;
    }
    
    /* 按钮 */
    .rightsBtn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        z-index: 1002;
        height: 140rpx;
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .rightsBtn-btn {
        background-color: #bc1d30;
        color: #ffffff;
        height: 90rpx;
        line-height: 90rpx;
        width: 100%;
        font-size: 32rpx;
        padding: 0;
        margin: 0;
    }
    
    .popNoticeBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background: rgba(0,0,0,.7);
        z-index: 1003;
        display: none;
    }
    
    .popNoticeBack.active {
        display: block;
    }
    
    .popNotice {
        position: fixed;
        left: 15%;
        right: 15%;
        top: 30%;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        overflow: hidden;
        z-index: 1004;
        display: none;
    }
    
    .popNotice.active {
        display: block;
    }
    
    .popNotice-text {
        text-align: center;
        font-weight: 600;
        line-height: 90rpx;
    }
    
    .popNotice-cont {
        border-top: 2rpx solid #efefef;
        border-bottom: 2rpx solid #efefef;
        padding: 50rpx 30rpx;
        box-sizing: border-box;
        font-size: 30rpx;
    }
    
    .popNotice-btn {
        color: #FFFFFF;
        line-height: 90rpx;
        font-size: 30rpx;
        text-align: center;
        background-color: #e69500;
    }
</style>
