update:消息提示

2023-08-15 00:16:26 +08:00
parent 3a82542118
commit 405ca31727
52 changed files with 255 additions and 61 deletions
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { Upload, TakeawayBox } from '@element-plus/icons-vue';
+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) => {
+      fileBoxStore.showFileBox = true;
+      let flag = true;
+      fileStore.receiveData.forEach((file: any) => {
+        if (file.code === res.detail.code) {
+          flag = false;
+          return;
+        }
+      });
+      if (flag) {
+        fileStore.addReceiveData(res.detail);
+      }
+    }).finally(() => {
+      input_status.readonly = false;
+      input_status.loading = false;
+      code.value = '';
+    });
+  }
+});
+const listenInput = (num: number) => {
+  if (code.value.length < 5) {
+    code.value += num
+  }
+};
+
+</script>
+
+<template>
+    <main>
+      <el-card class="card" style="padding-bottom: 1rem">
+        <CardTools/>
+        <el-row style="text-align: center">
+          <el-col :span="24">
+            <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>
+          </el-col>
+          <el-col :span=8>
+            <el-button @click="router.push({'name':'send'})"  class="key-button" :icon="Upload" round>
+            </el-button>
+          </el-col>
+          <el-col :span=8>
+            <el-button class="key-button" round @click="listenInput(0)">0</el-button>
+          </el-col>
+          <el-col :span=8>
+            <el-button class="key-button" round :icon="TakeawayBox" @click="fileBoxStore.showFileBox=true">
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <div style="text-align: center; margin-top: 1rem;color: #606266">
+        <a style="text-decoration: none;color: #606266" target="_blank" href="https://github.com/vastsa/FileCodeBox">FileCodeBox V2.0 Beta</a>
+      </div>
+    </main>
+</template>
+<style lang='scss'>
+  .key-button{
+    width: 6rem;
+    height: 6rem;
+    margin: 0.2rem;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .code-input {
+    height: 100px;
+    font-size: 30px;
+    font-weight: bold;
+    margin: 1rem 0;
+    .el-input__wrapper{
+      border-radius: 20px !important;
+    }
+  }
+</style>
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import CardTools from "@/components/CardTools.vue";
+import UploadFile from "@/components/UploadFile.vue";
+import UploadText from "@/components/UploadText.vue";
+const shareData = ref({
+  expireValue: 1,
+  expireStyle: 'day',
+  targetType: 'file',
+})
+</script>
+
+<template>
+  <main>
+    <el-card class="card" style="padding: 1rem;position: relative"  :body-style="{ padding: '0px 0px 20px 0px' }">
+      <card-tools/>
+      <div style="display: flex;margin-top: 1rem">
+        <div>
+          <el-input
+              v-model="shareData.expireValue"
+              style="width: 200px"
+              placeholder="请输入值"
+          >
+            <template #prepend>
+              <el-select v-model="shareData.expireStyle" placeholder="过期方式" style="width: 75px">
+                <el-option label="天数" value="day" />
+                <el-option label="小时" value="hour" />
+                <el-option label="分钟" value="minute" />
+                <el-option label="永久" value="forever" />
+                <el-option label="次数" value="count" />
+              </el-select>
+            </template>
+            <template #append>
+              <span v-if="shareData.expireStyle=='day'">天</span>
+              <span v-else-if="shareData.expireStyle=='hour'">时</span>
+              <span v-else-if="shareData.expireStyle=='minute'">分</span>
+              <span v-else-if="shareData.expireStyle=='forever'">👌</span>
+              <span v-else-if="shareData.expireStyle=='count'">次</span>
+            </template>
+          </el-input>
+        </div>
+        <el-radio-group v-model="shareData.targetType" style="margin-left: 1rem;">
+          <el-radio label="file">文件</el-radio>
+          <el-radio label="text">文本</el-radio>
+        </el-radio-group>
+      </div>
+      <div style="margin-top: 1rem">
+        <upload-file :shareData="shareData" v-if="shareData.targetType=='file'"/>
+        <upload-text :shareData="shareData" v-else-if="shareData.targetType=='text'"/>
+      </div>
+    </el-card>
+  </main>
+</template>