151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<template>
|
||
<view class="px-base">
|
||
<CuNavbar title="举报投诉"> </CuNavbar>
|
||
<view class="space-y-base mt-base">
|
||
<view class="card-shadow bg-white rounded-19rpx px-base">
|
||
<uv-form
|
||
labelWidth="160rpx"
|
||
:borderBottom="false"
|
||
:model="form"
|
||
:rules="rules"
|
||
errorType="toast"
|
||
ref="formRef"
|
||
labelPosition="top"
|
||
>
|
||
<uv-form-item label="投诉内容" prop="content">
|
||
<uv-textarea
|
||
maxlength="200"
|
||
:customStyle="{ padding: 0 ,minHeight: '200rpx'}"
|
||
count
|
||
placeholder="可描述具体投诉内容，至少20字"
|
||
:border="`none`"
|
||
v-model="form.content"
|
||
>
|
||
</uv-textarea>
|
||
</uv-form-item>
|
||
<uv-line color="#f5f5f5"></uv-line>
|
||
<uv-form-item label="" prop="photos">
|
||
<view class="w-full">
|
||
<view class="flex justify-between text-15px">
|
||
<view>证明材料（选填）</view>
|
||
<view class="text-hex-999999 text-12px pr-9px">{{form.photos.length}}/9</view>
|
||
</view>
|
||
<view class="mt-10rpx">
|
||
<uv-upload
|
||
:maxCount="9"
|
||
multiple
|
||
:fileList="form.photos"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="photos"
|
||
></uv-upload>
|
||
</view>
|
||
</view>
|
||
</uv-form-item>
|
||
</uv-form>
|
||
</view>
|
||
</view>
|
||
<view class="mt-100rpx">
|
||
<uv-button type="primary" @click="submit">提交</uv-button>
|
||
</view>
|
||
|
||
<uv-modal
|
||
ref="modalRef"
|
||
title="提示"
|
||
content="确定提交投诉？"
|
||
@confirm="onSubmit"
|
||
:showCancelButton="true"
|
||
></uv-modal>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import CuNavbar from '@/components/cu-navbar/index'
|
||
import Cell from '@/components/cell/index'
|
||
import { ref, reactive } from 'vue'
|
||
import { http } from '@/utils/request'
|
||
const modalRef = ref(null)
|
||
const formRef = ref(null)
|
||
const fileList = ref([])
|
||
const form = reactive({
|
||
content: '',
|
||
photos: [],
|
||
})
|
||
const rules = reactive({
|
||
content: [
|
||
{ required: true, message: '可描述具体投诉内容，至少20字' },
|
||
{ min: 20, message: '至少20字' },
|
||
{ max: 200, message: '最多200字' },
|
||
],
|
||
})
|
||
|
||
const submit = () => {
|
||
formRef.value.validate().then((res) => {
|
||
modalRef.value.open()
|
||
})
|
||
}
|
||
|
||
const afterRead = async (event) => {
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = form[event.name].length
|
||
|
||
lists.map((item) => {
|
||
form[event.name].push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中',
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
// console.log(lists[i]);
|
||
const result = await uploadFilePromise(lists[i].url)
|
||
let item = form[event.name][fileListLen]
|
||
form[event.name].splice(
|
||
fileListLen,
|
||
1,
|
||
Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result,
|
||
})
|
||
)
|
||
fileListLen++
|
||
}
|
||
}
|
||
const deletePic = (event) => {
|
||
form[event.name].splice(event.index, 1)
|
||
}
|
||
|
||
const uploadFilePromise = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
http
|
||
.upload('/fileupload', {
|
||
filePath: url,
|
||
name: 'file',
|
||
})
|
||
.then((res) => {
|
||
resolve(res.url)
|
||
})
|
||
.catch((err) => {
|
||
reject(err)
|
||
})
|
||
})
|
||
}
|
||
|
||
const onSubmit = () => {
|
||
http
|
||
.post('/complaints', {
|
||
content: form.content,
|
||
photos: form.photos.map((item) => item.url),
|
||
anonymous: true
|
||
})
|
||
.then((ress) => {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
duration: 2000,
|
||
icon: 'none',
|
||
})
|
||
formRef.value.resetFields()
|
||
})
|
||
}
|
||
</script>
|