my_loan/htmldev/TBTools/src/views/modules/mine/mine-paycheck.vue

<template>
  <el-row class="pay-check">
    <el-col :span="10" :offset="2">
      <h3 class="TT-title">请打开支付扫一扫扫码充值</h3>
      <div class="qrcode-wrap">
        <img :src="payConfig.aliPayImg" alt="">
      </div>
    </el-col>
    <el-col :span="10">
      <ul class="TT-steps">
        <li>
          <p>
            <span>第一步：扫码后直接输入你想要充值的金额</span>
          </p>
        </li>
        <li>
          <p>
            <span>第二步：支付宝充值备注填写</span>
            <span class="order-id">{{ payConfig.payRemark }}</span>
          </p>
          <p>
            <span>未填写则不到账</span>
          </p>
        </li>
        <li>
          <p>
            <span>第三步：扫码后等待30s后自动到账</span>
            <span class="refresh-order" @click="$router.push({name: 'mineWallet'})">已充值，去查看余额</span>
          </p>
          <p>
            <span>当前余额</span>
            <span class="amount-order">{{ payConfig.userBlance }}</span>
            <span>金币</span>
          </p>
        </li>
      </ul>
      <div class="TT-help">
        <h3 class="TT-title">联系客服</h3>
        <el-row>
          <el-col :span="11">
            <p class="label">QQ：112012666</p>
            <img class="qrcode" src="../../../../static/img/kefu0000.png" alt="">
          </el-col>
          <el-col :span="11" :offset="2">
            <p class="label">微信二维码</p>
            <img class="qrcode" src="../../../../static/img/kefu0001.jpeg" alt="">
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'mine-paycheck',
  data () {
    return {
      payConfig: {}
    }
  },
  activated () {
    this.funInit()
  },
  methods: {
    funInit () {
      this.$http({
        url: this.$http.adornUrl('/user/config'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data.status) {
          this.payConfig = data.data
          return
        }
        this.$message.error(data.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-check {
  margin-top: 100px;
}

.TT-title {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.qrcode-wrap {
  width: 60%;

  img {
    display: block;
    width: 100%;
  }
}

.TT-steps {
  list-style: none;

  li {
    position: relative;
    left: 0;
    top: 0;
    padding-left: 13px;
    padding-bottom: 60px;

    &:before {
      position: absolute;
      left: 3px;
      top: 6px;
      display: block;
      content: '';
      height: 100%;
      border-left: 1px solid #999;
    }

    &:after {
      position: absolute;
      left: 0;
      top: 6px;
      display: block;
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: pink;
    }

    &:nth-of-type(3) {
      &:before {
        border-left: none;
      }
    }

    p {
      display: flex;
      align-items: center;
    }

    span {
      font-size: 16px;
      color: #333;
    }

    .order-id {
      padding: 4px 10px;
      margin-left: 6px;
      background: pink;
    }

    .refresh-order {
      margin-left: 4px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }

    .amount-order {
      color: red;
      margin: 0 6px;
    }
  }
}

.TT-help {
  padding-top: 20px;
  border-top: 1px dashed #666;

  .label {
    margin: 20px 0;
    text-align: center;
  }

  .qrcode {
    display: block;
    width: 100%;
  }
}
</style>