SAAS-FRONTEND/src/views/customer/Customer_Info.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
      <el-form-item label="客户姓名" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input
          v-model="queryParams.phoneNumber"
          placeholder="请输入"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="油品" prop="oilName">
        <el-select
          v-model="queryParams.oilName"
          placeholder="请选择油品"
          clearable
          size="small">
          <el-option
            v-for="dict in oilNameOptions"
            :key="dict.oilPriceId"
            :label="dict.oilName"
            :value="dict.oilName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table  :data="manageList">
      <af-table-column label="客户姓名" align="center" prop="customerName" />
      <af-table-column label="手机号" align="center" prop="phoneNumber" />
      <af-table-column label="油品" align="center" prop="oilName" />
      <af-table-column label="汽油余额" align="center" prop="qyAmt" />
      <af-table-column label="柴油余额" align="center" prop="cyAmt" />
      <af-table-column label="积分" align="center" prop="integral" />
      <af-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="detail(scope.row)"
          >
            订单查询
          </el-button>
        </template>
      </af-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="titleOrderInfo" :visible.sync="openOrderInfo" width="700px" append-to-body>
      <el-table  :data="orderList" >
        <af-table-column v-if="false" label="订单id" align="center" prop="orderId" />
        <af-table-column label="订单号"  width="200" align="center" prop="orderNo" />
        <af-table-column label="油品名称" align="center" prop="oilName" />
        <af-table-column label="油品价格" align="center" prop="oilPirce" />
        <af-table-column label="加油升数" align="center" prop="orderLiters" />
        <af-table-column label="金额" align="center" prop="amt" />
        <af-table-column label="消费者" width="120" align="center" prop="consumer" />
        <af-table-column label="加油员" width="120" align="center" prop="oilPersonnel" />
        <af-table-column label="加油枪号" align="center" prop="oilGun" />
        <af-table-column label="支付类型" align="center" prop="payType"    :formatter="payTypeFotmat"/>
        <af-table-column label="油站名称" width="120" align="center"  prop="stationName"  v-if="false"/>
        <af-table-column label="用户id(消费者)" align="center" prop="consumerId" v-if="false" />
        <af-table-column label="油站id" align="center" prop="stationId" v-if="false" />
        <af-table-column label="状态" align="center" prop="status" :formatter="statusFotmat" width="80px"/>
        <af-table-column label="支付时间" align="center" prop="payDate" width="160px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.payDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </af-table-column>
        <af-table-column label="创建时间" align="center" prop="createdDate" width="160px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </af-table-column>
        <af-table-column label="订单类型" align="center" prop="orderType" v-if="false" />
      </el-table>
      <pagination
        v-show="totalOrder>0"
        :total="totalOrder"
        :page.sync="queryOrder.pageNum"
        :limit.sync="queryOrder.pageSize"
        @pagination="listPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import { listManage, getOrderInfo } from "@/api/customer/manage";
import {stationinfo} from "@/api/station/gun";
import { listPrice } from "@/api/station/price";
export default {
  name: "Customer_Info",
  data() {
    return {
      // 总条数
      total: 0,
      totalOrder: 0,
      // 客户管理表格数据
      manageList: [],
      orderList:[],
      // 是否显示弹出层
      openOrderInfo: false,
      titleOrderInfo:"",
      oilNameOptions:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        commendMan: null,
        memberGrade: null,
        phoneNumber: null,
        oilName: null
      },
      queryOrder:{
        pageNum: 1,
        pageSize: 10,
        oilName: null,
        stationId: null,
        consumerId: null
      },
    };
  },
  created() {
    this.getList();
    listPrice().then((response) => {
      this.oilNameOptions = response.rows;
      console.log('oilNameOptions', this.oilNameOptions);
    });
  },
  methods: {
    payTypeFotmat(row, column){
      if(row.payType === 'sxf'){
        return '随行付'
      }else if(row.payType === 'dzk'){
        return '电子卡'
      }else if(row.payType === 'wx'){
        return '微信'
      }else if(row.payType === 'zfb'){
        return '支付宝'
      }else if(row.payType === 'xj'){
        return '现金'
      }
    },
    statusFotmat(row, column){
      if(row.status === '0'){
        return '未支付'
      }else if(row.status === '1'){
        return '已支付'
      }
    },
    /** 查询客户管理列表 */
    getList() {
      listManage(this.queryParams).then(response => {
        this.manageList = response.rows;
        this.total = response.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    detail(row){
      console.log("row",row);
      row.page= this.queryOrder.pageNum;
      row.limit= this.queryOrder.pageSize;
      this.listPage(row);
    },
    listPage(row){
      this.queryOrder.consumerId = row.minaUserId;
      getOrderInfo(this.queryOrder).then(response => {
        this.orderList = response.rows;
        this.openOrderInfo = true;
        this.totalOrder = response.total;
        this.titleOrderInfo = "查看客户订单信息";
      });
    }
  }
};
</script>