170 lines
7.8 KiB
Vue
170 lines
7.8 KiB
Vue
<template>
|
|
<div class="all-photo">
|
|
<div class="photo-header">
|
|
<AButton type="primary" shape="round" size="middle" @click="upload.openUploadDrawerFn()">
|
|
<template #icon>
|
|
<PlusOutlined/>
|
|
</template>
|
|
上传照片
|
|
</AButton>
|
|
<AButton type="default" shape="round" size="middle">
|
|
<template #icon>
|
|
<PlusSquareOutlined/>
|
|
</template>
|
|
创建相册
|
|
</AButton>
|
|
</div>
|
|
<image-toolbar :selected="selected"/>
|
|
<div class="photo-list">
|
|
<ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
|
|
style="width: 99%;">
|
|
<template #rightExtra>
|
|
<ASwitch size="small" v-model:checked="switchValue"/>
|
|
</template>
|
|
<ATabPane key="image" tab="全部">
|
|
<div style="width:100%;height:100%;">
|
|
<div v-for="(itemList, index) in images" :key="index">
|
|
<span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
|
|
<AImagePreviewGroup>
|
|
<Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
|
|
<template #default="{ item }">
|
|
<CheckCard :key="index"
|
|
class="photo-item"
|
|
margin="0"
|
|
border-radius="0"
|
|
v-model="selected"
|
|
:showHoverCircle="true"
|
|
:iconSize="20"
|
|
:showSelectedEffect="true"
|
|
:value="item.id">
|
|
<AImage :src="item.thumbnail"
|
|
:alt="item.file_name"
|
|
:key="index"
|
|
:height="200"
|
|
:previewMask="false"
|
|
:preview="{
|
|
src: item.url,
|
|
}"
|
|
loading="lazy"/>
|
|
</CheckCard>
|
|
</template>
|
|
</Vue3JustifiedLayout>
|
|
</AImagePreviewGroup>
|
|
</div>
|
|
</div>
|
|
</ATabPane>
|
|
<ATabPane key="video" tab="视频">
|
|
<div style="width:100%;height:100%;">
|
|
|
|
</div>
|
|
</ATabPane>
|
|
<ATabPane key="gif" tab="动图">
|
|
|
|
</ATabPane>
|
|
<ATabPane key="screenshot" tab="截图">
|
|
|
|
</ATabPane>
|
|
</ATabs>
|
|
</div>
|
|
<ImageUpload/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import Vue3JustifiedLayout from "vue3-justified-layout";
|
|
import 'vue3-justified-layout/dist/style.css';
|
|
import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
|
|
import useStore from "@/store";
|
|
import {getSingleImageApi, queryAllImagesApi} from "@/api/storage";
|
|
import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
|
|
|
|
|
|
const selected = ref<(string | number)[]>([]);
|
|
const switchValue = ref<boolean>(false);
|
|
const upload = useStore().upload;
|
|
|
|
const options = reactive({
|
|
targetRowHeight: 200 // 高度
|
|
});
|
|
|
|
const images = ref<any[]>([]);
|
|
|
|
/**
|
|
* 获取所有图片
|
|
*/
|
|
async function getAllImages() {
|
|
const res: any = await queryAllImagesApi("image", false, "ali", "schisandra-album");
|
|
if (res && res.code === 200) {
|
|
images.value = res.data.records;
|
|
}
|
|
}
|
|
|
|
// const previewUrl = ref<string>("");
|
|
//
|
|
// /**
|
|
// * 获取单张图片
|
|
// * @param id
|
|
// */
|
|
// async function getSingleImage(id: number) {
|
|
// previewUrl.value = "";
|
|
// const res: any = await getSingleImageApi(id);
|
|
// if (res && res.code === 200) {
|
|
// previewUrl.value = res.data;
|
|
// setVisible(true);
|
|
// return;
|
|
// }
|
|
// previewUrl.value = "data:image/png;base64,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";
|
|
// setVisible(true);
|
|
// }
|
|
//
|
|
// const visible = ref<boolean>(false);
|
|
//
|
|
// const setVisible = (value): void => {
|
|
// visible.value = value;
|
|
// };
|
|
|
|
|
|
onMounted(() => {
|
|
getAllImages();
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.all-photo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.photo-header {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
border-bottom: 1px solid #e2e2e2;
|
|
|
|
}
|
|
|
|
.photo-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: calc(100% - 65px);
|
|
}
|
|
}
|
|
|
|
.photo-item:hover {
|
|
transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
//transform: scale(0.99);
|
|
box-shadow: 0 0 10px 0 rgba(77, 167, 255, 0.89);
|
|
}
|
|
</style>
|