From 36a67967b39f668438d7e86d6dcc25ade83a1df5 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Mon, 4 Mar 2024 12:34:38 +0000
Subject: [PATCH] feat: Convert picture-selector to vue3

---
 src/api/material.ts                           |  17 +-
 .../business/picture-selector/index.vue       | 177 +++++++++---------
 2 files changed, 106 insertions(+), 88 deletions(-)

diff --git a/src/api/material.ts b/src/api/material.ts
index 8d452e5..da961f4 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -62,11 +62,24 @@ export type TGetFontItemData = {
 export const getFonts = (params: TGetFontParam = {}) => fetch<TPageRequestResult<TGetFontItemData[]>>('design/fonts', params)
 export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra)
 
+type TGetImageListParams = {
+  page?: number
+}
+
+export type TGetImageListResult = {
+  created_time: string
+  height: number
+  width: number
+  url: string
+  user_id: number
+  id: string
+}
+
 // 图库列表
-export const getImagesList = (params: Type.Object = {}) => fetch('design/imgs', params, 'get')
+export const getImagesList = (params: TGetImageListParams) => fetch<TPageRequestResult<TGetImageListResult[]>>('design/imgs', params, 'get')
 
 // 我的上传列表
-export const getMyPhoto = (params: Type.Object = {}) => fetch('design/user/image', params)
+export const getMyPhoto = (params: TGetImageListParams) => fetch<TPageRequestResult<TGetImageListResult[]>>('design/user/image', params)
 export const deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post')
 export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post')
 
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index 23da2d6..f67f707 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -6,16 +6,16 @@
  * @LastEditTime: 2023-10-05 00:04:51
 -->
 <template>
-  <el-dialog v-model="dialogVisible" title="选择图片" @close="close">
+  <el-dialog v-model="state.dialogVisible" title="选择图片" @close="close">
     <el-tabs tab-position="left" style="height: 60vh" class="demo-tabs" @tab-change="tabChange">
       <el-tab-pane label="我的素材">
         <div class="pic__box">
-          <photo-list :isDone="isDone" :listData="imgList" @load="load" @select="selectImg" />
+          <photo-list :isDone="state.isDone" :listData="state.imgList" @load="load" @select="selectImg" />
         </div>
       </el-tab-pane>
       <el-tab-pane label="照片图库">
         <div class="pic__box">
-          <photo-list :isDone="isPicsDone" :listData="recommendImgList" @load="loadPic" @select="selectImg($event, recommendImgList)" />
+          <photo-list :isDone="state.isPicsDone" :listData="state.recommendImgList" @load="loadPic" @select="selectImg($event, state.recommendImgList)" />
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -30,96 +30,101 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, toRefs, reactive } from 'vue'
+<script lang="ts" setup>
+import { reactive, defineEmits, defineExpose } from 'vue'
 import { useStore } from 'vuex'
-import { ElTabPane, ElTabs } from 'element-plus'
+import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
+import { TGetImageListResult } from '@/api/material'
 
-export default defineComponent({
-  components: { [ElTabPane.name]: ElTabPane, [ElTabs.name]: ElTabs },
-  emits: ['select'],
-  setup(props, context) {
-    const store = useStore()
-    const state: any = reactive({
-      dialogVisible: false,
-      imgList: [],
-      recommendImgList: [],
-      isDone: false,
-      isPicsDone: false,
-    })
+type TEmits = (event: 'select', data: TGetImageListResult) => void
 
-    let loading = false
-    let page = 0
-    let picPage = 0
-    const load = (init?: boolean) => {
-      if (init) {
-        state.imgList = []
-        page = 0
-        state.isDone = false
-      }
-      if (state.isDone || loading) {
-        return
-      }
-      loading = true
-      page += 1
-      api.material.getMyPhoto({ page }).then(({ list }: any) => {
-        list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
-        setTimeout(() => {
-          loading = false
-        }, 100)
-      })
-    }
-    const loadPic = (init?: boolean) => {
-      if (state.isPicsDone || loading) {
-        return
-      }
-      if (init && state.recommendImgList.length > 0) {
-        return
-      }
-      loading = true
-      picPage += 1
-      api.material.getImagesList({ page: picPage }).then(({ list }: any) => {
-        list.length <= 0 ? (state.isPicsDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
-        setTimeout(() => {
-          loading = false
-        }, 100)
-      })
-    }
+type TState = {
+  dialogVisible: boolean;
+  imgList: TGetImageListResult[];
+  recommendImgList: TGetImageListResult[];
+  isDone: boolean;
+  isPicsDone: boolean;
+}
 
-    const open = () => {
-      state.dialogVisible = true
-      load()
-      store.commit('setShowMoveable', false)
-    }
+const emits = defineEmits<TEmits>()
 
-    const close = () => {
-      store.commit('setShowMoveable', true)
-    }
-
-    const selectImg = (index: number, list: any) => {
-      const item: any = list ? list[index] : state.imgList[index]
-      context.emit('select', item)
-      state.dialogVisible = false
-    }
-
-    const tabChange = (index: any) => {
-      if (index == 1) {
-        loadPic(true)
-      }
-    }
-
-    return {
-      ...toRefs(state),
-      open,
-      close,
-      load,
-      loadPic,
-      selectImg,
-      tabChange,
-    }
-  },
+const store = useStore()
+const state = reactive<TState>({
+  dialogVisible: false,
+  imgList: [],
+  recommendImgList: [],
+  isDone: false,
+  isPicsDone: false,
 })
+
+let loading = false
+let page = 0
+let picPage = 0
+
+const load = async (init?: boolean) => {
+  if (init) {
+    state.imgList = []
+    page = 0
+    state.isDone = false
+  }
+  if (state.isDone || loading) {
+    return
+  }
+  loading = true
+  page += 1
+  api.material.getMyPhoto({ page }).then(({ list }) => {
+    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
+    setTimeout(() => {
+      loading = false
+    }, 100)
+  })
+}
+
+const loadPic = (init?: boolean) => {
+  if (state.isPicsDone || loading) {
+    return
+  }
+  if (init && state.recommendImgList.length > 0) {
+    return
+  }
+  loading = true
+  picPage += 1
+  api.material.getImagesList({ page: picPage }).then(({ list }) => {
+    list.length <= 0 ? (state.isPicsDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
+    setTimeout(() => {
+      loading = false
+    }, 100)
+  })
+}
+
+const open = () => {
+  state.dialogVisible = true
+  load()
+  store.commit('setShowMoveable', false)
+}
+
+const close = () => {
+  store.commit('setShowMoveable', true)
+}
+
+const selectImg = (index: number, list: TGetImageListResult[]) => {
+  const item: TGetImageListResult = list ? list[index] : state.imgList[index]
+  // context.emit('select', item)
+  emits('select', item)
+  state.dialogVisible = false
+}
+
+const tabChange = (index: TabPaneName) => {
+  if (index == 1) {
+    loadPic(true)
+  }
+}
+
+defineExpose({
+  open
+})
+
 </script>
 
 <style lang="less" scoped>