mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
fix: design download
This commit is contained in:
parent
148bfcadde
commit
50d193c067
139
src/components/common/ProgressLoading/download.vue
Normal file
139
src/components/common/ProgressLoading/download.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-03-17 16:10:21
|
||||
* @Description:
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-03 12:25:15
|
||||
-->
|
||||
<template>
|
||||
<div v-if="percent" v-show="!hide" class="mask">
|
||||
<div class="content">
|
||||
<div class="tool">
|
||||
<div v-show="percent < 100" class="backstage" @click="close"><iconSell width="18" /> <span style="margin-left: 0.4rem">后台下载</span></div>
|
||||
<iconClose v-show="percent >= 100" class="backstage" @click="cancel" width="20" />
|
||||
</div>
|
||||
<div class="text">{{ text }}</div>
|
||||
<el-progress style="width: 100%" :text-inside="true" :percentage="percent" />
|
||||
<div v-show="percent < 100" class="text btn" @click="cancel">{{ cancelText }}</div>
|
||||
<div class="text info">{{ msg }}</div>
|
||||
<div v-show="percent >= 100" class="success">
|
||||
<img src="https://store.palxp.cn/Celebration.png" alt="" srcset="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref } from 'vue'
|
||||
import { ElProgress } from 'element-plus'
|
||||
import { Close as iconClose, Sell as iconSell } from '@element-plus/icons-vue'
|
||||
import toolTip from '@/components/common/PopoverTip.vue'
|
||||
|
||||
type TProps = {
|
||||
percent: number
|
||||
text?: string
|
||||
cancelText?: string
|
||||
msg?: string
|
||||
}
|
||||
|
||||
type TEmits = {
|
||||
(event: 'done'): void
|
||||
(event: 'cancel'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
percent: 0,
|
||||
text: '',
|
||||
cancelText: '',
|
||||
msg: '',
|
||||
})
|
||||
|
||||
const hide = ref(false)
|
||||
|
||||
const emit = defineEmits<TEmits>()
|
||||
|
||||
watch(
|
||||
() => props.percent,
|
||||
(num) => {
|
||||
if (num >= 100) {
|
||||
// setTimeout(() => {
|
||||
// emit('done')
|
||||
// }, 1000)
|
||||
hide.value = false
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const cancel = () => {
|
||||
emit('cancel')
|
||||
hide.value = false
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
hide.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
cancel,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-progress-bar__innerText) {
|
||||
opacity: 0;
|
||||
}
|
||||
.mask {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0 24%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.content {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
.text {
|
||||
margin: 2rem 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
.btn {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #3771e5;
|
||||
}
|
||||
.info {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #777777;
|
||||
}
|
||||
.tool {
|
||||
text-align: right;
|
||||
.backstage {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.success {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2021-12-28 09:29:42
|
||||
* @Description: 百分比进度条
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @Date: 2024-03-05 10:50:00
|
||||
-->
|
||||
<template>
|
||||
<div v-if="percent" class="mask">
|
||||
<div class="content">
|
||||
@ -22,8 +15,8 @@ import { ElProgress } from 'element-plus'
|
||||
|
||||
type TProps = {
|
||||
percent: number
|
||||
text: string
|
||||
cancelText: string
|
||||
text?: string
|
||||
cancelText?: string
|
||||
msg?: string
|
||||
}
|
||||
|
||||
@ -32,12 +25,17 @@ type TEmits = {
|
||||
(event: 'cancel'): void
|
||||
}
|
||||
|
||||
const {percent, text, cancelText, msg} = defineProps<TProps>()
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
percent: 0,
|
||||
text: '',
|
||||
cancelText: '',
|
||||
msg: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits<TEmits>()
|
||||
|
||||
watch(
|
||||
() => percent,
|
||||
() => props.percent,
|
||||
(num) => {
|
||||
if (num >= 100) {
|
||||
setTimeout(() => {
|
||||
|
@ -2,9 +2,9 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2023-09-18 17:34:44
|
||||
* @Description:
|
||||
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastUpdateContent: Support typescript
|
||||
* @LastEditTime: 2024-02-25 14:51:00
|
||||
* @LastEditTime: 2024-04-03 10:58:42
|
||||
-->
|
||||
<template>
|
||||
<div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
|
||||
@ -45,6 +45,7 @@
|
||||
<ProgressLoading
|
||||
:percent="state.downloadPercent"
|
||||
:text="state.downloadText"
|
||||
:msg="state.downloadMsg"
|
||||
cancelText="取消"
|
||||
@cancel="downloadCancel"
|
||||
@done="state.downloadPercent = 0"
|
||||
@ -66,7 +67,7 @@ import lineGuides from '@/components/modules/layout/lineGuides.vue'
|
||||
import shortcuts from '@/mixins/shortcuts'
|
||||
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
||||
import HeaderOptions from './components/HeaderOptions.vue'
|
||||
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
|
||||
import ProgressLoading from '@/components/common/ProgressLoading/download.vue'
|
||||
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
|
||||
@ -77,6 +78,7 @@ type TState = {
|
||||
style: CSSProperties
|
||||
downloadPercent: number // 下载进度
|
||||
downloadText: string
|
||||
downloadMsg: string | undefined
|
||||
isContinue: boolean
|
||||
APP_NAME: string
|
||||
showLineGuides: boolean
|
||||
@ -101,6 +103,7 @@ const state = reactive<TState>({
|
||||
// openDraw: false,
|
||||
downloadPercent: 0, // 下载进度
|
||||
downloadText: '',
|
||||
downloadMsg: '',
|
||||
isContinue: true,
|
||||
APP_NAME: _config.APP_NAME,
|
||||
showLineGuides: false,
|
||||
@ -217,9 +220,10 @@ function fixTopBarScroll() {
|
||||
// console.log('click listener', e)
|
||||
// }
|
||||
|
||||
function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number, downloadText: string }) {
|
||||
function optionsChange({ downloadPercent, downloadText, downloadMsg }: { downloadPercent: number, downloadText: string, downloadMsg?: string }) {
|
||||
state.downloadPercent = downloadPercent
|
||||
state.downloadText = downloadText
|
||||
state.downloadMsg = downloadMsg
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -2,8 +2,8 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-03-25 15:19:02
|
||||
* @Description: 版权声明
|
||||
* @LastEditors: ShawnPhang <site: book.palxp.com>
|
||||
* @LastEditTime: 2023-08-08 10:09:59
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-03 10:55:43
|
||||
-->
|
||||
<template>
|
||||
<tool-tip title="免责声明" :width="340" :content="content">
|
||||
@ -16,7 +16,7 @@
|
||||
<script lang="ts" setup>
|
||||
import toolTip from '@/components/common/PopoverTip.vue'
|
||||
|
||||
const content = '本站为个人项目,所使用素材图片等均为网络收集而来,下载之作品仅供学习研究或欣赏目的而使用,无法提供商用授权哦。'
|
||||
const content = '本站为个人项目,所使用图片等素材均为网络搜集而来,下载作品仅供学习、研究或欣赏用途,暂不提供商用授权。'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
@ -3,7 +3,7 @@
|
||||
* @Date: 2022-01-12 11:26:53
|
||||
* @Description: 顶部操作按钮组
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-03-11 01:43:30
|
||||
* @LastEditTime: 2024-04-03 12:21:25
|
||||
-->
|
||||
<template>
|
||||
<div class="top-title"><el-input v-model="state.title" placeholder="未命名的设计" class="input-wrap" /></div>
|
||||
@ -37,9 +37,7 @@ import { useFontStore } from '@/common/methods/fonts'
|
||||
import copyRight from './CopyRight.vue'
|
||||
import _config from '@/config'
|
||||
import useConfirm from '@/common/methods/confirm'
|
||||
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
||||
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { useBaseStore, useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
|
||||
import { useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
type TProps = {
|
||||
@ -103,8 +101,6 @@ async function save(hasCover: boolean = false) {
|
||||
const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
|
||||
stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
|
||||
!id && router.push({ path: '/home', query: { id: newId }, replace: true })
|
||||
|
||||
// store.commit('setShowMoveable', true)
|
||||
controlStore.setShowMoveable(true)
|
||||
}
|
||||
|
||||
@ -151,15 +147,14 @@ async function saveTemp() {
|
||||
}
|
||||
state.loading = true
|
||||
emit('update:modelValue', true)
|
||||
emit('change', { downloadPercent: 1, downloadText: '正在处理封面' })
|
||||
emit('change', { downloadPercent: 1, downloadText: '请稍候..' })
|
||||
await save(true)
|
||||
setTimeout(async () => {
|
||||
const { id } = route.query
|
||||
if (id) {
|
||||
const { width, height } = dPage.value
|
||||
emit('update:modelValue', true)
|
||||
emit('change', { downloadPercent: 1, downloadText: '准备合成图片' })
|
||||
state.loading = false
|
||||
emit('change', { downloadPercent: 1, downloadText: '正在处理数据' })
|
||||
let timerCount = 0
|
||||
const animation = setInterval(() => {
|
||||
if (props.modelValue && timerCount < 75) {
|
||||
@ -175,9 +170,11 @@ async function saveTemp() {
|
||||
progress >= timerCount && emit('change', { downloadPercent: Number(progress.toFixed(0)), downloadText: '图片生成中' })
|
||||
} else {
|
||||
xhr.abort()
|
||||
state.loading = false
|
||||
}
|
||||
})
|
||||
emit('change', { downloadPercent: 100, downloadText: '图片下载中' })
|
||||
emit('change', { downloadPercent: 100, downloadText: '作品下载成功', downloadMsg: '仅供学习、研究或欣赏等用途,暂不提供商业授权。' })
|
||||
state.loading = false
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user