zhengyiming
11 小时以前 97f29024ce18babeb4b635c5d73f907ac493976e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<template>
  <div v-if="templateImageList.length > 0" class="fabric-preview-image-list">
    <el-image
      v-for="(image, index) in templateImageList"
      :key="image.path"
      :src="image.path"
      :class="[
        'fabric-preview-image-list-item',
        { active: templateEditState.currentImageIndex === index },
      ]"
      fit="cover"
      @click="handleClick(index)"
    />
  </div>
</template>
 
<script setup lang="ts">
import { useTemplateDetailContext, useCanvasActions } from '../hooks/context';
import { setOSSLink } from '@/utils';
import useSelect from '../hooks/select';
 
defineOptions({
  name: 'previewImageList',
});
 
const { fabric, canvasEditor } = useSelect();
 
const { templateImageList, templateEditState, templateDetail } = useTemplateDetailContext();
 
const { toggleCanvas, setBackgroundImage, clear } = useCanvasActions();
 
watch(templateDetail, async (newValue, oldValue) => {
  if (!!newValue.id && !oldValue.id) {
    if (newValue.templateJsonData && templateEditState.jsonMap[0]) {
      canvasEditor.loadJSON(templateEditState.jsonMap[0], () => {
        canvasEditor.canvas.discardActiveObject();
      });
      // canvasEditor.canvas.loadFromJSON(templateEditState.jsonMap[0], () => {});
    } else {
      if (templateImageList.value.length > 0) {
        setBackgroundImage(templateImageList.value[0].path);
      }
    }
  }
});
 
function handleClick(index: number) {
  toggleCanvas(index);
}
</script>
 
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
 
.fabric-preview-image-list {
  .fabric-preview-image-list-item {
    margin-bottom: 10px;
    width: 100%;
    height: 300px;
    border: 1px solid getCssVar('border-color', 'lighter');
    cursor: pointer;
 
    &:last-child {
      margin-bottom: 0;
    }
 
    &.active {
      border-color: getCssVar('color', 'primary');
    }
  }
}
</style>