oil-station/fuintAdmin/src/views/member/userInfoOrder/balanceRecord.vue

<template>
  <div>
    <el-radio-group v-model="tabPosition" size="mini" style="margin-bottom: 30px;">
      <el-radio-button label="giftCard">储值卡记录</el-radio-button>
      <el-radio-button label="literCard">升数卡记录</el-radio-button>
    </el-radio-group>
    <div v-if="tabPosition=='giftCard'">
      <el-table ref="tables" v-loading="loading" :data="cardList">
        <el-table-column align="center"  prop="storeName" label="所属油站"/>
        <!-- <el-table-column prop="date" label="变动账户"/> -->
        <el-table-column align="center"  prop="changeType" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.changeType == 0">减少</el-tag>
            <el-tag type="success" v-else>增加</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="详细信息">
          <el-table-column align="center"  prop="balance" label="变动金额"/>
          <el-table-column align="center"  prop="address" label="变动前余额">
            <template slot-scope="scope">
              <span>{{ scope.row.afterTheChange?scope.row.afterTheChange + scope.row.balance : '/'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"  prop="afterTheChange" label="变动后余额">
            <template slot-scope="scope">
              <span>{{ scope.row.afterTheChange?scope.row.afterTheChange : '/'}}</span>
            </template>
          </el-table-column>

        </el-table-column>
        <el-table-column align="center"  prop="orderNo" label="订单号"/>
        <el-table-column align="center"  prop="fromType" label="描述"/>
        <el-table-column align="center"  prop="createTime" label="变动时间"/>
      </el-table>

      <pagination
        :total="cardTotal"
        :page.sync="queryCardParams.page"
        :limit.sync="queryCardParams.pageSize"
        @pagination="getCardList"
      />
    </div>
    <div v-else>
      <el-table ref="tables2" v-loading="loading" :data="fuelList">
        <el-table-column align="center" label="所属油站" prop="storeName"/>
        <el-table-column align="center" label="变动账户" prop="oilType" />
        <el-table-column label="类型" align="center" prop="changeType">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.changeType == 0">减少</el-tag>
            <el-tag type="success" v-else>增加</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变动升数" align="center" prop="balance"/>
        <el-table-column label="订单号" align="center" prop="orderNo"/>
        <el-table-column label="描述" align="center" prop="fromType"/>
        <el-table-column label="变动时间" align="center" prop="createTime"/>
      </el-table>

      <pagination
        :total="fuelTotal"
        :page.sync="queryFuelParams.page"
        :limit.sync="queryFuelParams.pageSize"
        @pagination="getFuelList"
      />
    </div>
  </div>
</template>

<script>
import { getCardRecordList, getFuelRecordList } from "@/api/userInfoOrder.js";

export default {
  props:["pUserId"],
  data(){
    return {
      tabPosition: 'giftCard',
      userId:"",
      loading:false,
      list:[],
      cardList:[],
      fuelList:[],
      cardTotal:0,
      fuelTotal:0,
      queryCardParams:{
        page:1,
        pageSize:10,
      },
      queryFuelParams:{
        page:1,
        pageSize:10,
      }
    }
  },
  created() {
    // this.userId = this.pUserId;
    this.userId = this.$route.query.id;

    this.getCardList()
    this.getFuelList()
  },
  methods:{
    getCardList() {
      this.loading = true
      this.queryCardParams.userId = this.userId
      getCardRecordList(this.queryCardParams).then(res=>{
        if (res.code == 200) {
          this.cardList = res.data.records
          this.cardTotal = res.data.total
          this.loading = false
        }
      })
    },

    getFuelList() {
      this.loading = true
      this.queryFuelParams.userId = this.userId
      getFuelRecordList(this.queryFuelParams).then(res=>{
        if (res.code == 200) {
          this.fuelList = res.data.records
          this.fuelTotal = res.data.total
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>