1、新增票根

package.json

@@ -23,10 +23,12 @@
     "moment": "^2.29.1",
     "pdf-lib": "^1.17.1",
     "qrcode": "^1.4.4",
+    "v-viewer": "^1.6.4",
     "video.js": "^7.8.4",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "2.6.14",
     "vue-baidu-map": "^0.21.22",
+    "vue-canvas-draw": "^1.0.1",
     "vue-cookie": "1.1.4",
     "vue-i18n": "8.24.5",
     "vue-router": "3.5.2",

src/components/canvas-preview/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <Viewer :options="viewerOptions">
+    <img :src="imageUrl" alt="Your Image">
+  </Viewer>
+</template>
+
+<script>
+  import Viewer from 'v-viewer';
+  export default {
+    name: "CanvasPreview",
+    props:{
+        clientWidth: {
+          default: 370,
+          type: Number
+        },
+        clientHeight: {
+          default: 567,
+          type: Number
+        },
+        imageUrl:{
+          type: String
+        }
+      },
+    components: {
+      'v-viewer':Viewer,
+    },
+    data() {
+      return {
+        viewerOptions: {
+          zIndex: 9999,
+          zoomRatio: 0.1, // 缩放比例
+          zoomable: true, //是否可缩放
+          movable: true, // 是否限制移动范围
+          // 其他选项...
+        },
+      };
+    },
+    mounted() {
+      // this.canvas = this.$refs.canvas;
+      // this.canvas.style.position = 'relative';
+      // this.canvas.style.cursor = 'move';
+      // this.initCanvas();
+      // // 添加鼠标事件监听
+      // this.$refs.canvas.addEventListener('mousedown', this.startDragging);
+      // this.$refs.canvas.addEventListener('mousemove', this.drag);
+      // this.$refs.canvas.addEventListener('mouseup', this.stopDragging);
+    },
+    methods: {
+      dragImg(event){
+        const element = event.target; // 获取被拖拽的元素
+        const rect = element.getBoundingClientRect(); // 获取元素的矩形区域
+        const dx = event.clientX - rect.left; // 计算鼠标在元素内部的偏移量
+        const dy = event.clientY - rect.top;
+        const canvasRect = this.$refs.canvas.getBoundingClientRect(); // 获取画布的矩形区域
+
+        // 计算元素的新位置
+        let newX = event.clientX - dx;
+        let newY = event.clientY - dy;
+
+        // 确保元素在画布区域内
+        if (newX < 0) {
+          newX = 0;
+        } else if (newX + rect.width > canvasRect.width) {
+          newX = canvasRect.width - rect.width;
+        }
+        if (newY < 0) {
+          newY = 0;
+        } else if (newY + rect.height > canvasRect.height) {
+          newY = canvasRect.height - rect.height;
+        }
+
+        // 更新元素的位置
+        element.style.left = newX + 'px';
+        element.style.top = newY + 'px';
+      },
+      initCanvas() {
+        const ctx = this.canvas.getContext('2d');
+        const image = new Image();
+        image.src = this.imageUrl;
+        image.onload = () => {
+          if(image.complete){
+            // ctx.save(); // 保存当前画布状态
+
+            //  根据图像重新设定了canvas的长宽
+            this.canvas.setAttribute("width", this.clientWidth)
+            this.canvas.setAttribute("height", this.clientHeight)
+            //  绘制图片
+            ctx.drawImage(image,0,0,this.clientWidth,this.clientHeight);
+            // ctx.rotate(this.angle / 2); // 旋转画布
+            // ctx.restore(); // 恢复画布状态
+          }
+        };
+      },
+      // 旋转图片
+      rotate() {
+        this.angle += Math.PI; // 每次旋转90度，可以根据需求调整角度
+        this.initCanvas(); // 重新绘制图片
+      },
+      // 开始拖动图片
+      startDragging(event) {
+        this.dragging = true;
+        this.lastX = event.clientX;
+        this.lastY = event.clientY;
+      },
+      // 拖动图片
+      drag(event) {
+        if (this.dragging) {
+          const dx = event.clientX - this.lastX;
+          const dy = event.clientY - this.lastY;
+          this.moveImage(dx, dy);
+          this.lastX = event.clientX;
+          this.lastY = event.clientY;
+        }
+      },
+      // 停止拖动图片
+      stopDragging() {
+        this.dragging = false;
+      },
+      // 移动图片
+      moveImage(dx, dy) {
+        this.x += dx;
+        this.y += dy;
+        this.initCanvas(); // 重新绘制图片
+      },
+      // 缩放图片
+      scaleImage(scale) {
+        this.scaleX *= scale;
+        this.scaleY *= scale;
+        this.initCanvas(); // 重新绘制图片
+      },
+    },
+  }
+</script>
+
+<style scoped>
+
+
+  #myCanvas {
+    border: 1px solid rgb(199, 198, 198);
+  }
+
+</style>

src/components/order-card-item/index.vue

@@ -72,7 +72,7 @@
         </el-button>
       </div>
     </div>
-    <el-dialog :visible.sync="previewPicDialogVisible" :modal="false" title="图片预览" width="20%" top="3vh">
+    <el-dialog :visible.sync="previewPicDialogVisible" :modal="false" title="图片预览" width="21.5%" top="3vh" v-if="previewPicDialogVisible">
       <div v-if="prodType === '小卡'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0465 + 'px'}">
       </div>
       <div  v-if="prodType === '书签'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0264 + 'px'}">
@@ -85,13 +85,16 @@
       </div>
       <div v-if="prodType === '手幅'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0255 + 'px'}">
       </div>
-      <el-image ref="previewImageRef" :src="previewPicUrl" alt="" @load="previewLoad" style="width: 100%; height: 100%"/>
+<!--      <el-image ref="previewImageRef" :src="previewPicUrl" alt="" @load="previewLoad" style="width: 100%; height: 100%"/>-->
+      <CanvasPreview :image-url="previewPicUrl"></CanvasPreview>
     </el-dialog>
   </div>
 </template>
 
 <script>
+  import CanvasPreview from "../canvas-preview/index";
   export default {
+    components: {CanvasPreview},
     data () {
       return {
         lang: localStorage.getItem('lang') || 'zh_CN',

src/views/modules/prod/prodTemplate-add-or-update.vue

@@ -88,6 +88,7 @@ export default {
         templateUsage: null,
         seq: 1
       },
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
       seriesList: [],
       styleList: [],
       usageList:[],
@@ -121,22 +122,42 @@ export default {
     dataFormSubmit () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          this.handleStyleName(this.dataForm.templateStyleId);
-          this.handleSeriesName(this.dataForm.templateSeriesId);
-          this.dataForm.templateUsage = this.usageList.join(",");
-          this.$http({
-            url: this.$http.adornUrl('/prod/prodTemplate'),
-            method: this.dataForm.templateId ? 'put' : 'post',
-            data: this.$http.adornData(this.dataForm)
-          }).then(({data}) => {
-            this.$message({
-              message: this.$i18n.t('publics.operation'),
-              type: 'success',
-              duration: 1500,
-              onClose: () => {
-                this.visible = false
-                this.$emit('refreshDataList')
-              }
+          let promise = new Promise((resolve, reject) =>{
+            let imgUrlArr = this.dataForm.templatePic.split(",");
+            let width = 709;
+            let height = 1087;
+            imgUrlArr.forEach((item, index) =>{
+              let img = new Image();
+              img.onload = () => {
+                let valid = img.width == width && img.height == height;
+                if(valid){
+                  resolve();
+                }else{
+                  this.$message.error("上传的图片宽高必须是709*1087!");
+                  return Promise.reject();
+                }
+              };
+              img.src = this.resourcesUrl + item;
+            });
+          });
+          promise.then((res)=>{
+            this.handleStyleName(this.dataForm.templateStyleId);
+            this.handleSeriesName(this.dataForm.templateSeriesId);
+            this.dataForm.templateUsage = this.usageList.join(",");
+            this.$http({
+              url: this.$http.adornUrl('/prod/prodTemplate'),
+              method: this.dataForm.templateId ? 'put' : 'post',
+              data: this.$http.adornData(this.dataForm)
+            }).then(({data}) => {
+              this.$message({
+                message: this.$i18n.t('publics.operation'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
             })
           })
         }