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

<template>
  <div>
    <el-table ref="tables" v-loading="loading" :data="list">
      <el-table-column label="所属油站" prop="storeName" align="center"/>
      <el-table-column label="订单时间" align="center" prop="createTime"/>
      <el-table-column label="交易终端" align="center" prop="payType">
        <template slot-scope="scope">
          <span v-if="scope.row.terminal == 'applet'">小程序</span>
          <span v-else>{{ scope.row.terminal }}</span>

        </template>
      </el-table-column>
      <el-table-column label="油品/油枪" align="center" prop="name" >
        <template slot-scope="scope">
          {{ scope.row.oilName }}/{{ getName1(oilGunList,scope.row.oilGunNum) }}
        </template>
      </el-table-column>

      <el-table-column label="订单金额" align="center" prop="orderAmount"/>
      <el-table-column label="优惠金额" align="center" prop="discountAmount"/>
      <el-table-column label="电子储值卡消费金额" align="center" prop="balanceAmount"/>
      <el-table-column label="囤油卡消费升数" align="center" prop="oilCardAmount"/>
      <el-table-column label="实付金额" align="center" prop="payAmount"/>
      <el-table-column label="付款类型" align="center" prop="payType">
        <template slot-scope="scope">
          <span v-if="scope.row.payType == 'CASH'">现金</span>
          <span v-else-if="scope.row.payType == 'WECHAT'">微信</span>
          <span v-else-if="scope.row.payType == 'ALIPAY'">支付宝</span>
          <span v-else-if="scope.row.payType == 'UNIONPAY'">银联二维码</span>
          <div v-else-if="scope.row.payType == 'balance'">电子储值卡</div>
          <div v-else-if="scope.row.payType == 'oilCard'">囤油卡</div>
          <span v-else>小程序码</span>
<!--          <span>{{getName(payTypeList,scope.row.payType)}}</span>-->
        </template>
      </el-table-column>
      <el-table-column label="订单号" align="center" prop="orderNo" width="220px"/>
      <el-table-column label="订单类型" align="center" prop="orderType"/>
      <el-table-column label="付款状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 'unpaid'">未支付</el-tag>
          <el-tag type="success" v-else-if="scope.row.orderStatus === 'paid'">已支付</el-tag>
          <el-tag type="danger" v-else-if="scope.row.orderStatus === 'refund'">已退款</el-tag>
          <el-tag type="danger" v-else>支付失败</el-tag>
        </template>
      </el-table-column>
    </el-table>

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

<script>
import { getOilOrderList } from "@/api/cashier/userInfoOrder.js";
import {getOilNumberGun} from "@/api/cashier/oilGuns";
import {getDicts} from "@/api/dict/data";

export default {
  props:["pUserId"],
  data(){
    return {
      userId:"",
      loading:false,
      list:[],
      total:0,
      queryParams:{
        page:1,
        pageSize:10,
      },
      // 油枪列表
      oilGunList:[],
      payTypeList:[],
    }
  },
  created() {
    // this.userId = this.pUserId;
    this.userId = this.$route.query.id;

    this.getList()
    this.getOilGunList();
    this.getPayType();
  },
  methods:{
    getName(list,id){
      let name = ""
      list.forEach(item => {
        if (item.dictValue = id){
          name = item.dictLabel
        }
      })
      return name
    },
    getPayType(){
      getDicts("payment_type").then(res => {
        this.payTypeList = res.data
      })
    },
    // 获取油枪信息
    getOilGunList(){
      getOilNumberGun().then(res => {
        res.data.forEach(item => {
          if (item.oilGunList.length>0){
            item.oilGunList.forEach(i => {
              i.oilName = item.oilName
              this.oilGunList.push(i)
            })
          }
        })
      })
    },
    // 获取油枪名称
    getName1(oilNameList,id){
      let name = ""
      if(oilNameList!=null && oilNameList!=""){
        oilNameList.forEach(item => {
          if (item.id == id){
            name = item.gunName;
          }
        })
      }
      return name;
    },
    getList(){
      this.loading = true
      this.queryParams.userId = this.userId
      getOilOrderList(this.queryParams).then(res=>{
        if (res.code == 200) {
          this.list = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>