|
|
@@ -0,0 +1,163 @@
|
|
|
+<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 style="margin-right: 20px; width: 220px" v-model="payInfo" placeholder="付款项目" clearable>
|
|
|
+ <!-- <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName" :value="item.IndustryId"> </el-option> -->
|
|
|
+ </el-select>
|
|
|
+ <el-select style="margin-right: 20px; width: 220px" v-model="payStatus" placeholder="支付状态" clearable>
|
|
|
+ <!-- <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName" :value="item.IndustryId"> </el-option> -->
|
|
|
+ </el-select>
|
|
|
+ <el-input style="margin-right: 20px; width: 220px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入订单号" />
|
|
|
+
|
|
|
+ <el-input style="width: 220px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入姓名/手机号" />
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" 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(item.key)">{{ handleRowContent(row, item.key) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="支付时间" prop="item.key" align="center"> </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span>退款</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { tableColums } from "./components/tableColums.js";
|
|
|
+export default {
|
|
|
+ name: "",
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabsList: [
|
|
|
+ { lable: "畅读卡订单", key: "1" },
|
|
|
+ { lable: "单场付费订单", key: "2" },
|
|
|
+ ],
|
|
|
+ tabs_index: 1,
|
|
|
+ timeRange: "", // 时间筛选
|
|
|
+ sales: [],
|
|
|
+ salesArr: [], //销售
|
|
|
+ defaultSalesProps: {
|
|
|
+ multiple: true,
|
|
|
+ label: "RealName",
|
|
|
+ children: "ChildrenList",
|
|
|
+ value: "AdminId",
|
|
|
+ }, //销售级联配置
|
|
|
+ payStatus: "", //支付状态
|
|
|
+ payInfo: "", //付款项目
|
|
|
+ orderNumber: "", //订单号
|
|
|
+ tableColums: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.tableColums = tableColums(1);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabActive() {},
|
|
|
+ //
|
|
|
+ handleSelectChange() {},
|
|
|
+
|
|
|
+ // 表格三件套
|
|
|
+ // 表格点击了
|
|
|
+ handleRowClick(row, key) {
|
|
|
+ if (key == "CompanyName") {
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/customDetail",
|
|
|
+ query: {
|
|
|
+ id: row.CompanyId,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表格样式
|
|
|
+ handleRowStyle(key) {
|
|
|
+ let styleColor = {
|
|
|
+ Title: "color: #409eff; cursor: pointer",
|
|
|
+ CompanyName: "color: #409eff; cursor: pointer",
|
|
|
+ };
|
|
|
+ return styleColor[key] ? styleColor[key] : "";
|
|
|
+ },
|
|
|
+ // 文本是否需要处理
|
|
|
+ handleRowContent(row, key) {},
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bding