smart-switch-ui/src/views/system/recharge/detail.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="12">
      <el-col :span="18">
        <el-card class="box-card">
          <el-descriptions title="基本信息">
            <el-descriptions-item label="订单编号">{{detail.billNo | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="交易状态">
              <dict-tag :value="detail.status" :options="dict.type.sm_transaction_bill_status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="交易金额">{{detail.money | money | defaultValue}} 元</el-descriptions-item>
            <el-descriptions-item label="设备编号">
              <device-link :id="detail.deviceId" :text="detail.deviceNo"/>
            </el-descriptions-item>
            <el-descriptions-item label="设备名称">
              <device-link :id="detail.deviceId" :text="detail.deviceName"/>
            </el-descriptions-item>
            <el-descriptions-item label="经营场所">
              <store-link :id="detail.storeId" :name="detail.storeName"/>
            </el-descriptions-item>
            <el-descriptions-item label="经营场所地址">
              {{detail.storeAddress | defaultValue}}
            </el-descriptions-item>
            <el-descriptions-item label="房间号" :span="2">
              {{detail.deviceRoom | defaultValue}}
            </el-descriptions-item>
            <el-descriptions-item label="直属代理">
              <user-link :id="detail.agentId" :name="detail.agentName"/>（{{detail.agentMobile}}）
            </el-descriptions-item>
            <el-descriptions-item label="直属业务员">
              <user-link :id="detail.bizId" :name="detail.bizName"/>（{{detail.bizMobile}}）
            </el-descriptions-item>
            <el-descriptions-item label="投资人">
              <user-link :id="detail.investorId" :name="detail.investorName"/>（{{detail.investorMobile}}）
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card">
          <el-descriptions title="套餐信息">
            <el-descriptions-item label="套餐名称">{{detail.suitName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="套餐时长" v-if="detail.suitFeeType === SuitFeeType.TIMING">{{detail.suitTime | defaultValue}} {{suitTimeUnit(detail.suitTimeUnit)}}</el-descriptions-item>
            <el-descriptions-item label="套餐电量" v-if="detail.suitFeeType === SuitFeeType.COUNT">{{detail.suitTime | defaultValue}} 度</el-descriptions-item>
            <el-descriptions-item label="设备充值状态"  v-if="[SuitFeeType.TIMING, SuitFeeType.COUNT].includes(detail.suitFeeType)">
              <dict-tag :value="detail.deviceRechargeStatus"
                        :options="dict.type.sm_transaction_bill_device_recharge_status"
                        size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="套餐开始时间">{{detail.suitStartTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="套餐结束时间">{{detail.suitEndTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="套餐失效时间">{{detail.suitExpireTime | defaultValue}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-descriptions title="支付方信息" :column="1">
            <el-descriptions-item label="用户名称">
              <user-link :id="detail.userId" :name="detail.userName"/>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式">
              <dict-tag :value="detail.channelId" :options="dict.type.channel_type" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="支付时间">{{detail.payTime | defaultValue}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="支付信息" lazy v-if="checkPermi(['ss:payBill:list'])">
          <pay-bill v-if="detail.billId != null" :query="{bstId: detail.billId}" :view="views.recharge"/>
        </el-tab-pane>
        <el-tab-pane label="分成信息" lazy v-if="checkPermi(['ss:bonus:list'])">
          <bonus :query="{billId: detail.billId}" :view="views.recharge"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getBill } from '@/api/system/recharge'
import Refund from '@/views/ss/refund/index.vue'
import { findLabel } from '@/utils'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import { SuitFeeType, views } from '@/utils/constants'
import PayBill from '@/views/ss/payBill/index.vue'
import StoreLink from '@/components/Business/Store/StoreLink.vue'
import Bonus from '@/views/ss/bonus/index.vue'
import { checkPermi } from '@/utils/permission'

export default {
  name: 'RechargeDetail',
  components: { Bonus, StoreLink, PayBill, UserLink, DeviceLink, Refund },
  dicts: ['channel_type','sm_transaction_bill_status', 'sm_transaction_bill_device_recharge_status', 'time_unit', 'suit_fee_mode', 'suit_fee_type'],
  computed: {
    views() {
      return views
    },
    SuitFeeType() {
      return SuitFeeType
    },
    // 时长单位
    suitTimeUnit() {
      return (unit) => {
        return findLabel(this.dict.type.time_unit, unit);
      }
    },
  },
  data() {
    return {
      loading: false,
      detail: {},
      id: null,
      suitUsingType: ['info', 'warning', 'success', 'danger'],
      suitUsingText: ['未知', '未生效', '使用中', '已结束']
    }
  },
  created() {
    this.id = this.$route.params.billId;
    this.getDetail();
  },
  methods: {
    checkPermi,
    getDetail() {
      getBill(this.id).then(res => {
        this.detail = res.data;
      })
    }
  }
}
</script>