github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-03 03:56:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Convert picture-selector to vue3

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-04 12:34:38 +00:00
parent ed1d7db859
commit 36a67967b3
2 changed files with 106 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/material.ts
View File

@ -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')

177
src/components/business/picture-selector/index.vue
View File

@ -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>