HM21St_Page_Manager/src/views/finance_manage/FlowManage.vue

<template>
  <div class="manage-root">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div
        class="manage-root-contain-right"
        :class="[isPhone ? 'manage-root-contain-right-phone' : '']"
      >
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
          :class="[isPhone ? 'breadcrumb-box-phone' : '']"
        ></breadcrumb>
        <div class="personal-inner">
          <div class="common-title-box">
            <h3>交易流水</h3>
            <span v-if="isPhone" @click="showSearch = !showSearch">{{
              showSearch ? "收起查询条件" : "展开查询条件"
            }}</span>
            <div class="btn-box" v-if="!isPhone">
              <ul class="quick-search">
                <li v-for="(itemq, indexq) in quickList" :key="indexq">
                  <a
                    @click="qucikSearch(itemq, indexq)"
                    :class="[quickIndex === indexq ? 'active' : '']"
                    >{{ itemq.name }}</a
                  >
                  <span
                    class="border"
                    :class="[
                      indexq !== quickList.length - 1 &&
                      quickIndex !== indexq &&
                      quickIndex - 1 !== indexq
                        ? ''
                        : 'border-no',
                    ]"
                  ></span>
                </li>
              </ul>
              <el-button
                type="primary"
                size="small"
                @click="handleExport()"
                :loading="exportLoading"
                v-if="exportFlag"
                >导出报表</el-button
              >
            </div>
          </div>
          <template v-if="showSearch">
            <div class="btn-box" v-if="isPhone">
              <ul class="quick-search">
                <li v-for="(itemq, indexq) in quickList" :key="indexq">
                  <a
                    @click="qucikSearch(itemq, indexq)"
                    :class="[quickIndex === indexq ? 'active' : '']"
                    >{{ itemq.name }}</a
                  >
                  <span
                    class="border"
                    :class="[
                      indexq !== quickList.length - 1 &&
                      quickIndex !== indexq &&
                      quickIndex - 1 !== indexq
                        ? ''
                        : 'border-no',
                    ]"
                  ></span>
                </li>
              </ul>
              <el-button
                type="primary"
                size="small"
                @click="handleExport()"
                :loading="exportLoading"
                v-if="exportFlag"
                >导出报表</el-button
              >
            </div>
            <div class="proceeds-box">
              <div>
                <h6>
                  收款<span>（{{ total_count }}单）</span>
                </h6>
                <label v-if="proceedsPriceArr.length == 2"
                  >￥{{ proceedsPriceArr[0] }}.<b>{{ proceedsPriceArr[1] }}</b
                  ><span>元</span></label
                >
              </div>
              <div>
                <h6>退款</h6>
                <label v-if="refundPriceArr.length == 2"
                  >￥{{ refundPriceArr[0] }}.<b>{{ refundPriceArr[1] }}</b
                  ><span>元</span></label
                >
              </div>
            </div>
            <div class="search-box">
              <div class="search-item">
                <label>搜索</label>
                <el-input
                  placeholder="商品名称/用户名/单号/手机号"
                  v-model="searchInput"
                  maxlength="200"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="getList(1)"
                    style="cursor: pointer"
                  ></i>
                </el-input>
              </div>
              <div class="search-item" v-if="isPhone">
                <label>交易时间</label>
                <el-date-picker
                  v-model="validityStart"
                  type="date"
                  size="small"
                  placeholder="开始日期"
                  value-format="yyyy-MM-dd"
                  @change="
                    quickIndex = null;
                    getList(1);
                  "
                >
                </el-date-picker>
                <el-date-picker
                  v-model="validityEnd"
                  type="date"
                  size="small"
                  placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="
                    quickIndex = null;
                    getList(1);
                  "
                >
                </el-date-picker>
              </div>
              <div class="search-item" v-else>
                <label>交易时间</label>
                <el-date-picker
                  v-model="validity"
                  type="daterange"
                  size="small"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="
                    quickIndex = null;
                    getList(1);
                  "
                >
                </el-date-picker>
              </div>
              <div class="search-item">
                <label>学段</label>
                <el-select
                  v-model="searchStudy"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in $studyTypeAll"
                    :key="item.study_phase"
                    :label="item.study_phase_name"
                    :value="item.study_phase"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item">
                <label>商品类型</label>
                <el-select
                  v-model="searchGoodsType"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in goodsTypeList"
                    :key="item.value"
                    :label="item.goods_name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item">
                <label>是否使用兑换码</label>
                <el-select
                  v-model="searchIsCDKEY"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in isCDKEYList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item">
                <label>交易状态</label>
                <el-select
                  v-model="searchStatus"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in transactionList"
                    :key="item.status"
                    :label="item.status_name"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item">
                <label>客户所在机构</label>
                <el-select
                  v-model="searchOrgid"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in orgList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item">
                <label>客户所在省市</label>
                <el-cascader
                  size="medium"
                  :options="$provinceCityListAll"
                  v-model="searchArea"
                  :props="props"
                  collapse-tags
                  clearable
                  @change="getList(1)"
                >
                </el-cascader>
              </div>
              <div class="search-item">
                <label>支付渠道</label>
                <el-select
                  v-model="searchChannel"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in channelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </template>
          <el-table
            class="search-table"
            :data="tableData"
            style="width: 100%"
            @sort-change="handleSort"
            :default-sort="dataSort"
            v-loading="tableLoading"
            :max-height="isPhone ? 'auto' : tableHeight"
          >
            <el-table-column
              type="index"
              label="#"
              sortable
              width="54"
              :index="(pageNumber - 1) * pageSize + 1"
            >
            </el-table-column>
            <el-table-column
              prop="sn"
              label="交易单号"
              width="190"
              class-name="user-info"
            >
            </el-table-column>
            <el-table-column
              prop="pay_time"
              label="交易时间"
              sortable="custom"
              width="165"
            >
            </el-table-column>
            <el-table-column prop="name" label="购买商品" min-width="220">
            </el-table-column>
            <el-table-column prop="goods_type" label="商品类型" width="128">
              <template slot-scope="scope">
                <span
                  class="items-type"
                  :style="{
                    background: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].bg
                      : '',
                    color: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].color
                      : '',
                  }"
                  >{{ scope.row.goods_type_name }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="is_reservation" label="是否预定" width="80">
              <template slot-scope="scope">
                {{ scope.row.is_reservation === "true" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column label="自动升学" width="80">
              <template slot-scope="scope">
                <span>{{
                  scope.row.is_reservation === "true"
                    ? scope.row.is_auto_adjust_study_phase === "true"
                      ? "是"
                      : "否"
                    : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="goods_study_phase_name"
              label="学段"
              width="64"
            >
            </el-table-column>
            <el-table-column prop="goods_price" label="价格" width="140">
              <template slot-scope="scope">
                <span class="currectPrice"
                  >￥{{ scope.row.goods_price_discount | cutMoneyFiter }}</span
                >
                <span
                  class="oldPrice"
                  v-if="
                    scope.row.goods_price !== scope.row.goods_price_discount
                  "
                  >(￥{{ scope.row.goods_price | cutMoneyFiter }})</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="discount_code" label="兑换码" width="194">
              <template slot-scope="scope">
                <template v-if="scope.row.is_use_discount_code == 'false'">
                  未使用
                </template>
                <template v-else>
                  <template v-if="scope.row.discount_code">
                    <span
                      class="code"
                      :id="'copy-' + scope.row.discount_code"
                      >{{ scope.row.discount_code }}</span
                    >
                    <svg-icon
                      icon-class="copy"
                      class="copy"
                      @click="
                        CopyToClipboard('copy-' + scope.row.discount_code)
                      "
                    ></svg-icon>
                  </template>
                  <template v-else> - </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="order_amount" label="支付金额" width="104">
              <template slot-scope="scope">
                <span class="currectPrice"
                  >￥{{ scope.row.order_amount | cutMoneyFiter }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="pay_type_name" label="支付渠道" width="104">
            </el-table-column>
            <el-table-column prop="transaction_sn" label="支付流水" width="260">
            </el-table-column>
            <el-table-column
              prop="person_name"
              label="购买者"
              sortable="custom"
              width="109"
            >
            </el-table-column>
            <el-table-column prop="person_user_name" label="用户名" width="109">
            </el-table-column>
            <el-table-column prop="person_phone" label="手机号" width="109">
            </el-table-column>
            <el-table-column
              prop="person_city_name"
              label="客户所在省市"
              width="164"
            >
              <template slot-scope="scope">
                {{
                  scope.row.person_province_name +
                  "/" +
                  scope.row.person_city_name
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="person_org_name"
              label="客户所在机构"
              sortable="custom"
              width="200"
            >
            </el-table-column>
            <el-table-column prop="order_status" label="交易状态" width="112">
              <template slot-scope="scope">
                <div class="status-box">
                  <span
                    :style="{
                      background: transactionListCss[scope.row.order_status]
                        ? transactionListCss[scope.row.order_status].bg
                        : '',
                    }"
                  ></span>
                  <b>{{
                    transactionListCss[scope.row.order_status]
                      ? transactionListCss[scope.row.order_status].text
                      : "-"
                  }}</b>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="refund_apply_status"
              label="退款申请状态"
              width="112"
            >
              <template
                slot-scope="scope"
                v-if="scope.row.is_has_refund_apply === 'true'"
              >
                <div class="status-box">
                  <span
                    :style="{
                      background:
                        refundStatusList[scope.row.refund_apply_status].bg,
                    }"
                  ></span>
                  <b
                    :style="{
                      color:
                        refundStatusList[scope.row.refund_apply_status]
                          .textColor,
                    }"
                    >{{
                      refundStatusList[scope.row.refund_apply_status].text
                    }}</b
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="refund_apply_submit_time"
              label="退款申请提交时间"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="refund_amount" label="退款金额" width="144">
              <template
                slot-scope="scope"
                v-if="scope.row.refund_apply_status === 2"
              >
                <span class="currectPrice"
                  >￥{{ scope.row.refund_amount | cutMoneyFiter }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="refund_transaction_sn"
              label="退款交易流水号"
              width="260"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              :width="isPhone ? '50' : '130'"
            >
              <template slot-scope="scope">
                <template v-if="isPhone">
                  <el-dropdown
                    trigger="click"
                    v-if="scope.row.is_use_discount_code == 'false'"
                  >
                    <span class="el-dropdown-link">
                      <svg-icon
                        icon-class="operate"
                        class="el-dropdown-link"
                      ></svg-icon>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native.prevent="
                          handleRefund(scope.row, scope.$index)
                        "
                        v-if="scope.row.is_use_discount_code == 'false'"
                        >退款</el-dropdown-item
                      >

                      <el-dropdown-item
                        @click.native.prevent="
                          handleLookInfo(scope.row, scope.$index)
                        "
                        >查看</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.native.prevent="
                          handleEditInfo(scope.row, scope.$index)
                        "
                        v-if="scope.row.is_reservation === 'true'"
                        >修改</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
                <template v-else>
                  <el-button
                    type="text"
                    size="small"
                    class="red-btn"
                    @click.native.prevent="
                      handleRefund(scope.row, scope.$index)
                    "
                    v-if="scope.row.is_use_discount_code == 'false'"
                  >
                    退款
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    class="primary-btn"
                    @click.native.prevent="
                      handleLookInfo(scope.row, scope.$index)
                    "
                  >
                    查看
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    class="primary-btn"
                    @click.native.prevent="
                      handleEditInfo(scope.row, scope.$index)
                    "
                    v-if="scope.row.is_reservation === 'true'"
                  >
                    修改
                  </el-button>
                  <!-- <el-button
                    @click.native.prevent="handleUp(scope.row, scope.$index)"
                    type="text"
                    size="small"
                    class="red-btn"
                    v-if="scope.row.order_status === 2"
                  >
                    撤回
                  </el-button> -->
                  <!-- <el-button
                    type="text"
                    size="small"
                    class="gray-btn"
                    v-if="scope.row.order_status === 3"
                  >
                    已退款
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    class="gray-btn"
                    v-if="scope.row.order_status === 4"
                  >
                    已撤回
                  </el-button> -->
                </template>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNumber"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :layout="
              isPhone
                ? 'total, prev, pager, next'
                : 'total, prev, pager, next, sizes, jumper'
            "
            :total="total_count"
            :small="isPhone"
            :pager-count="isPhone ? 5 : 7"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="退款信息"
      :visible.sync="dialogVisible"
      :width="isPhone ? '100%' : '500px'"
    >
      <template v-if="ktjeInfo">
        <span style="margin-right: 5px">退款金额：</span>
        <el-input v-model="ktje" style="width: 150px"></el-input>
        <p>商品信息</p>
        <div class="item-info">
          <label>物品类型：</label><span>{{ ktjeInfo.goods_type_name }}</span>
        </div>
        <div class="item-info">
          <label>物品学段：</label
          ><span>{{ ktjeInfo.goods_study_phase_name }}</span>
        </div>
        <div class="item-info">
          <label>购买商品：</label><span>{{ ktjeInfo.name }}</span>
        </div>
        <div class="item-info">
          <label>订单金额：</label
          ><span>￥{{ ktjeInfo.order_amount | cutMoneyFiter }}</span>
        </div>
        <!-- 物品实体 -->
        <template v-if="ktjeInfo.order_sale_model === 0">
          <div
            class="item-info"
            v-if="ktjeInfo.is_reservation_order === 'true'"
          >
            <label>订阅期数：</label
            ><span>{{
              ktjeInfo.period_count === -1 ? "年刊" : ktjeInfo.period_count
            }}</span>
          </div>
          <div class="item-info">
            <label>订阅刊数：</label><span>{{ ktjeInfo.ks_reservation }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count !== -1
            "
          >
            <label>订阅列表：</label
            ><span>{{ ktjeInfo.issue_no_list_reservation.join("、") }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.issue_no_list_my_goods.length > 0
            "
          >
            <label>已上架：</label
            ><span>{{ ktjeInfo.issue_no_list_my_goods.join("、") }}</span>
          </div>
          <div class="item-info">
            <label>已上架刊数：</label><span>{{ ktjeInfo.ks_my_goods }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>开始日期：</label
            ><span>{{ ktjeInfo.valid_period_begin_date }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>截止日期：</label
            ><span>{{ ktjeInfo.valid_period_end_date }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>当前日期：</label><span>{{ ktjeInfo.cur_date }}</span>
          </div>
        </template>
        <!-- 使用期限 -->
        <template v-if="ktjeInfo.order_sale_model === 1">
          <div class="item-info">
            <label>订单日期：</label><span>{{ ktjeInfo.order_date }}</span>
          </div>
          <div class="item-info">
            <label>有效期天数：</label
            ><span>{{ ktjeInfo.valid_period_day_count }}</span>
          </div>
          <div class="item-info">
            <label>截止日期：</label
            ><span>{{ ktjeInfo.valid_period_end_date }}</span>
          </div>
          <div class="item-info">
            <label>当前日期：</label><span>{{ ktjeInfo.cur_date }}</span>
          </div>
        </template>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureRefund"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="已上架物品列表"
      :visible.sync="shelveVisible"
      :width="isPhone ? '100%' : '500px'"
      v-if="orderInfo"
    >
      <el-table :data="goodsListShelve" style="width: 100%">
        <el-table-column type="index" label="#" width="54"> </el-table-column>
        <el-table-column prop="name" label="名称" width="200">
        </el-table-column>
        <el-table-column prop="issue_no" label="期号" width="60">
        </el-table-column>
        <el-table-column prop="study_phase_name" label="学段" width="60">
        </el-table-column>
        <el-table-column prop="type" label="商品类型">
          <template slot-scope="scope">
            <span
              class="items-type"
              :style="{
                background: goodsTypeListCss[scope.row.type]
                  ? goodsTypeListCss[scope.row.type].bg
                  : '',
                color: goodsTypeListCss[scope.row.type]
                  ? goodsTypeListCss[scope.row.type].color
                  : '',
              }"
              >{{ goodsTypeListCss[scope.row.type].text }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <template
        v-if="
          orderInfo.sale_model === 0 &&
          orderInfo.is_reservation === 'true' &&
          orderInfo.is_auto_adjust_study_phase === 'true'
        "
      >
        <h4>
          年预定【{{
            orderInfo.is_auto_adjust_study_phase === "true"
              ? "自动升学"
              : "不自动升学"
          }}】
        </h4>
        <p>
          {{
            orderInfo.valid_period_1_study_phase_name +
            " &nbsp;&nbsp; " +
            orderInfo.valid_period_1_begin_date +
            " &nbsp;&nbsp;至&nbsp;&nbsp; " +
            orderInfo.valid_period_1_end_date
          }}
        </p>
        <p v-if="orderInfo.valid_period_2_study_phase !== 0">
          {{
            orderInfo.valid_period_2_study_phase_name +
            " &nbsp;&nbsp; " +
            orderInfo.valid_period_2_begin_date +
            " &nbsp;&nbsp;至&nbsp;&nbsp; " +
            orderInfo.valid_period_2_end_date
          }}
        </p>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="shelveVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改"
      :visible.sync="editInfoFlag"
      :width="isPhone ? '100%' : '500px'"
    >
      <el-form :model="editInfo">
        <el-form-item label="自动升学">
          <el-radio-group v-model="editInfo.is_auto_adjust_study_phase">
            <el-radio label="false">否</el-radio>
            <el-radio label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editInfoFlag = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureIsAuto"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import { getLogin } from "@/api/ajax";
import { mapState } from "vuex";
import { cutMoneyFiter } from "@/utils/defined";
import { getToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "flow_manage",
      breadcrumbList: [
        {
          icon: "money-cny-box-line",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          notLink: true,
          text: "财务中心",
        },
        {
          icon: "",
          url: "",
          text: "交易管理",
        },
      ],
      quickList: [], // 快速查询
      searchInput: "",
      searchQuick: null,
      quickIndex: null, // 快速搜索的索引
      proceedsNumber: "", // 收款单数
      proceedsPrice: null, // 收款金额
      proceedsPriceArr: [],
      refundPriceArr: [],
      searchType: -1,
      validity: "",
      validityStart: "",
      validityEnd: "",
      searchStudy: -1,
      searchStatus: -1,
      searchGoodsType: -1,
      searchIsCDKEY: -1,
      searchOrgid: "",
      searchArea: [],
      searchChannel: -1,
      channelList: [
        {
          label: "全部",
          value: -1,
        },
        {
          label: "支付宝",
          value: 4,
        },
        {
          label: "微信支付",
          value: 3,
        },
      ],
      orgList: [
        {
          name: "全部",
          id: "",
        },
      ],
      isCDKEYList: [
        {
          label: "全部",
          value: -1,
        },
        {
          label: "已使用",
          value: 1,
        },
        {
          label: "未使用",
          value: 0,
        },
      ], // 是否使用兑换码
      transactionList: [
        {
          status_name: "全部",
          status: -1,
        },
        {
          status_name: "支付成功",
          status: 1,
        },
        {
          status_name: "兑换成功",
          status: 2,
        },
        {
          status_name: "已退款",
          status: 3,
        },
        {
          status_name: "已撤回",
          status: 4,
        },
      ], //交易状态列表
      transactionListCss: {
        0: {
          bg: "rgb(245, 63, 63)",
          text: "未支付",
        },
        1: {
          bg: "#00B42A",
          text: "支付成功",
        },
        2: {
          bg: "#165DFF",
          text: "兑换成功",
        },
        3: {
          bg: "#F7BA1E",
          text: "已退款",
        },
        4: {
          bg: "#FF7D00",
          text: "已撤回",
        },
      },
      goodsTypeList: [
        {
          goods_name: "全部",
          value: -1,
        },
        {
          goods_name: "报纸",
          value: 2,
        },
        {
          goods_name: "精读",
          value: 3,
        },
        {
          goods_name: "录播课",
          value: 0,
        },
        {
          goods_name: "画刊",
          value: 4,
        },
      ], // 商品类型
      goodsTypeListCss: {
        2: {
          text: "报纸",
          color: "#165DFF",
          bg: "#E8F7FF",
        },
        4: {
          text: "画刊",
          color: "#F53F3F",
          bg: "#FFECE8",
        },
        3: {
          text: "精读",
          color: "#0FC6C2",
          bg: "#E8FFFB",
        },
        0: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        1: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        10: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        // '5':{
        //     text:'报纸专辑',
        //     color:'#165DFF',
        //     bg:'#E8F7FF'
        // },
        // '6':{
        //     text:'画刊专辑',
        //     color:'#F53F3F',
        //     bg:'#FFECE8'
        // }
      },
      typeList: [
        {
          account_type: -1,
          account_type_name: "全部",
        },
      ],
      statusList: {
        1: {
          text: "正常",
          bg: "#165DFF",
          color: "",
        },
        0: {
          text: "停用",
          bg: "#F53F3F",
          color: "#F53F3F",
        },
      },
      tableData: [],
      pageSize: window.localStorage.getItem("pageSize")
        ? Number(window.localStorage.getItem("pageSize"))
        : 10,
      pageNumber: window.localStorage.getItem("pageNumber")
        ? Number(window.localStorage.getItem("pageNumber"))
        : 1,
      tableHeight: "", // 表格高度
      total_count: 0,
      dataSort: {},
      props: { multiple: true },
      tableLoading: false,
      exportLoading: false,
      exportFlag:
        getToken() && JSON.parse(getToken())
          ? JSON.parse(getToken()).popedom_code_list.indexOf(40002) > -1
          : false,
      refundStatusList: {
        2: {
          text: "审核通过",
          bg: "#00B42A",
          textColor: "#1D2129",
        },
        0: {
          text: "待审核",
          bg: "#165DFF",
          textColor: "#1D2129",
        },
        1: {
          text: "驳回",
          bg: "#FF7D00",
          textColor: "#1D2129",
        },
      },
      dialogVisible: false,
      ktje: 0,
      refundId: "",
      ktjeInfo: null,
      isPhone: false,
      showSearch: true,
      goodsListShelve: [], // 已上架物品列表
      orderInfo: null, // 订单详情
      shelveVisible: false,
      editInfoFlag: false,
      editInfo: {
        is_auto_adjust_study_phase: "false",
      },
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$studyTypeAll", "$provinceCityListAll"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    qucikSearch(value, index) {
      if (this.isPhone) {
        this.validityStart = value.date_begin;
        this.validityEnd = value.date_end;
      } else {
        this.validity = [value.date_begin, value.date_end];
      }
      this.quickIndex = index;

      this.getList();
    },
    handleSort(value) {
      let dataSort = {
        prop: value.prop,
        order: value.order,
      };
      this.dataSort = dataSort;
      this.getList();
    },
    // 查询列表
    getList(page) {
      this.tableLoading = true;
      if (page) {
        this.pageNumber = page;
      }
      let MethodName = "/ShopServer/Manager/FinanceManager/PageQueryOrderList";
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        } else {
          order_column_list = ["order_time:desc"]; //用pay_time的话有未支付的订单会排在最前面
        }
      } else {
        order_column_list = ["order_time:desc"];
      }
      let province_id_list = null;
      let city_id_list = [];
      if (this.searchArea.length > 0) {
        if (this.searchArea[0][0] && this.searchArea[0][0] === "0") {
          province_id_list = "-1";
        } else {
          province_id_list = [];
          this.searchArea.forEach((item) => {
            if (province_id_list.indexOf(item[0]) === -1) {
              province_id_list.push(item[0]);
            }
            city_id_list.push(item[1] ? item[1] : "");
          });
        }
      }
      let data = {
        content: this.searchInput.trim(),
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        pay_status: 1,
        order_status: this.searchStatus,
        pay_date_begin: this.isPhone
          ? this.validityStart
          : this.validity
          ? this.validity[0]
          : "",
        pay_date_end: this.isPhone
          ? this.validityEnd
          : this.validity
          ? this.validity[1]
          : "",
        goods_study_phase: this.searchStudy,
        goods_type: this.searchGoodsType,
        discount_code_use_status: this.searchIsCDKEY,
        person_org_id_list: this.searchOrgid ? [this.searchOrgid] : null,
        person_province_city_id_list: city_id_list,
        pay_type: this.searchChannel,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.tableData = res.order_list;
            this.total_count = res.total_count;
            this.proceedsPriceArr = cutMoneyFiter(
              res.sum_info.order_amount
            ).split(".");
            this.refundPriceArr = cutMoneyFiter(
              res.sum_info.refund_amount
            ).split(".");
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 导出报表
    handleExport() {
      let _this = this;
      _this.exportLoading = true;
      let MethodName =
        "/ShopServer/Manager/FinanceManager/StartCreateOrderExportFile";
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        } else {
          order_column_list = ["create_time:desc"];
        }
      } else {
        order_column_list = ["create_time:desc"];
      }
      let province_id_list = null;
      let city_id_list = [];
      if (this.searchArea.length > 0) {
        if (this.searchArea[0][0] && this.searchArea[0][0] === "0") {
          province_id_list = "-1";
        } else {
          province_id_list = [];
          this.searchArea.forEach((item) => {
            if (province_id_list.indexOf(item[0]) === -1) {
              province_id_list.push(item[0]);
            }
            city_id_list.push(item[1] ? item[1] : "");
          });
        }
      }
      let data = {
        content: this.searchInput.trim(),
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        pay_status: 1,
        order_status: this.searchStatus,
        pay_date_begin: this.isPhone
          ? this.validityStart
          : this.validity
          ? this.validity[0]
          : "",
        pay_date_end: this.isPhone
          ? this.validityEnd
          : this.validity
          ? this.validity[1]
          : "",
        goods_study_phase: this.searchStudy,
        goods_type: this.searchGoodsType,
        discount_code_use_status: this.searchIsCDKEY,
        person_org_id_list: this.searchOrgid ? [this.searchOrgid] : null,
        person_province_city_id_list: city_id_list,
        pay_type: this.searchChannel,
      };
      getLogin(MethodName, data)
        .then((res) => {
          let MethodName2 =
            "/ShopServer/Manager/FinanceManager/GetOrderExportFileTaskProgress";
          let timer = setInterval(() => {
            getLogin(MethodName2, {
              order_export_file_task_id: res.id,
            })
              .then((res) => {
                if (res.is_finish === "true") {
                  clearInterval(timer);
                  timer = null;
                  _this.exportLoading = false;
                  location.href = res.order_export_file_url;
                }
              })
              .catch((res) => {
                this.loading = false;
              });
          }, 1000);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 停用 启用
    handleUp(row, index) {
      this.$confirm("确定撤回吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let Mname = "/OrgServer/Manager/SysUserManager/EnableSysUser";
        let updataData = JSON.parse(JSON.stringify(row));
        let data = {
          id: row.id,
        };
        if (row.status === 0) {
          // 下架状态
          data.is_enable = "true";
          updataData.status = 1;
        } else if (row.status === 1) {
          data.is_enable = "false";
          updataData.status = 0;
        }
        getLogin(Mname, data).then((res) => {
          this.$message.success("操作成功");
          this.$set(this.tableData, index, updataData);
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNumber = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getList();
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 570; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 用户类型列表
    getOrgList() {
      let MethodName = "/OrgServer/Client/OrgManager/GetOrgIndexList";
      let data = {
        name: "",
        status: 1,
        sn: "",
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.orgList = [
              {
                name: "全部",
                id: "",
              },
            ];
            this.orgList = this.orgList.concat(res.org_index_list);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 快捷时间按钮列表
    getQuickList() {
      this.quickList = [];
      let MethodName =
        "/ShopServer/Manager/FinanceManager/GetQueryCritDateSpaceList";
      let data = {};
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.quickList = res.date_space_list;
        }
      });
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    // 退款
    handleRefund(row, index) {
      this.ktjeInfo = null;
      let Mnames = "/ShopServer/Manager/FinanceManager/GetOrderInfo";
      let datas = {
        id: row.id,
      };
      getLogin(Mnames, datas).then((res) => {
        if (res.status === 1) {
          this.ktje = res.order_info.order_amount;
          this.ktjeInfo = res.order_info;
          this.refundId = row.id;
          this.dialogVisible = true;
        }
      });
    },
    // 确定退款
    sureRefund() {
      this.$confirm("确定要退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let Mname = "/ShopServer/Manager/FinanceManager/OrderRefund";
        let data = {
          id: this.refundId,
          refund_amount: this.ktje,
        };
        getLogin(Mname, data).then((res) => {
          this.$message.success("操作成功");
          this.getList();
          this.dialogVisible = false;
        });
      });
    },
    // 查看已上架物品
    handleLookInfo(row, index) {
      this.goodsListShelve = [];
      this.orderInfo = null;
      let Mnames = "/ShopServer/Manager/FinanceManager/GetOrderInfo";
      let datas = {
        id: row.id,
      };
      getLogin(Mnames, datas).then((res) => {
        if (res.status === 1) {
          this.goodsListShelve = res.goods_list_shelve;
          this.orderInfo = res.order_info;
          this.shelveVisible = true;
        }
      });
    },
    // 点击修改按钮
    handleEditInfo(row) {
      this.editInfo = {
        is_auto_adjust_study_phase: row.is_auto_adjust_study_phase,
        id: row.id,
      };
      this.editInfoFlag = true;
    },
    // 确定修改自动升学属性
    sureIsAuto() {
      let Mnames =
        "ShopServer/Manager/FinanceManager/SetIsAutoAdjustStudayPhase_YearReservationOrder";

      getLogin(Mnames, this.editInfo).then((res) => {
        if (res.status === 1) {
          this.$message.success("操作成功");
          this.getList();
          this.editInfoFlag = false;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
    if (this.isPhone) {
      this.showSearch = false;
    }
    this.getTableHeight();
    this.getQuickList();
    this.getOrgList();
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    let input = document.querySelector("input");
    input.addEventListener("keyup", function (event) {
      // 判断是否按下回车键
      if (event.keyCode === 13) {
        // 回车键被按下，执行你想要的操作
        _this.getList(1);
      }
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.manage-root-contain-right-phone {
  .personal-inner {
    min-height: calc(100vh - 124px);
    height: auto;
    .common-title-box {
      align-items: center;
      span {
        font-size: 14px;
      }
    }
    .btn-box {
      flex-flow: wrap;
      gap: 5px;
      margin-top: 10px;
    }
    .quick-search {
      margin: 0 10px 0 0;
      flex-flow: wrap;
    }
    .proceeds-box {
      gap: 10px;
      margin-top: 10px;
      flex-flow: wrap;
    }
    .search-table {
      margin-top: 10px;
    }
    .el-date-editor--date {
      width: 50%;
    }
  }
}
</style>
<style lang="scss">
.btn-box {
  display: flex;
}
.quick-search {
  display: flex;
  list-style: none;
  padding: 3px;
  margin: 0 24px;
  align-items: center;
  border-radius: 2px;
  background: #f2f3f5;
  li {
    display: flex;
    align-items: center;
    a {
      padding: 2px 12px;
      color: #4e5969;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      border-radius: 2px;
      cursor: pointer;
      &.active {
        background: #fff;
        color: #165dff;
        font-weight: 500;
      }
    }
    span {
      height: 14px;
      width: 1px;
      background: #e5e6eb;
      &.border-no {
        background: #f2f3f5;
      }
    }
  }
}
.proceeds-box {
  border-radius: 2px;
  background: #f7f8fa;
  padding: 16px;
  margin-top: 24px;
  display: flex;
  width: 100%;
  gap: 40px;
  h6 {
    color: #1d2129;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 8px 0;
    span {
      color: #86909c;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }
  label {
    color: #1d2129;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    b {
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
    }
    span {
      color: #4e5969;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }
}
.el-range-editor--small .el-range-input {
  background: #f2f3f5;
}
.search-item {
  margin-bottom: 20px;
}
.search-table {
  margin-top: 0;
}
.items-type {
  padding: 1px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  border-radius: 2px;
}
.code {
  color: #175dff;
}
.copy {
  color: #c9cdd4;
  margin-left: 8px;
  cursor: pointer;
}
</style>