manager 升级到vue3

manager/src/views/member/advance/recharge.vue

@@ -1,208 +1,163 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="充值单号" prop="rechargeSn">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="充值单号" prop="rechargeSn">
+          <el-input
             v-model="searchForm.rechargeSn"
             placeholder="请输入充值单号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="支付时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
             v-model="selectDate"
             type="datetimerange"
-            format="yyyy-MM-dd HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
             clearable
-            @on-change="selectDateRange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
         border
-        :columns="columns"
         :data="data"
         ref="table"
         class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="rechargeSn" label="订单号" min-width="180" show-overflow-tooltip />
+        <el-table-column label="充值金额" width="160" sortable>
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.rechargeMoney" :color="$mainColor" unit="+" />
+          </template>
+        </el-table-column>
+        <el-table-column label="充值方式" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ rechargeWayText(row.rechargeWay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付状态" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.payStatus === 'PAID' ? 'success' : 'danger'">
+              {{ row.payStatus === "PAID" ? "已付款" : "未付款" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="充值时间" width="190" />
+        <el-table-column prop="payTime" label="支付时间" width="190" />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getUserRecharge,
-  } from "@/api/member";
-  export default {
-    name: "recharge",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          memberName:""
-        },
-        selectDate: null, // 选择区间时间
-        columns: [
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "订单号",
-            key: "rechargeSn",
-            minWidth: 180,
-            tooltip: true
-          },
-          {
-            title: "充值金额",
-            key: "rechargeMoney",
-            width: 160,
-            sortable: true,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rechargeMoney,color:this.$mainColor,unit:"+"}} );
-            },
-          },
-          {
-            title: "充值方式",
-            key: "rechargeWay",
-            width: 120,
-            render: (h, params) => {
-              if (params.row.rechargeWay === 'ALIPAY') {
-                return h('div', [h('span', {}, '支付宝')]);
-              } else if (params.row.rechargeWay === 'WECHAT') {
-                return h('div', [h('span', {}, '微信')]);
-              } else if (params.row.rechargeWay === 'BANK_TRANSFER') {
-                return h('div', [h('span', {}, '线下转账')]);
-              } else {
-                return h('div', [h('span', {}, '')]);
-              }
-            }
-          },
-          {
-            title: "支付状态",
-            key: "payStatus",
-            align: "left",
-            width: 120,
-            sortable: false,
-            render: (h, params) => {
-              if (params.row.payStatus == "PAID") {
-                return h("Tag", {props: {color: "green",},}, "已付款");
-              } else {
-                return h("Tag", {props: {color: "red",},}, "未付款");
-              }
-            },
-          },
-          {
-            title: "充值时间",
-            key: "createTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-          {
-            title: "支付时间",
-            key: "payTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+import { getUserRecharge } from "@/api/member";
+
+export default {
+  name: "recharge",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        memberName: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    rechargeWayText(way) {
+      if (way === "ALIPAY") return "支付宝";
+      if (way === "WECHAT") return "微信";
+      if (way === "BANK_TRANSFER") return "线下转账";
+      return "";
+    },
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-      // 时间段赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        getUserRecharge(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    selectDateRange(v) {
+      if (v && v.length === 2) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      getUserRecharge(this.searchForm).then((res) => {
         this.loading = false;
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
-    },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>

manager/src/views/member/advance/walletLog.vue

@@ -1,132 +1,148 @@
-
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="支付时间">
-            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
+        border
+        :data="data"
+        ref="table"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="100" />
+        <el-table-column label="变动金额" width="150">
+          <template #default="{ row }">
+            <template v-if="row">
+              <priceColorScheme
+                v-if="row.money > 0"
+                :value="row.money"
+                color="green"
+              />
+              <priceColorScheme
+                v-else-if="row.money < 0"
+                :value="row.money"
+                :color="$mainColor"
+              />
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="变更时间" width="200" />
+        <el-table-column label="业务类型" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ serviceTypeText(row.serviceType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="detail" label="详细" min-width="300" show-overflow-tooltip />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { getUserWallet } from "@/api/member";
+
 export default {
   name: "walletLog",
   data() {
     return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          memberName: "",
-        },
-      selectDate: null, // 选择时间段
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          minWidth: 100,
-        },
-        {
-          title: "变动金额",
-          key: "money",
-          width: 150,
-          render: (h, params) => {
-            if (params.row.money >0) {
-              return h("priceColorScheme", {props:{value:params.row.money,color:'green'}} );
-            } else if (params.row.money < 0) {
-              return h("priceColorScheme", {props:{value:params.row.money,color:this.$mainColor}} );
-            }
-          },
-        },
-
-        {
-          title: "变更时间",
-          key: "createTime",
-          width: 200,
-        },
-        {
-          title: "业务类型",
-          key: "serviceType",
-          width: 200,
-          render: (h, params) => {
-            if (params.row.serviceType == "WALLET_WITHDRAWAL") {
-              return h("div", [h("span", {}, "余额提现")]);
-            } else if (params.row.serviceType == "WALLET_PAY") {
-              return h("div", [h("span", {}, "余额支付")]);
-            } else if (params.row.serviceType == "WALLET_REFUND") {
-              return h("div", [h("span", {}, "余额退款")]);
-            } else if (params.row.serviceType == "WALLET_RECHARGE") {
-              return h("div", [h("span", {}, "余额充值")]);
-            } else {
-              return h("div", [h("span", {}, "佣金提成")]);
-            }
-          },
-        },
-        {
-          title: "详细",
-          key: "detail",
-          minWidth: 300,
-          tooltip: true,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        memberName: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    serviceTypeText(type) {
+      if (type === "WALLET_WITHDRAWAL") return "余额提现";
+      if (type === "WALLET_PAY") return "余额支付";
+      if (type === "WALLET_REFUND") return "余额退款";
+      if (type === "WALLET_RECHARGE") return "余额充值";
+      return "佣金提成";
+    },
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    // 时间段赋值
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
-    // 获取列表数据
     getDataList() {
+      this.loading = true;
       getUserWallet(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -134,8 +150,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {

manager/src/views/member/advance/withdrawApply.vue

@@ -1,102 +1,171 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="提现状态" prop="applyStatus">
-            <Select v-model="searchForm.applyStatus" clearable style="width: 240px">
-              <Option value="APPLY">申请中</Option>
-              <Option value="VIA_AUDITING">审核通过</Option>
-              <Option value="WAIT_USER_CONFIRM">用户确认</Option>
-              <Option value="FAIL_AUDITING">审核拒绝</Option>
-              <Option value="SUCCESS">提现成功</Option>
-              <Option value="ERROR">提现失败</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="申请时间">
-            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
-          </Form-item>
-          <Form-item style="margin-left: -35px" class="br">
-            <Button @click="handleSearch" type="primary" icon="ios-search">搜索
-            </Button>
-          </Form-item>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
-      <Form :label-width="80">
-        <FormItem label="申请编号">
-          <span>{{showList.sn}}</span>
-        </FormItem>
-        <FormItem label="用户名称">
-          <span>{{showList.memberName}}</span>
-        </FormItem>
-        <FormItem label="申请金额">
-          <priceColorScheme :value="showList.applyMoney" :color="$mainColor"></priceColorScheme>
-        </FormItem>
-        <FormItem label="提现状态">
-          <span>{{showList.applyStatus | paramTypeFilter}}</span>
-        </FormItem>
-        <FormItem label="申请时间">
-          <span>{{showList.createTime}}</span>
-        </FormItem>
-        <FormItem label="审核备注">
-          <Input v-model="audit" type="textarea" />
-        </FormItem>
-
-      </Form>
-      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
-        <Button type="text" @click="submitRole(false)">拒绝</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole(true)">通过
-        </Button>
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="提现状态" prop="applyStatus">
+          <el-select v-model="searchForm.applyStatus" clearable style="width: 240px">
+            <el-option label="申请中" value="APPLY" />
+            <el-option label="审核通过" value="VIA_AUDITING" />
+            <el-option label="用户确认" value="WAIT_USER_CONFIRM" />
+            <el-option label="审核拒绝" value="FAIL_AUDITING" />
+            <el-option label="提现成功" value="SUCCESS" />
+            <el-option label="提现失败" value="ERROR" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker
+            v-model="selectDate"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择起始时间"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-loading="loading"
+        border
+        :data="data"
+        ref="table"
+        class="mt_10"
+        style="width: 100%"
+        @sort-change="changeSort"
+        @selection-change="changeSelect"
+      >
+        <el-table-column prop="sn" label="申请编号" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="memberName" label="用户名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="申请金额" width="120">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.applyMoney" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="提现状态" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="applyStatusTagType(row.applyStatus)">
+              {{ applyStatusText(row.applyStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="申请时间" width="170" sortable="custom" />
+        <el-table-column prop="inspectTime" label="审核时间" width="170" />
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" v-if="row.applyStatus === 'APPLY'" @click="openAudit(row)">审核</a>
+              <a class="link-text" v-else @click="openQuery(row)">查看</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
+    </el-card>
 
-    <Modal :title="modalTitle" v-model="queryModalVisible" :mask-closable="false" :width="500">
-      <Form :label-width="80">
-        <FormItem label="申请编号：">
-          <span>{{showList.sn}}</span>
-        </FormItem>
-        <FormItem label="用户名称：">
-          <span>{{showList.memberName}}</span>
-        </FormItem>
-        <FormItem label="申请金额：">
-          <priceColorScheme :value="showList.applyMoney" :color="$mainColor"></priceColorScheme>
+    <el-dialog
+      v-model="roleModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="申请编号">
+          <span>{{ showList.sn }}</span>
+        </el-form-item>
+        <el-form-item label="用户名称">
+          <span>{{ showList.memberName }}</span>
+        </el-form-item>
+        <el-form-item label="申请金额">
+          <priceColorScheme :value="showList.applyMoney" :color="$mainColor" />
+        </el-form-item>
+        <el-form-item label="提现状态">
+          <span>{{ paramTypeFilter(showList.applyStatus) }}</span>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <span>{{ showList.createTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核备注">
+          <el-input v-model="audit" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <template v-if="showList.applyStatus === 'APPLY'">
+          <el-button @click="submitRole(false)">拒绝</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitRole(true)">通过</el-button>
+        </template>
+      </template>
+    </el-dialog>
 
-        </FormItem>
-        <FormItem label="提现状态：">
-          <span>{{showList.applyStatus | paramTypeFilter}}</span>
-        </FormItem>
-        <FormItem label="申请时间：">
-          <span>{{showList.createTime}}</span>
-        </FormItem>
-        <FormItem label="审核时间：">
-          <span>{{showList.inspectTime}}</span>
-        </FormItem>
-        <FormItem label="审核备注：">
-          <span>{{showList.inspectRemark || '暂无备注'}}</span>
-        </FormItem>
-
-      </Form>
-      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
-        <Button type="text" @click="submitRole(false)">拒绝</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole(true)">通过
-        </Button>
-      </div>
-      <div slot="footer" v-else>
-        <Button type="text" @click="queryModalVisible = false">取消</Button>
-      </div>
-    </Modal>
+    <el-dialog
+      v-model="queryModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="100px">
+        <el-form-item label="申请编号：">
+          <span>{{ showList.sn }}</span>
+        </el-form-item>
+        <el-form-item label="用户名称：">
+          <span>{{ showList.memberName }}</span>
+        </el-form-item>
+        <el-form-item label="申请金额：">
+          <priceColorScheme :value="showList.applyMoney" :color="$mainColor" />
+        </el-form-item>
+        <el-form-item label="提现状态：">
+          <span>{{ paramTypeFilter(showList.applyStatus) }}</span>
+        </el-form-item>
+        <el-form-item label="申请时间：">
+          <span>{{ showList.createTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核时间：">
+          <span>{{ showList.inspectTime }}</span>
+        </el-form-item>
+        <el-form-item label="审核备注：">
+          <span>{{ showList.inspectRemark || "暂无备注" }}</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <template v-if="showList.applyStatus === 'APPLY'">
+          <el-button @click="submitRole(false)">拒绝</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitRole(true)">通过</el-button>
+        </template>
+        <el-button v-else @click="queryModalVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -105,169 +174,68 @@ import { getUserWithdrawApply, withdrawApply } from "@/api/member";
 
 export default {
   name: "withdrawApply",
-  components: {},
   data() {
     return {
-      modalTitle: "", //弹出框标题
-      openSearch: true, // 显示搜索
-      openTip: true, // 显示提示
-      loading: true, // 表单加载状态
-      audit: "", // 审核备注
-      roleModalVisible: false, // 审核模态框
-      queryModalVisible: false, // 审核模态框
+      modalTitle: "",
+      loading: true,
+      audit: "",
+      roleModalVisible: false,
+      queryModalVisible: false,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
         memberName: "",
         applyStatus: "",
       },
-      selectDate: null, // 选择时间段
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      showList: {}, // 可操作选项
-      columns: [
-        {
-          title: "申请编号",
-          key: "sn",
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "用户名称",
-          key: "memberName",
-          align: "left",
-          tooltip: true,
-        },
-        {
-          title: "申请金额",
-          key: "applyMoney",
-          align: "left",
-          width: 120,
-
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.applyMoney,color:this.$mainColor}} );
-          },
-
-
-        },
-        {
-          title: "提现状态",
-          align: "left",
-          key: "applyStatus",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.applyStatus == "APPLY") {
-              return h("Tag", { props: { color: "volcano" } }, "申请中");
-            } else if (params.row.applyStatus == "VIA_AUDITING") {
-              return h("Tag", { props: { color: "green" } }, "审核通过");
-            } else if (params.row.applyStatus == "WAIT_USER_CONFIRM") {
-              return h("Tag", { props: { color: "gold" } }, "用户确认");
-            } else if (params.row.applyStatus == "SUCCESS") {
-              return h("Tag", { props: { color: "blue" } }, "提现成功");
-            } else if (params.row.applyStatus == "ERROR") {
-              return h("Tag", { props: { color: "blue" } }, "提现失败");
-            } else {
-              return h("Tag", { props: { color: "red" } }, "审核拒绝");
-            }
-          }
-        },
-        {
-          title: "申请时间",
-          key: "createTime",
-          align: "left",
-          width: 170,
-        },
-        {
-          title: "审核时间",
-          key: "inspectTime",
-          align: "left",
-          width: 170,
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 120,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            if (params.row.applyStatus == "APPLY") {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.showList = {};
-                        this.roleModalVisible = true;
-                        this.showList = params.row;
-                        this.audit = "";
-                      },
-                    },
-                  },
-                  "审核"
-                ),
-              ]);
-            } else {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.showList = {};
-                        this.queryModalVisible = true;
-                        this.showList = params.row;
-                        this.modalTitle = "查看";
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            }
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: null,
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      showList: {},
+      data: [],
+      total: 0,
     };
   },
-  filters: {
-    paramTypeFilter(val) {
-      if (val === "APPLY") {
-        return "申请中";
-      } else if (val === "VIA_AUDITING") {
-        return "审核通过(提现成功)";
-      } else if (val === "WAIT_USER_CONFIRM") {
-        return "用户确认";
-      } else if (val === "FAIL_AUDITING") {
-        return "审核拒绝";
-      } else if (val === "SUCCESS") {
-        return "提现成功";
-      } else if (val === "ERROR") {
-        return "提现失败";
-      } else {
-        return "未知状态";
-      }
-    },
-  },
   methods: {
+    paramTypeFilter(val) {
+      if (val === "APPLY") return "申请中";
+      if (val === "VIA_AUDITING") return "审核通过(提现成功)";
+      if (val === "WAIT_USER_CONFIRM") return "用户确认";
+      if (val === "FAIL_AUDITING") return "审核拒绝";
+      if (val === "SUCCESS") return "提现成功";
+      if (val === "ERROR") return "提现失败";
+      return "未知状态";
+    },
+    applyStatusText(status) {
+      if (status === "APPLY") return "申请中";
+      if (status === "VIA_AUDITING") return "审核通过";
+      if (status === "WAIT_USER_CONFIRM") return "用户确认";
+      if (status === "SUCCESS") return "提现成功";
+      if (status === "ERROR") return "提现失败";
+      return "审核拒绝";
+    },
+    applyStatusTagType(status) {
+      if (status === "APPLY") return "warning";
+      if (status === "VIA_AUDITING") return "success";
+      if (status === "WAIT_USER_CONFIRM") return "warning";
+      if (status === "SUCCESS") return "primary";
+      if (status === "ERROR") return "primary";
+      return "danger";
+    },
+    openAudit(row) {
+      this.showList = { ...row };
+      this.audit = "";
+      this.roleModalVisible = true;
+    },
+    openQuery(row) {
+      this.showList = { ...row };
+      this.modalTitle = "查看";
+      this.queryModalVisible = true;
+    },
     submitRole(res) {
       const params = {};
       params.applyId = this.showList.id;
@@ -319,33 +287,36 @@ export default {
       this.searchForm.startDate = "";
       this.searchForm.endDate = "";
       this.searchForm.memberName = "";
-      // 重新加载数据
       this.getDataList();
     },
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order === "normal") {
+      this.searchForm.sort = e.prop || e.key;
+      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      if (!e.order) {
         this.searchForm.order = "";
       }
       this.getDataList();
     },
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      if (this.$refs.table) {
+        this.$refs.table.clearSelection();
+      }
     },
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.searchForm.startDate = v[0];
         this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
       }
     },
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据 请自行修改接口
       getUserWithdrawApply(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -353,8 +324,6 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
   },
   mounted() {
@@ -374,4 +343,3 @@ export default {
   color: #dcdee2;
 }
 </style>
-