156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { FormInstance } from 'element-plus';
|
|
|
|
import { reactive, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { IconifyIcon } from '@easyflow/icons';
|
|
|
|
import {
|
|
ElButton,
|
|
ElDialog,
|
|
ElForm,
|
|
ElFormItem,
|
|
ElInput,
|
|
ElMessage,
|
|
ElSelect,
|
|
} from 'element-plus';
|
|
import { tryit } from 'radash';
|
|
|
|
import Upload from '#/components/upload/Upload.vue';
|
|
|
|
import { api } from './api/request';
|
|
|
|
const options = [
|
|
{
|
|
value: 1,
|
|
label: '功能故障',
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '优化建议',
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '账号问题',
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '其它',
|
|
},
|
|
];
|
|
|
|
const route = useRoute();
|
|
const showDialog = ref(false);
|
|
const formRef = ref<FormInstance>();
|
|
const formData = reactive({
|
|
feedbackType: '',
|
|
feedbackContent: '',
|
|
contactInfo: '',
|
|
attachmentUrl: '',
|
|
});
|
|
const loading = ref(false);
|
|
const uploadRef = ref();
|
|
|
|
function uploadSuccess(res: any) {
|
|
formData.attachmentUrl = res;
|
|
}
|
|
function onRemove() {
|
|
formData.attachmentUrl = '';
|
|
}
|
|
const handleSubmit = async () => {
|
|
const isValid = await formRef.value?.validate();
|
|
|
|
if (isValid) {
|
|
loading.value = true;
|
|
|
|
const [, res] = await tryit(api.post)(
|
|
'/userCenter/sysUserFeedback/save',
|
|
formData,
|
|
);
|
|
|
|
if (res && res.errorCode === 0) {
|
|
ElMessage.success('反馈成功！');
|
|
showDialog.value = false;
|
|
formRef.value?.resetFields();
|
|
uploadRef.value?.clear();
|
|
}
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport
|
|
v-if="!route.path.includes('auth') && !route.path.includes('share')"
|
|
to="#app"
|
|
>
|
|
<div
|
|
class="fixed bottom-1 right-2 cursor-pointer text-6xl active:opacity-70"
|
|
@click="showDialog = !showDialog"
|
|
>
|
|
<IconifyIcon icon="svg:issue" />
|
|
</div>
|
|
</Teleport>
|
|
<ElDialog
|
|
draggable
|
|
v-model="showDialog"
|
|
title="问题反馈"
|
|
style="max-width: 560px"
|
|
>
|
|
<ElForm
|
|
ref="formRef"
|
|
:model="formData"
|
|
label-width="80px"
|
|
label-position="left"
|
|
require-asterisk-position="right"
|
|
>
|
|
<ElFormItem
|
|
prop="feedbackType"
|
|
label="问题类型"
|
|
:rules="[{ required: true, message: '此为必填项' }]"
|
|
>
|
|
<ElSelect
|
|
:options="options"
|
|
v-model="formData.feedbackType"
|
|
placeholder="请选择问题类型"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem
|
|
prop="feedbackContent"
|
|
label="问题描述"
|
|
:rules="[{ required: true, message: '此为必填项' }]"
|
|
>
|
|
<ElInput
|
|
type="textarea"
|
|
:rows="5"
|
|
v-model="formData.feedbackContent"
|
|
placeholder="请简要描述下您所遇到的问题"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem prop="contactInfo" label="联系方式">
|
|
<ElInput
|
|
v-model="formData.contactInfo"
|
|
placeholder="请留下手机号/邮箱"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem prop="attachmentUrl" label="上传附件">
|
|
<Upload
|
|
ref="uploadRef"
|
|
@success="uploadSuccess"
|
|
@handle-delete="onRemove"
|
|
/>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="showDialog = false">取消</ElButton>
|
|
<ElButton type="primary" :loading="loading" @click="handleSubmit">
|
|
立即反馈
|
|
</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
</template>
|