hz_crm_web/src/views/contract_manage/paymentRecords.vue

<template>
  <div class="container payment-records-container">
    <div class="dataReport-top">
      <span v-for="item in tabsList" :key="item.key" :class="tabs_index == item.key ? 'tab_active' : ''" @click="tabActive(item)">{{ item.lable }}</span>
    </div>
    <el-card>
      <div class="select-box">
        <el-date-picker
          style="margin-bottom: 20px; margin-right: 20px; width: 300px"
          v-model="timeRange"
          type="daterange"
          @change="handleSelectChange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-cascader
          v-model="sales"
          placeholder="所属销售"
          style="width: 220px; margin: 0 20px 20px 0"
          :options="salesArr"
          :props="defaultSalesProps"
          :show-all-levels="false"
          collapse-tags
          clearable
          filterable
          @change="handleSelectChange"
        >
        </el-cascader>

        <el-select v-if="tabs_index == 2" @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payInfo" placeholder="付款项目" clearable>
          <el-option v-for="item in paymentProjectList" :key="item" :label="item" :value="item"> </el-option>
        </el-select>
        <el-select v-if="tabs_index == 1" @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="vipType" placeholder="会员类型" clearable>
          <el-option v-for="item in vipTypeList" :key="item.key" :label="item.lable" :value="item.key"> </el-option>
        </el-select>
        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="paymentType" placeholder="支付渠道" clearable>
          <el-option v-for="item in paymentTypeList" :key="item.key" :label="item.lable" :value="item.key"> </el-option>
        </el-select>

        <el-cascader
          v-model="salesRai"
          placeholder="推荐人"
          style="width: 220px; margin: 0 20px 20px 0"
          :options="salesArrRai"
          :props="defaultSalesProps"
          :show-all-levels="false"
          collapse-tags
          clearable
          filterable
          @change="handleSelectChange"
        >
        </el-cascader>

        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payStatus" placeholder="支付状态" clearable>
          <el-option v-for="item in payStatusList" :key="item.key" :label="item.lable" :value="item.key"> </el-option>
        </el-select>
        <el-input @input="handleSelectChange" style="margin-right: 20px; width: 220px; margin-bottom: 20px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入订单号" />

        <el-input @input="handleSelectChange" style="width: 220px; margin-bottom: 20px" prefix-icon="el-icon-search" v-model="keyWord" placeholder="请输入姓名/手机号" />
      </div>
      <el-table :data="tableOrderData" style="width: 100%" border>
        <el-table-column align="center" v-for="item in tableColums" :key="item.key" :prop="item.key" :label="item.label" :width="item.widthsty">
          <template slot-scope="{ row }">
            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(row, item.key)">{{ handleRowContent(row, item.key) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="{ row }">
            <span v-if="row.OrderStatus == 2" class="editsty" @click="refundHandler(row)">退款</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页数选择器 -->
      <m-page :page_no="page_no" :pageSize="page_size" :total="total" style="margin: 20px 0" @handleCurrentChange="pageChange" />
    </el-card>

    <el-dialog center v-dialogDrag title="退款" :visible.sync="dialogVisible" append-to-body width="30%" :before-close="handleClose">
      <div>
        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8 }" placeholder="请输入退款原因" v-model="refundTextarea"> </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="refundDialogHandlerVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { contractInterface, customInterence } from "@/api/api.js";
import { tableColums } from "./components/tableColums.js";
import mPage from "@/components/mPage.vue";

export default {
  name: "",
  components: {
    mPage,
  },
  props: {},
  data() {
    return {
      tabsList: [
        { lable: "畅读卡订单", key: 1 },
        { lable: "单场付费订单", key: 2 },
        { lable: "活动回放订单", key: 3 },
      ],
      paymentProjectList: ["上市公司小范围", "专家调研", "买方交流"],
      payStatusList: [
        { lable: "已取消", key: 0 },
        { lable: "待支付", key: 1 },
        { lable: "已支付", key: 2 },
        { lable: "转入退款", key: 3 },
      ],
      paymentType: "",
      paymentTypeList: [
        { lable: "小程序", key: 1 },
        { lable: "PC", key: 2 },
        { lable: "H5", key: 3 },
      ],
      tabs_index: 1,
      timeRange: [], // 时间筛选
      sales: [],
      salesArr: [], //销售
      salesRai: [],
      salesArrRai: [], //销售

      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      payStatus: "", //支付状态
      payInfo: "", //付款项目
      orderNumber: "", //订单号
      keyWord: "",
      tableColums: [],
      tableOrderData: [],
      total: 0,
      page_no: 1,
      page_size: 10,
      dialogVisible: false, // 退款的弹框
      refundTextarea: "", // 退款原因
      orderRefundCode: "",
      vipType: "",
      vipTypeList: [
        { lable: "日卡", key: "日卡" },
        { lable: "月卡", key: "月卡" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getSale();
    this.getSaleRai();
    this.getOrderList();
    this.tableColums = tableColums(1);
  },
  methods: {
    /* 获取权益销售 */
    getSaleRai() {
      customInterence.getSalesRaiData().then((res) => {
        if (res.Ret === 200) {
          this.salesArrRai = res.Data.List;
        }
      });
    },
    // 修改页码
    pageChange(page_no) {
      this.page_no = page_no;
      this.getOrderList();
    },
    /* 获取销售 */
    getSale() {
      customInterence.getSale().then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    // 获取数据
    async getOrderList() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      let salesArrRai = [];
      if (this.salesRai.length) {
        salesArrRai = this.salesRai.map((item) => {
          return item[item.length - 1];
        });
      }
      const res = await contractInterface.getOrderList({
        PageSize: this.page_size,
        CurrentIndex: this.page_no,
        AdminId: salesArr.join(","),
        StartDate: this.timeRange && this.timeRange.length ? this.timeRange[0] : "",
        EndDate: this.timeRange && this.timeRange.length ? this.timeRange[1] : "",
        OrderType: this.tabs_index,
        PaymentProject: this.payInfo,
        OrderCode: this.orderNumber,
        KeyWord: this.keyWord,
        OrderStatus: this.payStatus,
        ShareId: salesArrRai.join(","),
        PaymentType: this.paymentType,
        UserCardType: this.vipType,
      });
      if (res.Ret === 200) {
        this.tableOrderData = res.Data.List;
        this.total = res.Data.Paging.Totals || 0;
      }
    },
    tabActive(item) {
      if (this.tabs_index == item.key) return;
      this.vipType = "";
      this.tableColums = tableColums(item.key);
      this.tabs_index = item.key;
      this.handleSelectChange();
    },
    // 所有筛选的改变
    handleSelectChange() {
      this.page_no = 1;
      this.getOrderList();
    },

    // 表格三件套
    // 表格点击了
    handleRowClick(row, key) {
      if (key == "CompanyName" && row.CompanyId != 1) {
        this.$router.replace({
          path: "/customDetail",
          query: {
            id: row.CompanyId,
          },
        });
      } else if (key == "SourceTitle") {
        window.open(row.HttpUrl, "_blank");
      }
    },
    // 表格样式
    handleRowStyle(row, key) {
      let styleColor = {
        Title: "color: #409eff; cursor: pointer",
        CompanyName: row.CompanyId == 1 ? "" : "color: #409eff; cursor: pointer",
        SourceTitle: "color: #409eff; cursor: pointer",
      };
      return styleColor[key] ? styleColor[key] : "";
    },
    // 文本是否需要处理
    handleRowContent(row, key) {
      if (key == "StartDate") return `${row["StartDate"]} ~ ${row["EndDate"]}`;
      if (key == "OrderStatus") return row[key] == 0 ? "已取消" : row[key] == 1 ? "待支付" : row[key] == 2 ? "已支付" : row[key] == 3 ? "转入退款" : "";
      return row[key];
    },
    // 点击了退款按钮
    refundHandler(row) {
      this.orderRefundCode = row.OrderCode;
      this.dialogVisible = true;
    },
    // 关闭了退款弹框
    handleClose() {
      this.refundTextarea = "";
      this.dialogVisible = false;
    },
    // 退款的确认弹框
    async refundDialogHandlerVisible() {
      if (!this.refundTextarea) return this.$message.warning("退款原因不能为空");
      const res = await contractInterface.orderRefund({
        OrderCode: this.orderRefundCode,
        Remark: this.refundTextarea,
      });
      if (res.Ret === 200) {
        this.$message.success("已提交退款");
        this.handleClose();
        this.getOrderList();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.payment-records-container {
  .dataReport-top {
    display: flex;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    .tab_active {
      background-color: #409eff;
      color: #fff;
    }
    span {
      display: inline-block;
      box-sizing: border-box;
      padding: 0 24px;
      line-height: 38px;
      height: 40px;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      opacity: 1;
      font-weight: 500;
      font-size: 16px;
      color: #409eff;
      border-radius: 4px;
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .select-box {
    /deep/ .el-input {
      margin-bottom: 20px !important;
    }
  }
}
</style>