photo.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <include file="weixin@block:header"/>
  2. <!--<title>照片打印</title>-->
  3. <link rel="stylesheet" href="/static/weixin/lib/cropper/cropper.css?v={$version}"></link>
  4. <link rel="stylesheet" href="/static/weixin/css/print.css?v={$version}">
  5. <div id="app" v-cloak>
  6. <header class="zyw-header">
  7. <div class="zyw-container white-color">
  8. <div class="head-l"><a href="javascript:history.go(-1);" target="_self"><img
  9. src="/static/weixin/img/svg/head-return.svg" alt=""></a></div>
  10. <h1>照片打印</h1>
  11. </div>
  12. </header>
  13. <div class="zyw-container photo-print" v-cloak>
  14. <div class="weui-print">
  15. <div v-if="picList.length<=0" class="empty">
  16. <img src="/static/weixin/img/no-pic.png" width="80" height="80">
  17. </div>
  18. <div v-else :id="'pic_'+k" class="print-item print-pic" :data-id="pic.id" v-for="(pic,k) in picList">
  19. <!--<div class="actions">
  20. <div class="op">
  21. <span class="edit" @click="picEdit(k)"><img src=""/>编辑</span>
  22. <span :id="'color_'+k" class="color" @click="picColor(k)" data-color="1">黑白</span>
  23. <span class="del" @click="picDel(k)"><img src=""/>删除</span>
  24. <span class="prev" @click="picPreview(k)"><img src=""/>预览</span>
  25. </div>
  26. </div>-->
  27. <div class="actions">
  28. <div class="title">参数设置:</div>
  29. <div class="op">
  30. <img class="del" src="/static/weixin/img/icon/del.png" width="24" height="24" @click="picDel(k)">
  31. <p class="edit">
  32. <span class="edit" @click="picEdit(k, pic, 1)"><img src="/static/weixin/img/icon/edit.png" width="24" height="24"/>编辑</span>
  33. <span class="prev" @click="picPreview(k, pic)"><img src="/static/weixin/img/icon/look.png" width="24" height="24"/>预览</span>
  34. </p>
  35. <p class="pic-color">
  36. <span :id="'color_'+k" class="color color1 active" @click="picColor(k, 1)" data-color="1">黑白</span>
  37. <span :id="'color_'+k" class="color color2" @click="picColor(k, 2)" data-color="2">彩色</span>
  38. </p>
  39. </div>
  40. </div>
  41. <div class="pic-box">
  42. <div class="pic">
  43. <div :id="'pic_preview_'+k" class="pic-preview">
  44. <img class="pic-img" :id="'pic_img_'+k" @click="picEdit(k, pic, 1)" :src="pic.preview" :data-pic="pic.url" :alt="pic.name" :data-size="pic.file_size" onerror="javascript:this.src='/static/weixin/img/no-pic.png';" :data-type="pic.file_type">
  45. </div>
  46. </div>
  47. </div>
  48. <div class="count">
  49. <div class="weui-count">
  50. <a class="weui-count__btn weui-count__decrease"></a>
  51. <input :id="'num_'+k" :readonly="deviceId?true:false" class="weui-count__number pic-num" type="number" :value="pic.nums? pic.nums : 1">
  52. <a class="weui-count__btn weui-count__increase"></a>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="block"></div>
  57. </div>
  58. <div id="cropBox" class="weui-popup__container">
  59. <div class="weui-popup__overlay"></div>
  60. <div class="weui-popup__modal">
  61. <div class="crop-edit" v-if="!cropPreviewStatus">
  62. <a id="cropZoom1" class="weui-btn_pink" @click="cropReset()">
  63. <img src="/static/weixin/img/icon/reset.png" alt="" width="36" height="36">
  64. <span>重置</span>
  65. </a>
  66. <a id="cropZoom2" class="weui-btn_pink" @click="rotate($event,1)">
  67. <img src="/static/weixin/img/icon/left.png" alt="" width="36" height="36">
  68. <span>左旋</span>
  69. </a>
  70. <a id="cropZoom3" class="weui-btn_pink" @click="rotate($event,2)">
  71. <img src="/static/weixin/img/icon/right.png" alt="" width="36" height="36">
  72. <span>右旋</span>
  73. </a>
  74. <a id="cropZoom4" class="weui-btn_pink" @click="cropSize()">
  75. <img src="/static/weixin/img/icon/size.png" alt="" width="36" height="36">
  76. <span>适应</span>
  77. </a>
  78. </div>
  79. <div class="crop-img"></div>
  80. <div class="crop-actions">
  81. <a class="weui-btn weui-btn_default" @click="cropCancel()">取消</a>
  82. <a id="clipConfirm" class="weui-btn weui-btn_default weui-btn_pink" @click="cropConfirm()">确定剪切</a>
  83. <!--<a v-else class="weui-btn weui-btn_default" @click="cropCancel()">取消</a>-->
  84. </div>
  85. </div>
  86. </div>
  87. <div id="previewBox" class="weui-popup__container">
  88. <div class="weui-popup__overlay"></div>
  89. <div class="weui-popup__modal">
  90. <div class="crop-preview">
  91. <div id="preview">
  92. <div class="preview-box">
  93. <img id="cropImgPreview" class="preview-img" :src="previewData.url" alt="">
  94. </div>
  95. </div>
  96. </div>
  97. <div class="crop-actions preview-action">
  98. <a class="weui-btn weui-btn_default" @click="previewCancel()">取消</a>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="weui-actions" >
  103. <div class="weui-btn-area">
  104. <a class="weui-btn weui-btn_default">
  105. <input id="upload" type="file" accept="image/*" multiple @change="selectPic($event)">添加照片
  106. </a>
  107. <a v-if="printType==2" class="weui-btn weui-btn_default weui-btn_pink" @click="doSubmit()" >拼团打印</a>
  108. <a v-else class="weui-btn weui-btn_default weui-btn_pink" @click="doSubmit()" >下单打印</a>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <script src="/static/weixin/lib/jcrop/html2canvas.min.js?v={$version}"></script>
  114. <script src="/static/weixin/lib/cropper/cropper.js?v={$version}"></script>
  115. <script src="/static/weixin/js/jweixin-1.4.0.js?v={$version}"></script>
  116. <script src="/static/weixin/js/photo.js?v={$version}"></script>
  117. <include file="weixin@block:footer"/>