feat: convert upload templat component to composition API

src/views/components/UploadTemplate.vue

@@ -11,105 +11,121 @@
   <SaveImage ref="canvasImage" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import api from '@/api'
-import { defineComponent, reactive, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue'
+import { reactive, ref } from 'vue'
-import { mapGetters, useStore } from 'vuex'
+import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import useNotification from '@/common/methods/notification'
 import SaveImage from '@/components/business/save-download/CreateCover.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default defineComponent({
+type TProps = {
-  components: { SaveImage },
+  modelValue?: string
-  props: ['modelValue', 'isDone'],
+  isDone?: boolean
-  emits: ['change', 'update:modelValue'],
+}
-  setup(props, context) {
-    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
-    const route = useRoute()
-    const router = useRouter()
-    const store = useStore()
-    const state: any = reactive({
-      stateBollean: false,
-      title: '',
-      loading: false,
-      canvasImage: null,
-    })
 
-    useFontStore.init() // 初始化加载字体
+type TEmits = {
+  (event: 'change', data: { downloadPercent: number | null, downloadText: string, downloadMsg?: string, cancelText?: string }): void
+  (event: 'update:modelValue', data: string): void
+}
 
-    // 生成封面
+type TState = {
-    const draw = () => {
+  stateBollean: false,
-      return new Promise((resolve) => {
+  title: '',
-        state.canvasImage.createCover(({ key }: any) => {
+  loading: false,
-          resolve(_config.IMG_URL + key)
+}
-        })
+
+const { dPage, dWidgets } = useSetupMapGetters(['dPage', 'dWidgets'])
+
+const props = defineProps<TProps>()
+const emit = defineEmits<TEmits>()
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const canvasImage = ref<typeof SaveImage | null>(null)
+const state = reactive<TState>({
+  stateBollean: false,
+  title: '',
+  loading: false,
+})
+
+useFontStore.init() // 初始化加载字体
+
+// 生成封面
+const draw = () => {
+  return new Promise((resolve) => {
+    if (!canvasImage.value) {
+      resolve('')
+    } else {
+      canvasImage.value.createCover(({ key }: { key: string }) => {
+        resolve(_config.IMG_URL + key)
       })
     }
+  })
+}
 
-    let addition = 0 // 累加大小
+let addition = 0 // 累加大小
-    let lenCount = 0 // 全部大小
+let lenCount = 0 // 全部大小
-    let lens = 0 // 任务数
+let lens = 0 // 任务数
-    const queue: any[] = [] // 队列
+const queue: { type: string, imgUrl: string }[] = [] // 队列
-    let widgets: any = []
+let widgets: { type: string, imgUrl: string }[] = []
-    let page: any = {}
+let page: Record<string, any> = {}
 
-    async function prepare() {
+async function prepare() {
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-      addition = 0
+  addition = 0
-      lenCount = 0
+  lenCount = 0
-      widgets = proxy.dWidgets
+  widgets = dWidgets.value
-      page = proxy.dPage
+  page = dPage.value
 
-      if (page.backgroundImage) {
+  if (page.backgroundImage) {
-        context.emit('change', { downloadPercent: 1, downloadText: '正在准备上传', downloadMsg: '请等待..' })
+    emit('change', { downloadPercent: 1, downloadText: '正在准备上传', downloadMsg: '请等待..' })
-        page.backgroundImage = await github.putPic(page.backgroundImage.split(',')[1])
+    page.backgroundImage = await github.putPic(page.backgroundImage.split(',')[1])
-      }
+  }
 
-      for (const item of widgets) {
+  for (const item of widgets) {
-        if (item.type === 'w-image') {
+    if (item.type === 'w-image') {
-          lenCount += item.imgUrl.length
+      lenCount += item.imgUrl.length
-          queue.push(item)
+      queue.push(item)
-        }
-      }
-      lens = queue.length
-      uploadImgs()
     }
+  }
+  lens = queue.length
+  uploadImgs()
+}
 
-    async function uploadImgs() {
+async function uploadImgs() {
-      if (queue.length > 0) {
+  if (queue.length > 0) {
-        const item = queue.pop()
+    const item = queue.pop()
-        const url = await github.putPic(item.imgUrl.split(',')[1])
+    if (!item) return
-        addition += item.imgUrl.length
+    const url = await github.putPic(item.imgUrl.split(',')[1])
-        let downloadPercent: any = (addition / lenCount) * 100
+    addition += item.imgUrl.length
-        downloadPercent >= 100 && (downloadPercent = null)
+    let downloadPercent: number | null = (addition / lenCount) * 100
-        context.emit('change', { downloadPercent, downloadText: '上传资源中', downloadMsg: `已完成：${lens - queue.length} / ${lens}` })
+    downloadPercent >= 100 && (downloadPercent = null)
-        item.imgUrl = url
+    emit('change', { downloadPercent, downloadText: '上传资源中', downloadMsg: `已完成：${lens - queue.length} / ${lens}` })
-        uploadImgs()
+    item.imgUrl = url
-      } else {
+    uploadImgs()
-        uploadTemplate()
+  } else {
-      }
+    uploadTemplate()
-    }
+  }
+}
 
     const uploadTemplate = async () => {
-      context.emit('change', { downloadPercent: 95, downloadText: '正在处理封面', downloadMsg: '即将结束...' })
+      emit('change', { downloadPercent: 95, downloadText: '正在处理封面', downloadMsg: '即将结束...' })
       const cover = await draw()
       const { id, stat, msg } = await api.home.saveWorks({ cover, title: '自设计模板', data: JSON.stringify({ page, widgets }), width: page.width, height: page.height })
       stat !== 0 ? useNotification('保存成功', '可在"我的模板"中查看') : useNotification('保存失败', msg, { type: 'error' })
       router.push({ path: '/psd', query: { id }, replace: true })
-      context.emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '查看我的作品' }) // 关闭弹窗
+      emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '查看我的作品' }) // 关闭弹窗
     }
 
-    return {
+defineExpose({
-      ...toRefs(state),
+  prepare,
-      prepare,
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage', 'dWidgets']),
-  },
 })
 </script>