<template>
    <div class="alipay">
        <header>支付页面</header>

        <div class="userInfo">
            <p class="name">黄口小儿</p>
            <p class="orderNo">
                订单编号：12123343233212<br />
                乐团：大雅乐盟乐团
            </p>
            <div class="userImg">
                <img src="../assets/user.png" alt="">
            </div>
        </div>

        <div class="orderInfo">
            <h2 class="line_bottom">订单详情</h2>
            <div class="details line_bottom">
                <div class="line_bottom detail_block" v-if="orderInfo.class.classList">
                    <p  v-for="item in orderInfo.class.classList" :key="item">{{ item }}</p>
                    <span class="price"><del>原价:￥{{ orderInfo.class.marketPrice }}</del>￥{{ orderInfo.class.referencePrice }}</span>
                </div>

                <p v-if="orderInfo.class.className">{{ orderInfo.class.className }}<span><del>原价:￥{{ orderInfo.class.marketPrice }}</del>￥{{ orderInfo.class.referencePrice }}</span></p>
                <p v-for="item in orderInfo.dataList" :key="item.name">{{ item.name }}<span><del>原价:￥{{ item.marketPrice }}</del>￥{{ item.referencePrice }}</span></p>
            </div>
        </div>

        <div class="priceInfo">
            <div class="content">
                <del>原价</del>
                仅需支付
            </div>
             <div class="prices">
                 <del>￥{{ orderInfo.marketPrice }}</del>
                 <span class="price">￥{{ orderInfo.referencePrice}}</span>
             </div>
        </div>

        <div class="payInfo">
            <h2 class="line_bottom">选择支付方式</h2>
            <div class="pay_list">
                <div class="pay_item" @click="changePayment('zfb')">
                    <div class="p_hd">
                        <img src="../assets/zfb.png" alt="">
                    </div>
                    <div class="p_bd">支付宝支付</div>
                    <span class="p_ft" :class="[ payment == 'zfb' ? 'check' : '' ]"></span>
                </div>
                <div class="pay_item" @click="changePayment('wx')">
                    <div class="p_hd">
                        <img src="../assets/wx.png" alt="">
                    </div>
                    <div class="p_bd">微信支付</div>
                    <span class="p_ft" :class="[ payment == 'wx' ? 'check' : '' ]"></span>
                </div>
                <div class="pay_item" @click="changePayment('card')">
                    <div class="p_hd">
                        <img src="../assets/card.png" alt="">
                    </div>
                    <div class="p_bd">银行卡支付</div>
                    <span class="p_ft" :class="[ payment == 'card' ? 'check' : '' ]"></span>
                </div>
            </div>
        </div>

        <div class="pay_btn" @click="pay">支付</div>

        <div class="wxpopup" :class="{ 'hide' : wxpopup }">
            <img src="../assets/wx_bg.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'alipay',
    data() {
        return {
            // 支付宝 zfb
            // 微信 wx
            // 银行卡 card
            payment: 'zfb', // 支付方式
            balance: 10, // 余额
            orderInfo: {
                class: {
                    className: '',
                    classList: null
                },
                dataList: null
            }, // 数据信息
            wxpopup: true, // 微信提示是否隐藏
        }
    },
    mounted() {
        this.orderInfo = JSON.parse(this.$route.query.orderInfo)
        // console.log(this.orderInfo)
    },
    methods: {
        changePayment(type) {
            this.payment = type
        },
        pay() {
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                this.wxpopup = false
                return true;
            }

            // 支付...
        }
    }
}
</script>

<style lang="less" scoped>
.alipay {
    overflow: hidden;
    background: #fff;
    min-height: 100vh;
}
.userInfo, .orderInfo, .priceInfo, .payInfo {
    padding: 0 .22rem;
    color: #444;
    font-size: .12rem;
}
.line_bottom {
    border-bottom: 1px solid #ededed;
}
header {
    height: .40rem;
    line-height: .40rem;
    color: #000;
    font-size: .17rem;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
    text-align: center;
}

.userInfo {
    padding-top: .20rem;
    position: relative;
    .name {
        font-size: .24rem;
        line-height: .33rem;
        font-weight: bold;
    }
    .orderNo {
        padding: .05rem 0;
    }
    .userImg {
        position: absolute;
        right: .22rem;
        bottom: .1rem;
    }
}

.orderInfo {
    h2 {
        font-size: .15rem;
        line-height: 21px;
        border-top: 1px solid #ededed;
        padding: .05rem 0;
    }
    .details {
        padding: .08rem 0;
        line-height: .2rem;
        .detail_block {
            position: relative;
            margin-bottom: .05rem;
            .price {
                position: absolute;
                bottom: .05rem;
                right: 0;
            }
        }
        span {
            float: right;
            display: flex;
            justify-content: space-between;
            color: #FF1200;
            font-size: .12rem;
            del {
                font-size: .11rem;
                color: #AAAAAA;
            }
        }
    }
}

.priceInfo {
    font-size: .18rem;
    line-height: .25rem;
    padding-top: .06rem;
    padding-bottom: .3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FA101D;
    del {
        display: block;
        font-size: .14rem;
        color: #aaa;
    }
    .prices {
        del {
            font-size: .12rem;
            text-align: right;
        }
        .price {
            font-size: .16rem;
            line-height: .22rem;
        }
    }
}

.payInfo {
    h2 {
        font-size: .2rem;
        font-weight: bold;
        margin-bottom: .1rem;
    }

    .pay_item {
        display: flex;
        align-items: center;
        padding-bottom: .1rem;
        .p_hd {
            img {
                width: .24rem;
                height: .24rem;
                padding-right: .08rem;
                display: block;
            }
        }
        .p_bd {
            flex: 1;
            align-items: flex-start;
        }
        .p_ft {
            width: .24rem;
            height: .24rem;
            background: url('../assets/radio_default.png') no-repeat center;
            background-size: contain;
            display: inline-block;
            &.check {
                background: url('../assets/radio_check.png') no-repeat center;
                background-size: contain;
            }
        }
    }
}

.pay_btn {
    margin: .15rem .35rem .2rem;
    background: #f1111b;
    line-height: .45rem;
    color: #fff;
    font-size: .18rem;
    border-radius:5px;
    text-align: center;
}

.wxpopup {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    &.hide {
        display: none;
    }
    img {
        width: 78%;
        float: right;
        padding-right: .1rem;
        padding-top: .2rem;
    }
}
</style>