oil-station/fuintCashierWeb/src/views/details/userInfoOrder/couponList.vue

<template>
  <div>
    <el-radio-group v-model="cardList" size="mini" style="margin-bottom: 30px;" @change="changeStatus()">
      <el-radio-button label="notUse">未使用</el-radio-button>
      <el-radio-button label="used">已使用</el-radio-button>
      <el-radio-button label="expired">已过期</el-radio-button>
      <el-radio-button label="whole">全部</el-radio-button>
    </el-radio-group>
    <div>
      <el-table ref="tables" v-loading="loading" :data="list">
        <el-table-column  align="center" prop="storeName" label="所属油站">
          <template slot-scope="scope">
            <span>{{store.name}}</span>
          </template>
        </el-table-column>
        <el-table-column  align="center" prop="couponName" label="优惠券名称"/>
        <el-table-column  align="center" prop="couponType" label="卡券类型">
          <!--          <template slot-scope="scope">-->
          <!--            <el-tag v-if="scope.row.type == 0">油品券</el-tag>-->
          <!--            <el-tag v-if="scope.row.type == 1" type="success">商品券</el-tag>-->
          <!--            <el-tag v-if="scope.row.type == 2" type="warning">通用券</el-tag>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column align="center" prop="couponAmount" label="优惠金额/参与次数">
          <template slot-scope="scope">
            <span>{{scope.row.couponAmount || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="couponContent" label="券面额/使用说明"/>
        <!--        <el-table-column align="center" prop="oilType" label="适用油品">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ getOilNames(oilNameList,scope.row.oilType) }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="useStatus" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.useStatus == 0">未使用</el-tag>
            <el-tag v-if="scope.row.useStatus == 1" type="success">已使用</el-tag>
            <el-tag v-if="scope.row.useStatus == 2" type="warning">已过期</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column align="center" label="卡券可用规则">-->
        <el-table-column align="center" prop="name" label="到期时间">
          <template slot-scope="scope">
            {{ scope.row.endTime }}
          </template>
        </el-table-column>

<!--          <el-table-column align="center" prop="availablePeriod" label="周期与时段"/>-->
<!--        </el-table-column>-->
<!--        <el-table-column align="center" prop="createTime" label="领取时间"/>-->
<!--        <el-table-column align="center" prop="exchangeFrom" label="描述"/>-->
      </el-table>

      <pagination
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {getCardFavorableList, getCardFavorableLists} from "@/api/cashier/userInfoOrder";
import {oilNumbers} from "@/api/cashier/oilnumber";
import {ljStoreInfo} from "@/api/staff/store";

export default {
  props:["pUserId"],
  data(){
    return {
      cardList:'notUse',
      userId:"",
      loading:false,
      list:[],
      total:0,
      queryParams:{
        status: 0,
        page:1,
        pageSize:10,
      },
      oilNameList:[],
      store:{},
    }
  },
  created() {
    // this.userId = this.pUserId;
    this.userId = this.$route.query.id;

    this.getList()
    this.getOilName()
  },
  methods:{
    getOilNames(list,oilIds){
      let name = "";
      let oilNames = []
      if(oilIds){
        let oilId = oilIds.split(",")
        list.forEach(item => {
          oilId.forEach(i => {
            if (item.oilName == i){
              oilNames.push(item.oilNames)
            }
          })
        })
      }


      let arr = []
      for (let i = 0;i<oilNames.length;i++){
        if (arr.indexOf(oilNames[i])==-1){
          arr.push(oilNames[i])
          name += oilNames[i]+","
        }
      }
      return name;
    },
    getOilName(){
      oilNumbers().then(res => {
        this.oilNameList = res.data
      })
    },
    getList(){
      this.loading = true

      this.queryParams.id = this.userId
      getCardFavorableLists(this.queryParams).then(res=>{
        if (res.code == 200) {

          this.list = res.data.records
          this.total = res.data.total
          this.loading = false

          this.getStore()

        }
      })
    },
    getStore(){
      ljStoreInfo().then(res => {
        this.store = res.data
      })
    },
    changeStatus() {
      if (this.cardList == 'notUse') {
        this.queryParams.useStatus = 0
      } else if (this.cardList == 'used') {
        this.queryParams.useStatus = 1
      } else if (this.cardList == 'expired') {
        this.queryParams.useStatus = 2
      } else {
        this.queryParams.useStatus = ''
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>