add:fronted
This commit is contained in:
lan
Vendored
+5
@@ -11,9 +11,11 @@ declare module 'vue' {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElModal: typeof import('element-plus/es')['ElModal']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
@@ -28,4 +30,7 @@ declare module 'vue' {
|
||||
UploadFile: typeof import('./src/components/UploadFile.vue')['default']
|
||||
UploadText: typeof import('./src/components/UploadText.vue')['default']
|
||||
}
|
||||
export interface ComponentCustomProperties {
|
||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,14 @@ const fileStore = useFileDataStore();
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
import QrcodeVue from "qrcode.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
const openUrl = (url: string) => {
|
||||
if (url.startsWith('/')) {
|
||||
url = window.location.origin + url;
|
||||
}
|
||||
window.open(url);
|
||||
};
|
||||
const route = useRoute();
|
||||
|
||||
const copyText = (text: any, style = 0) => {
|
||||
if (style === 1) {
|
||||
@@ -20,22 +28,34 @@ const copyText = (text: any, style = 0) => {
|
||||
}
|
||||
document.body.removeChild(temp);
|
||||
};
|
||||
const route = useRoute();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer append-to-body v-model="fileBoxStore.showFileBox" direction="btt" style="max-width: 1080px;margin: auto;"
|
||||
<el-drawer :append-to-body="true" v-model="fileBoxStore.showFileBox" direction="btt" style="max-width: 1080px;margin: auto;"
|
||||
size="400">
|
||||
<template #header>
|
||||
<h4>文件箱</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<div v-if="route.name=='home'">
|
||||
<el-card v-for="i in fileStore.receiveData" :key="i">
|
||||
{{ i }}
|
||||
<div v-if="route.name=='home'" style="display: flex;flex-wrap: wrap;justify-content: center">
|
||||
<el-card v-for="(value,index) in fileStore.receiveData" :key="index" style="margin: 0.5rem">
|
||||
<template #header>
|
||||
<el-button type="danger" @click="fileStore.deleteReceiveData(i)">删除</el-button>
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<h4 style="width: 6rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ value.name }}</h4>
|
||||
<el-button size="small" type="danger" @click="fileStore.deleteReceiveData(index)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div style="width: 200px;">
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<qrcode-vue :value="value.text" :size="100"></qrcode-vue>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-around">
|
||||
<el-tag size="large" style="cursor: pointer" @click="copyText(value.code)">{{ value.code }}</el-tag>
|
||||
<el-tag v-if="value.name!=='文本分享'" size="large" type="success" style="cursor: pointer" @click="openUrl(value.text);">点击下载
|
||||
</el-tag>
|
||||
<el-tag v-else size="large" type="success" style="cursor: pointer" @click="copyText(value.text);">点击复制</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else style="display: flex;flex-wrap: wrap;justify-content: center">
|
||||
|
||||
@@ -13,7 +13,6 @@ const props = defineProps({
|
||||
return {
|
||||
expireValue: 1,
|
||||
expireStyle: 'day',
|
||||
targetType: 'file',
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -39,7 +38,6 @@ const handleHttpRequest = (options: any) => {
|
||||
formData.append('file', options.file);
|
||||
formData.append('expireValue', props.shareData.expireValue);
|
||||
formData.append('expireStyle', props.shareData.expireStyle);
|
||||
formData.append('targetType', props.shareData.targetType);
|
||||
request(
|
||||
{
|
||||
url: "share/file/",
|
||||
@@ -122,7 +120,6 @@ onMounted(()=>{
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="http://127.0.0.1:8000/share"
|
||||
multiple
|
||||
:show-file-list="false"
|
||||
ref="uploadBox"
|
||||
|
||||
@@ -13,7 +13,6 @@ const props = defineProps({
|
||||
return {
|
||||
expireValue: 1,
|
||||
expireStyle: 'day',
|
||||
targetType: 'text',
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,7 +22,6 @@ const handleSubmitShareText = ()=>{
|
||||
formData.append('text', shareText.value);
|
||||
formData.append('expireValue', props.shareData.expireValue);
|
||||
formData.append('expireStyle', props.shareData.expireStyle);
|
||||
formData.append('targetType', props.shareData.targetType);
|
||||
request({
|
||||
'url': 'share/text/',
|
||||
'method': 'post',
|
||||
|
||||
@@ -10,7 +10,7 @@ const instance = axios.create({
|
||||
});
|
||||
|
||||
const Request = axios.create({
|
||||
baseURL: "http://localhost:8000",
|
||||
baseURL: "http://localhost:12345",
|
||||
timeout: 6000000,
|
||||
});
|
||||
|
||||
|
||||
@@ -1,15 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { Upload, TakeawayBox } from '@element-plus/icons-vue';
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from "vue-router";
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import CardTools from "@/components/CardTools.vue";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
import { useFileDataStore } from "@/stores/fileData";
|
||||
|
||||
import { request } from "@/utils/request";
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
const fileStore = useFileDataStore();
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const code = ref('')
|
||||
const input_status = reactive({
|
||||
'readonly': false,
|
||||
'loading': false,
|
||||
})
|
||||
onMounted(() => {
|
||||
const query_code = route.query.code as string;
|
||||
if (query_code) {
|
||||
code.value = query_code
|
||||
}
|
||||
})
|
||||
watch(code, (newVal) => {
|
||||
if (newVal.length === 5) {
|
||||
input_status.readonly = true;
|
||||
input_status.loading = true;
|
||||
request({
|
||||
'url': '/share/select',
|
||||
'method': 'POST',
|
||||
'data': {
|
||||
'code': newVal
|
||||
}
|
||||
}).then((res: any) => {
|
||||
input_status.readonly = false;
|
||||
input_status.loading = false;
|
||||
code.value = '';
|
||||
if (res.data.code === 200) {
|
||||
fileBoxStore.showFileBox = true;
|
||||
let flag = true;
|
||||
fileStore.receiveData.forEach((file: any) => {
|
||||
if (file.code === res.data.data.code) {
|
||||
flag = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (flag) {
|
||||
fileStore.addReceiveData(res.data.data);
|
||||
}
|
||||
} else {
|
||||
alert(res.data.msg||'未知错误')
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
const listenInput = (num: number) => {
|
||||
console.log('listenInput',num)
|
||||
if (code.value.length < 5) {
|
||||
code.value += num
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -18,7 +68,7 @@ const listenInput = (num: number) => {
|
||||
<CardTools/>
|
||||
<el-row style="text-align: center">
|
||||
<el-col :span="24">
|
||||
<el-input v-model="code" class="code-input" round autofocus clearable maxlength="5" placeholder="请输入五位取件码"/>
|
||||
<el-input :readonly="input_status.readonly" v-loading="input_status.loading" v-model="code" class="code-input" round autofocus clearable maxlength="5" placeholder="请输入五位取件码"/>
|
||||
</el-col>
|
||||
<el-col :span=8 v-for="i in 9" :key="i">
|
||||
<el-button class="key-button" round @click="listenInput(i)">{{ i }}</el-button>
|
||||
|
||||
Reference in New Issue
Block a user