boss/components/drawer/user_bills.vue

<template>
  <div id="mainBody">
    <div v-if="user" style="padding: 20px;">
      <div style="padding: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;padding-top: 0px">
          <div style="width: 50%;margin-top: 15px">订单数量：{{ totalCount }}</div>
          <div style="width: 50%;margin-top: 15px">账户余额：{{ balance }}</div>
          <div style="width: 50%;margin-top: 15px">收入金额：{{ income_success_sum }}</div>
          <div style="width: 50%;margin-top: 15px">支出金额：{{ expense_success_sum }}</div>
          <div style="width: 50%;margin-top: 15px">薪资余额：{{ recharge }}</div>
          <div style="width: 50%;margin-top: 15px">冻结余额：{{ income }}</div>
      </div>
      <el-table :data="finaceList" border style="width: 100%;">
        <el-table-column prop 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">
            <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).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).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount).toFixed(2) }}</span>
              </div>
              <!--            提现-->
              <div v-else-if="scope.row.product_type == 200">
                <span class="green">
                  {{ (scope.row.real_amount).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).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount).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).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount).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).toFixed(2) }}</span>
                <!--结薪-->
                <span v-else-if="scope.row.order_type == 5">{{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount).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).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).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount).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).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).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount).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).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).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount).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).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
              </div>
              <!--            其他-->
              <div v-else>
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount).toFixed(2) }}
                </span>
              </div>
            </template>
            <template v-else>
              <div v-if="scope.row.operator_uid != '41266'">
                  <span
                    v-if="parseInt((scope.row.real_amount).toFixed(2))>0"
                    class="red"
                  >+{{ (scope.row.real_amount).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt((scope.row.real_amount).toFixed(2)) == 0">{{
                    (scope.row.real_amount).toFixed(2)
                  }}</span>
                <span v-else class="green">{{ (scope.row.real_amount).toFixed(2) }}</span>
              </div>
              <div v-else>
                <span
                  v-if="parseInt((scope.row.real_amount).toFixed(2))>0"
                >+{{ (scope.row.real_amount).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt((scope.row.real_amount).toFixed(2)) == 0">{{
                    (scope.row.real_amount).toFixed(2)
                  }}</span>
                <span v-else>{{ (scope.row.real_amount).toFixed(2) }}</span>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop label="当前余额">
          <template slot-scope="scope">{{ scope.row.total_balance ? scope.row.total_balance : '--' }}</template>
        </el-table-column>
        <el-table-column prop label="支付方式">
          <template slot-scope="scope">{{ scope.row.channel_name }}</template>
        </el-table-column>
        <el-table-column prop label="创建时间">
          <template slot-scope="scope">{{ scope.row.created_at_name }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="order-footer">
      <el-pagination
        background
        @current-change="getFinanceList"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    uid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      user: {},
      orderState: 401,
      tradeList: [
        {
          id: 0,
          type: "全部"
        },
        {
          id: 1,
          type: "充值"
        },
        {
          id: 2,
          type: "提现"
        },
        {
          id: 3,
          type: "购买"
        },
        {
          id: 4,
          type: "购买"
        }
      ],

      finaceList: [],

      // 下发的总数据
      totalData: {},
      // 负责人
      checkUser: "",
      // 审核人列表
      periodStatusList: [],
      // 数据总条目
      totalCount: 1,
      currentPage: 1,
      currentPageSize: 20,
      // 列表数据
      tableData: [],
      balance: 0,
      income: 0,
      recharge: 0,
      orderTypesOption: [],
      orderStateOption: [],
      payList: [],
      payListPop: [],
      productTypePop: [],
      TypeList: [],
    };
  },
  computed: {
    isTest() {
      return this.localData.env === "test";
    }
  },
  mounted() {
    this.getAllChoice();
    this.getFinanceList();
  },
  methods: {
    changePageSize(val) {
      this.getFinanceList();
    },
    // 获取列表数据

    async getFinanceList() {
      let body = {
        page: this.currentPage,
        page_size: this.currentPageSize,
        user: this.uid,
        status: this.orderState,
      };
      const res = await this.$post("/api/admin/order/get_user_orders", body);
      var data = res.data;
      this.finaceList = data.orders;
      this.totalCount = Number(data.count);
      this.successCount = Number(data.successCount);
      this.income_sum = Number(data.income_sum);
      this.income_success_sum = Number(data.income_success_sum);
      this.expense_sum = Number(data.expense_sum);
      this.expense_success_sum = Number(data.expense_success_sum);
      this.balance = data.total_balance.total_balance;
      this.income = data.total_balance.income_tax_balance ? data.total_balance.income_tax_balance / 100 : 0;
      this.recharge = data.total_balance.recharge_balance ? data.total_balance.recharge_balance / 100 : 0;
      this.user = data.user;
      //console.log(this.user.nickname);
    },
    async downFinanceList() {
      let body = {
        page: this.currentPage,
        page_size: this.currentPageSize,
        user: this.$route.query.user
      };
      // const res = await this.$get("/api/admin/order/get_orders", body);
      var url =
        this.$store.state.domainConfig.siteUrl +
        "/api/admin/order/export?" +
        "artificial_mark=1";
      console.log(url);
      window.location.href = url;
    },
    async getAllChoice() {
      let body = {};
      const res = await this.$post("/api/admin/order/get_all_choice");
      let data = res.data;
      this.orderTypesOption = data.order_types;
      this.orderTypesOption.unshift({
        id: "",
        name: "全部"
      });
      this.orderStateOption = data.order_state;
      console.log(this.orderStateOption)
      this.payList = data.channels;
      this.payList.unshift({
        id: 0,
        name: "全部"
      });
      this.payListPop[0] = this.payList.pop();
      this.payListPop[1] = this.payList.pop();
      this.payListPop[2] = this.payList.pop();
      this.payList.push({
        id: "扩展",
        name: ">>"
      });
      this.TypeList = data.product_types;
      this.TypeList.unshift({
        id: 0,
        name: "全部"
      });
      for (let i = 0; i < 10; i++) {
        this.productTypePop[i] = this.TypeList.pop();
      }
      this.TypeList.push({
        id: "扩展",
        name: ">>"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-name {
  margin-bottom: 10px;
}

.user-info {
  margin-bottom: 10px;
}

.order-footer {
  margin-top: 20px;
  /*position: absolute;*/
  /*bottom: 10px;*/
  /*left: 10px;*/
}

.product_title {
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#mainBody {
  white-space: nowrap;
  overflow-x: scroll;
  height: calc(100% - 40px);
}

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

.red {
  color: rgb(255, 2, 30);
}

.green {
  color: rgba(37, 155, 36, 1);
}
</style>