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"
          :preview-image="true"
          :max-size="100 * 1024 * 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'
import { useRouter } from 'vue-router'

let router = useRouter()
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/jpg', 'image/png', 'image/webp', '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')
  return false
}

const beforeRead = (file) => {
  if (!fileTypes.includes(file.type)) {
    Toast('仅可上传照片和视频')
    return false
  } else {
    AjaxCapacityVeLineService.getBatchUploadURL({
      moduleName: 'KBM',
      projectName: 'community',
      fileNames: file.name,
    })
      .then((response: any) => {
        console.log(response, 'userInfouserInfouserInfo')
        accessoryUrl.value.push({
          accessoryUrl: `${'ylfile/KBM/' + file.name}`,
          name: `附件${accessoryUrl.value.length + 1}.${file.name.split('.')[1]}`,
        })

        if (response.data[0].url && response.data[0].contentType) {
          axios({
            method: 'PUT',
            data: file,
            url: response.data[0].url,
            headers: {
              'Content-Type': response.data[0].contentType,
            },
          })
            .then((response: any) => {})
            .catch(function (error: any) {})
        }
      })
      .catch(function (error: any) {})

    return true
  }
}

const submit = async () => {
  const phoneRule = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (message.value && moduleResult.value && phone.value && phoneRule.test(phone.value)) {
    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,
      createBy: userInfo.id,
    })
      .then((response: any) => {
        if (response.code === 1) {
          router.push({ path: '/submitSuccessfully' })
        }
      })
      .catch(function (error: any) {
        Toast(error)
      })
  }
}
</script>
<style lang="scss" scoped>
.nav {
  background-color: #fff;
}
:deep(.van-cell-group--inset) {
  margin: 0;
}
</style>