coinbus/yq/src/views/AccountUpgrade/index.vue

<template>
  <div v-loading="AccountUpgradeLoading" class="payMain">
    <!-- 支付页面 账户升级 -->
    <el-row>
      <!-- 支付详情 -->
      <h3>{{$t(`pay.Payment`)}}</h3>
      <el-col>
        <el-form class="registeredForm" :model="params">
           <!--  账户升级 -->
          <el-form-item>
            <div style="width: 100%">{{$t(`pay.AccountUpgrade`)}} :</div>
            <el-select v-model="params.type" @change="handelAccounts" :placeholder="$t(`home.abbr`)">
              <el-option
                v-for="item in accounts"
                :key="item.label"
                :label="$t(item.label)"
                :value="item.value"
                :disabled="item.value < bthDisabled "
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 支付金额 -->
          <el-form-item>
            <div style="width: 100%">{{$t(`pay.AmountPaid`)}} :</div>
            <el-input
              v-model="params.amount"
              size="small"
              autocomplete="off"
              style="width: 215px"
              disabled
            ></el-input>
            <!-- 服务端返回计算公式 -->
            <p style="margin: 0;padding: 0;font-size: 12px;line-height: 20px;">{{ formula }}</p>
          </el-form-item>
            <!-- 账户余额 -->
            <el-form-item>
            <div style="width: 100%">{{ $t(`pay.accountBalance`) }} :</div>
              <div class="balanceBox">
                <p> <span>USDC :</span> <span>{{ balances.usdc }}</span> </p>
                <p> <span>USDT :</span> <span>{{ balances.usdt }}</span></p>
                <p> <span>BUSD :</span> <span>{{ balances.busd }}</span></p>
                <p class="total"> <span >{{ $t(`home.totalAmount`) }} :</span> <span>{{ balances.total }}</span></p>
             </div>            
          </el-form-item>
         
          <div style="margin-bottom: 20px;">
            <!-- 提示： -->
            <ul style="font-size: 13px;">
              <li>{{ $t(`pay.Reminder`) }}</li>
              <li>{{ $t(`pay.Reminder_16`) }}</li>
              <li>{{ $t(`pay.Reminder_17`) }}</li>
              <li>{{ $t(`pay.Reminder_18`) }}</li>
             
            </ul>
          </div>



          <!-- 提交支付 -->
          <el-button @click="handelPay" type="warning">{{$t(`pay.SubmitPayment`)}}</el-button>
        
        </el-form>
      </el-col>
    </el-row>
    <!-- 确认支付 -->
    <el-dialog
      :title="$t(`pay.Confirmation`)"
      :visible.sync="dialogVisible"
      width="30%"     
    >
      <div class="paymentBox"> 
      <p>{{$t(`pay.AccountLevel`)}} : <span>{{handelLevel(params.type) }}</span></p>
      <p>{{$t(`pay.AmountPaid`)}} : <span>{{params.amount}}</span></p>
      <!-- <p>{{$t(`pay.currency`)}} : <span>{{value}}</span></p> -->
      <!-- <p>{{$t(`pay.network`)}} : <span>{{upgradeList.network}}</span></p>
      <p>{{$t(`pay.address`)}} : <span>{{upgradeList.address}}</span></p>
      <p>{{$t(`pay.PaymentID`)}}  : <span>{{upgradeList.id}}</span></p> -->
      </div>
  
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t(`pay.cancel`)}}</el-button>
        <el-button type="warning" :loading="ConfirmationPaymentLoading" @click="handelConfirmPayment"
          >{{$t(`pay.ConfirmationPayment`)}}</el-button
        >
      </span>
    </el-dialog>

    <!-- 余额不足 -->
     <!-- 确认支付 -->
     <el-dialog     
      :title="$t(`pay.prompt`)"
      :visible.sync="balanceDialog"
      width="30%"     
    >
      <p>{{ $t(`pay.Insufficient`) }}</p>
  
      <span slot="footer" class="dialog-footer">
        <el-button  type="warning" @click="balanceDialog = false">{{$t(`pay.confirm`)}}</el-button>
        <!-- <el-button  type="warning" @click="handelRecharge" >{{ $t(`pay.toRecharge1`) }}</el-button >       -->
      </span>
    </el-dialog>

  </div>
</template>

<script>
import IndexJs from "../AccountUpgrade/index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.payMain {
  padding: 50px 25%;
  // border: 1px solid red;
}
.paymentBox{
  // border: 1px solid red;
   box-shadow: 0px 0px 3px 0px;
   padding: 5px;

  p{
    font-size: 18px;
   
  }
}
  .balanceBox{
    // outline: 1px solid red;

    display: flex;
    width: 60%;
    // justify-content: space-around;
    flex-direction: column;
    padding: 0;
    p{
      // outline: 1px solid red;
      display: flex;
      // flex-direction: column;
      margin: 0;
      margin-top: 5px;
      span:nth-of-type(1){
        line-height: 35px;
        // width: 60px;
        font-weight: 500;
      }
      span:nth-of-type(2){
        // outline: 1px solid red;
        width: 30%;
        background: #f5f7fa;
        // background: rgba(0,0,0,0.6);
        padding-left: 10px;
        line-height: 35px;
        border-radius: 4px;
        color: #383d71;
        margin-left: 10px;
      }
    }
  }
// .total{
//   outline: 1px solid red;
//   display: flex;
//   // width: 240px;
//   span:nth-of-type(1){
//     outline: 1px solid red;
//     // flex: 1;
//   }
//   span:nth-of-type(2){
//     width: 170px !important;
//   }
// }
</style>