car-wash-java/admin-web-new/src/views/admin/user/index.vue

<script setup lang="ts">
import { reactive, onMounted, ref, nextTick } from "vue";
import { getCustomUserList, lockUser, unlockUser, getUserLockRecord } from "@/api/custom";
import { applyRefund } from "@/api/finance";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useStationScope } from "@/hooks/useStationScope";
import { ExtDLabel } from "@/components/ExtForm";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
import UserDetail from "./detail.vue";

defineOptions({
  name: "AdminUser"
});

const queryRef = ref();
const tableRef = ref();
const detailRef = ref();

const state = reactive({
  formQuery: {
    mobilePhone: "",
    userId: "",
    stationId: "",
    locked: null as number | null
  },
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false,
    columns: [
      { label: "用户ID", prop: "userId", width: 180 },
      { label: "归属站点", prop: "stationName", width: 160 },
      { label: "手机号", prop: "mobilePhone", width: 130 },
      { label: "总余额", prop: "balance", width: 120 },
      { label: "充值金额", prop: "rechargeAmount", width: 120 },
      { label: "洗车次数", prop: "washTimes", width: 90 },
      { label: "消费总额", prop: "amount", width: 120 },
      { label: "状态", prop: "status", width: 80 },
      { label: "锁定备注", prop: "lockRemark", width: 150 },
      { label: "锁定次数", prop: "lockTimes", width: 90 },
      { label: "锁定时间", prop: "lockTime", width: 170 },
      { label: "注册时间", prop: "registerTime", width: 170 }
    ]
  },
  lockDialog: {
    visible: false,
    loading: false,
    userId: null as number | null,
    mobilePhone: "",
    lockRemark: "",
    lockNotice: ""
  },
  lockRecordDialog: {
    visible: false,
    loading: false,
    mobilePhone: "",
    list: [] as Array<any>
  }
});

//站点筛选与全局当前站点联动（回调懒引用，规避 loadData 声明顺序的 TDZ 错误）
useStationScope(state.formQuery, (refresh?: boolean) => loadData(refresh));

onMounted(() => {
  loadData();
  nextTick(() => {
    const bodyHeight = document.body.clientHeight;
    const queryHeight = queryRef.value?.$el?.clientHeight || 0;
    state.tableData.height = bodyHeight - queryHeight - 230;
  });
});

const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageNum = 1;
  }
  state.tableData.loading = true;
  const params: any = { ...state.formQuery, ...state.pageQuery };
  //锁定状态未选时不传参，避免空值被绑定为 Integer 报错
  if (params.locked === "" || params.locked === null || params.locked === undefined) {
    delete params.locked;
  }
  getCustomUserList(params)
    .then((res: any) => {
      const { list, total } = res || {};
      state.tableData.data = list || [];
      state.pageQuery.total = total || 0;
    })
    .catch(() => {
      state.tableData.data = [];
    })
    .finally(() => {
      state.tableData.loading = false;
    });
};

const handleSizeChange = (size: number) => {
  state.pageQuery.pageSize = size;
  loadData(true);
};

const handleCurrentChange = (page: number) => {
  state.pageQuery.pageNum = page;
  loadData();
};

const handleSearch = () => {
  loadData(true);
};

const handleReset = () => {
  state.formQuery = {
    mobilePhone: "",
    userId: "",
    stationId: "",
    locked: null
  };
  loadData(true);
};

const formatMoney = (value: number) => {
  if (value === null || value === undefined) return "¥0.00";
  return `¥${(value / 100).toFixed(2)}`;
};

const handleDetail = (row: any) => detailRef.value?.open(row);

const handleUserRefundApply = (row: any) => {
  ElMessageBox.confirm("确认执行本操作吗？", "退款申请", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    ElMessageBox.prompt("请输入退款申请原因", "退款申请", {
      confirmButtonText: "提交",
      cancelButtonText: "取消",
      inputType: "textarea",
      draggable: true
    })
      .then(({ value }) => {
        applyRefund({ userId: row.userId, reason: (value || "").trim() })
          .then(() => {
            message("退款已发起", { type: "success" });
            loadData(true);
          })
          .catch(() => {
            // 错误提示由响应拦截器统一处理
          });
      })
      .catch(() => {});
  }).catch(() => {});
};

// 打开锁定用户弹窗
const openLockDialog = (row: any) => {
  state.lockDialog.userId = row.userId;
  state.lockDialog.mobilePhone = row.mobilePhone;
  state.lockDialog.lockRemark = "";
  state.lockDialog.lockNotice = "";
  state.lockDialog.visible = true;
};

// 提交锁定
const confirmLockUser = () => {
  state.lockDialog.loading = true;
  lockUser({
    userId: state.lockDialog.userId as number,
    lockRemark: state.lockDialog.lockRemark,
    lockNotice: state.lockDialog.lockNotice.trim()
  })
    .then(() => {
      message("锁定成功", { type: "success" });
      state.lockDialog.visible = false;
      loadData(true);
    })
    .catch(() => {
      // 错误提示由响应拦截器统一处理
    })
    .finally(() => {
      state.lockDialog.loading = false;
    });
};

// 打开锁定记录弹窗
const openLockRecordDialog = (row: any) => {
  state.lockRecordDialog.mobilePhone = row.mobilePhone;
  state.lockRecordDialog.list = [];
  state.lockRecordDialog.visible = true;
  state.lockRecordDialog.loading = true;
  getUserLockRecord(row.userId)
    .then((res: any) => {
      state.lockRecordDialog.list = res || [];
    })
    .catch(() => {
      // 错误提示由响应拦截器统一处理
    })
    .finally(() => {
      state.lockRecordDialog.loading = false;
    });
};

// 解锁用户
const handleUnlockUser = (row: any) => {
  ElMessageBox.confirm(
    `确认解锁用户『${row.mobilePhone}』？解锁后该用户可正常启动设备与退款`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    unlockUser(row.userId).then(() => {
      message("解锁成功", { type: "success" });
      loadData(true);
    });
  }).catch(() => {});
};

const isMoneyField = (prop: string) => {
  return ["balance", "rechargeAmount", "amount"].includes(prop);
};
</script>

<template>
  <div class="page-container">
    <el-card shadow="hover">
      <template #header>
        <span class="card-header">用户管理</span>
      </template>
      <el-form
        ref="queryRef"
        :model="state.formQuery"
        inline
        class="search-form"
      >
        <el-form-item label="用户ID">
          <el-input
            v-model="state.formQuery.userId"
            placeholder="请输入用户ID"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="state.formQuery.mobilePhone"
            placeholder="请输入手机号"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="锁定状态">
          <el-select
            v-model="state.formQuery.locked"
            placeholder="请选择锁定状态"
            clearable
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option label="已锁定" :value="1" />
            <el-option label="未锁定" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon('ri/search-line')"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button
            :icon="useRenderIcon('ri/refresh-line')"
            @click="handleReset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="tableRef"
        v-loading="state.tableData.loading"
        :data="state.tableData.data"
        :height="state.tableData.height"
        border
        stripe
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column
          v-for="col in state.tableData.columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <template v-if="isMoneyField(col.prop)">
              {{ formatMoney(row[col.prop]) }}
            </template>
            <template v-else-if="col.prop === 'status'">
              <el-tag v-if="row.lockNotice" type="danger" effect="dark" size="small">锁定</el-tag>
              <ExtDLabel v-else type="User.status" :model-value="row.status" />
            </template>
            <template v-else-if="col.prop === 'lockTimes'">
              <el-button
                v-if="row.lockTimes > 0"
                link
                type="danger"
                size="small"
                @click="openLockRecordDialog(row)"
              >
                {{ row.lockTimes }}
              </el-button>
              <span v-else>0</span>
            </template>
            <template v-else>
              {{ row[col.prop] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleDetail(row)">详情</el-button>
            <el-button type="primary" link size="small" @click="handleUserRefundApply(row)">
              申请退款
            </el-button>
            <el-button
              v-if="!row.lockNotice"
              v-auth="'user.lock'"
              type="danger"
              link
              size="small"
              @click="openLockDialog(row)"
            >
              锁定
            </el-button>
            <el-button
              v-else
              v-auth="'user.lock'"
              type="success"
              link
              size="small"
              @click="handleUnlockUser(row)"
            >
              解锁
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="state.pageQuery.pageNum"
          v-model:page-size="state.pageQuery.pageSize"
          :total="state.pageQuery.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 锁定用户弹窗 -->
    <el-dialog
      v-model="state.lockDialog.visible"
      :title="`锁定用户『${state.lockDialog.mobilePhone || ''}』`"
      width="520px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form label-width="90px" size="default">
        <el-form-item label="锁定备注">
          <el-input
            v-model="state.lockDialog.lockRemark"
            type="textarea"
            :rows="2"
            maxlength="200"
            show-word-limit
            placeholder="仅平台人员可见，用于记录锁定原因"
          />
        </el-form-item>
        <el-form-item label="提示内容" required>
          <el-input
            v-model="state.lockDialog.lockNotice"
            type="textarea"
            :rows="3"
            maxlength="200"
            show-word-limit
            placeholder="用户启动设备时强制弹出展示"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="state.lockDialog.visible = false">取 消</el-button>
        <el-button
          :loading="state.lockDialog.loading"
          :disabled="!state.lockDialog.lockNotice || !state.lockDialog.lockNotice.trim()"
          type="danger"
          @click="confirmLockUser"
        >
          确定锁定
        </el-button>
      </template>
    </el-dialog>

    <!-- 锁定记录弹窗 -->
    <el-dialog
      v-model="state.lockRecordDialog.visible"
      :title="`锁定记录『${state.lockRecordDialog.mobilePhone || ''}』`"
      width="900px"
      append-to-body
    >
      <el-table
        border
        stripe
        :data="state.lockRecordDialog.list"
        v-loading="state.lockRecordDialog.loading"
        max-height="420"
      >
        <template #empty>
          <el-empty description="暂无锁定记录" />
        </template>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="锁定时间" prop="lockTime" width="160" align="center" />
        <el-table-column label="锁定人" prop="lockOperator" width="110" show-overflow-tooltip />
        <el-table-column
          label="锁定备注（仅平台人员可见）"
          prop="lockRemark"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column label="提示内容" prop="lockNotice" min-width="160" show-overflow-tooltip />
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.status === 1" type="danger" effect="dark" size="small">锁定中</el-tag>
            <el-tag v-else type="info" size="small">已解锁</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="解锁信息" width="200">
          <template #default="{ row }">
            <div v-if="row.unlockTime">{{ row.unlockTime }}</div>
            <div v-if="row.unlockOperator" class="unlock-operator">
              解锁人：{{ row.unlockOperator }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="state.lockRecordDialog.visible = false">关 闭</el-button>
      </template>
    </el-dialog>

    <UserDetail ref="detailRef" />
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 15px;
}

.card-header { font-size: 16px; font-weight: 600; }

.search-form {
  margin-bottom: 15px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.unlock-operator {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}
</style>