mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: photo revision
This commit is contained in:
ShawnPhang
parent
9f0e0dd73c
commit
80307008c6
@ -3,7 +3,7 @@
|
||||
* @Date: 2021-08-27 15:16:07
|
||||
* @Description: 背景图
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 00:21:34
|
||||
* @LastEditTime: 2023-10-04 21:25:54
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
@ -12,9 +12,9 @@
|
||||
</div>
|
||||
<ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<div class="list">
|
||||
<el-tooltip v-for="(item, i) in bgList" :key="i + 'i'" :content="`<p style='max-width:140px;'><b>${item.description}</b></p><p>@${item.author}</p>`" offset="0" effect="light" placement="top-start" hide-after="0" :enterable="false" raw-content>
|
||||
<imageTip v-for="(item, i) in bgList" :key="i + 'i'" :detail="item">
|
||||
<el-image class="list__img" :src="item.thumb" fit="cover" lazy loading="lazy" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
|
||||
</el-tooltip>
|
||||
</imageTip>
|
||||
</div>
|
||||
<div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
|
||||
<div v-show="loadDone" class="loading">全部加载完毕</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2021-08-27 15:16:07
|
||||
* @Description: 素材列表，主要用于文字组合列表
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 00:23:04
|
||||
* @LastEditTime: 2023-10-04 12:34:13
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
@ -15,23 +15,18 @@
|
||||
</el-input>
|
||||
</div>
|
||||
<el-divider content-position="left">推荐组件</el-divider> -->
|
||||
<div v-show="!currentCategory" class="content__wrap">
|
||||
<div v-for="(t, ti) in types" :key="ti + 't'">
|
||||
<div v-if="showList[ti]?.length > 0" class="types__header" @click="selectTypes(t)">
|
||||
<span style="flex: 1">{{ t.name }}</span>
|
||||
<span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
|
||||
</div>
|
||||
<div v-else class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
|
||||
<classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
|
||||
<template v-slot="{ index }">
|
||||
<div class="list-wrap">
|
||||
<div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<el-image class="list__img-thumb" :src="item.cover" fit="contain" lazy loading="lazy"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</classHeader>
|
||||
|
||||
<ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
|
||||
<classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
|
||||
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
|
||||
<div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<!-- <edit-model :isComp="true" @action="action($event, item, i)"> -->
|
||||
@ -53,13 +48,14 @@ import { mapActions } from 'vuex'
|
||||
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
|
||||
import DragHelper from '@/common/hooks/dragHelper'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
|
||||
const dragHelper = new DragHelper()
|
||||
let isDrag = false
|
||||
let startPoint = { x: 99999, y: 99999 }
|
||||
let tempDetail: any = null
|
||||
|
||||
export default defineComponent({
|
||||
// components: { ElDivider },
|
||||
components: {},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
@ -75,7 +71,6 @@ export default defineComponent({
|
||||
onMounted(async () => {
|
||||
if (state.types.length <= 0) {
|
||||
const types = await api.material.getKinds({ type: 3 })
|
||||
types.shift()
|
||||
state.types = types
|
||||
for (const iterator of types) {
|
||||
const { list } = await api.home.getCompList({
|
||||
@ -259,76 +254,9 @@ export default defineComponent({
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.types {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0 0 6px;
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
// height: 44px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 8px 4px 0 4px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
&--select {
|
||||
opacity: 1;
|
||||
}
|
||||
&__header {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #a0a0a0;
|
||||
font-size: 13px;
|
||||
}
|
||||
&-back {
|
||||
cursor: pointer;
|
||||
padding: 0 0 0 0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
height: 2.9rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #ffffff;
|
||||
width: 320px;
|
||||
.icon-right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
.content {
|
||||
&__wrap {
|
||||
padding: 0.5rem 1rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,34 +3,30 @@
|
||||
* @Date: 2021-08-27 15:16:07
|
||||
* @Description: 素材列表
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 00:23:52
|
||||
* @LastEditTime: 2023-10-04 12:34:27
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<search-header v-model="searchKeyword" type="none" @change="searchChange" />
|
||||
<div style="height: 0.5rem" />
|
||||
<!-- <div class="types">
|
||||
<div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
|
||||
</div> -->
|
||||
<!-- <div class="tags">
|
||||
<el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
|
||||
</div> -->
|
||||
<div v-show="!currentCategory" class="content__wrap">
|
||||
<div v-for="(t, ti) in types" :key="ti + 't'">
|
||||
<div v-if="showList[ti]?.length > 0" class="types__header" @click="selectTypes(t)">
|
||||
<span style="flex: 1">{{ t.name }}</span>
|
||||
<span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
|
||||
</div>
|
||||
<div v-else class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
|
||||
<classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
|
||||
<template v-slot="{ index }">
|
||||
<div class="list-wrap">
|
||||
<div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</classHeader>
|
||||
|
||||
<ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
|
||||
<classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
|
||||
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
|
||||
<div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
|
||||
@ -50,11 +46,13 @@ import wSvg from '../../widgets/wSvg/wSvg.vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
import DragHelper from '@/common/hooks/dragHelper'
|
||||
|
||||
let isDrag = false
|
||||
let startPoint = { x: 99999, y: 99999 }
|
||||
const dragHelper = new DragHelper()
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
props: ['active'],
|
||||
setup(props) {
|
||||
const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
|
||||
@ -76,7 +74,6 @@ export default defineComponent({
|
||||
onMounted(async () => {
|
||||
if (state.types.length <= 0) {
|
||||
const types = await api.material.getKinds({ type: 2 })
|
||||
types.shift()
|
||||
state.types = types
|
||||
for (const iterator of types) {
|
||||
const { list } = await api.material.getList({
|
||||
@ -200,65 +197,6 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.types {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0 0 6px;
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
// height: 44px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 8px 4px 0 4px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
&--select {
|
||||
opacity: 1;
|
||||
}
|
||||
&__header {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #a0a0a0;
|
||||
font-size: 13px;
|
||||
}
|
||||
&-back {
|
||||
cursor: pointer;
|
||||
padding: 0 0 0 0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
height: 2.9rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #ffffff;
|
||||
width: 320px;
|
||||
.icon-right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
padding: 20px 0 0 10px;
|
||||
&__item {
|
||||
@ -309,13 +247,4 @@ export default defineComponent({
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.content {
|
||||
&__wrap {
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,80 +1,122 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-02-11 18:48:23
|
||||
* @Description:
|
||||
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
|
||||
* @LastEditTime: 2023-09-01 14:18:14
|
||||
* @Description: 照片图库 Form:Unsplash无版权图片
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 19:04:39
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<search-header type="none" @change="searchChange" />
|
||||
<div style="height: 0.5rem" />
|
||||
<classHeader v-show="!currentCategory" :types="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])" />
|
||||
</template>
|
||||
</classHeader>
|
||||
<div v-if="currentCategory">
|
||||
<classHeader :is-back="true" @back="back">{{ 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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 图片列表
|
||||
const NAME = 'img-list-wrap'
|
||||
|
||||
import { toRefs, reactive, computed, onMounted } from 'vue'
|
||||
import wImage from '../../widgets/wImage/wImage.vue'
|
||||
import api from '@/api'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { useStore } from 'vuex'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
// import imgList from './components/imgList.vue'
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
// components: { imgList },
|
||||
components: {},
|
||||
props: ['active'],
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const state = reactive({
|
||||
recommendImgList: [],
|
||||
// loading: false,
|
||||
loadDone: false,
|
||||
page: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dPage']),
|
||||
},
|
||||
currentCategory: null,
|
||||
types: [],
|
||||
showList: [],
|
||||
})
|
||||
const dPage = computed(() => store.getters.dPage)
|
||||
let loading = false
|
||||
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['addWidget']),
|
||||
async getDataList() {
|
||||
if (this.loadDone || this.loading) {
|
||||
return
|
||||
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)
|
||||
}
|
||||
this.loading = true
|
||||
this.page += 1
|
||||
let { list = [], total } = await api.material.getImagesList({ page: this.page, pageSize: 30 })
|
||||
list.length <= 0 ? (this.loadDone = true) : (this.recommendImgList = this.recommendImgList.concat(list))
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 100)
|
||||
},
|
||||
async selectImg(index) {
|
||||
const item = this.recommendImgList[index]
|
||||
this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
}
|
||||
})
|
||||
|
||||
const selectImg = async (index, list) => {
|
||||
const item = list ? list[index] : state.recommendImgList[index]
|
||||
store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = JSON.parse(JSON.stringify(wImage.setting))
|
||||
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 } = this.dPage
|
||||
const { width: pW, height: pH } = dPage
|
||||
setting.left = pW / 2 - img.width / 2
|
||||
setting.top = pH / 2 - img.height / 2
|
||||
this.addWidget(setting)
|
||||
},
|
||||
dragStart(index) {
|
||||
const item = this.recommendImgList[index]
|
||||
this.$store.commit('selectItem', { data: { value: item }, type: 'image' })
|
||||
},
|
||||
searchChange(e) {
|
||||
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,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-02-11 18:48:23
|
||||
* @Description: 组件列表
|
||||
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
|
||||
* @LastEditTime: 2023-09-01 14:17:46
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 00:43:54
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
@ -55,11 +55,6 @@ export default {
|
||||
}
|
||||
this.loading = true
|
||||
this.page += 1
|
||||
// let { list = [], total } = await api.material.getImagesList({ page: this.page, pageSize: 30 })
|
||||
// list.length <= 0 ? (this.loadDone = true) : (this.recommendImgList = this.recommendImgList.concat(list))
|
||||
// setTimeout(() => {
|
||||
// this.loading = false
|
||||
// }, 100)
|
||||
},
|
||||
addQrcode() {
|
||||
this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-02-13 22:18:35
|
||||
* @Description: 我的
|
||||
* @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
|
||||
* @LastEditTime: 2023-09-01 14:17:23
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 19:11:12
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
@ -11,13 +11,15 @@
|
||||
<el-tab-pane label="资源管理" name="pics"> </el-tab-pane>
|
||||
<el-tab-pane label="我的作品" name="design"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-show="tabActiveName === 'pics'" class="wrap">
|
||||
<div v-show="tabActiveName === 'pics'">
|
||||
<uploader v-model="percent" class="upload" @done="uploadDone">
|
||||
<el-button class="upload-btn" plain>上传图片 <i class="iconfont icon-upload" /></el-button>
|
||||
</uploader>
|
||||
<el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">上传 PSD 模板</el-button>
|
||||
<div style="margin: 1rem; height: 100vh">
|
||||
<photo-list ref="imgListRef" :edit="editOptions" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tabActiveName === 'design'" class="wrap">
|
||||
<ul ref="listRef" v-infinite-scroll="loadDesign" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<img-water-fall :listData="designList" @select="selectDesign" />
|
||||
|
||||
109
src/components/modules/panel/wrap/components/classHeader.vue
Normal file
109
src/components/modules/panel/wrap/components/classHeader.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2023-10-04 02:04:04
|
||||
* @Description: 列表分类头部
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 02:30:59
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!isBack" class="content__wrap">
|
||||
<div v-for="(t, ti) in types" :key="ti + 't'">
|
||||
<div class="types__header" @click="select(t)">
|
||||
<span style="flex: 1">{{ t.name }}</span>
|
||||
<span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
|
||||
</div>
|
||||
<slot :index="ti" />
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="types__header-back" @click="back">
|
||||
<i class="iconfont icon-right"></i>
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
props: ['types', 'isBack'],
|
||||
emits: ['select', 'back'],
|
||||
setup(props, { emit }) {
|
||||
const select = (item: any) => {
|
||||
emit('select', item)
|
||||
}
|
||||
const back = () => {
|
||||
emit('back')
|
||||
}
|
||||
return { select, back }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
&__wrap {
|
||||
padding: 0.5rem 1rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
.types {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0 0 6px;
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
// height: 44px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 8px 4px 0 4px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
&--select {
|
||||
opacity: 1;
|
||||
}
|
||||
&__header {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #a0a0a0;
|
||||
font-size: 13px;
|
||||
}
|
||||
&-back {
|
||||
cursor: pointer;
|
||||
padding: 0 0 0 0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
height: 2.9rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #ffffff;
|
||||
width: 320px;
|
||||
.icon-right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
src/components/modules/panel/wrap/components/imageTip.vue
Normal file
31
src/components/modules/panel/wrap/components/imageTip.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2023-10-04 19:12:40
|
||||
* @Description: 图片描述ToolTip
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 22:21:22
|
||||
-->
|
||||
<template>
|
||||
<el-tooltip :offset="1" effect="light" placement="bottom-start" :hide-after="0" :enterable="false" raw-content>
|
||||
<template #content>
|
||||
<p style="max-width: 140px">
|
||||
<b>{{ detail.description }}</b>
|
||||
</p>
|
||||
<p>@{{ detail.author }}</p>
|
||||
</template>
|
||||
<slot />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
detail: {},
|
||||
},
|
||||
setup() {
|
||||
return {}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -3,19 +3,24 @@
|
||||
* @Date: 2022-02-23 15:48:52
|
||||
* @Description: 图片列表组件 Bookshelf Layout
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 00:20:31
|
||||
* @LastEditTime: 2023-10-04 22:05:21
|
||||
-->
|
||||
<template>
|
||||
<ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)">
|
||||
<ul ref="listRef" class="img-list-wrap" :style="{ paddingBottom: isShort ? '15px' : '200px' }" @scroll="scrollEvent($event)">
|
||||
<div class="list">
|
||||
<div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px' }" class="list__img transparent-bg" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
|
||||
<div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px' }" class="list__img" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
|
||||
<edit-model v-if="edit" :options="edit" :data="{ item, i }">
|
||||
<div v-if="item.isDelect" class="list__mask">已删除</div>
|
||||
<!-- <img class="img" :src="item.thumb || item.cover || item.url" /> -->
|
||||
<el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
|
||||
<el-image class="img transparent-bg" :src="item.thumb || item.url" lazy loading="lazy" />
|
||||
</edit-model>
|
||||
<template v-else>
|
||||
<el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
|
||||
<imageTip :detail="item">
|
||||
<el-image class="img" :src="item.thumb || item.url" :style="{ height: getInnerHeight(item) + 'px' }" lazy loading="lazy">
|
||||
<template #placeholder>
|
||||
<div :style="{ backgroundColor: item.color }" class="image-color" />
|
||||
</template>
|
||||
</el-image>
|
||||
</imageTip>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,6 +39,9 @@ export default defineComponent({
|
||||
listData: {},
|
||||
edit: {},
|
||||
isDone: {},
|
||||
isShort: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['load', 'drag', 'select'],
|
||||
setup(props, context) {
|
||||
@ -63,14 +71,15 @@ export default defineComponent({
|
||||
watch(
|
||||
() => props.listData,
|
||||
async (newList: any, oldList: any) => {
|
||||
!oldList && (oldList = [])
|
||||
if (newList.length <= 0) {
|
||||
state.list.length = 0
|
||||
return
|
||||
}
|
||||
let list = newList.filter((v: any) => !newList.includes(v) || !oldList.includes(v)) // difference
|
||||
list = JSON.parse(JSON.stringify(list))
|
||||
const limitWidth = (await getFatherWidth()) - 32 // 296 // 256
|
||||
const marginRight = 6 // 间距
|
||||
const limitWidth = (await getFatherWidth()) - marginRight
|
||||
const standardHeight = 280 // 高度阈值
|
||||
const neatArr: any = [] // 整理后的数组
|
||||
function factory(cutArr: any) {
|
||||
@ -103,8 +112,9 @@ export default defineComponent({
|
||||
}
|
||||
const { list: newList, height }: any = await factory([list.shift()])
|
||||
neatArr.push(
|
||||
newList.map((x: any) => {
|
||||
newList.map((x: any, index) => {
|
||||
x.listWidth = (x.width / x.height) * height
|
||||
x.gap = index !== newList.length - 1 ? marginRight : 0
|
||||
return x
|
||||
}),
|
||||
)
|
||||
@ -126,6 +136,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function getRef() {
|
||||
// 用于在组件外调用内部ref
|
||||
return state.listRef
|
||||
}
|
||||
|
||||
@ -154,6 +165,9 @@ export default defineComponent({
|
||||
load()
|
||||
}
|
||||
}
|
||||
|
||||
const getInnerHeight = ({ height, listWidth, width }: any) => (height * listWidth) / width
|
||||
|
||||
return {
|
||||
load,
|
||||
dragStart,
|
||||
@ -164,6 +178,7 @@ export default defineComponent({
|
||||
getRef,
|
||||
mouseup,
|
||||
mousemove,
|
||||
getInnerHeight,
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -172,9 +187,7 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.img-list-wrap {
|
||||
height: 100%;
|
||||
margin-top: 14px;
|
||||
// overflow-y: scroll;
|
||||
padding-bottom: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
.img {
|
||||
transform-origin: center;
|
||||
@ -182,14 +195,21 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.image-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: breathe 600ms ease-out infinite alternate;
|
||||
}
|
||||
.list {
|
||||
position: relative;
|
||||
padding: 4px 0 0 14px;
|
||||
// padding: 4px 0 0 14px;
|
||||
padding: 4px 0 0 0;
|
||||
&__img {
|
||||
// background: #f1f2f4;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 0 6px 2px 0;
|
||||
// margin: 0 6px 2px 0;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -217,4 +237,13 @@ export default defineComponent({
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
/* 呼吸效果 */
|
||||
@keyframes breathe {
|
||||
0% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-01-27 11:05:48
|
||||
* @Description:
|
||||
* @LastEditors: ShawnPhang <site: book.palxp.com>
|
||||
* @LastEditTime: 2023-06-29 16:50:02
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-04 01:53:10
|
||||
-->
|
||||
<template>
|
||||
<div class="search__wrap">
|
||||
@ -19,7 +19,7 @@
|
||||
</el-dropdown>
|
||||
<span v-else style="width: 1rem"></span>
|
||||
|
||||
<el-input size="large" v-model="searchValue" placeholder="输入关键词搜索" class="input-with-select">
|
||||
<el-input v-model="searchValue" size="large" placeholder="输入关键词搜索" class="input-with-select">
|
||||
<template #append>
|
||||
<el-button><i class="iconfont icon-search"></i></el-button>
|
||||
</template>
|
||||
@ -46,6 +46,7 @@ export default defineComponent({
|
||||
|
||||
if (props.type != 'none') {
|
||||
api.home.getCategories({ type: 1 }).then((list: any) => {
|
||||
list.unshift({ id: 0, name: '全部' })
|
||||
state.materialCates = list
|
||||
const { cate } = route.query
|
||||
cate && (state.currentIndex = cate)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user