saas_masterPlatform/src/views/financed/components/dislogArapDetails.vue

<template>
  <div class="arapDetail">
    <BaseDialog
      width="1200px"
      :isShow.sync="isShow"
      title="查看详情"
      :isShowFooter="false"
    >
      <el-radio-group
        v-model="status"
        @change="changeGroup"
        style="margin-bottom: 10px"
      >
        <el-radio-button :label="0">完单订单</el-radio-button>
        <el-radio-button :label="1" v-if="type !== 3">退款订单</el-radio-button>
        <el-radio-button :label="2">结算记录</el-radio-button>
      </el-radio-group>
      <search-box-new
        ref="searchBox"
        :formData="formData"
        :formList="formList"
        :redIcon="false"
        @search="search"
        @init="init"
      />
      <pictureList :list="showTabList[status]" />
      <table-list
        :key="type + status + ''"
        :tableSets="tableSet"
        :tableData="tableData"
        :navText="dialogNavText"
      >
        <template slot="btn" slot-scope="props">
          <el-button type="text" @click="openDialog(props.scope.row)">
            查看详情
          </el-button>
        </template>
      </table-list>
      <pagination
        :total="total"
        :pageSize.sync="formData.pageSize"
        :currentPage.sync="formData.pageNum"
        @search="search"
      />
      <!-- 订单详情 -->
      <dislog-order-details
        :orderSn="activeOrderInfo.orderSn"
        :orderFrom="activeOrderInfo.orderFrom"
        :dialogVisible.sync="orderDialogVisible"
      />
    </BaseDialog>
  </div>
</template>

<script>
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import searchBoxNew from "@/components/searchBoxNew";
import pictureList from "@/components/Comon/pictureList.vue";
import dislogOrderDetails from "../components/dislogOrderDetails.vue";
export default {
  name: "SaasMasterPlatformDislogArapDetails",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      dialogNavText: {
        index: 0,
        num: true,
        border: true,
        choice: false,
        choiceRadio: false,
        radioKey: "specTemplateId",
        radioFixed: false,
        addHide: !false,
        tableHide: false,
        dontNum: false,
        headShow: false,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      tableData: [],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      status: 0,
      showTabList: [
        [
          {
            label: "待付提成",
            prop: "orderUncollectedTotal",
            img: "未收款",
          },
          {
            label: "已付提成",
            prop: "orderUncollectedTotal",
            img: "已收款",
          },
        ],
        [
          {
            label: "待扣提成",
            prop: "orderReceivedTotal",
            img: "已退款",
          },
          {
            label: "已扣提成",
            prop: "orderUncollectedTotal",
            img: "成本金额",
          },
        ],
        [
          {
            label: "结算金额",
            prop: "orderPriceTotal",
            img: "已收款",
          },
          {
            label: "完单提成",
            prop: "orderReceivedTotal",
            img: "已退款",
          },
          {
            label: "扣除提成",
            prop: "orderUncollectedTotal",
            img: "未收款",
          },
        ],
      ],
      activeOrderInfo: {},
      orderDialogVisible: false,
      loading: false,
    };
  },

  mounted() {},

  methods: {
    init() {},
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      //   this.getDataList(this.backData());
    },
    getDataList(data) {
      const fn = [orderList, tenantList, sellerList][this.type];
      fn(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    changeGroup() {},
    openDialog(data) {
      this.activeOrderInfo = data;
      this.orderDialogVisible = true;
    },
  },
  components: {
    tableList,
    pagination,
    searchBoxNew,
    pictureList,
    dislogOrderDetails,
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    text() {
      return ["分成", "提成", "佣金"][this.type - 1];
    },
    formList() {
      const key = ["完单", "退款", "结算"][this.status];
      let data = [
        {
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: key + "开始时间",
          placeholder2: key + "结束时间",
          scope: "moreDataPicker",
        },
      ];
      if (this.status == 0) {
        data.unshift({
          prop: "divideStatus",
          placeholder: "分成状态",
          scope: "select",
          options: [
            { label: "待审核", value: 0 },
            { label: "已通过", value: 1 },
            { label: "未通过", value: 2 },
            { label: "已撤销", value: 3 },
          ],
        });
      }
      if (this.status != 2) {
        data.push({
          prop: "orderSn",
          placeholder: "订单单号",
        });
      }
      return data;
    },
    tableSet() {
      if (this.status == 0) {
        let data = [
          {
            label: "完单时间",
            prop: "userName",
            hidden: true,
          },
          {
            label: "订单单号",
            prop: "orderSn",
            hidden: true,
          },
          {
            label: `已付${this.text}(元)`,
            prop: "goodsName",
            hidden: true,
          },
          {
            label: `待付${this.text}(元)`,
            prop: "userPhone",
            hidden: true,
          },
        ];
        if (this.type != 3) {
          data.push(
            {
              label: "预付时间",
              prop: "majorName",
              hidden: true,
            },
            {
              label: "剩余天数",
              prop: "predictPayDay",
              hidden: true,
            }
          );
        } else {
          data.push({
            label: "佣金状态",
            prop: "majorName",
            hidden: true,
          });
        }
        return data;
      } else if (this.status == 1) {
        return [
          {
            label: "退款时间",
            prop: "userName",
            hidden: true,
          },
          {
            label: "订单单号",
            prop: "orderSn",
            hidden: true,
          },
          {
            label: `扣除${this.text}(元)`,
            prop: "goodsName",
            hidden: true,
          },
          {
            label: "扣除状态",
            prop: "orderSn",
            hidden: true,
          },
        ];
      } else {
        let data = [
          {
            label: "结算时间",
            prop: "userName",
            hidden: true,
          },
          {
            label: "结算金额(元)",
            prop: "orderSn",
            hidden: true,
          },
          {
            label: `完成${this.text}(元)`,
            prop: "goodsName",
            hidden: true,
          },
          {
            label: `扣除${this.text}(元)`,
            prop: "userPhone",
            hidden: true,
          },
        ];
        if (this.type != 3) {
          data.push();
        }
        return data;
      }
    },
    pictureList() {
      if (this.status == 0) {
        return [
          {
            label: `待付${this.text}`,
            prop: "orderUncollectedTotal",
            img: "未收款",
          },
          {
            label: `已付${this.text}`,
            prop: "orderUncollectedTotal",
            img: "已收款",
          },
        ];
      } else if (this.status == 1) {
        return [
          {
            label: `待扣${this.text}`,
            prop: "orderReceivedTotal",
            img: "已退款",
          },
          {
            label: `已扣${this.text}`,
            prop: "orderUncollectedTotal",
            img: "成本金额",
          },
        ];
      } else {
        let data = [
          {
            label: "结算金额",
            prop: "orderPriceTotal",
            img: "已收款",
          },
        ];
        if (this.type != 3) {
          data.push(
            {
              label: `完单${this.text}`,
              prop: "orderReceivedTotal",
              img: "已退款",
            },
            {
              label: `扣除${this.text}`,
              prop: "orderUncollectedTotal",
              img: "未收款",
            }
          );
        }
        return data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.arapDetail {
  margin-top: 10px;
  #tableList {
    padding: 0;
  }
}
</style>