clsd/admin-ui/src/views/work/money/index.vue

<template>
  <div class="app-container">
    <div class="cmain">
      <div class="cards">
        <div class="ctop">
          <span class="icon">&#xe646;</span>
          <span class="ctitle">{{ form.companyName }}</span>
          <span class="ckk" @click="op('info')">查看</span>
          <img :src="rz" class="rz" />
          <span class="icon qr" title="点击查看企业二维码" @click="op('qr')">&#xe643;</span>
        </div>
        <div class="desc">账户余额（元）</div>
        <div class="money">{{ form.money }}</div>
        <el-row :gutter="10" class="btm">
          <el-button type="primary" icon="el-icon-minus" @click="op('out')" v-hasPermi="['work:out:add']">提现</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="op('add')" v-hasPermi="['work:recharge:add']">充值</el-button>
          <el-button type="primary" icon="el-icon-document" @click="op('recharge_list')" v-hasPermi="['work:recharge:list']">充值明细</el-button>
          <el-button type="primary" icon="el-icon-s-promotion" @click="op('out_list')" v-hasPermi="['work:out:list']">提现明细</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import out_edit from './out/edit.vue';
import out_list from './out/record.vue';
import recharge_edit from './recharge/edit.vue';
import recharge_list from './recharge/record.vue';
import qr from '@/components/qr';
import rz from '@/assets/images/rz.png';
import company from '@/views/work/company/detail.vue';
export default {
  name: 'Money',
  data() {
    return {
      rz: rz,
      form: {},
      rules: {
        serviceCompany: [{ required: true, message: '服务公司不能为空', trigger: 'blur' }],
        bankName: [{ required: true, message: '开户行不能为空', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '银行卡号不能为空', trigger: 'blur' }]
      }
    };
  },
  mounted() {
    this.ajax({ url: '/work/company/index' }).then((response) => {
      this.form = response.data;
    });
  },
  methods: {
    op(tag, row) {
      if (tag == 'info') {
        this.iframe({ obj: company, param: { id: this.form.id, detail: true }, title: '企业信息', width: '60%', height: '75%' });
      }
      if (tag == 'qr') {
        this.iframe({ obj: qr, param: {}, title: '查看企业二维码', width: '27%', height: '45%' });
      }
      if (tag == 'out') {
        this.iframe({ obj: out_edit, param: {}, title: '提现申请', width: '40%', height: '55%' });
      }
      if (tag == 'add') {
        this.iframe({ obj: recharge_edit, param: {}, title: '充值申请', width: '40%', height: '65%' });
      }
      if (tag == 'recharge_list') {
        this.iframe({ obj: recharge_list, param: {}, title: '充值明细', width: '72%', height: '70%' });
      }
      if (tag == 'out_list') {
        this.iframe({ obj: out_list, param: {}, title: '提现明细', width: '72%', height: '70%' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cards {
  border-radius: 10px;
  border: 1px solid #1890ff;
  padding: 20px;
  .ctop {
    .icon {
      font-size: 20px;
      padding-right: 5px;
    }
    .ctitle {
      font-size: 16px;
    }
    .ckk {
      color: #1890ff;
      cursor: pointer;
      padding-left: 10px;
      font-size: 13px;
    }
    .rz {
      float: right;
      width: 80px;
    }
    .qr {
      float: right;
      margin-top: 3px;
      font-size: 23px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .desc {
    color: #8c8c8c;
    padding-top: 20px;
  }
  .money {
    padding-top: 20px;
    font-size: 32px;
    color: #1890ff;
  }
  .btm {
    padding-top: 20px;
  }
}
</style>