boss/pages/main/index/project_form.vue

<template>
  <div>
    <div class="i-title">{{ title }}</div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="实际营收" name="1">
          <div class="header-bar">
            <div>
              <el-row>
                <el-col :span="3"><span class="text-title">实际营收</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">托管</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">退款</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span class="red">{{ headerBar.revenue }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="red">{{ headerBar.trusteeship }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="green">{{ headerBar.refund }}</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span>共{{ headerBar.revenueCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.trusteeshipCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.refundCount }}笔</span></el-col>
              </el-row>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="托管" name="2">
          <div class="header-bar">
            <div>
              <el-row>
                <el-col :span="3"><span class="text-title">实际营收</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">托管</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">退款</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span class="red">{{ headerBar.revenue }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="red">{{ headerBar.trusteeship }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="green">{{ headerBar.refund }}</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span>共{{ headerBar.revenueCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.trusteeshipCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.refundCount }}笔</span></el-col>
              </el-row>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="退款" name="3">
          <div class="header-bar">
            <div>
              <el-row>
                <el-col :span="3"><span class="text-title">实际营收</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">托管</span></el-col>
                <el-col :span="3" :offset="1"><span class="text-title">退款</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span class="red">{{ headerBar.revenue }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="red">{{ headerBar.trusteeship }}</span></el-col>
                <el-col :span="3" :offset="1"><span class="green">{{ headerBar.refund }}</span></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="3"><span>共{{ headerBar.revenueCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.trusteeshipCount }}笔</span></el-col>
                <el-col :span="3" :offset="1"><span>共{{ headerBar.refundCount }}笔</span></el-col>
              </el-row>
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="text-align: right;margin-bottom: 10px">
      <el-button @click="exportList" class="export-excel" type="primary">导出报表</el-button>
    </div>
    <div>
      <el-table :data="tableData" border width="100%">
        <el-table-column label="订单名称">
          <template slot-scope="scope">
            <span class="lblue point">
              <nuxt-link
                target="_blank"
                :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
              >{{ scope.row.product_title }}</nuxt-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="用户">
          <template slot-scope="scope">
            <a
              class="link-type"
              :href="scope.row.user_url"
              target="_blank"
            >{{ scope.row.user_info.nickname }}({{ scope.row.uid }})</a>
          </template>
        </el-table-column>
        <el-table-column label="实际金额">
          <template slot-scope="scope">
            <template v-if="scope.row.channel != 'admin_confirm'">
              <!--            技术信用-->
              <div
                v-if="scope.row.product_type == 13"
              >
                <!--退款-->
                <span
                  v-if="scope.row.order_type == 8"
                >{{ (scope.row.real_amount / 100).toFixed(2) }}
              </span>
                <template v-else-if="scope.row.order_type == 4">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            提现-->
              <div v-else-if="scope.row.product_type == 200">
                <span class="green">
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            充值-->
              <div v-else-if="scope.row.product_type == 3">
                <div v-if="scope.row.operator_uid==41266">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                </div>
              </div>
              <!--            扣款-->
              <div v-else-if="scope.row.product_type == 300">
                <div v-if="scope.row.operator_uid==41266">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                </div>
              </div>
              <!--            云端意向金-->
              <div v-else-if="scope.row.product_type == 8">
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            雇佣-->
              <div v-else-if="scope.row.product_type == 4">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <span v-else-if="scope.row.order_type == 5">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <template v-else-if="scope.row.order_type == 4 || scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            云端押金-->
              <div v-else-if="scope.row.product_type == 400">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            云端工作-->
              <div v-else-if="scope.row.product_type == 9">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <template v-else-if="scope.row.order_type == 5">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" >
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--托管-->
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            整包-->
              <div v-else-if="scope.row.product_type == 2">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <template v-else-if="scope.row.order_type == 5">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" >
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--托管-->
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--解冻-->
                <template v-else-if="scope.row.order_type == 7">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" class="green">
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            查看机会-->
              <div v-else-if="scope.row.product_type == 1">
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            其他-->
              <div v-else>
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
            </template>
            <template v-else>
              <div v-if="scope.row.operator_uid != '41266'">
                  <span
                    v-if="parseInt(scope.row.real_amount)>0"
                    class="red"
                  >+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt(scope.row.real_amount) == 0">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span v-else class="green">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <div v-else>
                <span
                  v-if="parseInt(scope.row.real_amount)>0"
                >+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt(scope.row.real_amount) == 0">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="channel_name" label="支付方式"></el-table-column>
        <el-table-column prop="order_state_name" label="订单状态"></el-table-column>
        <el-table-column prop label="创建时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="到账时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.pay_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop label="订单编号">
          <template slot-scope="scope">
            <nuxt-link
              target="_blank"
              :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
            >{{ scope.row.order_no }}
            </nuxt-link>
          </template>
        </el-table-column>
        <el-table-column prop="out_order_id" label="支付编号"></el-table-column>
        <el-table-column width="100" label="订单类型">
          <template slot-scope="scope">{{ scope.row.product_type_name }}</template>
        </el-table-column>
        <el-table-column prop="order_type_name" label="交易类型">
          <template slot-scope="scope">
            <span>{{ scope.row.order_type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联项目">
          <template slot-scope="scope">
            <a
              :href="scope.row.related_project.url?scope.row.related_project.url:'#'"
              target="_blank"
            >
              <span
                class="lblue"
              >{{ scope.row.related_project.name ? scope.row.related_project.name : "--" }}</span>
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="operator_uid" label="人工">
          <template slot-scope="scope">
            <span v-if="scope.row.operator_info.nickname">{{ scope.row.operator_info.nickname }}</span>
            <span>({{ scope.row.operator_uid }})</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="onClickPage"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
      ></el-pagination>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      headerBar: {
        revenue: 0,
        trusteeship: 0,
        refund: 0,
        revenueCount: 0,
        trusteeshipCount: 0,
        refundCount: 0,
      },
      title: "",
      activeName: '1',
      orderType: "",
      tableData: [],
      queryData: {}
    };
  },
  mounted() {
    if (!this.queryDataFormat()) {
      return false;
    }
    this.getHeaderBar();
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData() {
      this.$post("/api/admin/order/get_orders", this.queryData).then(res => {
        let data = res.data;
        if (res.status === 1) {
          this.tableData = data.orders;
          this.pageInfo.total = data.count;
        }
      });
    },
    async getHeaderBar() {
      if (!this.queryData.start_time || !this.queryData.end_time || !this.queryData.product_type) {
        this.$message.error('参数异常');
        return;
      }
      let data = {
        start_time: this.queryData.start_time,
        end_time: this.queryData.end_time,
        product_type: this.queryData.product_type
      };
      this.$post("/api/admin/ReportForm/getFormBar", data).then(res => {
        let data = res.data;
        if (res.status === 1) {
          this.headerBar.trusteeship = (data.trusteeshipAmount * 1).toFixed(2);
          this.headerBar.refund = (data.refundAmount * 1).toFixed(2);
          this.headerBar.trusteeshipCount = data.trusteeshipCount;
          this.headerBar.refundCount = data.refundCount;

          // let amount = data.trusteeshipAmount - data.refundAmount;
          let count = data.trusteeshipCount - data.refundCount;
          // this.headerBar.revenue = amount > 0 ? amount : 0;
          this.headerBar.revenue = (data.revenue * 1).toFixed(2);
          this.headerBar.revenueCount = count > 0 ? count : 0;
        }
      });
    },
    async exportList() {
      let url =
        window.location.host +
        "/api/admin/order/export?product_type=" +
        this.queryData.product_type +
        "&start_time=" +
        this.queryData.start_time +
        "&end_time=" +
        this.queryData.end_time +
        "&date_type=" +
        this.queryData.date_type +
        "&status=" +
        this.queryData.status +
        "&artificial_mark=" +
        0;
      if (this.orderType !== "") {
        url += "&order_type=" + this.orderType;
      } else {
        url += "&active_name=all";
      }
      window.location.href = "https://" + url;
    },
    onClickPage(){
      this.queryDataFormat();
      this.getTableData();
    },
    handleClick(tab, event) {
      if (tab.name === "2") {
        this.orderType = "1";     //托管
      } else if (tab.name === "3") {
        this.orderType = "8";     //退款
      } else {
        this.orderType = "";
      }
      this.queryDataFormat();
      this.getTableData();
    },
    queryDataFormat() {
      let query = this.$route.query;
      if (JSON.stringify(query) === "{}") {
        this.$message.error('参数不正确');
        return false;
      }
      this.orderType = this.orderType !== "" ? this.orderType : query.orderType || this.orderType;
      let data = {
        view: "platform",
        product_type: query.product_type,          //项目类型2整包4雇佣9云端
        start_time: query.start_time,
        end_time: query.end_time,
        // order_type:1,
        date_type: query.date_type || 2,           //1到账时间2创建时间
        status: 401,                               //401订单支付成功
        artificial_mark: 0,                        //0为开启人工财务1开启
        page: this.pageInfo.page,
        page_size: this.pageInfo.size

      }
      if (this.orderType !== "") {
        data.order_type = this.orderType;
      } else {
        // data.active_name = 'all';
        data.order_type = 1;
      }
      this.formatTitle(data.product_type);
      this.queryData = data;
      return true;
    },
    formatTitle(type) {
      type = type * 1;
      let title = '';
      switch (type) {
        case 2:
          title = '整包';
          break;
        case 4:
          title = '雇佣';
          break;
        case 9:
          title = '云端';
          break;
        case 11:
          title = '会员';
          break;
        case 12:
          title = '认证';
          break;
        case 55:
          title = '查看联系方式';
          break;
      }
      this.title = title + "项目详情";
    },
    formatDate(time) {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  }
};
</script>

<style scoped>
.i-title {
  margin: 0 0 10px 10px;
  font-size: 20px;
  font-weight: 600;

}

.table {
  height: calc(100% - 80px);
}

.text-title {
  font-weight: 600;
}

.header-bar > div {
  margin-bottom: 5px;
}

.green {
  color: rgba(37, 155, 36, 1);
}

.orange {
  color: rgba(255, 152, 0, 1);
}

.red {
  color: rgb(255, 2, 30);
}
</style>