|
@@ -1,14 +1,12 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { reactive, ref, watchEffect } from "vue";
|
|
|
-import { ElForm, ElMessage, UploadProps } from "element-plus";
|
|
|
-import { httpImageUpload, baseUrl } from "/@/api/other";
|
|
|
-import { useResponseHandle } from "/@/hooks";
|
|
|
-import { useUserStore } from "/@/store/modules/user";
|
|
|
+import { reactive, ref, watchEffect, computed } from "vue";
|
|
|
+import UploadImage from "./img-upload.vue";
|
|
|
+import { ElForm } from "element-plus";
|
|
|
|
|
|
const emit = defineEmits(["changeStatus"]);
|
|
|
|
|
|
const props = defineProps<{
|
|
|
- hiddenRerturnImg: boolean;
|
|
|
+ returnType: string;
|
|
|
}>();
|
|
|
|
|
|
const formData = reactive({
|
|
@@ -17,8 +15,6 @@ const formData = reactive({
|
|
|
remark: ""
|
|
|
});
|
|
|
|
|
|
-const types = ["image/png", "image/jpg", "image/bmp", "image/jpeg"];
|
|
|
-
|
|
|
const rules = reactive({
|
|
|
return_img: [
|
|
|
{
|
|
@@ -36,44 +32,18 @@ const rules = reactive({
|
|
|
],
|
|
|
remark: [
|
|
|
{
|
|
|
- required: !props.hiddenRerturnImg,
|
|
|
+ required: true,
|
|
|
trigger: "change",
|
|
|
message: "请输入备注"
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
|
|
|
-const formRef = ref<InstanceType<typeof ElForm>>(null);
|
|
|
-const responseHandle = useResponseHandle();
|
|
|
-const userStore = useUserStore();
|
|
|
-
|
|
|
-const onBeforeReturnImageUpload: UploadProps["beforeUpload"] = ({
|
|
|
- type,
|
|
|
- size
|
|
|
-}) => {
|
|
|
- if (!types.includes(type)) {
|
|
|
- ElMessage.error("请上传jpg.png.bmp.jpeg类型图片");
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- if (size / 1024 / 1024 > 1) {
|
|
|
- ElMessage.error("图片大小超过1M");
|
|
|
- return false;
|
|
|
- }
|
|
|
-};
|
|
|
+const showHiddenUploadImage = computed(() => {
|
|
|
+ return props.returnType !== "2";
|
|
|
+});
|
|
|
|
|
|
-const handleRequeset: UploadProps["httpRequest"] = async ({ file }) => {
|
|
|
- const _formData = new FormData();
|
|
|
- _formData.append("img", file);
|
|
|
- _formData.append("token", userStore.token);
|
|
|
- const { message, code, data } = await httpImageUpload(_formData);
|
|
|
-
|
|
|
- responseHandle({
|
|
|
- message,
|
|
|
- code,
|
|
|
- handler: () => (formData.return_img = baseUrl + "/" + data[0].url)
|
|
|
- });
|
|
|
-};
|
|
|
+const formRef = ref<InstanceType<typeof ElForm>>(null);
|
|
|
|
|
|
const handlePaymentReceipt = () => {
|
|
|
formRef.value.validate(isValid => isValid && emit("changeStatus", formData));
|
|
@@ -99,27 +69,17 @@ watchEffect(() => {
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="备注" prop="remark" w-400px>
|
|
|
- <el-input type="textarea" v-model="formData.remark" />
|
|
|
+ <el-form-item
|
|
|
+ label="退款回执"
|
|
|
+ prop="return_img"
|
|
|
+ w-480px
|
|
|
+ v-if="showHiddenUploadImage"
|
|
|
+ >
|
|
|
+ <UploadImage @change="imgs => (formData.return_img = imgs)" />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="退款回执" prop="return_img" v-if="!hiddenRerturnImg">
|
|
|
- <div>
|
|
|
- <el-upload
|
|
|
- class="upload"
|
|
|
- :before-upload="onBeforeReturnImageUpload"
|
|
|
- :http-request="handleRequeset"
|
|
|
- :show-file-list="false"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="avatar"
|
|
|
- v-if="formData.return_img"
|
|
|
- :src="formData.return_img"
|
|
|
- />
|
|
|
- <div class="text" v-else>点击上传</div>
|
|
|
- </el-upload>
|
|
|
- <span text-sm>大小:小于1M; 尺寸:100*100; 类型:jpg.png.bmp.jpeg</span>
|
|
|
- </div>
|
|
|
+ <el-form-item label="备注" prop="remark" w-400px>
|
|
|
+ <el-input type="textarea" v-model="formData.remark" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item w-full flex justify-end>
|