feat: convert PhotoListWrap component to composition API

src/api/material.ts

@@ -73,6 +73,7 @@ export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {
 
 type TGetImageListParams = {
   page?: number
+  pageSize?: number
   cate?: number
 }
 

src/components/modules/panel/wrap/PhotoListWrap.vue

@@ -9,22 +9,22 @@
   <div class="wrap">
     <search-header type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
-        <photo-list :isShort="true" :listData="showList[index]" @load="getDataList" @drag="dragStart($event, showList[index])" @select="selectImg($event, showList[index])" />
+        <photo-list :isShort="true" :listData="state.showList[index]" @load="getDataList" @drag="dragStart($event, state.showList[index])" @select="selectImg($event, state.showList[index])" />
       </template>
     </classHeader>
-    <div v-if="currentCategory">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <div v-if="state.currentCategory">
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <br /><br /><br />
       <div style="margin: 0 1rem; height: 100vh">
-        <photo-list :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
+        <photo-list :isDone="state.loadDone" :listData="state.recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片列表
 const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
@@ -33,14 +33,25 @@ import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
+import { TGetImageListResult } from '@/api/material';
+
+type TProps = {
+  active?: boolean
+}
+
+type TState = {
+  recommendImgList: TGetImageListResult[],
+  loadDone: boolean,
+  page: 0,
+  currentCategory: null | Record<string, any>,
+  types: [],
+  showList: TGetImageListResult[][],
+}
+
+const props = defineProps<TProps>()
 
-export default {
-  name: NAME,
-  components: {},
-  props: ['active'],
-  setup() {
 const store = useStore()
-    const state = reactive({
+const state = reactive<TState>({
   recommendImgList: [],
   loadDone: false,
   page: 0,
@@ -62,7 +73,7 @@ export default {
   }
 })
 
-    const selectImg = async (index, list) => {
+const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
   let setting = JSON.parse(JSON.stringify(wImageSetting))
@@ -70,7 +81,7 @@ export default {
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
   setting.imgUrl = item.url
-      const { width: pW, height: pH } = dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   store.dispatch('addWidget', setting)
@@ -82,6 +93,7 @@ export default {
   }
   loading = true
   state.page += 1
+  if (!state.currentCategory) return
   let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
   list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
   setTimeout(() => {
@@ -89,16 +101,16 @@ export default {
   }, 100)
 }
 
-    const dragStart = (index, list) => {
+const dragStart = (index: number, list?: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
   store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 
-    const searchChange = (e) => {
+const searchChange = (e: Record<string, any>) => {
   console.log(e)
 }
 
-    const selectTypes = (item) => {
+const selectTypes = (item: Record<string, any>) => {
   state.currentCategory = item
   getDataList()
 }
@@ -109,17 +121,14 @@ export default {
   state.recommendImgList = []
 }
 
-    return {
-      ...toRefs(state),
+defineExpose({
   selectImg,
   getDataList,
   dragStart,
   searchChange,
   selectTypes,
   back,
-    }
-  },
-}
+})
 </script>
 
 <style lang="less" scoped>