JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <view class="inspect-form-content commonPageLRpadding" ref="formContentRef">

        <up-form label-position="left" :model="inspectForm" ref="inspectFormRef" label-width="140rpx">
          <!-- ========== 动态表单区域 ========== -->
          <template v-for="item in dynamicFields" :key="item.fieldCode">

            <up-form-item :label="item.fieldName" :prop="item.fieldCode" class="form-item"
              @click="openPickerIfNeeded(item)">

              <!-- type 1 数值：u-number-box，最多2位小数，min=0，max取item.length -->

              <view v-if="item.fieldType === 1" class="number-box-wrap">

                <u-number-box v-model="inspectForm[item.fieldCode]" min="1" :step="1"
                  :max="item.length ? 10 ** Number(item.length) - 1 : null"
                  :placeholder="`请输入${item.fieldName}${item.unit} `" @change="valChange(item)" @blur="valChange(item)"
                  class="large-number-box">
                </u-number-box>

                <text class="unit-text" v-if="item.unit">{{ item.unit }}</text>
              </view>

              <!-- type 2 文本 -->
              <up-input v-else-if="item.fieldType === 2" v-model="inspectForm[item.fieldCode]"

                :maxlength="item.length || 50" :placeholder="`请输入${item.fieldName}`"></up-input>

              <!-- 分层选项（3枚举/6多选，且选项带 path）：统一只读入口，点开分组弹层选择。
                   必须放在下面的 3/6 分支之前——v-else-if 短路，放后面就永远进不来 -->
              <up-input v-else-if="isGroupedField(item)" v-model="labelMap[item.fieldCode]" readonly

                disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">

                <template #right>
                  <up-icon name="arrow-right" size="16"></up-icon>
                </template>
              </up-input>

              <!-- type3 枚举：多选 multiple=1 使用复选框组（name 必须是 value，提交按逗号拼接 value，与值格式契约一致） -->
              <u-checkbox-group v-else-if="item.fieldType === 3 && item.multiple === 1"

                v-model="inspectForm[item.fieldCode]">

                <u-checkbox v-for="opt in item.selectOptions" :key="opt.value" :label="opt.label" :name="opt.value">

                </u-checkbox>
              </u-checkbox-group>
              <!-- type3 枚举：单选 用up-action-sheet 底部选择 -->
              <up-input v-else-if="item.fieldType === 3" v-model="labelMap[item.fieldCode]" readonly

                disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">

                <template #right>
                  <up-icon name="arrow-right" size="16"></up-icon>
                </template>
              </up-input>

              <!-- type4 日期时间 -->
              <view v-else-if="item.fieldType === 4" @click.stop="openDatePicker(item)" class="date-input-wrap">
                <up-input v-model="inspectForm[item.fieldCode]" disabled placeholder="点击选择时间"></up-input>
              </view>
              <!-- type5 布尔单选 是/否 【重点修复】增加空label=""占位项 -->
              <up-radio-group v-else-if="item.fieldType === 5" v-model="inspectForm[item.fieldCode]">
                <up-radio label="是" name="是"></up-radio>
                <up-radio label="否" name="否"></up-radio>
              </up-radio-group>
              <!-- type6 多选：复选框组；选项来源可为静态/字典/物料/数据表/SQL/接口（物料不再占用 6 号） -->
              <view v-else-if="item.fieldType === 6" class="multi-wrap">
                <u-checkbox-group v-model="inspectForm[item.fieldCode]" @change="onMultiChange(item)">
                  <u-checkbox v-for="opt in item.selectOptions" :key="opt.value" :label="opt.label" :name="opt.value"

                    :disabled="isOptionLocked(item, opt)">

                  </u-checkbox>
                </u-checkbox-group>
                <!-- 有限上限时提示已选数。上限靠「禁用未选中项」实现：u-checkbox 的勾选态在组件内部，回写 v-model 撤不掉 -->
                <text v-if="multiHint(item)" class="multi-hint">{{ multiHint(item) }}</text>
                <!-- needQuantity：已选项各配一个数量输入，值按 {value,label,quantity} 提交。此形态仅记录用量、不扣库存 -->
                <view v-if="needQty(item)" class="qty-list">
                  <view v-for="opt in checkedOptions(item)" :key="opt.value" class="qty-row">
                    <text class="qty-label">{{ opt.label }}</text>
                    <u-number-box v-model="qtyMap[item.fieldCode][opt.value]" :min="0" :step="1"></u-number-box>
                  </view>
                </view>
              </view>
              <!-- type7 图片：多张上传，提交 JSON 数组(URL) -->

              <!-- type7 图片：多张上传，提交 JSON 数组(URL) -->
              <!-- type7 图片：多张上传，提交 JSON 数组(URL)【对齐工单上传组件】 -->
              <up-upload v-else-if="item.fieldType === 7" :file-list="fileListMap[item.fieldCode] || []"
                @after-read="(event) => uploadFieldFiles(item, event)" @delete="(event) => deleteFieldFile(item, event)"
                multiple width="70" height="70" :sizeType="['compressed']" :max-count="pickCountOf(item, 5)"
                upload-text="选择图片" del-color="#ff4d4f" class="upload-wrap"></up-upload>

              <!-- type8 附件：微信只能从聊天记录选文件（无通用文件选择器），提交 JSON 数组(URL) -->

              <view v-else-if="item.fieldType === 8" class="file-wrap">

                <view v-for="(file, idx) in fileListMap[item.fieldCode] || []" :key="idx" class="file-row">

                  <text class="file-name">{{ file.name || fileNameOf(file.url) }}</text>

                  <text class="file-del" @click.stop="deleteFieldFile(item, { index: idx })">删除</text>

                </view>

                <up-button size="small" type="primary" plain :text="fileButtonText(item)"

                  @click.stop="chooseFieldFiles(item)"></up-button>

              </view>

              <!-- type9 关联记录：底部选择，提交 JSON 数组 [{id,name}] -->
              <up-input v-else-if="item.fieldType === 9" v-model="labelMap[item.fieldCode]" readonly

                disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">

                <template #right>
                  <up-icon name="arrow-right" size="16"></up-icon>
                </template>
              </up-input>

              <!-- type10 链接：URL 输入，提交裸 URL -->
              <up-input v-else-if="item.fieldType === 10" v-model.trim="inspectForm[item.fieldCode]"

                :placeholder="`请输入${item.fieldName}（http/https 开头）`"></up-input>

              <!-- type11 地理位置：uni.chooseLocation 选点，提交 JSON 对象 {lng,lat,address} -->
              <up-input v-else-if="item.fieldType === 11" v-model="labelMap[item.fieldCode]" readonly

                disabled-color="#ffffff" :placeholder="`点击选择${item.fieldName}`" border="none">

                <template #right>
                  <up-icon name="arrow-right" size="16"></up-icon>
                </template>
              </up-input>

              <!-- 物料（fieldType=3 + optionSource=3）：额外收领用数量；数量>0 才提交 materialId/materialName/quantity 触发扣库存。
                   必须放在 v-if/v-else-if 链末尾——插在中间会打断链导致编译报错 -->
              <view v-if="item.fieldType === 3 && item.optionSource === 3" class="qty-row qty-row-material">

                <text class="qty-label">领用数量</text>

                <u-number-box v-model="qtyMap[item.fieldCode]" :min="0" :step="1"></u-number-box>

              </view>

            </up-form-item>
          </template>
          <!-- ========== 动态表单结束 ========== -->

          <!-- 1. 养护描述（文本域） -->

          <!-- <up-form-item prop="remark" class="form-item">

            <up-textarea v-model.trim="inspectForm.remark" placeholder="请输入养护描述" maxlength="200" count></up-textarea>

          </up-form-item> -->

          <!-- 2. 上传图片 -->

          <!-- <up-form-item label="上传图片" prop="images" required class="form-item">

            <up-upload :file-list="imagesList" @after-read="(event) => uploadImgs(event)"
                       @delete="(event) => deleteImg(event)" @on-exceed="handleExceed" multiple :max-count="3" upload-text="选择图片"
                       del-color="#ff4d4f" class="upload-wrap"></up-upload>

          </up-form-item> -->

        </up-form>
      </view>

      <!-- 底部双按钮 -->
      <view v-if="dynamicFields.length === 0" class="empty-field-tip">
        <text>请去平台配置业务类型字段</text>
      </view>
      <view class="fixed-bottom-btn-wrap" v-if="dynamicFields.length > 0">
        <view class="btn-item btn-left" @click="submitInspect">

          <text>暂存</text>

        </view>
        <view class="btn-item btn-right" @click="submitAndFinish">
          <text>提交并结束本次任务</text>
        </view>
      </view>

      <!-- uview-plus 日期时间选择器（全局复用） -->
      <up-datetime-picker :show="datePickerShow" v-model="datePickerValue" mode="datetime" close-on-click-overlay

        @confirm="onDateConfirm" @cancel="onDateClose" @close="onDateClose"></up-datetime-picker>

      <!-- ActionSheet 底部选择弹窗 -->

      <up-action-sheet :show="actionSheet.show" :actions="actionSheet.options" @select="onActionSheetSelect"

        @close="actionSheet.show = false" cancel-text="取消"></up-action-sheet>

      <!-- 分层选项选择器（选项带 path 的动态字段） -->
      <grouped-picker :show="groupPicker.show" :title="groupPicker.title" :options="groupPicker.options"

        :multiple="groupPicker.multiple" :max-count="groupPicker.maxCount" :need-quantity="groupPicker.needQuantity"
        :value="groupPicker.value" :container-width="groupPicker.containerWidth" :quantities="groupPicker.quantities"
        @update:show="groupPicker.show = $event" @confirm="onGroupedConfirm"></grouped-picker>

    </view>
  </template>
  

  <script lang="ts">
  import { uploadImages } from '@/common/utils/upload'

  import { maintainCreate, maintainCreateFinish } from "@/api/maintain-manage/maintain-manage"

  import { getByType, getOptionsByCode, getMaterialByCode, workRecordSubmit } from "@/api/common"

  export default {
    data() {
      return {

        commitId:'',

        submitting: false,

        imagesList: [],

        initProgress: 0,
        inspectForm: {
          remark: '',

        },

        // ========== 新增：用来存放展示文本label的映射对象 ==========

        labelMap: {},

        // 类型7图片/8附件的每字段文件列表（fieldCode -> u-upload 兼容数组 {url,status,name}）

        fileListMap: {},

        // 数量收集：类型6+needQuantity 为 {选项值: 数量}；类型3物料为标量（领用数量）

        qtyMap: {},

        paramsOptins: {},
        // 幂等流水号：本次填报页面生命周期内保持不变，重复提交（如网络超时后重试）只会落一条记录

        clientSeq: '',

        // 养护计划本体的 commit.id：取到后缓存，重试时不再重复创建养护记录

        commitId: null,

        inspectFormRules: {
          images: [
            {
              required: true,

              message: '请上传图片',

              trigger: 'change',
              validator: (rule, value, callback) => {

                const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
                const imgCount = this.imagesList.filter(item => item.status === 'success').length
                if (!hasSuccessImg || imgCount < 1) {
                  callback(new Error('最少需要上传1张图片'))
                } else if (imgCount > 3) {
                  callback(new Error('最多只能上传3张图片'))

                } else {
                  callback()
                }
              }
            }

          ],

        },

        // 动态字段列表
        dynamicFields: [] as any[],
        // 日期时间选择器

        datePickerShow: false,

        datePickerValue: Number(new Date()),

        currentDateFieldCode: '',

        // actionSheet配置
        actionSheet: {
          show: false,
          fieldCode: '', // 当前操作的字段
          options: [] as any[],
          fieldItem: null // 保存当前点击的field对象，用于后面查找label
        },
        // 分层选项选择器配置（选项带 path 的 3/6 字段用，其余字段仍走上面的 actionSheet / 内联复选框）
        groupPicker: {

          show: false,
          fieldCode: '',

          fieldItem: null as any,
          title: '',
          options: [] as any[],
          multiple: false,
          maxCount: Infinity,
          needQuantity: false,
          value: '' as any,
          quantities: {} as any,

          // 数量单位不再传进弹层（原型列表行右侧只有步进器，没有单位），页面行内仍显示 item.unit

          unit: '',
          // 新增：由父页面点击时赋值

          containerWidth: 0

        }
      }
    },
    onLoad(option) {
      console.log('页面参数：', option)

      this.paramsOptins = option

      const { businessType, planTypeId,commitId } = option

      this.loadDynamicFields(businessType, planTypeId)

      if(commitId){
          this.commitId = commitId
      }

    },
    onReady() {
      this.$refs.inspectFormRef.setRules(this.inspectFormRules)

      console.log('巡查表单规则初始化完成')

    },
    methods: {

      // number-box数值变更回调

      valChange(item) {

        // 数值修改后触发表单校验

        this.$refs.inspectFormRef.validateField(item.fieldCode)
      },

      // ========== 日期时间相关方法 ==========

      openDatePicker(field) {

        console.log('打开日期选择器', field)

        this.currentDateFieldCode = field.fieldCode
        const val = this.inspectForm[field.fieldCode]

        this.datePickerValue = val ? new Date(val).getTime() : Number(new Date())

        this.datePickerShow = true
        uni.hideKeyboard()
      },
      onDateConfirm(e) {
        const ts = e.value
        const d = new Date(ts)
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        const h = String(d.getHours()).padStart(2, '0')
        const mi = String(d.getMinutes()).padStart(2, '0')
        const s = String(d.getSeconds()).padStart(2, '0')
        this.inspectForm[this.currentDateFieldCode] = `${y}-${m}-${day} ${h}:${mi}:${s}`
        this.datePickerShow = false
        this.$refs.inspectFormRef.validateField(this.currentDateFieldCode)
      },
      onDateClose() {
        this.datePickerShow = false
      },

      /**
       * 点击表单项时按类型决定弹出哪个选择器：
       * 分层选项(带 path 的 3/6) → 分组弹层；3 枚举(单选) / 9 关联记录 → 底部 actionSheet；11 地理位置 → 微信地图选点
       * 其余类型（多选、图片、附件、可输入的链接）不在这里处理，由控件自身响应
       */
      openPickerIfNeeded(item: any) {
        // 分层选项优先：它的只读入口是靠本方法打开弹层的（模板里 3/6 的原有分支已被 isGroupedField 挡在前面）
        if (this.isGroupedField(item)) {
          return this.openGroupedPicker(item)
        }
        // 条件与模板互补：模板用 multiple === 1 渲染复选框组，这里就必须用 !== 1 才打开弹窗，
        // 否则 multiple 为 NULL/0 的存量单选枚举会既不渲染复选框、又点不开弹窗
        if (item.fieldType === 3 && item.multiple !== 1) {
          return this.openActionSheet(item)
        }
        if (item.fieldType === 9) {
          return this.openActionSheet(item)
        }
        if (item.fieldType === 11) {
          return this.openLocation(item)
        }
      },
      /**
       * 是否为「分层选项」字段：3枚举/6多选，且选项带了后端下发的 path。
       * path 是纯增量字段，老字段（静态/字典/物料/数据表/接口/无 gN_ 别名的 SQL）没有它 → 走原路径，行为不变
       */
      isGroupedField(item: any) {
        if (!item || (item.fieldType !== 3 && item.fieldType !== 6)) {
          return false
        }
        return (item.selectOptions || []).some((opt: any) => Array.isArray(opt.path) && opt.path.length > 0)
      },
      /**
       * 打开分层选项弹层。单选/多选判定与模板同一口径：
       * 6 → 多选；3 且 multiple===1 → 多选（提交按逗号拼接）；3 其余 → 单选
       */
      openGroupedPicker(item: any) {
        const code = item.fieldCode
        const multiple = item.fieldType === 6 || item.multiple === 1
        this.groupPicker.fieldCode = code
        this.groupPicker.fieldItem = item
        this.groupPicker.title = item.fieldName
        this.groupPicker.options = item.selectOptions || []
        this.groupPicker.multiple = multiple
        this.groupPicker.maxCount = this.maxCountOf(item, Infinity)
        // 只有 6 多选需要每项数量；3 枚举没有这层语义
        this.groupPicker.needQuantity = item.fieldType === 6 && this.needQty(item)
        this.groupPicker.value = multiple ? (this.inspectForm[code] || []).slice() : (this.inspectForm[code] || '')
        this.groupPicker.quantities = Object.assign({}, this.qtyMap[code] || {})

        // ========== 新增：点击打开弹窗瞬间，获取父表单容器宽度 ==========
        const query = uni.createSelectorQuery().in(this)
        query.select('.inspect-form-content').boundingClientRect((rect) => {
          if (rect && rect.width) {
            // rect.width 单位 px，直接传给子组件
            this.groupPicker.containerWidth = rect.width
          }
          this.groupPicker.show = true
        }).exec()

      },

      /**
       * 分层弹层确定回调。写入位置与原有两条路径完全一致（inspectForm/labelMap/qtyMap），
       * 因此 buildDynamicFields() 一行都不用改
       */
      onGroupedConfirm(payload: any) {
        const code = this.groupPicker.fieldCode
        this.inspectForm[code] = payload.values
        this.labelMap[code] = payload.labelText
        if (this.groupPicker.needQuantity) {
          // 合并而不是替换：保留 loadDynamicFields 预建的选项键，避免非分层路径读到 undefined
          this.qtyMap[code] = Object.assign({}, this.qtyMap[code] || {}, payload.quantities || {})
        }
        this.groupPicker.show = false
        this.$refs.inspectFormRef.validateField(code)
      },
      /**
       * 打开底部选择弹窗 actionSheet
       */
      openActionSheet(item: any) {
        this.actionSheet.fieldCode = item.fieldCode
        this.actionSheet.fieldItem = item
        // 选项统一挂在 selectOptions（静态来源直接用 field.options，物料来源调 materials 接口拿，其余调 options 接口）
        // 物料带 currentNum 时在展示名后附库存余量（只影响展示名，提交的 materialName 仍取干净的 opt.label）
        this.actionSheet.options = (item.selectOptions || []).map(opt => {
          const stock = opt.currentNum === null || opt.currentNum === undefined || opt.currentNum === ''

            ? NaN
            : Number(opt.currentNum)

          return {
            name: isNaN(stock) ? opt.label : `${opt.label}（库存${stock}${opt.unit || ''}）`,
            value: opt.value
          }
        })
        this.actionSheet.show = true
      },
      /**
       * actionSheet选中回调
       */
      onActionSheetSelect(selectedItem: any) {
        const fieldItem = this.actionSheet.fieldItem
        const fieldCode = this.actionSheet.fieldCode
        // 1. 表单保存提交值：9 关联记录存 {id,name}（提交时转成 [{id,name}]），其余存裸 value
        if (fieldItem && fieldItem.fieldType === 9) {
          this.inspectForm[fieldCode] = { id: selectedItem.value, name: selectedItem.name }

        } else {

          this.inspectForm[fieldCode] = selectedItem.value

        }

        // 2. labelMap保存label，给input展示
        this.labelMap[fieldCode] = selectedItem.name
        this.actionSheet.show = false
        // 选中后触发表单校验

        this.$refs.inspectFormRef.validateField(fieldCode)
      },

      /**
       * 类型11 地理位置：微信地图选点（无需地图 AK，manifest.json 已声明 requiredPrivateInfos）
       * 提交形态 {lng,lat,address}
       */
      openLocation(item: any) {

        uni.chooseLocation({
          success: (res) => {
            this.inspectForm[item.fieldCode] = {
              lng: res.longitude,
              lat: res.latitude,

              address: res.address || res.name || ''

            }

            this.labelMap[item.fieldCode] = res.address || res.name || `${res.latitude}, ${res.longitude}`

            this.$refs.inspectFormRef.validateField(item.fieldCode)
          },
          fail: (err) => {

            console.error('地图选择失败', err)
            if (err && err.errMsg && err.errMsg.indexOf('auth deny') > -1) {
              uni.showToast({ title: '请授权位置权限', icon: 'none' })

            }
          }
        })
      },

      /**
       * 加载动态字段
       */

      async loadDynamicFields(businessType: string, workTypeId: string) {
        if (!businessType || !workTypeId) {

          uni.showToast({ title: '缺少业务参数', icon: 'none' })

          return
        }

        const bizType = 3

        try {

          const res = await getByType({
            businessType,
            workTypeId,
            bizType
          })

          let fields = res.fields || []
          fields.sort((a, b) => a.sort - b.sort)

          if (fields.length === 0) {
            uni.showToast({ title: '暂无需填报项', icon: 'none' })
            this.dynamicFields = []
            return
          }

          for (const field of fields) {

            // 初值：多选为数组；9关联记录/11地理位置 为对象（未选为 null）；7图片/8附件为 URL 数组；其余空字符串
            if (field.fieldType === 6 || (field.fieldType === 3 && field.multiple === 1)) {

              this.inspectForm[field.fieldCode] = []
            } else if (field.fieldType === 7 || field.fieldType === 8) {
              this.inspectForm[field.fieldCode] = []
            } else if (field.fieldType === 9 || field.fieldType === 11) {
              this.inspectForm[field.fieldCode] = null

            } else {

              this.inspectForm[field.fieldCode] = ''

            }

            // 初始化展示label为空

            this.labelMap[field.fieldCode] = ''

            // 7图片/8附件的文件列表（驱动 up-upload 与自绘文件列表展示）

            if (field.fieldType === 7 || field.fieldType === 8) {
              this.fileListMap[field.fieldCode] = []

            }

            // 选项装载：静态来源(1)直接用下发的 field.options，其余来源(2字典/3物料/4数据表/5SQL/6接口)调 options 接口，
            // 由后端按 optionSource 分发。类型 3/6/9 需要选项，其余类型不需要
            if (field.fieldType === 3 || field.fieldType === 6 || field.fieldType === 9) {

              if (field.optionSource === 1 && Array.isArray(field.options)) {

                field.selectOptions = field.options.map(opt => ({ label: opt.label, value: String(opt.value), path: opt.path }))
              } else if (field.optionSource === 3) {
                // 物料来源：调 materials（比 options 多返回 currentNum 库存余量/unit），供选择时显示库存
                const matRes = await getMaterialByCode({
                  businessType,
                  bizType,
                  workTypeId,
                  fieldCode: field.fieldCode
                })
                field.selectOptions = (matRes || []).map(mat => ({

                  label: mat.materialName,

                  value: String(mat.materialId),
                  currentNum: mat.currentNum,
                  unit: mat.unit

                }))

              } else {

                const optRes = await getOptionsByCode({
                  businessType,
                  bizType,
                  workTypeId,
                  fieldCode: field.fieldCode
                })
                // path 后端仅在 SQL 来源按 gN_key/gN_label 别名产出；透传后由 isGroupedField 判定是否走分层弹层
                field.selectOptions = (optRes || []).map(opt => ({ label: opt.label, value: String(opt.value), path: opt.path }))

              }
            }

            // 数量收集初始化（必须在 selectOptions 装载之后）：
            // 6多选+needQuantity 预建每个选项的键，避免模板 v-model 写到未定义的键上；
            // 3物料为标量（领用数量），默认 0 = 本次不领用、不扣库存

            if (field.fieldType === 6 && this.needQty(field)) {

              const qty = {}

                ; (field.selectOptions || []).forEach(opt => {
                  qty[opt.value] = ''
                })

              this.qtyMap[field.fieldCode] = qty

            }

            if (field.fieldType === 3 && field.optionSource === 3) {

              this.qtyMap[field.fieldCode] = 0
            }

            // 必填规则

            if (field.required === 1) {

              this.inspectFormRules[field.fieldCode] = [this.buildRequiredRule(field)]

            }
          }

          this.dynamicFields = fields

          this.$nextTick(() => {
            this.$refs.inspectFormRef.setRules(this.inspectFormRules)
          })
        } catch (err) {

          console.error('获取动态表单字段失败：', err)
          uni.showToast({ title: '加载表单配置失败', icon: 'none' })

        }
      },

      /**
       * 删除图片
       */
      deleteImg(event) {
        this.imagesList.splice(event.index, 1)
        this.$refs.inspectFormRef.validateField('images')
        uni.showToast({ title: '图片删除成功', icon: 'success' })
      },
      /**
       * 上传图片
       */
      async uploadImgs(event) {
        const fileList = Array.isArray(event.file) ? event.file : [event.file]
        const targetImgList = this.imagesList
        const filePaths = fileList.map(item => item.url)
        const tempItems = fileList.map(item => ({ ...item, status: 'uploading', message: '上传中' }))
        const startIndex = targetImgList.length
        targetImgList.push(...tempItems)
        try {
          const uploadResultUrls = await uploadImages({ filePaths, ignoreError: true })
          uploadResultUrls.forEach((url, index) => {
            if (targetImgList[startIndex + index]) {
              targetImgList.splice(startIndex + index, 1, {
                ...fileList[index], status: 'success', message: '', url
              })
            }
          })
          if (uploadResultUrls.length < fileList.length) {
            const failCount = fileList.length - uploadResultUrls.length
            for (let i = uploadResultUrls.length; i < fileList.length; i++) {
              if (targetImgList[startIndex + i]) {
                targetImgList.splice(startIndex + i, 1, {
                  ...fileList[i], status: 'failed', message: '上传失败'
                })
              }
            }
            uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
          } else {
            uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
          }
          this.$refs.inspectFormRef.validateField('images')
        } catch (err) {
          console.error('图片上传失败：', err)
          for (let i = 0; i < fileList.length; i++) {
            if (targetImgList[startIndex + i]) {
              targetImgList.splice(startIndex + i, 1, {
                ...fileList[i], status: 'failed', message: '上传失败'
              })
            }
          }
          uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
          this.$refs.inspectFormRef.validateField('images')
        }
      },
      handleExceed() {
        uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
      },
      getImgUrlList(imgList) {
        return imgList.filter(item => item.status === 'success').map(item => item.url)
      },

      // ========== 动态字段：渲染与取值辅助 ==========
      /**
       * 类型6 多选是否要求每项填「使用数量」（ext_config.needQuantity）
       * 仅记录用量，不写物料三列 ⇒ 结构性不触发扣库存（扣减一律按值行 materialId 非空判定）
       */
      needQty(item: any) {

        return !!(item.extConfig && item.extConfig.needQuantity === true)
      },

      /**
       * 有效上限：ext_config.maxCount 的「填 0 表示不限」（PC 端提示语）在提交侧照此生效
       * 未配置 → 类型默认值；配 0 → Infinity（不限）；配正数 → 该数
       */
      maxCountOf(item: any, defaultValue: number) {
        const raw = item.extConfig ? item.extConfig.maxCount : undefined
        if (raw === undefined || raw === null || raw === '') {
          return defaultValue
        }
        const num = Number(raw)
        if (isNaN(num)) {
          return defaultValue
        }
        return num > 0 ? num : Infinity
      },
      /** 传给选择器的单次可选数量：上限为「不限」时用组件默认值 52（平台要求 count 是有限数） */
      pickCountOf(item: any, defaultValue: number) {
        const max = this.maxCountOf(item, defaultValue)
        return max === Infinity ? 52 : max
      },
      /** 单文件大小上限(MB)：ext_config.maxSizeMb，未配置时用默认值 */
      maxSizeMbOf(item: any, defaultValue: number) {
        const num = item.extConfig ? Number(item.extConfig.maxSizeMb) : NaN
        return num > 0 ? num : defaultValue

      },

      /** 类型8 允许的扩展名数组（ext_config.fileType，不含点） */
      extensionsOf(item: any) {
        const list = item.extConfig && item.extConfig.fileType
        return Array.isArray(list) ? list : []

      },

      fileButtonText(item: any) {
        const exts = this.extensionsOf(item)
        return exts.length ? `选择文件（${exts.join('/')}）` : '选择文件'

      },

      /** 从 URL 取末段当文件名（与 PC 端 FieldValueCell 同口径） */
      fileNameOf(url: string) {

        if (!url) return ''

        const path = String(url).split('?')[0].split('#')[0]

        const name = path.substring(path.lastIndexOf('/') + 1)
        try {

          return decodeURIComponent(name) || url
        } catch (err) {
          return name || url

        }

      },

      /** 类型6 已勾选的选项（用于渲染每个已选项的数量输入行） */
      checkedOptions(item: any) {
        const values = this.inspectForm[item.fieldCode] || []
        return (item.selectOptions || []).filter(opt => values.indexOf(opt.value) > -1)
      },
      /**
       * 多选是否达到上限（用于禁用未选中项）。
       * 不用「超限后回写 v-model 截断」：u-checkbox 的勾选态是组件内部状态（只受 checked prop 影响），
       * 回写父级 v-model 撤不掉已经勾上的项，下一次点击还会按内部状态重新算一遍，等于没限住
       */
      isOptionLocked(item: any, opt: any) {
        const max = this.maxCountOf(item, Infinity)
        if (max === Infinity) {
          return false
        }
        const values = this.inspectForm[item.fieldCode] || []
        return values.length >= max && values.indexOf(opt.value) === -1
      },
      /** 多选的「已选 x/上限」提示，不限时返回空串 */
      multiHint(item: any) {
        const max = this.maxCountOf(item, Infinity)
        if (max === Infinity) {
          return ''
        }
        return `已选 ${(this.inspectForm[item.fieldCode] || []).length}/${max}`
      },
      onMultiChange(item: any) {
        // 上限由 isOptionLocked 禁用未选项保证，这里只负责触发必填校验
        this.$refs.inspectFormRef.validateField(item.fieldCode)
      },
      /**
       * 必填规则。
       * 7/8/9/11 的值是数组或对象，async-validator 的 required 按默认 string 类型判定，
       * 会放过「空数组」「null」⇒ 必须用 validator 显式判空，否则未选也能提交
       */

      buildRequiredRule(field: any) {
        const type = field.fieldType
        if (type === 6 || type === 7 || type === 8) {
          const action = type === 6 ? '请选择' : '请上传'
          return {
            required: true,
            trigger: ['change', 'blur'],
            validator: (rule, value, callback) => {
              Array.isArray(value) && value.length > 0 ? callback() : callback(new Error(`${action}${field.fieldName}`))
            }
          }

        }

        if (type === 9 || type === 11) {
          return {
            required: true,
            trigger: ['change', 'blur'],
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error(type === 9 ? `请选择${field.fieldName}` : `请选择${field.fieldName}的位置`))
            }
          }

        }

        // ========= 新增：数值类型单独校验 =========
        if (type === 1) {
          return {
            required: true,
            trigger: ['change', 'blur'],
            validator: (rule, value, callback) => {
              // 空字符串、null、undefined 才是空；数字 1,7,100 全部合法
              if (value === '' || value === null || value === undefined) {
                callback(new Error(`请填写${field.fieldName}`))
              } else {
                callback()
              }
            }

          }
        }

        // 2文本 /4日期 /5布尔 /10链接
        const action = type === 3 || type === 5 ? '请选择' : '请填写'
        return {
          required: true,
          message: `${action}${field.fieldName}`,
          trigger: ['change', 'blur']
        }
      },

      /** 幂等流水号（后端按 userId+clientSeq 去重，命中则返回已存在的 recordId） */
      genClientSeq() {
        return `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`

      },

      // ========== 动态字段：7图片/8附件 ==========
      /** 单文件是否超过 ext_config.maxSizeMb（超限即 toast 并返回 true 以便过滤掉） */
      isOversize(file: any, maxSizeMb: number) {
        if (!maxSizeMb || !file || !file.size) return false
        const over = file.size / 1024 / 1024 > maxSizeMb
        if (over) {
          uni.showToast({ title: `单个文件不能超过${maxSizeMb}MB`, icon: 'none' })
        }
        return over

      },

      /** 把已上传成功的 URL 同步进表单值（提交与校验都读 inspectForm） */
      syncFileValue(item: any) {
        const list = this.fileListMap[item.fieldCode] || []
        this.inspectForm[item.fieldCode] = list.filter(file => file.status === 'success').map(file => file.url)

      },

      /**
       * 7图片 上传（u-upload 的 after-read 回调）
       */

      /**
   * 7图片 上传（u-upload 的 after-read 回调）【对齐工单上传逻辑】
   */

      uploadFieldFiles(item: any, event: any) {
        console.log('动态图片上传', item.fieldName, event)
        const rawFile = event && event.file
        const fileList = Array.isArray(rawFile) ? rawFile : [rawFile]
        const targetImgList = this.fileListMap[item.fieldCode] || (this.fileListMap[item.fieldCode] = [])
        const filePaths = fileList.map(file => file.url)
        // const tempItems = fileList.map(item => ({
        //   ...item,
        //   status: 'uploading',
        //   message: '上传中'
        // }))
        // const startIndex = targetImgList.length
        // targetImgList.push(...tempItems)

        this.uploadToField(item, fileList.filter(file => file && file.url).map(file => ({
          url: file.url,
          name: file.name || '',
          size: file.size
        })))
      },

      /**
       * 8附件 选择并上传。
       * 微信小程序没有通用文件选择器，只能从聊天记录里选（uni.chooseMessageFile）
       */
      chooseFieldFiles(item: any) {
        const maxCount = this.maxCountOf(item, 5)
        const remain = maxCount - (this.fileListMap[item.fieldCode] || []).length
        if (remain <= 0) {
          uni.showToast({ title: `最多只能上传${maxCount}个`, icon: 'none' })
          return
        }
        const exts = this.extensionsOf(item)
        const options: any = { count: Math.min(remain, this.pickCountOf(item, 5)), type: 'file' }
        if (exts.length) {
          options.extension = exts
        }

        uni.chooseMessageFile({

          ...options,

          success: (res) => {

            const tempFiles = res.tempFiles || []
            this.uploadToField(item, tempFiles.map(file => ({
              url: file.path,
              name: file.name || '',
              size: file.size
            })))

          },
          fail: (err) => {

            console.error('选择附件失败：', err)

          }
        })
      },

      /**
       * 把选中的本地文件逐个上传并把 http 地址回填到 fileListMap / inspectForm。
       * 7图片与8附件共用（uploadImages 是通用 uni.uploadFile，不限图片类型）
       */

      async uploadToField(item: any, files: any[]) {
        const code = item.fieldCode
        const maxCount = this.maxCountOf(item, 5)
        const maxSizeMb = this.maxSizeMbOf(item, 5)
        const validFiles = (files || []).filter(file => file && file.url && !this.isOversize(file, maxSizeMb))
        if (!validFiles.length) {
          return
        }
        const targetList = this.fileListMap[code] || (this.fileListMap[code] = [])
        if (targetList.length + validFiles.length > maxCount) {
          uni.showToast({ title: `最多只能上传${maxCount}个`, icon: 'none' })
          return
        }
        // 保存起始下标
        const startIndex = targetList.length
        // 只在这里push一次
        targetList.push(...validFiles.map(file => ({
          url: file.url, status: 'uploading', message: '上传中', name: file.name || ''
        })))
        try {
          const uploadResultUrls = await uploadImages({
            filePaths: validFiles.map(file => file.url),
            ignoreError: true

          })

          uploadResultUrls.forEach((url, index) => {
            // 用startIndex + index 替换对应条目
            if (targetList[startIndex + index]) {
              targetList.splice(startIndex + index, 1, {
                url, status: 'success', message: '', name: validFiles[index].name || ''

              })
            }
          })

          for (let i = uploadResultUrls.length; i < validFiles.length; i++) {
            if (targetList[startIndex + i]) {
              targetList.splice(startIndex + i, 1, {
                url: validFiles[i].url, status: 'failed', message: '上传失败', name: validFiles[i].name || ''

              })
            }
          }

          if (uploadResultUrls.length < validFiles.length) {
            uni.showToast({
              title: `成功${uploadResultUrls.length}个，失败${validFiles.length - uploadResultUrls.length}个`,
              icon: 'none'

            })
          }
        } catch (err) {

          console.error(`【${code}】文件上传失败：`, err)
          for (let i = 0; i < validFiles.length; i++) {
            if (targetList[startIndex + i]) {
              targetList.splice(startIndex + i, 1, {
                url: validFiles[i].url, status: 'failed', message: '上传失败', name: validFiles[i].name || ''

              })
            }
          }

          uni.showToast({ title: '上传失败，请重试', icon: 'none' })

        }

        this.syncFileValue(item)
        this.$refs.inspectFormRef.validateField(code)
      },

      /**
       * 删除 7图片/8附件 的某一个已选文件
       */
      deleteFieldFile(item: any, event: any) {

        const list = this.fileListMap[item.fieldCode] || []

        const index = Number(event && event.index)
        if (isNaN(index) || index < 0 || index >= list.length) {
          return
        }
        list.splice(index, 1)
        this.syncFileValue(item)
        this.$refs.inspectFormRef.validateField(item.fieldCode)

      },

      // ========== 动态字段：组装提交体 ==========
      /**
       * 按值格式契约组装 fields[]（见 docs/design/app-work-field-api.md §四）。
       * 两条硬规则：
       * ① 空值一律不出现在 fields[] 里（不提交 ''/'[]'/'null'）
       * ② 物料的数量>0 才写 materialId/materialName/quantity —— 非空 materialId 即触发扣库存，
       *    因此 6多选+needQuantity（只记录用量）绝不能写这三列，只把 quantity 放进 valueText 的 JSON 里
       */

      buildDynamicFields() {

        const fields: any[] = []

        for (const item of this.dynamicFields) {
          const code = item.fieldCode
          const value = this.inspectForm[code]
          const type = item.fieldType
          if (type === 9 || type === 11) {
            if (!value) continue
          } else if (type === 6 || type === 7 || type === 8) {

            if (!Array.isArray(value) || value.length === 0) continue
          } else if (value === '' || value === null || value === undefined) {
            continue
          }

  
          if (type === 1) {
            fields.push({ fieldCode: code, valueNumber: Number(value) })

          } else if (type === 3 && item.optionSource === 3) {
            // 物料：value_text 存物料ID；数量>0 才落物料三列（0 表示本次不领用）

            const qty = Number(this.qtyMap[code] || 0)

            const matched = (item.selectOptions || []).filter(opt => opt.value === String(value))[0]
            const row: any = { fieldCode: code, valueText: String(value) }
            if (qty > 0) {
              row.materialId = Number(value)
              row.materialName = matched ? matched.label : ''

              row.quantity = qty
            }
            fields.push(row)
          } else if (type === 3) {

            // 3枚举：单选取裸 value；历史「枚举+是否多选」存逗号分隔

            fields.push({
              fieldCode: code,
              valueText: item.multiple === 1
                ? (Array.isArray(value) ? value.join(',') : String(value || ''))
                : String(value)
            })

          } else if (type === 6) {

            const selected = (item.selectOptions || []).filter(opt => (value || []).indexOf(opt.value) > -1)

            if (this.needQty(item)) {

              // 元素 {value,label,quantity}；数量留空的不带 quantity 键（不臆测成 0），label 作快照落库
              const qtyMap = this.qtyMap[code] || {}

              fields.push({
                fieldCode: code,
                valueText: JSON.stringify(selected.map(opt => {

                  const raw = qtyMap[opt.value]
                  const row: any = { value: opt.value, label: opt.label }

                  if (raw !== '' && raw !== null && raw !== undefined) {

                    row.quantity = Number(raw)

                  }

                  return row

                }))
              })
            } else {

              fields.push({ fieldCode: code, valueText: JSON.stringify(value.map(v => String(v))) })

            }
          } else if (type === 7 || type === 8) {
            fields.push({ fieldCode: code, valueText: JSON.stringify(value) })
          } else if (type === 9) {
            fields.push({ fieldCode: code, valueText: JSON.stringify([{ id: value.id, name: value.name }]) })
          } else if (type === 11) {

            fields.push({
              fieldCode: code,
              valueText: JSON.stringify({ lng: value.lng, lat: value.lat, address: value.address || '' })
            })

          } else {

            // 2文本 / 4日期 / 5布尔 / 10链接 均为裸文本

            fields.push({ fieldCode: code, valueText: String(value) })
          }
        }
        return fields
      },

  
      async submitAndFinish() {

        if (this.submitting) return

        try {
          await this.$refs.inspectFormRef.validate()
          const dynamicValues = this.buildDynamicFields()
          if (!this.clientSeq) {
            this.clientSeq = this.genClientSeq()
          }
          uni.showLoading({ title: '提交中...' })

          this.submitting = true

          // 后端 AppMaintainPlanCommitSaveReqVO：imgHost 是 String(必填)，beginImg 才是图片列表
          const submitData = {
            planNo: this.paramsOptins.planNo,
            imgHost: '1',
            beginImg: this.getImgUrlList(this.imagesList),
            commonUserList: [],
            remark: this.inspectForm.remark.trim(),
          }

          // 子上报随结束一起提交：后端在同一事务里写 garden_work_record 并校验「至少一条子上报」。
          // clientSeq 幂等，重复点击不会重复计次。
          const workRecords = dynamicValues.length > 0
            ? [{
                clientSeq: this.clientSeq,
                remark: this.inspectForm.remark.trim(),
                fields: dynamicValues
              }]
            : []

          // ① /create-and-finish 必传 commitId：没有进行中的本次养护就先建一条草稿（/create 会复用已有草稿）

          if (!this.commitId) {

            const commitRes: any = await maintainCreate(submitData)

            // 兼容后端返回裸 id 或 {id:...} 两种形态

            this.commitId = commitRes && typeof commitRes === 'object' ? commitRes.id : commitRes
          }

          if (!this.commitId) {
            uni.hideLoading()
            uni.showToast({ title: '创建本次养护失败，请重试', icon: 'none' })
            return

          }

          // ② 子上报 + 结束本次养护（同一事务，不会出现字段已存但任务未结束的中间态）
          await maintainCreateFinish({
            ...submitData,
            commitId: this.commitId,
            workRecords
          })
  

          uni.hideLoading()
          uni.showToast({ title: '提交并结束任务成功', icon: 'success', duration: 1000 })
          setTimeout(() => {
            uni.reLaunch({ url: '/pages-sub/daily/maintain-manage/index' })
          }, 1000)
        } catch (error) {
          uni.hideLoading()

          if (Array.isArray(error)) return
          console.error('提交并结束失败', error)

          // 业务错误 request.js 已弹过后端 msg（如「当前养护计划状态不允许此操作」），这里不重复弹
          if (error && error.msg) return
          uni.showToast({ title: '提交失败，请重试', icon: 'none', duration: 2000 })

        } finally {

          this.submitting = false

        }
      },
  

      /**

       * 暂存养护记录（按钮文案「暂存」）—— 双写两条链路：
       * ① maintain-plan-commit/create：养护计划本身（描述 + 图片 + 人员），返回 commit.id；后端只建草稿，不计数

       * ② work-record/submit：动态字段值，bizId 用 ① 的 commit.id（旧接口的 VO 没有动态字段，会被 Jackson 静默丢弃）

       * 计数只在「提交并结束」或列表「结束任务」时推进，见 submitAndFinish

       * 重试安全：commitId 一旦取到就缓存住，重试只补写 ②（② 自身按 clientSeq 幂等），避免重复创建养护记录
       */

      async submitInspect() {

        // 调试打印，打开小程序控制台查看

        console.log('=====调试=====')
        console.log('dynamicFields', this.dynamicFields)
        if (this.submitting) return
        this.dynamicFields.forEach(item => {
          console.log(item.fieldCode, this.inspectForm[item.fieldCode], typeof this.inspectForm[item.fieldCode])
        })

        try {
          await this.$refs.inspectFormRef.validate()

          const dynamicValues = this.buildDynamicFields()

          if (!this.clientSeq) {

            this.clientSeq = this.genClientSeq()

          }

          uni.showLoading({ title: '提交中...' })

          this.submitting = true

          // ① 养护计划本体：仅首次提交时写入

          if (!this.commitId) {
            const submitData = {

              planNo: this.paramsOptins.planNo,

              imgHost: "1",

              beginImg: this.getImgUrlList(this.imagesList),

              commonUserList: [],

              remark: this.inspectForm.remark.trim(),
            }
            const commitRes: any = await maintainCreate(submitData)
            // 兼容后端返回裸 id 或 {id:...} 两种形态
            this.commitId = commitRes && typeof commitRes === 'object' ? commitRes.id : commitRes
          }
          // ② 动态字段值：无动态字段时不产生空的字段值记录
          if (dynamicValues.length > 0) {
            if (!this.commitId) {
              console.warn('未取到养护计划的 commit.id，跳过动态字段提交')
            } else {
              await workRecordSubmit({
                businessType: this.paramsOptins.businessType,
                bizType: 3,
                bizId: this.commitId,
                workTypeId: Number(this.paramsOptins.planTypeId),
                clientSeq: this.clientSeq,
                remark: this.inspectForm.remark.trim(),
                fields: dynamicValues
              })

            }

          }

          uni.hideLoading()

          // 后端 /create 只建草稿、不推进完成次数，必须再点「提交并结束」或在列表点「结束任务」才计数
          uni.showToast({ title: '已暂存，请记得结束本次养护', icon: 'none', duration: 1500 })

          setTimeout(() => {
            uni.reLaunch({ url: '/pages-sub/daily/maintain-manage/index' })

          }, 1500)

        } catch (error) {

          uni.hideLoading()

          // 表单校验失败时 error 是字段数组（uview-plus 已提示），不重复弹
          if (Array.isArray(error)) {
            return
          }
          console.error('养护记录提交失败：', error)
          // request.js 已把后端 msg 弹过一次（如「库存不足」），此处不要用通用文案盖掉真实原因
          const backendMsg = error && error.msg

          if (this.commitId) {

            // 养护计划已落库，失败只发生在耗材字段。必须说清「已提交」，否则用户会以为整单没提交而重复填
            uni.showToast({
              title: backendMsg ? `养护记录已提交：${backendMsg}` : '养护记录已提交，耗材数据保存失败，请重试',
              icon: 'none',
              duration: 2500
            })
          } else if (!backendMsg) {
            uni.showToast({ title: '提交失败，请重试', icon: 'none', duration: 2000 })

          }
        }

      }
    }
  }
  </script>
  

  <style lang="scss" scoped>

  .page-container {

    padding-bottom: 120rpx;
  }

  .inspect-form-content {

    background: #fff;

    padding: 20rpx;
    margin-bottom: 20rpx;

  }

  .date-input-wrap {
    width: 100%;
  }

  // 放大u-number-box输入框

  .large-number-box {
    :deep(.u-number-box__input) {
      width: 264rpx !important;
      height: 72rpx;
      font-size: 32rpx;
    }

    :deep(.u-number-box__btn) {
      width: 64rpx;

      height: 72rpx;
    }
  }

  .number-box-wrap {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .unit-text {
      font-size: 28rpx;
      color: #333;
    }

  }

  // 6多选：复选框组 + needQuantity 时每个已选项一行数量输入

  .multi-wrap {
    width: 100%;

    .multi-hint {
      display: block;
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #909399;
    }

    .qty-list {
      margin-top: 16rpx;
      padding-left: 20rpx;
      border-left: 4rpx solid #f0f0f0;
    }
  }

  // 数量行（6多选的每个已选项 / 3物料的领用数量共用）

  .qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    padding: 8rpx 0;

    .qty-label {
      flex: 1;
      min-width: 0;
      font-size: 28rpx;
      color: #333;
    }
  }

  .qty-row-material {
    margin-top: 12rpx;
    padding-top: 12rpx;
    border-top: 1rpx solid #f0f0f0;
  }

  // 8附件：自绘文件列表 + 选择按钮（微信无通用文件选择器，走 chooseMessageFile）

  .file-wrap {
    width: 100%;

    .file-row {
      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 16rpx;
      padding: 8rpx 0;

      .file-name {

        flex: 1;
        min-width: 0;

        font-size: 28rpx;
        color: #333;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }

      .file-del {

        font-size: 26rpx;

        color: #ff4d4f;

      }
    }
  }

  
  .empty-field-tip {
    padding: 80rpx 30rpx;
    text-align: center;
    font-size: 30rpx;
    color: #999;
  }
  

  .fixed-bottom-btn-wrap {
    background-color: #ffffff;
    display: flex;
    .btn-item {
      flex: 1;
      height: 88rpx;

      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #fff;
    }
  
    .btn-left {
      background: #1989fa;
    }
  
    .btn-right {
      background: #8b572a;
      /* 褐色 */
    }
  }
  
  // 页面底部预留空白，防止表单内容被固定按钮遮挡
  .page-container {
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  }

  .empty-field-tip {
    text-align: center;
    padding: 80rpx 20rpx;
    font-size: 30rpx;
    color: #999;
  }

  </style>