<template>
    <div class="payment-wrap">
        <div class="jumbotron jumbotron-fluid">
            <div class="container text-center">
                <p class="order-info">
                    <img src="../../assets/image/ico_09.png" alt="">
                    提交订单完成，请尽快完成付款！
                </p>
                <!--<h5 class="time-down m-3">{{data.hour}}:{{data.minute}}:{{data.second}}</h5>-->
                <h5 class="pay-number d-inline-block mb-3">待付金额：&yen;<span>{{data.totalCharge}}</span></h5>
                <p class="order-sn">订单编号：<span>{{data.orderSn}}</span></p>
            </div>
        </div>
        <div class="payment mt-4">
            <h6 class="zhifu-way" v-if="data.recharfe">请选择支付方式</h6>
            <ul class="list-group list-group-flush"  v-if="data.zhifupay">
                <li class="list-group-item d-flex align-items-center" @click="weixin" >
                   <div>
                       <img class="pay-img-da" src="../../assets/image/ico-11.png" alt="">
                   </div>
                    <div style="float: right">
                        <img class="pay-img-xiao" src="../../assets/image/options.png"  v-if="data.isShowA" alt="">
                        <img class="pay-img-xiao" src="../../assets/image/pay-cost_11.png"  v-if="!data.isShowA" alt="">
                    </div>
                </li>
                <li class="list-group-item d-flex align-items-center"  @click="zhifubao" v-if="data.recharfe">
                   <div>
                       <img class="pay-img-da" src="../../assets/image/ico-13.png" alt="">
                   </div>
                    <div style="float: right">
                        <img class="pay-img-xiao" src="../../assets/image/options.png"  v-if="data.isShowB" alt="">
                        <img class="pay-img-xiao" src="../../assets/image/pay-cost_11.png" v-if="!data.isShowB" alt="">
                    </div>
                </li>
                <!--<li class="list-group-item d-flex align-items-center" v-on:click="payment('union')">-->
                    <!--<img src="../../assets/image/ico-12.png" alt="">-->
                <!--</li>-->
            </ul>
            <ul class="list-group list-group-flush" v-if="!data.zhifupay">
                <li class="list-group-item d-flex align-items-center" @click="gzhweixin">
                   <div>
                       <img class="pay-img-da" src="../../assets/image/ico-11.png" alt="">
                   </div>
                    <div style="float: right">
                        <img class="pay-img-xiao" src="../../assets/image/options.png"  v-if="data.isShowA" alt="">
                        <img class="pay-img-xiao" src="../../assets/image/pay-cost_11.png"  v-if="!data.isShowA" alt="">
                    </div>
                </li>
            </ul>

        </div>
        <div class="payment-kefu">
            <button type="button" class="button-2" v-on:click="zongpay">
                去支付
            </button>
        </div>
        <div class="model" v-bind:class="{'active': data.model}">
<!--            <img src="../../assets/image/wxpay.png" alt="" v-if="data.payment == 'weixin'">-->
<!--            <img src="../../assets/image/alipay.jpg" alt="" v-if="data.payment == 'alipay'">-->
            <a href="javascript:void(0);" class="btn btn-light  pl-5 pr-5" v-on:click="hideModel">查看订单</a>
        </div>
    </div>
</template>

<script lang="ts" src="./payment.ts"></script>


<style lang="scss" scoped>
    @import "@/assets/scss/variables.scss";

    .payment-wrap {
        width: 100%;
        height: 50rem;
        position: relative;
    }

    .jumbotron {
        background: #ffffff;
    }
    .zhifu-way{
            margin: 0 1.5rem 1.5rem 1.5rem;
            font-size: 1.4rem;
            font-family: "HiraginoSansGB";
            color: rgb(0, 0, 0);
    }
    .icon {
        display: block;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        background: #f78f8f;
    }

    .order-info {
        font-size: 1.25rem;
    }

    .order-info img {
        width: 3rem;
    }

    .time-down {
        color: #ccb187;
        font-size: 2rem;
        font-weight: bolder;
    }

    .pay-number {
        color: $green;
        border: 1px solid $green;
        padding: 0.5rem 2.5rem;
        border-radius: 0.5rem;
        font-weight: bolder;
    }

    .order-sn {
        position: absolute;
        color: #8e8e8e;
    }

    .btn-box .btn {
        color: #8e8e8e;
    }

    .pay-img-da{
        width: 70%;
    }
    .pay-img-xiao{
        width: 90%;
    }
    .align-items-center{
        display: flex;
        justify-content: space-between;
    }

    .model {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        text-align: center;
        background: rgba(0, 0, 0, .6);
        display: none;
        .pr-5{
            font-size: 1.5rem;
            margin-top: 40%;
        }
    }

    .model.active {
        display: block;
    }

    .model img {
        width: 80%;
        margin-top: 15%;
    }
    .payment-kefu{
        position: absolute;
        top: 35rem;
        width: 100%;
        display: flex;
        justify-content: center;
        .button-2{
            width: 25rem;
            line-height: 4rem;
            font-size: 1.4rem;
            color: #ffffff;
            border: none;
            border-radius: 0.4rem;
            background: #0dbc5a;
            .button-2-img{
                width: 1.5rem;
            }
        }
    }
</style>

