<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>
vant 上传图片
于 2022-07-19 10:39:14 首次发布