kd-aiot-frontend-hr-H5/src/pages/apply/form.vue

<template>
  <view class="page-no-tab">
    <view class="form-intro">
      <ModuleIcon :icon="config.icon" :color="config.color" soft />
      <view><text class="intro-title">{{ config.title }}</text><text class="intro-sub">{{ config.subtitle }}</text>
      </view>
    </view>
    <view class="steps">
      <view class="step active">
        <view>1</view><text>填写申请</text>
      </view>
      <view class="step-line"></view>
      <view class="step">
        <view>2</view><text>主管审批</text>
      </view>
      <view class="step-line"></view>
      <view class="step">
        <view>3</view><text>完成</text>
      </view>
    </view>
    <view class="form-card card section">
      <view class="field"><text class="label">申请人</text>
        <view class="readonly">
          <view class="avatar small-avatar">{{ currentUser.initials }}</view><text>{{ currentUser.name }} · {{
            currentUser.department }}</text>
        </view>
      </view>
      <view class="divider"></view>
      <view v-if="type === 'leave'" class="field press" @click="chooseLeave"><text
          class="label required">请假类型</text><text :class="form.leaveType ? 'value' : 'placeholder'">{{
            form.leaveType || "请选择"
          }}</text><text class="arrow">›</text></view>
      <view v-if="type === 'certificate'" class="field press" @click="chooseCertificate"><text
          class="label required">证明类型</text><text :class="form.certificateType ? 'value' : 'placeholder'">{{
            form.certificateType || "请选择"
          }}</text><text class="arrow">›</text></view>
      <view v-if="type === 'check'" class="field"><text class="label required">补卡日期</text>
        <picker mode="date" :value="form.startDate" @change="(e) => (form.startDate = e.detail.value)"><text
            class="value">{{ form.startDate }}</text></picker><text class="arrow">›</text>
      </view>
      <view v-if="type === 'check'" class="divider"></view>
      <view v-if="type === 'check'" class="field press" @click="chooseRepairType"><text
          class="label required">补卡类型</text><text :class="form.repairType ? 'value' : 'placeholder'">{{
            repairTypeLabel
          }}</text><text class="arrow">›</text></view>
      <view v-if="type === 'check'" class="divider"></view>
      <view v-if="type === 'check'" class="field"><text class="label required">打卡时间</text>
        <picker mode="time" :value="form.repairTime" @change="(e) => (form.repairTime = e.detail.value)"><text
            class="value">{{ form.repairTime || "请选择" }}</text></picker><text class="arrow">›</text>
      </view>
      <template v-if="!['certificate', 'check', 'resign'].includes(type)">
        <view class="field"><text class="label required">开始日期</text>
          <picker mode="date" :value="form.startDate" @change="(e) => (form.startDate = e.detail.value)"><text
              class="value">{{ form.startDate }}</text></picker><text class="arrow">›</text>
        </view>
        <view class="divider"></view>
        <view class="field"><text class="label required">开始时间</text>
          <picker mode="time" :value="form.startTime" @change="(e) => (form.startTime = e.detail.value)"><text
              class="value">{{ form.startTime || "请选择" }}</text></picker><text class="arrow">›</text>
        </view>
        <view class="divider"></view>
        <view class="field"><text class="label required">结束日期</text>
          <picker mode="date" :value="form.endDate" @change="(e) => (form.endDate = e.detail.value)"><text
              class="value">{{ form.endDate }}</text></picker><text class="arrow">›</text>
        </view>
        <view class="divider"></view>
        <view class="field"><text class="label required">结束时间</text>
          <picker mode="time" :value="form.endTime" @change="(e) => (form.endTime = e.detail.value)"><text
              class="value">{{ form.endTime || "请选择" }}</text></picker><text class="arrow">›</text>
        </view>
      </template>
      <view class="divider"></view>
      <template v-if="type === 'resign'">
        <view class="field press" @click="chooseResignType"><text
            class="label required">离职类型</text><text :class="form.resignType ? 'value' : 'placeholder'">{{
              form.resignType || "请选择"
            }}</text><text class="arrow">›</text></view>
        <view class="divider"></view>
        <view class="field press" @click="chooseResignReason"><text
            class="label required">离职原因</text><text :class="form.resignReason ? 'value' : 'placeholder'">{{
              form.resignReason || "请选择"
            }}</text><text class="arrow">›</text></view>
        <view class="divider"></view>
        <view class="field"><text class="label required">预计离职日期</text>
          <picker mode="date" :start="todayStr" :value="form.expectedLeaveDate"
            @change="(e) => (form.expectedLeaveDate = e.detail.value)"><text
              :class="form.expectedLeaveDate ? 'value' : 'placeholder'">{{ form.expectedLeaveDate || "请选择" }}</text></picker><text class="arrow">›</text>
        </view>
        <view class="divider"></view>
        <view class="field"><text class="label">工作交接人</text>
          <input class="input-flex" v-model="form.handover" placeholder="请输入交接人姓名" maxlength="20" /></view>
        <view class="divider"></view>
        <view class="field textarea-field small-textarea"><text class="label">交接备注</text>
          <textarea v-model="form.handoverNote" maxlength="200" placeholder="交接事项、文档与客户说明（选填）" /></view>
        <view class="divider"></view>
        <view class="field check-field"><text class="label">待归还资产</text>
          <view class="check-list">
            <label v-for="opt in assetReturnOptions" :key="opt" class="check-row press" @click="toggleAssetReturn(opt)">
              <view class="checkbox" :class="{ 'is-checked': form.assetReturnList.includes(opt) }">
                <text v-if="form.assetReturnList.includes(opt)">✓</text>
              </view>
              <text>{{ opt }}</text>
            </label>
          </view>
        </view>
        <view class="divider"></view>
        <view class="field press" @click="chooseCompensation"><text
            class="label">补偿方案</text><text :class="form.compensation ? 'value' : 'placeholder'">{{
              form.compensation || "请选择"
            }}</text><text class="arrow">›</text></view>
        <view class="divider"></view>
        <view class="field switch-field"><text class="label">开具离职证明</text>
          <switch :checked="form.needCertificate" @change="(e) => (form.needCertificate = e.detail.value)" color="#1677ff" />
        </view>
        <view class="divider"></view>
      </template>
      <view class="field textarea-field"><text class="label"
          :class="{ required: type !== 'certificate' }">申请事由</text><textarea v-model="form.reason" maxlength="200"
          :placeholder="reasonPlaceholder" /><text class="counter">{{ form.reason.length }}/200</text></view>
    </view>
    <view class="form-card card section">
      <view class="field"><text class="label">附件</text>
        <view class="upload press" @click="chooseImage"><text class="plus">＋</text><text>拍照或上传</text></view>
        <view v-if="attachmentSummary" class="file-name">{{ attachmentSummary }}</view>
      </view>
      <view class="divider"></view>
      <view class="field"><text class="label">审批人</text>
        <view class="approver approver-auto">
          <view class="avatar approve-avatar auto">·</view><text>系统自动匹配</text><text class="muted">（直属主管 · 由 BPM
            引擎分配）</text>
        </view>
      </view>
    </view>
    <view class="bottom-action safe-bottom"><button class="draft-btn" @click="saveDraft">存草稿</button><button
        class="submit-btn" @click="submit">提交申请</button></view>
  </view>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import ModuleIcon from "@/components/ModuleIcon.vue";
import { applicationTypes } from "@/data/mock";
import { useAuthGuard } from "@/hooks/useAuthGuard";
import { useCurrentUser } from "@/hooks/useCurrentUser";
import {
  addApplication,
  getDraft,
  removeDraft,
  saveDraft as persistDraft,
} from "@/utils/storage";
import {
  ATTENDANCE_APPLY_TYPE_MAP,
  REPAIR_TYPE_LABEL,
  REPAIR_TYPE_OPTIONS,
  buildAttendancePayload,
  submitAttendanceApplication,
} from "@/api/attendance";
import {
  buildResignationPayload,
  registerSubmittedResignation,
  submitResignationApplication,
} from "@/api/resign";
import { uploadAttachment } from "@/api/file";
import { getServerConfig } from "@/utils/auth";
const type = ref("leave");
useAuthGuard();
const currentUser = useCurrentUser();
const form = reactive({
  leaveType: "",
  certificateType: "",
  startDate: "2026-08-06",
  startTime: "08:30",
  endDate: "2026-08-06",
  endTime: "17:30",
  reason: "",
  attachments: [],
  repairType: "",
  repairTime: "",
  resignType: "",
  resignReason: "",
  expectedLeaveDate: "",
  handover: "",
  handoverNote: "",
  assetReturnList: [],
  compensation: "",
  needCertificate: true,
});
const config = computed(
  () => applicationTypes[type.value] || applicationTypes.leave,
);
const reasonPlaceholder = computed(() =>
  type.value === "certificate"
    ? "请填写证明用途（选填）"
    : type.value === "check"
      ? "请说明补卡原因（如：临时接待客户忘记打卡）"
      : "请简要说明申请原因",
);
const repairTypeLabel = computed(() =>
  form.repairType ? REPAIR_TYPE_LABEL[form.repairType] : "请选择",
);
const attachmentSummary = computed(() => {
  const list = Array.isArray(form.attachments) ? form.attachments : [];
  if (!list.length) return "";
  const uploading = list.filter((a) => a && a.status === "uploading").length;
  const failed = list.filter((a) => a && a.status === "failed").length;
  const parts = [`已选择 ${list.length} 张图片`];
  if (uploading) parts.push(`${uploading} 上传中`);
  if (failed) parts.push(`${failed} 失败`);
  return parts.join(" · ");
});
function syncType(o = {}) {
  const next = o.type || "leave";
  if (type.value !== next) resetForm();
  type.value = next;
  uni.setNavigationBarTitle({ title: config.value.title });
  const draft = getDraft(next);
  if (draft) Object.assign(form, draft);
  // 草稿兼容：
  //   - 老草稿没有 startTime / endTime 字段 → 兜底默认值，避免 validate 误报
  //   - 老草稿字段叫 attachment（字符串）→ 已不在 form 上，忽略
  //   - 老格式（新字段 attachments）但值为字符串数组（重命名前的中间态）→ 清空让用户重选
  //   - 跨会话遗留的 uploading 状态 → 视为失败（upload 早已中断）
  if (!form.startTime) form.startTime = "08:30";
  if (!form.endTime) form.endTime = "17:30";
  if (!Array.isArray(form.attachments)) {
    form.attachments = [];
  } else if (form.attachments.some((a) => typeof a === "string")) {
    form.attachments = [];
  } else {
    form.attachments = form.attachments.map((a) =>
      a && a.status === "uploading"
        ? { ...a, status: "failed", error: "上次会话未完成" }
        : a,
    );
  }
}
onLoad(syncType);
onShow(() => {
  const pages = getCurrentPages();
  syncType(pages[pages.length - 1]?.options || {});
});
function syncHash() {
  if (typeof location === "undefined") return;
  const match = location.hash.match(/[?&]type=([^&]+)/);
  if (match) syncType({ type: decodeURIComponent(match[1]) });
}
onMounted(() => {
  syncHash();
  if (typeof window !== "undefined")
    window.addEventListener("hashchange", syncHash);
});
onBeforeUnmount(() => {
  if (typeof window !== "undefined")
    window.removeEventListener("hashchange", syncHash);
});
function resetForm() {
  Object.assign(form, {
    leaveType: "",
    certificateType: "",
    startDate: "2026-08-06",
    startTime: "08:30",
    endDate: "2026-08-06",
    endTime: "17:30",
    reason: "",
    attachments: [],
    repairType: "",
    repairTime: "",
    resignType: "",
    resignReason: "",
    expectedLeaveDate: "",
    handover: "",
    handoverNote: "",
    assetReturnList: [],
    compensation: "",
    needCertificate: true,
  });
}
function chooseLeave() {
  uni.showActionSheet({
    itemList: ["年假", "事假", "病假", "调休假", "婚假"],
    success: (r) =>
      (form.leaveType = ["年假", "事假", "病假", "调休假", "婚假"][r.tapIndex]),
  });
}
function chooseCertificate() {
  uni.showActionSheet({
    itemList: ["在职证明", "收入证明", "离职证明"],
    success: (r) =>
      (form.certificateType = ["在职证明", "收入证明", "离职证明"][r.tapIndex]),
  });
}
function chooseRepairType() {
  const itemList = REPAIR_TYPE_OPTIONS.map((k) => REPAIR_TYPE_LABEL[k]);
  uni.showActionSheet({
    itemList,
    success: (r) => (form.repairType = REPAIR_TYPE_OPTIONS[r.tapIndex]),
  });
}

const todayStr = new Date().toISOString().slice(0, 10);
const assetReturnOptions = ['工牌', '门禁卡', '办公电脑', '测量仪器', '其他'];

function toggleAssetReturn(opt) {
  const list = Array.isArray(form.assetReturnList) ? form.assetReturnList : [];
  const idx = list.indexOf(opt);
  if (idx >= 0) list.splice(idx, 1);
  else list.push(opt);
  form.assetReturnList = [...list];
}

function chooseResignType() {
  const items = ['主动离职', '协商离职', '辞退', '合同到期', '退休'];
  uni.showActionSheet({
    itemList: items,
    success: (r) => (form.resignType = items[r.tapIndex]),
  });
}

function chooseResignReason() {
  const items = ['个人发展', '家庭原因', '薪资待遇', '职业转型', '公司调整', '健康原因'];
  uni.showActionSheet({
    itemList: items,
    success: (r) => (form.resignReason = items[r.tapIndex]),
  });
}

function chooseCompensation() {
  const items = ['N+1', 'N', '协商一致', '不适用'];
  uni.showActionSheet({
    itemList: items,
    success: (r) => (form.compensation = items[r.tapIndex]),
  });
}
function chooseImage() {
  uni.chooseImage({
    count: 9,
    success: (r) => {
      const paths = (r.tempFilePaths || []).filter(Boolean);
      if (!paths.length) return;
      // 立即把每张图作为 uploading 项加入列表，触发并行上传，
      // 状态变化（success/failed）由 Promise 回调直接写回对应条目。
      const items = paths.map((p) => ({ localPath: p, status: "uploading" }));
      form.attachments = [...form.attachments, ...items];
      items.forEach((item) => {
        uploadAttachment(item.localPath, "hr_attendance")
          .then((file) => {
            item.status = "success";
            item.id = String(file?.id ?? "");
          })
          .catch((e) => {
            item.status = "failed";
            item.error = e?.message || "上传失败";
            uni.showToast({ title: item.error, icon: "none" });
          });
      });
    },
  });
}
function saveDraft() {
  persistDraft(type.value, form);
  uni.showToast({ title: "草稿已保存", icon: "success" });
}
function validate() {
  if (type.value === "leave" && !form.leaveType) return "请选择请假类型";
  if (type.value === "certificate" && !form.certificateType)
    return "请选择证明类型";
  if (type.value === "check") {
    if (!form.startDate) return "请选择补卡日期";
    if (!form.repairType) return "请选择补卡类型";
    if (!form.repairTime) return "请选择打卡时间";
    if (!form.reason) return "请填写补卡原因";
  }
  if (type.value === "resign") {
    if (!form.resignType) return "请选择离职类型";
    if (!form.resignReason) return "请选择离职原因";
    if (!form.expectedLeaveDate) return "请选择预计离职日期";
    if (form.expectedLeaveDate < todayStr) return "预计离职日期不能早于今天";
    if (!form.reason) return "请填写申请事由";
    return "";
  }
  if (!["certificate", "check", "resign"].includes(type.value)) {
    if (!form.startDate) return "请选择开始日期";
    if (!form.endDate) return "请选择结束日期";
    if (!form.startTime) return "请选择开始时间";
    if (!form.endTime) return "请选择结束时间";
    if (form.endDate < form.startDate) return "结束日期不能早于开始日期";
    if (form.endDate === form.startDate && form.endTime <= form.startTime)
      return "结束时间不能早于或等于开始时间";
  }
  if (!form.reason && type.value === "certificate") return "";
  if (!form.reason && !["certificate", "check", "resign"].includes(type.value))
    return "请填写申请事由";
  return "";
}
async function submit() {
  const error = validate();
  if (error) return uni.showToast({ title: error, icon: "none" });

  // 服务器模式 + 考勤类申请（请假 / 加班 / 出差 / 外出 / 补卡 / 调班）
  // → POST /hr/attendance/applications（附件已在 chooseImage 时上传完成）
  if (
    ATTENDANCE_APPLY_TYPE_MAP[type.value] &&
    getServerConfig().mode === "server"
  ) {
    try {
      // 等待所有进行中的上传完成（chooseImage 触发的后台任务）
      const pending = form.attachments.filter(
        (a) => a && a.status === "uploading",
      );
      if (pending.length) {
        uni.showLoading({ title: `附件上传中（${pending.length}）` });
        await Promise.all(
          pending.map((item) =>
            uploadAttachment(item.localPath, "hr_attendance")
              .then((file) => {
                item.status = "success";
                item.id = String(file?.id ?? "");
              })
              .catch((e) => {
                item.status = "failed";
                item.error = e?.message || "上传失败";
                throw e;
              }),
          ),
        );
        uni.hideLoading();
      }

      // 有失败的附件就拦截提交
      const failed = form.attachments.filter((a) => a && a.status === "failed");
      if (failed.length) {
        return uni.showToast({
          title: `有 ${failed.length} 张附件上传失败，请重新选择`,
          icon: "none",
        });
      }

      const attachmentFileIds = form.attachments
        .filter((a) => a && a.status === "success" && a.id)
        .map((a) => a.id)
        .join(",");

      uni.showLoading({ title: "提交中..." });
      const payload = buildAttendancePayload(
        form,
        type.value,
        currentUser,
        attachmentFileIds,
      );
      if (!payload) {
        uni.hideLoading();
        return uni.showToast({
          title: "申请类型不支持",
          icon: "none",
        });
      }
      await submitAttendanceApplication(payload);
      uni.hideLoading();
    } catch (e) {
      uni.hideLoading();
      return uni.showToast({
        title: e.message || "申请提交失败",
        icon: "none",
      });
    }
  }

  // 服务器模式 + 离职申请
  //   → POST /hr/ess/mobile/applications/resignation
  //   → 部门和申请人由服务端当前任职确定，前端只送表单字段
  //   → 响应 data 是后端新建单据主键，作为本地申请 id 保持两端一致
  let serverApplicationId = null;
  if (type.value === "resign") {
    try {
      uni.showLoading({ title: "提交中..." });
      const payload = buildResignationPayload(form);
      if (!payload) throw new Error("申请参数为空");
      serverApplicationId =
        getServerConfig().mode === "server"
          ? await submitResignationApplication(payload)
          : null;
      // 登记离职单：服务器模式记住服务端主键，演示模式落一条本地离职单，
      // 使「人事管理 → 离职管理」能直接看到这条申请并继续交接 / 归档
      registerSubmittedResignation({ serverId: serverApplicationId, form });
      uni.hideLoading();
    } catch (e) {
      uni.hideLoading();
      return uni.showToast({
        title: e.message || "离职申请提交失败",
        icon: "none",
      });
    }
  }

  addApplication({
    ...(serverApplicationId ? { id: serverApplicationId } : {}),
    type: config.value.title,
    summary: summary(),
    reason: form.reason || "用于个人材料办理",
    color: config.value.color,
    metadata: type.value === "resign" ? {
      employeeId: currentUser.id,
      resignType: form.resignType,
      resignReason: form.resignReason,
      expectedLeaveDate: form.expectedLeaveDate,
      handover: form.handover,
      handoverNote: form.handoverNote,
      assetReturnList: form.assetReturnList,
      compensation: form.compensation,
      needCertificate: form.needCertificate,
      source: serverApplicationId ? "server" : "demo",
      serverId: serverApplicationId || undefined,
    } : undefined,
  });
  removeDraft(type.value);

  // 补卡：返回上一页（考勤页），由 onShow 重新拉月度 + 当日详情
  if (type.value === "check") {
    const pages = getCurrentPages();
    if (pages.length > 1) {
      uni.showToast({ title: "补卡申请已提交", icon: "success" });
      setTimeout(() => uni.navigateBack({ delta: 1 }), 600);
      return;
    }
  }

  uni.showModal({
    title: "提交成功",
    content: "申请已提交给宋慧敏审批，可在“我的申请”中查看进度。",
    showCancel: false,
    success: () => uni.redirectTo({ url: "/pages/apply/list" }),
  });
}
function summary() {
  if (type.value === "certificate") return form.certificateType || "在职证明";
  if (type.value === "check") {
    const date = form.startDate || "";
    const typeLabel = form.repairType ? REPAIR_TYPE_LABEL[form.repairType] : "补卡";
    return `${date} · ${typeLabel} · ${form.repairTime || ""}`;
  }
  if (type.value === "resign") {
    return `${form.resignType} · ${form.expectedLeaveDate}${form.handover ? " · 交接 " + form.handover : ""}`;
  }
  return `${form.startDate} 至 ${form.endDate}`;
}
</script>
<style scoped lang="scss">
.page-no-tab {
  padding-bottom: 140rpx;
}

.form-intro {
  padding: 30rpx 30rpx 22rpx;
  display: flex;
  align-items: center;
  background: #fff;
}

.form-intro>view:last-child {
  margin-left: 22rpx;
}

.intro-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
}

.intro-sub {
  display: block;
  margin-top: 9rpx;
  color: #8b939f;
  font-size: 23rpx;
}

.steps {
  height: 128rpx;
  padding: 18rpx 70rpx 12rpx;
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-top: 1rpx solid #f2f3f5;
}

.step {
  width: 92rpx;
  text-align: center;
  color: #a0a7b0;
  font-size: 20rpx;
}

.step>view {
  width: 42rpx;
  height: 42rpx;
  margin: 0 auto 8rpx;
  border-radius: 50%;
  background: #e8eaed;
  color: #8b939f;
  line-height: 42rpx;
}

.step.active {
  color: #1677ff;
}

.step.active>view {
  background: #1677ff;
  color: #fff;
}

.step-line {
  flex: 1;
  height: 2rpx;
  margin-top: 20rpx;
  background: #e1e4e8;
}

.form-card {
  overflow: hidden;
}

.field {
  position: relative;
  min-height: 108rpx;
  padding: 28rpx 28rpx;
  display: flex;
  align-items: center;
}

.label {
  width: 180rpx;
  flex-shrink: 0;
  font-size: 28rpx;
}

.required::before {
  content: "*";
  color: #ee4d4d;
  margin-right: 6rpx;
}

.readonly,
.approver {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 26rpx;
}

.small-avatar,
.approve-avatar {
  width: 52rpx;
  height: 52rpx;
  margin-right: 14rpx;
  font-size: 22rpx;
}

.value {
  color: #1f2329;
  font-size: 27rpx;
}

.placeholder {
  color: #b2b7be;
}

.arrow {
  margin-left: 13rpx;
  color: #c4c8ce;
  font-size: 38rpx;
}

.textarea-field {
  display: block;
  min-height: 260rpx;
}

.textarea-field .label {
  display: block;
  width: auto;
  margin-bottom: 20rpx;
}

.textarea-field textarea {
  width: 100%;
  height: 130rpx;
  padding: 18rpx;
  border-radius: 12rpx;
  background: #f6f7f8;
  font-size: 27rpx;
}

.counter {
  position: absolute;
  right: 45rpx;
  bottom: 38rpx;
  color: #b2b7be;
  font-size: 21rpx;
}

.upload {
  width: 160rpx;
  height: 132rpx;
  border: 1rpx dashed #cfd4da;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8b939f;
  font-size: 21rpx;
}

.plus {
  font-size: 40rpx;
  color: #9aa1aa;
}

.file-name {
  margin-left: 18rpx;
  color: #07a44d;
  font-size: 22rpx;
}

.approver-auto .auto {
  background: #eef3ff;
  color: #6b7c93;
  border: 1rpx dashed #b8c4d6;
}

.approver-auto {
  color: #8b939f;
}

.bottom-action {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  padding: 16rpx 24rpx;
  display: flex;
  gap: 18rpx;
  background: #fff;
  border-top: 1rpx solid #e8e9eb;
}

.draft-btn,
.submit-btn {
  height: 84rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.draft-btn {
  width: 210rpx;
  border: 1rpx solid #d7dce2;
  color: #4b5563;
}

.submit-btn {
  flex: 1;
  background: #1677ff;
  color: #fff;
}

@media (min-width: 800px) {
  .bottom-action {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.input-flex {
  flex: 1;
  text-align: right;
  font-size: 27rpx;
  color: #1f2329;
  padding: 0 6rpx;
}

.small-textarea {
  min-height: 180rpx;
}

.small-textarea textarea {
  height: 100rpx;
}

.check-field {
  display: block;
  align-items: flex-start;
}

.check-field .label {
  display: block;
  width: auto;
  margin-bottom: 16rpx;
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx 24rpx;
  padding-top: 4rpx;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 26rpx;
  color: #4b5563;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 1rpx solid #c4c8ce;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #fff;
  background: #fff;
  box-sizing: border-box;
}

.checkbox.is-checked {
  background: #1677ff;
  border-color: #1677ff;
}

.switch-field {
  justify-content: space-between;
}
</style>