proginn-frontend/pages/otherpage/money/index.vue

<template>
  <div class="index">

    <div class="contentInfo">
      <div class="titleInfo">
        <div class="stitle">个人资金账户</div>
        <div class="sdesc">来自程序员客栈</div>
      </div>

      <div class="line"></div>

      <div class="moneyInfo">
        <div class="normal">
          <div class="label">薪资账户余额</div>
          <div class="nums">￥{{bankInfo.incomeTaxBalance || 0 }}元</div>
        </div>
        <div class="normal freeze">
          <div class="label">冻结账户余额</div>
          <div class="nums">￥{{bankInfo.frozenBalance || 0 }}元</div>
        </div>
      </div>

      <div class="line"></div>

      <div class="submitArea">
        <div class="agreeInfo" @click="onAgreeProto">
          <div class="choose" :class="{ok: agreeProto}"></div>
          <div class="word">确认并同意</div>
          <a href="/otherpage/proto/lingxin?key=kaifabao_agreement" class="word1" @click.stop="()=>{}">《领薪宝服务协议》</a>
        </div>
        <div class="agreeBtn" @click="onWithdrawBtn">
          <p>提现</p>
        </div>
      </div>
    </div>

    <div class="connect">
      商务合作请联系: <span>0571-28120931</span>
    </div>

    <div class="bottomArea">
      <IBottom :step="2"></IBottom>
    </div>
  </div>
</template>

<script>
  import IBottom from '../../../components/otherpage/money/bottom'

  export default {
    name: "MoneyIndex",
    components: { IBottom },
    head() {
      let obj = {
        title: "领薪宝",
        meta: [{
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'
        }]
      }
      return obj
    },
    async asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile()
      }
    },
    data() {
      return {
        agreeProto: true,
        bankInfo: {}
      }
    },
    created() {
      this.getAccountBankInfo()
    },
    methods: {
      onWithdrawBtn() {
        if (!this.agreeProto) {
          this._toast('请先同意协议')
          return false
        }
        location.href = '/otherpage/money/withdraw'
      },
      onAgreeProto() {
        this.agreeProto = !this.agreeProto
      },
      getAccountBankInfo() {
        this.$axios.post('/api/account/getBalance').then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            this.bankInfo = data
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/otherpage/money/index";
</style>