<template>
  <div id="signature-pad" class="signature-pad">
    <canvas></canvas>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';

export default {
  name: 'SignaturePad',
  mounted() {
    const canvas = document.querySelector('canvas');
    this.signaturePad = new SignaturePad(canvas);
    this.signaturePad.minWidth = 1;
    this.signaturePad.maxWidth = 5;
  },
  methods: {
    clearSignature() {
      this.signaturePad.clear();
    },
    getSignature() {
      const { signaturePad } = this;
      const { canvas } = signaturePad;
      return canvas.toDataURL('image/png');
    }
  }
}
</script>

<style scoped>
.signature-pad {
  width: 100%;
  height: 150px;
  background-color: #f3f3f3;
}
</style>

<template>
  <div>
    <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
    };
  },
};
</script>

npm install pdfjs-dist

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';

export default {
  props: ['pdfUrl'],
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then(pdf => {
        console.log('PDF loaded');
        // Fetch the first page of the PDF
        const pageNumber = 1;
        pdf.getPage(pageNumber).then(page => {
          console.log('Page loaded');
          const canvas = this.$refs.pdfCanvas;
          const ctx = canvas.getContext('2d');
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          const renderTask = page.render(renderContext);
          renderTask.promise.then(() => {
            console.log('Page rendered');
          });
        });
      }).catch(err => {
        // Handle errors here
        console.error('Error loading PDF: ', err);
      });
    }
  }
};
</script>

<template>
  <div>
    <div v-html="pdfEmbed"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      pdfEmbed: '',
    };
  },
  mounted() {
    this.fetchEmbed();
  },
  methods: {
    fetchEmbed() {
      // 使用Embedly服务生成PDF预览
      const url = `https://embed.ly/api/oembed?url=${encodeURIComponent(this.pdfUrl)}&key=YOUR_EMBEDLY_API_KEY`;
      fetch(url)
        .then(response => response.json())
        .then(data => {
          if (data.html) {
            this.pdfEmbed = data.html;
          }
        })
        .catch(error

<template>
  <div ref="threeContainer"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'ThreeJsComponent',
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.threeContainer.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = function () {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  }
};
</script>

<style>
/* 样式部分 */
</style>

// 在客户端的入口文件，比如 main.js 或 app.js 中
Vue.config.productionTip = false
if (import.meta.env.SSR) {
  window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true
}

<template>
  <div id="app">
    <h1>欢迎来到{{ title }}</h1>
    <p>这是一个使用Vue.js构建的单页应用程序示例。</p>
    <button @click="greet">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Vue.js 之旅'
    }
  },
  methods: {
    greet() {
      alert('欢迎来到Vue世界！');
    }
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

npm install vuedraggable@next

<template>
  <draggable v-model="list" class="drag-container">
    <div v-for="item in list" :key="item.id" class="drag-item">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const list = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      // ...
    ]);

    return {
      list,
    };
  },
};
</script>

<style>
.drag-container {
  display: flex;
  cursor: move;
}
.drag-item {
  margin: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
}
</style>

<template>
  <div id="graph-container"></div>
</template>

<script>
import G6 from '@antv/g6';

export default {
  name: 'G6Graph',
  data() {
    return {
      graph: null,
    };
  },
  mounted() {
    this.initG6();
  },
  methods: {
    initG6() {
      const container = document.getElementById('graph-container');
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.Graph({
        container: 'graph-container',
        width,
        height,
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
        },
        layout: {
          type: 'radial',
          unitRadius: 50,
          center: [width / 2, height / 2],
        },
      });

      this.graph = graph;
      const data = {
        // ... 图的数据
      };

      graph.data(data);
      graph.render();
    },
    registerCustomNode() {
      G6.registerNode('customNode', {
        draw(cfg, group) {
          // ... 自定义节点的绘制逻辑
        },
      }, 'rect');
    },
  },
};
</script>

<style scoped>
#graph-container {
  width: 100%;
  height: 100vh;
}
</style>

// 导入uni.request，并在其基础上进行封装
import { request } from '@/utils/request';

// 定义API接口
export const api = {
  // 获取用户信息
  getUserInfo: () => request('/user/getUserInfo'),
  // 登录
  login: (data) => request('/user/login', 'POST', data),
  // 获取商品列表
  getGoodsList: (params) => request('/goods/list', 'GET', null, params),
};

// 使用封装后的API
// 获取用户信息
api.getUserInfo().then(response => {
  console.log('用户信息:', response.data);
}).catch(error => {
  console.error('获取用户信息失败:', error);
});

// 登录操作
api.login({ username: 'user1', password: '123456' }).then(response => {
  console.log('登录成功:', response.data);
}).catch(error => {
  console.error('登录失败:', error);
});

// 获取商品列表
api.getGoodsList({ page: 1, pageSize: 10 }).then(response => {
  console.log('商品列表:', response.data);
}).catch(error => {
  console.error('获取商品列表失败:', error);
});