68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<div class="feedback-container">
|
|
<h1>意见反馈</h1>
|
|
<div class="feedback-form">
|
|
<el-form :model="feedbackObj" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="描述问题">
|
|
<el-input v-model="feedbackObj.describe" :rows="6" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="上传图片">
|
|
<el-upload ref="uploadRef" multiple :limit="3" list-type="picture-card" :http-request="uploadSubmit"
|
|
:auto-upload="false">
|
|
<el-icon class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="您的联系方式">
|
|
<el-input v-model="feedbackObj.contact" style="width: 200px;" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" size="default" @click="uploadRef.submit()">提交反馈</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { Plus } from '@element-plus/icons-vue';
|
|
import { uploadFile } from '../../../api/upload'; // 引入新的 API 方法
|
|
|
|
const feedbackObj = reactive({
|
|
describe: '',
|
|
img: '',
|
|
contact: '',
|
|
});
|
|
|
|
const uploadRef = ref();
|
|
|
|
const uploadSubmit = ({ file }) => {
|
|
const params = {
|
|
// 可以在这里添加其他参数
|
|
};
|
|
uploadFile(file, params)
|
|
.then(response => {
|
|
console.log(response);
|
|
// 处理上传成功的逻辑
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
// 处理上传失败的逻辑
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.feedback-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: start;
|
|
margin: auto;
|
|
h1 {
|
|
margin: 30px 0px;
|
|
}
|
|
}
|
|
</style> |