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

<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card">
      <el-descriptions title="基本信息">
        <el-descriptions-item label="订单编号">{{detail.billNo | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="交易状态" :span="2">
          <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="收款人到账金额">{{detail.arrivalAmount | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="手续费">{{detail.serviceCharge | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="平台渠道成本">{{detail.channelCost | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="平台利润">{{detail.serviceCharge - detail.channelCost | money | defaultValue}} 元</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <el-descriptions title="设备套餐信息">
        <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="套餐名称">{{detail.suitName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="套餐计费模式">
          <dict-tag :value="detail.suitFeeMode" :options="dict.type.suit_fee_mode" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="套餐计费类型">
          <dict-tag :value="detail.suitFeeType" :options="dict.type.suit_fee_type" size="small"/>
        </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-item label="套餐开始使用时设备总用电量">{{detail.suitStartEle | defaultValue}} 度</el-descriptions-item>
        <el-descriptions-item label="套餐结束使用时设备总用电量">{{detail.suitEndEle | defaultValue}} 度</el-descriptions-item>
        <el-descriptions-item label="当前设备总用电量"  v-if="[SuitFeeType.TIME_COUNT].includes(detail.suitFeeType)">
          {{detail.deviceTotalEle | money | defaultValue}} 度
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <el-descriptions title="支付方信息">
        <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-card class="box-card">
      <el-descriptions title="收款方信息">
        <el-descriptions-item label="收款人">{{detail.mchName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="收款人手机号">{{detail.mchMobile | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="店铺名称">{{detail.storeName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="店铺地址">{{detail.storeAddress | defaultValue}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <el-descriptions-item label="总计退款金额">{{detail.refundAmount | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="商户总计退款金额">{{detail.refundMchAmount | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="服务费总计退款金额">{{detail.refundServiceAmount | money | defaultValue}} 元</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="支付信息" lazy>
          <pay-bill v-if="detail.billId != null" :query="{bstId: 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'

export default {
  name: 'Recharge/:billId',
  components: { 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: {
    getDetail() {
      getBill(this.id).then(res => {
        this.detail = res.data;
      })
    }
  }
}
</script>