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">
+    <div v-if="state.currentCategory">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+      <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,93 +33,102 @@ 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';
 
-export default {
+type TProps = {
-  name: NAME,
+  active?: boolean
-  components: {},
-  props: ['active'],
-  setup() {
-    const store = useStore()
-    const state = reactive({
-      recommendImgList: [],
-      loadDone: false,
-      page: 0,
-      currentCategory: null,
-      types: [],
-      showList: [],
-    })
-    const dPage = computed(() => store.getters.dPage)
-    let loading = false
-
-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 4 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
-          state.showList.push(list)
-        }
-      }
-    })
-
-    const selectImg = async (index, list) => {
-      const item = list ? list[index] : state.recommendImgList[index]
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = JSON.parse(JSON.stringify(wImageSetting))
-      const img = await setImageData(item) // await getImage(item.url)
-      setting.width = img.width
-      setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      setting.imgUrl = item.url
-      const { width: pW, height: pH } = dPage
-      setting.left = pW / 2 - img.width / 2
-      setting.top = pH / 2 - img.height / 2
-      store.dispatch('addWidget', setting)
-    }
-
-    const getDataList = async () => {
-      if (state.loadDone || loading) {
-        return
-      }
-      loading = true
-      state.page += 1
-      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(() => {
-        loading = false
-      }, 100)
-    }
-
-    const dragStart = (index, list) => {
-      const item = list ? list[index] : state.recommendImgList[index]
-      store.commit('selectItem', { data: { value: item }, type: 'image' })
-    }
-
-    const searchChange = (e) => {
-      console.log(e)
-    }
-
-    const selectTypes = (item) => {
-      state.currentCategory = item
-      getDataList()
-    }
-    const back = () => {
-      state.currentCategory = null
-      state.page = 0
-      state.loadDone = false
-      state.recommendImgList = []
-    }
-
-    return {
-      ...toRefs(state),
-      selectImg,
-      getDataList,
-      dragStart,
-      searchChange,
-      selectTypes,
-      back,
-    }
-  },
 }
+
+type TState = {
+  recommendImgList: TGetImageListResult[],
+  loadDone: boolean,
+  page: 0,
+  currentCategory: null | Record<string, any>,
+  types: [],
+  showList: TGetImageListResult[][],
+}
+
+const props = defineProps<TProps>()
+
+const store = useStore()
+const state = reactive<TState>({
+  recommendImgList: [],
+  loadDone: false,
+  page: 0,
+  currentCategory: null,
+  types: [],
+  showList: [],
+})
+const dPage = computed(() => store.getters.dPage)
+let loading = false
+
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 4 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
+      state.showList.push(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))
+  const img = await setImageData(item) // await getImage(item.url)
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  setting.imgUrl = item.url
+  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)
+}
+
+const getDataList = async () => {
+  if (state.loadDone || loading) {
+    return
+  }
+  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(() => {
+    loading = false
+  }, 100)
+}
+
+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: Record<string, any>) => {
+  console.log(e)
+}
+
+const selectTypes = (item: Record<string, any>) => {
+  state.currentCategory = item
+  getDataList()
+}
+const back = () => {
+  state.currentCategory = null
+  state.page = 0
+  state.loadDone = false
+  state.recommendImgList = []
+}
+
+defineExpose({
+  selectImg,
+  getDataList,
+  dragStart,
+  searchChange,
+  selectTypes,
+  back,
+})
 </script>
 
 <style lang="less" scoped>