vant 表单验证

<template>
  <Header title="新增" :helpIcon="false" ref="headerRef"></Header>

  <van-form class="nav">
    <van-field
      v-model="result"
      is-link
      readonly
      required
      name="picker"
      label="类型"
      placeholder="请选择"
      @click="showPicker = true"
    />

    <van-cell-group inset>
      <van-field
        v-model="message"
        rows="4"
        autosize
        required
        label="内容描述"
        type="textarea"
        maxlength="200"
        placeholder="请输入内容描述"
        show-word-limit
        :rules="[
          {
            required: true,
            trigger: 'onBlur',
            message: '不能为空',
          },
        ]"
      />
    </van-cell-group>

    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader
          v-model="value"
          :before-read="beforeRead"
          :max-size="100 * 1024"
          @oversize="onOversize"
          :max-count="6"
        />
      </template>
    </van-field>

    <van-field
      v-model="moduleResult"
      is-link
      readonly
      required
      name="picker"
      label="所属模块"
      placeholder="请选择"
      @click="showPicker2 = true"
      :rules="[
        {
          required: true,
          trigger: 'onChange',
          message: '不能为空',
        },
      ]"
    />

    <van-cell-group inset>
      <van-field
        v-model="phone"
        required
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          {
            required: true,
            trigger: 'onBlur',
            message: '不能为空',
          },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号不正确',
            trigger: 'onBlur',
          },
        ]"
      />
    </van-cell-group>

    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" @click="submit">
        提交
      </van-button>
    </div>
  </van-form>

  <!-- 类型选择 -->
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :columns="columns"
      value-key="name"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>

  <!-- 模块选择 -->
  <van-popup v-model:show="showPicker2" position="bottom">
    <van-picker
      :columns="moduleColumns"
      value-key="name"
      @confirm="onConfirm2"
      @cancel="showPicker2 = false"
    />
  </van-popup>
</template>
<script lang="ts" setup>
import { Header } from '@/components/Header'
import { Toast } from 'vant'
import { ref } from 'vue'
import AjaxCapacityVeLineService from '@/api/problemFeedback'
import axios from 'axios'
import { useBaseStore } from '@/store'
const userInfo: any = useBaseStore().getUser()

const result = ref('需求')
const moduleResult = ref('')
const moduleId = ref<Number>(0)
const phone = ref()
const showPicker = ref(false)
const showPicker2 = ref(false)
const columns = ['需求']
const moduleColumns = [
  {
    id: 1,
    name: '首页 ',
  },
  {
    id: 2,
    name: '社区管理',
  },
  {
    id: 3,
    name: '运营中心',
  },
  {
    id: 4,
    name: '网管中心',
  },
  {
    id: 5,
    name: '操作中心',
  },
  {
    id: 6,
    name: '财务中心',
  },
  {
    id: 7,
    name: '质控中心 ',
  },
  {
    id: 8,
    name: '运力中心',
  },
  {
    id: 9,
    name: '客服中心',
  },
  {
    id: 10,
    name: '国际中心 ',
  },
  {
    id: 11,
    name: '物料中心',
  },
  {
    id: 12,
    name: '个人中心',
  },
  {
    id: 13,
    name: '发现',
  },
  {
    id: 14,
    name: '我的',
  },
]

const fileTypes = ['image/jpeg', 'image/pjpeg', 'image/png', 'video/*']
const message = ref<string>('')
const value = ref([])
let accessoryUrl = ref<any>([])

const onConfirm = (value) => {
  result.value = value
  showPicker.value = false
}

const onConfirm2 = (value) => {
  moduleResult.value = `${value.name}`
  moduleId.value = value.id
  showPicker2.value = false
}

const onOversize = (file) => {
  //   console.log(file, 'file')
  Toast('文件大小不能超过 100M')
}

const beforeRead = async (file) => {
  //   console.log(file, 'file')
  if (!fileTypes.includes(file.type)) {
    Toast('仅可上传照片和视频')
    return false
  }

  const res = await AjaxCapacityVeLineService.getBatchUploadURL({
    moduleName: 'KBM',
    projectName: 'community',
    fileNames: file.name,
  })
  accessoryUrl.value.push({
    accessoryUrl: `${'ylfile/KBM/' + file.name}`,
    name: `附件${accessoryUrl.value.length + 1}.${file.name.split('.')[1]}`,
  })
  // console.log(res.data[0].path,`附件${accessoryUrl.value.length}${file.name.split(".")[1]}`,accessoryUrl.value,"res122122")
}

console.log(userInfo, 'userInfouserInfouserInfo')

const submit = async () => {
  await AjaxCapacityVeLineService.getBatchUploadAdd({
    contentDescription: message.value,
    demandType: 1,
    mobile: phone.value,
    moduleName: moduleId.value,
    accessoryUrl: JSON.stringify(accessoryUrl.value),
    countryId: '1',
    networkId: userInfo.networkId,
    networkName: userInfo.networkName,
    networkCode: userInfo.networkCode,
    createByName: userInfo.staffNo,
  })
    .then((response: any) => {
      if (response.code === 1) {
      }
    })
    .catch(function (error: any) {
      Toast(error)
    })
}
</script>
<style lang="scss" scoped>
.nav {
  background-color: #fff;
}
:deep(.van-cell-group--inset) {
  margin: 0;
}
</style>