mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: convert PhotoListWrap component to composition API
This commit is contained in:
IchliebedichZhu
parent
b1a485d521
commit
e9114e6702
@ -73,6 +73,7 @@ export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {
|
||||
|
||||
type TGetImageListParams = {
|
||||
page?: number
|
||||
pageSize?: number
|
||||
cate?: number
|
||||
}
|
||||
|
||||
|
||||
@ -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,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 {
|
||||
name: NAME,
|
||||
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 TProps = {
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user