IntegralDetails.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>积分详情</h3>
      <div class="button">
        <a-button @click="onCancel">返回</a-button>
      </div>
    </div>

    <j-form-container :disabled="true">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-card title="基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerId">
                <a-input v-model="model.ownerId" placeholder="请输入用户账号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="用户昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nickName">
                <a-input v-model="model.nickName" placeholder="请输入用户昵称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属物业集团" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
                <a-input v-model="model.propertyName" placeholder="请输入所属物业集团"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformName">
                <a-input v-model="model.platformName" placeholder="请输入所属小区"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="可用积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="availableIntegral">
                <a-input v-model="model.availableIntegral" placeholder="请输入可用积分"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="历史总积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="historyIntegral">
                <a-input v-model="model.historyIntegral" placeholder="请输入历史总积分"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="系统冻结积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="systemFreezeIntegral">
                <a-input v-model="model.systemFreezeIntegral" placeholder="请输入系统冻结积分"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="手动冻结积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manualFreezeIntegral">
                <a-input v-model="model.manualFreezeIntegral" placeholder="请输入手动冻结积分"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="数据列表">
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="paymentNo" slot-scope="text, record">
          <span v-if="record.type === 'payPropertyFee'">{{record.paymentNo}}</span>
          <span v-else style="color:blue;cursor:pointer" @click="onPayDetail(record.orderId)">{{record.paymentNo}}</span>
        </span>
        <span slot="type" slot-scope="text, record">
          <span>{{record.type === 'scanQrCodePay' ? '扫码支付' : '抵扣物业费'}}</span>              
        </span>
      </a-table>
    </a-card>
  </a-spin>
</template>

<script>
import { queryByIdIntegralDetailApi } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterDictTextByStatic, PAY_WAY } from '@/assets/static.js'
const columns = [
  {
    title: '支付订单编号',
    dataIndex: 'paymentNo',
    key: 'paymentNo',
    align: 'center',
    scopedSlots: { customRender: 'paymentNo' }
  },
  {
    title: '操作类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(PAY_WAY, text)
    }
  },
  {
    title: '积分变化',
    dataIndex: 'integralChange',
    key: 'integralChange',
    align: 'center',
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  }
]
export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],
  mixins: [JeecgListMixin],
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      columns: columns,
      disableMixinCreated: true,
      url: {
        list: ''
      }
    }
  },
  methods: {
    async getPageDetail() {
      let { result } = await queryByIdIntegralDetailApi({ id: this.$route.query.id })
      this.model = {...result}
    },
    onPayDetail(id) {
      this.$router.push({
        path: '/refund/RefundDetails?id=' + id +'&type=1'
      })      
    },
    onCancel() {
      this.closeCurrent()
    }
  },
  mounted() {
    this.getPageDetail()
    this.url.list = `/property-central/integral/integralRecord/ownerIntegralList?phone=${this.$route.query.phone}&platformCode=${this.$route.query.platformCode}`
    this.loadData();
  }
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>