91fans_admin/.cursor/skills/vue2-api-integration/examples.md

Examples

API 方法定义示例

import request from "@/utils/request";

export function getCheckInList(params) {
  return request({
    url: "/signin/checkin/list",
    method: "get",
    params
  });
}

export function saveCheckInConfig(data) {
  return request({
    url: "/signin/checkin/config/save",
    method: "post",
    data
  });
}

查询参数整形示例

buildQueryParams() {
  const { dateRange, status, pageNum, pageSize, keyword } = this.queryForm;
  return {
    pageNum,
    pageSize,
    keyword: keyword ? keyword.trim() : "",
    status: typeof status === "boolean" ? (status ? 1 : 0) : status,
    startTime: dateRange && dateRange.length ? dateRange[0] : "",
    endTime: dateRange && dateRange.length ? dateRange[1] : ""
  };
}

列表请求与兜底示例

async fetchList() {
  this.loading = true;
  try {
    const params = this.buildQueryParams();
    const res = await getCheckInList(params);
    const data = (res && res.data) || {};
    this.tableData = Array.isArray(data.list) ? data.list : [];
    this.total = Number(data.total || 0);
  } catch (e) {
    this.$message.error("列表加载失败，请稍后重试");
  } finally {
    this.loading = false;
  }
}

提交流程与防重复示例

async handleSubmit() {
  if (this.submitLoading) return;
  this.submitLoading = true;
  try {
    await this.$refs.formRef.validate();
    await saveCheckInConfig(this.formData);
    this.$message.success("保存成功");
    this.dialogVisible = false;
    this.fetchList();
  } catch (e) {
    this.$message.error("保存失败，请检查后重试");
  } finally {
    this.submitLoading = false;
  }
}