uni-pos/src/views/finance/cash/details.vue

<template>
  <el-dialog
    :title="dialogData.title"
    :visible.sync="dialogData.isVisible"
    width="45%"
  >
    <ul>
      <li v-for="(item,index) in dataList" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ index === 5 ? moneyUnit(item.value) : item.value }}</span>
      </li>
      <li v-if="!dialogData.type">
        <span>处理时间:</span>
        <span>{{ info.auditTime }}</span>
      </li>
    </ul>
    <p v-if="dialogData.cash&&!dialogData.cash.auditStatus&&dialogData.type" class="tips">* 请确认您已转账成功，再点击确认</p>
    <p
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        v-if="dialogData.cash&&!dialogData.cash.auditStatus&&dialogData.type"
        type="primary"
        @click="confirm()"
      >
        {{ dialogData.confirm || '确定' }}
      </el-button>
      <el-button @click="cancel()">
        {{ dialogData.cancel || '取消' }}
      </el-button>
    </p>
  </el-dialog>
</template>

<script>
import Finance from '@/api/Finance'
export default {
  props: {
    dialogData: {
      type: Object,
      default: () => {

      }
    }
  },
  data() {
    return {
      dataList: [
        { name: '店铺名称:', value: '', field: 'storeName' },
        { name: '店铺编码:', value: '', field: 'tenant' },
        { name: '银行名称:', value: '', field: 'bank' },
        { name: '银行卡号:', value: '', field: 'cardNumber' },
        { name: '收款人姓名:', value: '', field: 'cardholderName' },
        { name: '提现金额:', value: '', field: 'amount' },
        { name: '申请时间:', value: '', field: 'applyTime' }

      ],
      params: {
        id: '',
        tenant: ''
      },
      info: {}
    }
  },
  methods: {
    async getDetail(id) {
      const res = await Finance.getDetail( id )
      const resData = res.data
      if (resData.code === 0) {
        const d = resData.data
        this.info = d
        this.dataList.map(item => {
          item.value = d[item.field]
          if (item.field === 'cardholderName') {
            item.value = `${item.value.slice(0, 1)}**`
          }
          if (item.field === 'cardNumber') {
            item.value = `${item.value.slice(0, 4)}****************`
          }
        })
        Object.keys(this.params).map(item => {
          this.params[item] = d[item]
        })
      }
    },
    moneyUnit(v) {
      return v ? (v / 100).toFixed(2) : 0
    },
    confirm() {
      Finance.audiCash(this.params).then(() => {
        this.$message({
          message: '处理成功',
          type: 'success'
        })
        this.close()
      })
    },
    cancel() {
      this.close()
    },
    close() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style scoped lang='less'>
.dialog-footer {
    text-align: center;
    .el-button {
        padding: 15px 30px;
        &:nth-child(1) {
            margin-right: 40px;
        }
    }
}
ul {
  list-style: none;
  overflow: hidden;
  margin: 0;
  li {
    width: 50%;
    float: left;
    height: 50px;
    line-height: 50px;
    color: #000;
    span {
      display: inline-block;
      &:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
}
.tips {
  text-align: center;
  color: red;
}
</style>