flavorOfTimeSzMall/src/views/User/OrderPayB2B.vue

<template>
  <div class="bg">
    <div class="flex-between" style="margin-bottom: 20px;">
        <div></div>
        <div style="color: #d80200;cursor: pointer;" @click="$router.go(-1)">重新选择支付方式</div>
    </div>

    <div class="common-card normal-margin-bottom">
        <div class="flex-between">
            <div class="left-box">
                <div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div>
                
                <div style="display: flex;flex-direction: column;justify-content: space-between;">
                    <div class="success-title">请选择一家银行，然后通过企业网银B2B进行支付</div>
                    <div class="success-subtitle">订单号：<span class="tip-text">XD250731153300007092</span></div>
                </div>
            </div>
            <div class="amount">应付金额：<span class="price">176.00</span></div>
        </div>
    </div>

    <div class="common-card ">
        <div class="grid-container">
            <div class="bank-img" v-for="i in 23" :key="i" @click="activeIndex=i">
                <img class="bank-img" src="https://static.ticket.sz-trip.com/uploads/20250627/08ca7d74f5a7c6299bc72f29a27c918e.png"></img>
                <div class="hover-box" v-if="activeIndex==i"></div>
            </div>
        </div>

        <div class="flex-between" style="margin-top: 40px;">
            <div>
                如您的付款行不在上述银行列表中，请选择 <span style="color: #d80200;">识别码支付</span>。
            </div>
            <el-button type="danger" @click="dialogVisible = true">去支付</el-button>
        </div>
    </div>


    <el-dialog custom-class="error-pay-dialog" :show-close="false" :visible.sync="dialogVisible" width="800px">
      <div class="dialog-content">
        <div class="dialog-title">尊敬的客户:</div>
        <div class="dialog-title">
          系统未能成功接受到证书信息，导致无法登录网银专业版。此现象可能是多种原因导致，请您根据下述方法进行处理:
        </div>
        <ol class="dialog-list">
          <li>
            下载安装并运行
            <a href="#" style="color: #409EFF; text-decoration: underline;">"农业银行网银助手"</a>，
            帮助您检测问题并根据结果进行修复；
          </li>
          <li>请关闭所有打开的IE浏览窗口，重新尝试登录；</li>
          <li>
            如仍不能正常登录网银专业版，请参阅
            <a href="#" style="color: #409EFF; text-decoration: underline;">"对公网上银行常见问题解答"</a>
            的【登录】部分；
          </li>
          <li>
            您可拨打95599客户服务电话，也可点击
            <a href="#" style="color: #409EFF; text-decoration: underline;">【在线客服】</a>
            进入人工服务，将由专人为您提供帮助。
          </li>
        </ol>

        <div class="flex-center" style="margin-top: 50px;">
            <el-button type="primary" size="small" @click="dialogVisible = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: 'OrderPay',
  data() {
    return {
        activeIndex:0,
        data: [],
        bank: null,
        dialogVisible: false,

    };
  },
    computed: {

    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.bg{
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.common-card{
    width: 100%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.left-box{
    display: flex;
    align-items: center;
    
    .success-icon-box{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #67C23A;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
    }
    .success-title{
        font-weight: bold;
        margin-bottom: 10px;
    }
}
.price{
    color: #d80200;
    &::before{
        content: "¥";
       font-size: 12px;
    }
}
.tip-text{
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    .bank-img{
        width: 180px;
        height: 50px;
        position: relative;
        cursor: pointer;
        .hover-box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

::v-deep .error-pay-dialog{
    .el-dialog__header{
        display: none;
    }
    .el-dialog__body{
        
    }
    .dialog-content{
        font-weight: bold;
        font-size: 14px;
    }
    .dialog-title{
        color: #d80200;
        line-height: 2;
    }
     .dialog-list {
        margin-top: 20px;
      margin-left: 40px;
      line-height: 3;
    }
}
</style>