Merge branch 'master' into shandian

# Conflicts:
#	src/components/order-card-item/index.vue
#	src/views/modules/afterSales/returnDelivery.vue

src/components/canvas-preview/index.vue

@@ -1,215 +1,326 @@
 <template>
-  <canvas ref="canvas" width="370px" height="567px"></canvas>
+  <el-dialog
+    :visible.sync="visible"
+    :append-to-body="visible"
+    :modal="false"
+    title="图片预览"
+    width="40%"
+    @opened="openCanvas"
+    @close="closeDialog"
+    style="display: flex; align-items: center;justify-content: center;"
+    v-if="visible">
+    <div>
+      <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.0465 + 'px'}">
+      </div>
+      <div v-if="prodType === '直拍封面'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.02325 + 'px'}">
+      </div>
+      <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'}">
+      </div>
+      <div v-if="prodType === '明信片'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0261 + 'px'}">
+      </div>
+      <div v-if="prodType === '方卡'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0232 + 'px'}">
+      </div>
+      <div v-if="prodType === '徽章'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0813 + 'px', borderRadius: 100 + '%'}">
+      </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%"/>
+    </div>
+    <!--<div class="parent">
+      <canvas ref="canvas" :width="clientWidth" :height="clientHeight" id="myCanvas"></canvas>
+      <div class="blood" :style="{border: bloodWidth + 'px solid rgba(225,0,0, 0.3)' , width: clientWidth +'px', height: clientHeight + 'px', borderRadius: bloodRadius + '%'}"></div>
+    </div>
+    <div style="text-align: center;">
+      <el-button @click="cropImage">保存画布</el-button>
+    </div>-->
+
+  </el-dialog>
+
 </template>
 
 <script>
+  const statusConfig = {IDLE:0, DRAG_START:1, DRAGGING:2};
+  const prodSize = {'小卡': {width: 709, height: 1087, clientScale:0.5, bloodRadio: 0.0242}, '方卡':{width: 1252, height: 1252, clientScale:0.5}, '拍立得':{width: 709, height: 1087, clientScale:0.5, bloodRadio: 0.0242},
+                    '直拍封面':{width: 709, height: 1217, clientScale:0.5, bloodRadio: 0.02325}, '书签': {width: 638, height: 1819, clientScale:0.4, bloodRadio: 0.0264},'明信片':{width: 1252, height: 1819, clientScale:0.4, bloodRadio: 0.0261},
+                    '徽章':{width: 839, height: 839, clientScale:0.5, bloodRadio: 0.0813, bloodRadius:100},'票根':{width: 709, height: 1489, clientScale:0.5, bloodRadio: 0.0465},'手幅':{width: 1252, height: 3614, clientScale:0.25, bloodRadio: 0.0255}}
   export default {
     name: "CanvasPreview",
-    props:{
-        clientWidth: {
-          default: 370,
-          type: Number
-        },
-        clientHeight: {
-          default: 567,
-          type: Number
-        },
-        imageUrl:{
-          type: String
-        }
-      },
     data() {
       return {
+        visible: false,
+        prodType: null,
+        previewWidth: null,
+        previewHeight: null,
+        previewPicUrl: null,
+        side: null,
+        clientWidth: 709,
+        clientHeight: 1087,
+        clientScale: 0.5,
+        cardItem: null,
+        canvasParam:null,
+        bloodWidth: 20,
+        bloodRadius: 0,
+        canvasInfo:{
+          status: statusConfig.IDLE,
+          dragTarget: {x:0,y:0,w:0,h:0},
+          lastEvtPos: {x:null,y:null},
+          offsetEvtPos: {x:null,y:null},
+          offset: {x:0,y:0},
+          scale: 1,
+          scaleStep: 0.01,
+          minScale: 0.5,
+          maxScale: 2,
+        },
+        imgRef:null,
         canvas:null,
         context: null,
-        image: null,
-        isDragging: false, // 标记是否正在拖动图片
-        lastX: 0, // 记录上一次鼠标的位置
-        lastY: 0,
-        scaleX: 1, // 图片的缩放比例
-        scaleY: 1,
-        startX:0,
-        startY:0,
-        x:0,
-        y:0,
       };
     },
     mounted() {
-      this.initCanvas();
-      this.drawImage();
-      this.addMouseListeners();
-      // this.canvas = this.$refs.canvas;
-      // this.context = this.canvas.getContext('2d');
-      // this.image = new Image();
-      // this.image.src = this.imageUrl;
-      // this.image.onload = () => {
-      //   // 在图片加载完成后进行绘制操作
-      //   this.context.drawImage(this.image, this.x, this.y, this.clientWidth, this.clientHeight);
-      // };
-      //
-      // // 监听鼠标滑动事件
-      // this.canvas.addEventListener('mousedown', this.handleMouseDown);
-      // this.canvas.addEventListener('mousemove', this.handleMouseMove);
-      // this.canvas.addEventListener('mouseup', this.handleMouseUp);
-      //
-      // // 监听滚轮事件
-      // this.canvas.addEventListener('wheel', this.handleWheel);
     },
     methods: {
+      openCanvas(){
+        this.initCanvas();
+        this.drawImage();
+        this.addMouseListeners();
+      },
+      init(cardItem, previewPicUrl, prodType, side){
+        this.visible = true;
+        this.previewPicUrl = previewPicUrl;
+        this.prodType = prodType;
+        this.side = side;
+        this.cardItem = cardItem;
+        if(side === 'front'){
+          this.canvasParam = JSON.parse(cardItem.frontCanvasParam);
+        }else if(side === 'back'){
+          this.canvasParam = JSON.parse(cardItem.backCanvasParam);
+        }
+        let prod = prodSize[prodType];
+        this.clientWidth = prod.width * prod.clientScale;
+        this.clientHeight = prod.height * prod.clientScale;
+        this.bloodRadius = prod.bloodRadius ? prod.bloodRadius : this.bloodRadius;
+        this.bloodWidth = prod.width * prod.bloodRadio;
+      },
+      previewLoad(event){
+        this.previewWidth = event.srcElement.clientWidth;
+        this.previewHeight = event.srcElement.clientHeight;
+      },
+      cropImage() {
+        this.$confirm('确认要保存当前画布状态吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let canvasInfo = this.canvasInfo;
+          let cardItem = {cardItemId : this.cardItem.cardItemId};
+          let obj =  {scale: canvasInfo.scale, offsetX: canvasInfo.offset.x, offsetY: canvasInfo.offset.y, targetX: canvasInfo.dragTarget.x, targetY: canvasInfo.dragTarget.y}
+          let canvasParam = JSON.stringify(obj);
+          if(this.side === 'front'){
+            cardItem.frontCanvasParam = canvasParam;
+          }else if(this.side === 'back'){
+            cardItem.backCanvasParam = canvasParam;
+          }
+          this.$http({
+            url: this.$http.adornUrl('/prod/orderCardItem/saveOrUpdateCanvasParam'),
+            method: 'post',
+            data: cardItem
+          }).then(({ data }) =>{
+            if(data){
+              this.$message.success("保存成功");
+            }else{
+              this.$message.error("保存失败");
+            }
+          })
+        });
+      },
       initCanvas() {
         this.canvas = this.$refs.canvas;
         this.context = this.canvas.getContext('2d'); // 获取画布上下文
       },
-      drawImage() {
-        this.image = new Image();
-        this.image.src = this.imageUrl; // 替换为你的图片路径
-        this.image.onload = () => {
-          this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height); // 在画布上绘制图片
-          this.image = this.image; // 保存图片对象，以便后续操作
-        };
+      getCanvasPosition(e, offset = {x:0,y:0}){
+        return {
+          x: e.offsetX - offset.x,
+          y: e.offsetY - offset.y
+        }
       },
-      //缩放图片
-      scaleImage(scaleX, scaleY, mouseX, mouseY) {
-        const image = this.image;
-        const width = image.width * scaleX; // 计算缩放后的宽度
-        const height = image.height * scaleY; // 计算缩放后的高度
-
-        // 保存当前的绘图状态
-        this.context.save();
-        this.context.translate(mouseX, mouseY); // 将画布的原点移动到鼠标所在位置
-        this.context.scale(scaleX, scaleY); // 进行缩放操作
-        this.context.translate(-mouseX, -mouseY); // 将画布的原点移回原来的位置
-
-        // 清除之前的图片并重新绘制缩放后的图片
+      render(){
+        this.canvas.width = this.clientWidth;
+        this.context.setTransform(this.canvasInfo.scale, 0, 0, this.canvasInfo.scale, this.canvasInfo.offset.x, this.canvasInfo.offset.y);
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.context.drawImage(image, 0, 0, width, height);
-
-        // 恢复之前的绘图状态
-        this.context.restore();
+        this.drawImage();
       },
-      // ...之前的代码...
-      moveImage(deltaX, deltaY) {
-        const image = this.image;
-        const width = image.width; // 获取图片的宽度
-        const height = image.height; // 获取图片的高度
-
-        // 清除之前的图片并重新绘制移动后的图片
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.context.drawImage(image, deltaX, deltaY, width, height);
+      ifInImage(pos){
+        let dx = this.getDistanceX(pos.x, this.imgRef.x);
+        let dy = this.getDistanceY(pos.y, this.imgRef.y);
+        if(dx <= this.imgRef.width && dy <=this.imgRef.height){
+          return true;
+        }else{
+          return false;
+        }
+      },
+      getDistanceX(x1, x2){
+        return Math.abs((x1 - x2));
+      },
+      getDistanceY(y1, y2){
+        return Math.abs((y1 - y2));
+      },
+      drawImage() {
+        if(!this.imgRef){
+          this.imgRef = new Image();
+          this.imgRef.src = this.previewPicUrl;
+          if(this.canvasParam){
+            this.canvasInfo.scale = this.canvasParam.scale;
+            this.canvasInfo.offset.x = this.canvasParam.offsetX;
+            this.canvasInfo.offset.y = this.canvasParam.offsetY;
+            this.canvasInfo.dragTarget.x = this.canvasParam.targetX;
+            this.canvasInfo.dragTarget.y = this.canvasParam.targetY;
+          }else{
+            let scaleImgWidth = this.imgRef.width * this.canvasInfo.scale;
+            let scaleImgHeight = this.imgRef.height * this.canvasInfo.scale;
+            if (scaleImgWidth > this.canvas.width && scaleImgHeight > this.canvas.height) {
+              if(scaleImgWidth > scaleImgHeight){
+                this.canvasInfo.scale =  this.canvas.height / scaleImgHeight;
+              }else{
+                this.canvasInfo.scale =  this.canvas.width / scaleImgWidth;
+              }
+            }else if(scaleImgWidth < this.canvas.width && scaleImgHeight < this.canvas.height){
+              if(scaleImgWidth > scaleImgHeight){
+                this.canvasInfo.scale =  this.canvas.height / scaleImgHeight;
+              }else{
+                this.canvasInfo.scale =  this.canvas.width / scaleImgWidth;
+              }
+            }
+          }
+          this.context.setTransform(this.canvasInfo.scale, 0,0, this.canvasInfo.scale, this.canvasInfo.offset.x,this.canvasInfo.offset.y)
+          this.context.drawImage(this.imgRef, this.canvasInfo.dragTarget.x, this.canvasInfo.dragTarget.y, this.imgRef.width, this.imgRef.height); // 在画布上绘制图片
+        }else{
+          this.context.drawImage(this.imgRef, this.canvasInfo.dragTarget.x, this.canvasInfo.dragTarget.y, this.imgRef.width, this.imgRef.height); // 在画布上绘制图片
+        }
       },
       addMouseListeners() {
-        const canvas = this.$refs.canvas;
-
+        let canvas = this.$refs.canvas;
         // 监听鼠标按下事件
-        canvas.addEventListener('mousedown', (event) => {
-          this.isDragging = true; // 设置拖拽标志为true
-          this.startX = event.clientX; // 记录拖拽开始时的鼠标位置
-          this.startY = event.clientY;
+        canvas.addEventListener('mousedown', e => {
+          let canvasPosition = this.getCanvasPosition(e, this.canvasInfo.offset);
+          console.log("画笔位置", canvasPosition);
+          if(this.ifInImage(canvasPosition)){
+            let scaleImgWidth = this.imgRef.width * this.canvasInfo.scale;
+            let scaleImgHeight = this.imgRef.height * this.canvasInfo.scale;
+            if(scaleImgWidth <= this.canvas.width || scaleImgHeight <= this.canvas.height){
+              return;
+            }
+            this.canvasInfo.status = statusConfig.DRAG_START;
+            this.canvasInfo.lastEvtPos = canvasPosition;
+            this.canvasInfo.offsetEvtPos = canvasPosition;
+          }
         });
 
-        // 监听鼠标移动事件
-        canvas.addEventListener('mousemove', (event) => {
-          if (this.isDragging) {
-            const deltaX = event.clientX - this.startX; // 计算鼠标移动的距离
-            const deltaY = event.clientY - this.startY;
-            this.moveImage(deltaX, deltaY); // 调用移动图片的方法
-            this.startX = event.clientX; // 更新当前的鼠标位置
-            this.startY = event.clientY;
+        //监听鼠标移动事件
+        canvas.addEventListener('mousemove', e => {
+          let canvasPosition = this.getCanvasPosition(e, this.canvasInfo.offset);
+          if(this.canvasInfo.status === statusConfig.DRAG_START && (this.getDistanceX(canvasPosition.x, this.canvasInfo.lastEvtPos.x) > 5 || this.getDistanceY(canvasPosition.y, this.canvasInfo.lastEvtPos.y) > 5)){
+            this.canvasInfo.status = statusConfig.DRAGGING;
+            this.canvasInfo.offsetEvtPos = canvasPosition;
+          }else if(this.canvasInfo.status === statusConfig.DRAGGING){
+            let dragTarget = this.canvasInfo.dragTarget;
+            dragTarget.x += (canvasPosition.x - this.canvasInfo.offsetEvtPos.x);
+            dragTarget.y += (canvasPosition.y - this.canvasInfo.offsetEvtPos.y);
+            this.render();
+            this.canvasInfo.offsetEvtPos = canvasPosition;
           }
         });
 
         // 监听鼠标松开事件
         canvas.addEventListener('mouseup', () => {
-          this.isDragging = false; // 设置拖拽标志为false
+          if(this.canvasInfo.status === statusConfig.DRAGGING){
+            this.canvasInfo.status = statusConfig.IDLE;
+          }
         });
 
-        // 监听鼠标滚轮事件
-        canvas.addEventListener('wheel', (event) => {
-          const scaleX = event.deltaY > 0 ? 0.9 : 1.1; // 根据滚轮方向确定缩放比例
-          const scaleY = scaleX;
-          const mouseX = event.clientX - canvas.offsetLeft; // 获取鼠标所在位置
-          const mouseY = event.clientY - canvas.offsetTop;
-          this.scaleImage(scaleX, scaleY, mouseX, mouseY); // 调用缩放图片的方法
-          event.preventDefault(); // 阻止默认的滚轮滚动事件
+        // 监听鼠标松开事件
+        canvas.addEventListener('mouseout', (e) => {
+          this.canvasInfo.status = statusConfig.IDLE;
+          let canvasPosition = this.getCanvasPosition(e, this.canvasInfo.offset);
+          this.canvasInfo.lastEvtPos = canvasPosition;
+          this.canvasInfo.offsetEvtPos = canvasPosition;
         });
-      },
-      handleMouseDown(event) {
-        this.isDragging = true;
-        this.lastX = event.clientX - this.canvas.offsetLeft;
-        this.lastY = event.clientY - this.canvas.offsetTop;
-      },
-      handleMouseMove(event) {
-        if (!this.isDragging) return;
-
-        let deltaX = event.clientX - this.canvas.offsetLeft - this.lastX;
-        let deltaY = event.clientY - this.canvas.offsetTop - this.lastY;
-
-        // 根据缩放比例和鼠标移动距离计算图片应该移动的实际距离
-        let actualDeltaX = deltaX * this.scaleX;
-        let actualDeltaY = deltaY / this.scaleY;
-
-        // 更新图片的位置
-        this.x += actualDeltaX;
-        this.y += actualDeltaY;
-
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清除之前的图片
-        this.context.save(); // 保存当前的绘图状态
-        this.context.scale(this.scaleX, this.scaleY);
-        this.context.drawImage(this.image, this.x, this.y, this.image.width * this.scaleX, this.image.height * this.scaleY); // 重新绘制图片到新的位置
-        this.context.restore(); // 恢复之前的绘图状态
-
-        this.lastX = (event.clientX - this.canvas.offsetLeft);
-        this.lastY = (event.clientY - this.canvas.offsetTop);
-      },
-      handleMouseUp() {
-        this.isDragging = false;
-      },
-      handleWheel(event) {
-        event.preventDefault(); // 阻止默认的滚轮滚动行为
-        // 获取鼠标当前位置
-        let mouseX = event.clientX - this.canvas.offsetLeft;
-        let mouseY = event.clientY - this.canvas.offsetTop;
-
-        // 将画布的原点移动到鼠标所在的位置
-        this.context.translate(mouseX, mouseY);
 
-        // 计算鼠标位置与画布中心点的偏移量
-        let offsetFromCenterX = mouseX - this.canvas.width / 2;
-        let offsetFromCenterY = mouseY - this.canvas.height / 2;
-
-        //获取图片的宽度和高度
-        let imageWidth = this.image.width * this.scaleX;
-        let imageHeight = this.image.height * this.scaleY;
-
-        //计算缩放后图片的中心点坐标
-        let newCenterX = mouseX - offsetFromCenterX / this.scaleX * this.scaleX;
-        let newCenterY = mouseY - offsetFromCenterY / this.scaleY * this.scaleY;
-
-
-        // 更新图片的缩放比例
-        const delta = Math.sign(event.deltaY); // 获取滚轮滚动的方向（-1或1）
-        this.scaleX += delta * 0.1; // 调整缩放比例，可根据需求进行调整
-        this.scaleY += delta * 0.1; // 调整缩放比例，可根据需求进行调整
-
-        // 清除之前的图片并重新绘制缩放后的图片
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清除之前的图片
-        this.context.save(); // 保存当前的绘图状态
-        this.context.translate(newCenterX, newCenterY); // 将画布的原点移动到画布的中心点
-        this.context.scale(this.scaleX, this.scaleY); // 设置缩放比例
-        this.context.drawImage(this.image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight); // 重新绘制缩放后的图片
-        // 将画布的原点移回原来的位置
-        this.context.translate(-mouseX, -mouseY);
-        this.context.restore(); // 恢复之前的绘图状态
+        // 监听鼠标滚轮事件
+        canvas.addEventListener('wheel', (e) => {
+          // e.preventDefault();
+          let canvasPosition = this.getCanvasPosition(e, this.canvasInfo.offset);
+          let deltaX = canvasPosition.x / this.canvasInfo.scale * this.canvasInfo.scaleStep;
+          let deltaY = canvasPosition.y / this.canvasInfo.scale * this.canvasInfo.scaleStep;
+          let scaleImgWidth = this.imgRef.width * this.canvasInfo.scale;
+          let scaleImgHeight = this.imgRef.height * this.canvasInfo.scale;
+          if(e.wheelDelta > 0 && this.canvasInfo.scale <= this.canvasInfo.maxScale){
+            this.canvasInfo.offset.x -= deltaX;
+            this.canvasInfo.offset.y -= deltaY;
+            this.canvasInfo.scale += this.canvasInfo.scaleStep;
+          }else{
+            if (scaleImgWidth <= this.canvas.width || scaleImgHeight <= this.canvas.height) {
+              return;
+            }else{
+              this.canvasInfo.offset.x += deltaX;
+              this.canvasInfo.offset.y += deltaY;
+              this.canvasInfo.scale -= this.canvasInfo.scaleStep;
+              if (scaleImgWidth <= this.canvas.width || scaleImgHeight <= this.canvas.height) {
+                // 达到限制条件，不再缩小
+                  return;
+              }
+            }
+          }
+          this.render();
+        });
       },
+      closeDialog(){
+        this.canvas = null;
+        this.context = null;
+        this.imgRef = null;
+        this.visible = false;
+        this.canvasInfo = {
+          status: statusConfig.IDLE,
+            dragTarget: {x:0,y:0,w:0,h:0},
+          lastEvtPos: {x:null,y:null},
+          offsetEvtPos: {x:null,y:null},
+          offset: {x:0,y:0},
+          scale: 1,
+            scaleStep: 0.01,
+            minScale: 0.5,
+            maxScale: 2,
+        };
+      }
     },
   }
 </script>
 
 <style scoped>
-
+  .previewClass{
+    position:absolute;
+    border-style:solid;
+    border-color:red;
+    opacity:0.3;
+    z-index:3;
+  }
 
   #myCanvas {
-    border: 1px solid rgb(199, 198, 198);
+    display: block;
+    margin: 0 auto; /* 水平居中 */
+  }
+  .parent{
+    position: relative; /* 设置父元素的position为relative */
+    background-color: white;
+  }
+  .blood {
+    position: absolute; /* 设置相框的position为absolute */
+    top: 50%; /* 距离父元素顶部50% */
+    left: 50%; /* 距离父元素左侧50% */
+    transform: translate(-50%, -50%) ; /* 将相框自身向左和向上移动50%，使其居中 */
+    background-color: transparent; /* 设置相框背景为透明 */
+    pointer-events:none;
   }
-
 </style>

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

@@ -13,7 +13,7 @@
               <div style="padding: 3px; text-align: center">
                 <span>正面</span>
               </div>
-              <el-image style="width: 100px; height: 100px;" v-if="mode=='view'" :src="resourcesUrl + item.frontPic" @click="previewPic(item.frontPic, item.prodName)"/>
+              <el-image style="width: 100px; height: 100px;" v-if="mode=='view'" :src="resourcesUrl + item.frontPic" @click="previewPic(item, item.frontPic, item.prodName, 'front')"/>
               <el-upload v-else
                 class="avatar-uploader"
                 accept="image/jpg"
@@ -32,7 +32,7 @@
               <div style="padding: 3px; text-align: center">
                 <span>背面</span>
               </div>
-              <el-image v-if="mode=='view'" :src="resourcesUrl + item.backPic" style="width: 100px; height: 100px;" @click="previewPic(item.backPic, item.prodName)"/>
+              <el-image v-if="mode=='view'" :src="resourcesUrl + item.backPic" style="width: 100px; height: 100px;" @click="previewPic(item, item.backPic, item.prodName, 'back')"/>
               <el-upload v-else
                          class="avatar-uploader"
                          :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
@@ -72,22 +72,7 @@
         </el-button>
       </div>
     </div>
-    <el-dialog :visible.sync="previewPicDialogVisible" :modal="false" title="图片预览" width="20%" 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'}">
-      </div>
-      <div v-if="prodType === '明信片'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0261 + 'px'}">
-      </div>
-      <div v-if="prodType === '方卡'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0232 + 'px'}">
-      </div>
-      <div v-if="prodType === '徽章'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0813 + 'px', borderRadius: 100 + '%'}">
-      </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%"/>
-<!--      <CanvasPreview :image-url="previewPicUrl"></CanvasPreview>-->
-    </el-dialog>
+    <CanvasPreview v-if= "previewPicDialogVisible" ref="canvasPreviewRef"></CanvasPreview>
   </div>
 </template>
 
@@ -102,6 +87,7 @@
         previewPicUrl: null,
         prodType: null,
         previewPicDialogVisible: false,
+        side:null,
         resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
         mode: 'view',
         previewWidth: 0,
@@ -245,22 +231,32 @@
             }
           })
       },
-      previewPic(picUrl, prodName){
+      previewPic(cardItem, picUrl, prodName, side){
         this.previewPicUrl = this.resourcesUrl + picUrl
         this.previewPicDialogVisible = true;
+        this.side = side;
         if(prodName.indexOf('小卡') != -1){
           this.prodType = '小卡';
-        }else if(prodName.indexOf('书签') != -1){
-          this.prodType = '书签';
+        } else if(prodName.indexOf('拍立得') != -1){
+          this.prodType = '拍立得';
+        }else if(prodName.indexOf('直拍封面') != -1){
+          this.prodType = '直拍封面';
+        }else if(prodName.indexOf('票根') != -1){
+          this.prodType = '票根';
         }else if(prodName.indexOf('明信片') != -1){
           this.prodType = '明信片';
         }else if(prodName.indexOf('方卡') != -1){
           this.prodType = '方卡';
+        }else if(prodName.indexOf('书签') != -1){
+          this.prodType = '书签';
         }else if(prodName.indexOf('徽章') != -1){
           this.prodType = '徽章';
         } else if(prodName.indexOf('手幅') != -1){
           this.prodType = '手幅';
         }
+        this.$nextTick(() =>{
+          this.$refs.canvasPreviewRef.init(cardItem, this.resourcesUrl + picUrl, this.prodType, side)
+        })
       },
       getDataList () {
         this.$http({

src/views/modules/afterSales/returnDelivery.vue

@@ -119,6 +119,12 @@
               <span>{{ scope.row.remark}}</span>
             </template>
           </el-table-column>
+          <!-- 登记时间 -->
+          <el-table-column label="登记时间" prop="createTime" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime}}</span>
+            </template>
+          </el-table-column>
           <!-- 是否补交运费，0未补，1已补交 -->
           <el-table-column label="补交运费" prop="isPayed" align="center">
             <template slot-scope="scope">

src/views/modules/afterSales/thirdAfterSales-add-or-update.vue

@@ -275,7 +275,6 @@ export default {
       })
     },
     searchOrder(orderNumber){
-      debugger
       if(orderNumber){
         this.$http({
           url: this.$http.adornUrl('/order/thirdPrintOrder/info/' + orderNumber),

src/views/modules/order/order.vue

@@ -28,6 +28,7 @@
                 <el-option key="wxyj" label="圆角小卡" value="圆角小卡"></el-option>
                 <el-option key="wxzj" label="直角小卡" value="直角小卡"></el-option>
                 <el-option key="pld" label="拍立得" value="拍立得"></el-option>
+                <el-option key="zpfm" label="直拍封面" value="直拍封面"></el-option>
                 <el-option key="pg" label="票根" value="票根"></el-option>
                 <el-option key="sq" label="书签" value="书签"></el-option>
                 <el-option key="mxp" label="明信片" value="明信片"></el-option>

src/views/modules/print/print-order.vue

@@ -40,6 +40,7 @@
                 <el-option key="yjxk" label="圆角小卡" value="圆角小卡"></el-option>
                 <el-option key="zjxk" label="直角小卡" value="直角小卡"></el-option>
                 <el-option key="pld" label="拍立得" value="拍立得"></el-option>
+                <el-option key="zpfm" label="直拍封面" value="直拍封面"></el-option>
                 <el-option key="sq" label="书签" value="书签"></el-option>
                 <el-option key="mxp" label="明信片" value="明信片"></el-option>
                 <el-option key="fk" label="方卡" value="方卡"></el-option>

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

@@ -19,6 +19,8 @@
           <el-option key="bookmark" label="书签" value="bookmark"></el-option>
           <el-option key="tipscard" label="手幅" value="tipscard"></el-option>
           <el-option key="polaroid" label="拍立得" value="polaroid"></el-option>
+          <el-option key="covercard" label="直拍封面" value="covercard"></el-option>
+          <el-option key="stub" label="票根" value="stub"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="模板风格" prop="templateStyle">
@@ -118,61 +120,67 @@ export default {
         }
       })
     },
+    //验证图片尺寸
+    checkImageSize(imageStr, index) {
+      let width = 0;
+      let height = 0;
+      let templateUsage = this.usageList.join(",");
+      return new Promise((resolve, reject) => {
+        let image = new Image()
+        image.onload = function() {
+          if(templateUsage.indexOf("smallcard") !== -1 || templateUsage.indexOf("polaroid") !== -1){
+            width = 709;
+            height = 1087;
+          }else if(templateUsage.indexOf("stub") !== -1){
+            width = 780;
+            height = 1489;
+          }
+          if (image.width === width && image.height === height) {
+            resolve();
+          } else {
+            reject(index);
+          }
+        };
+        image.src = this.resourcesUrl + imageStr;
+      });
+    },
     // 表单提交
-    dataFormSubmit () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          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')
-                }
-              })
-            })
+    async dataFormSubmit () {
+      try{
+        let imgUrlArr = this.dataForm.templatePic.split(",");
+        await Promise.all(imgUrlArr.map(this.checkImageSize));
+        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')
+            }
           })
-        }
-      })
+        })
+      }catch (error) {
+        this.$message.error(`第 ${error + 1} 张图片不符合尺寸要求。`)
+      }
     },
     getStyleList () {
       this.$http({
         url: this.$http.adornUrl('/prod/prodTemplateStyle/page'),
         method: 'get',
         params: this.$http.adornParams(
-                Object.assign({
-                  size: 100,
-                  shopId: this.$store.state.user.shopId
-                }
-                )
+          Object.assign({
+              size: 100,
+              shopId: this.$store.state.user.shopId
+            }
+          )
         )
       }).then(({data}) => {
         this.styleList = data.records

src/views/modules/settlement/print-settlement-add-or-update.vue

@@ -126,10 +126,8 @@
             this.$message({
               message: '提交成功',
               type: 'success',
-              onClose: () => {
-                this.dialogClose();
-              }
             })
+            this.dialogClose();
           }else{
             this.$message({
               message: '提交失败',