优化交互

src/view/wx-print/index.vue

@@ -2,6 +2,13 @@
   <div>
     <loading :loading="loading"></loading>
     <div v-if="loading" class="desc">{{desc}}</div>
+
+    <div v-if="clickCopyCancel||clickCopyOK" class="copy" style="margin-top: 50%">
+      <Icon :type=copyIcon class="copy-icon" :style="{color:(clickCopyOK?'rgb(25,189,107)':'rgb(238,65,18)')}"/>
+    </div>
+    <div class="copy" style="font-size: 24px;color: #17233d;font-weight: bold;margin-top: 10px" v-if="clickCopyCancel||clickCopyOK">{{copyResult}}</div>
+    <div class="copy" style="color: #808695;margin-top: 10px" v-if="clickCopyCancel||clickCopyOK">{{copyDesc}}</div>
+
   </div>
 </template>
 
@@ -23,6 +30,11 @@ export default {
       loading:true,
       uploadSuccess:false,
       desc:'正在打印票据，请稍候…',
+      copyIcon:'ios-checkmark-circle',
+      copyResult:'操作成功',
+      copyDesc:'链接复制成功，请复制链接到手机浏览器进行下载',
+      clickCopyOK:false,
+      clickCopyCancel:false,
       // docs:{
       //   // 销售订单
       //   'order':{'docName':this.$config.docCode.order},
@@ -138,7 +150,7 @@ export default {
               this.excute(this.$service.fileService, `upload?folder=pdf&uuid=${this.$route.query.uuid}`,formData).then(res => {
                 if (res.code === this.$config.SUCCESS_CODE) {
                   console.log('upload-success',res)
-                  this.uploadSuccess=true
+                  // this.uploadSuccess=true
                   this.desc='已成功生成票据PDF！等待下载…'
                 }
               })
@@ -150,6 +162,9 @@ export default {
                   title: '打印票据遇到问题？',
                   content: '<p>如页面长时间无响应，请点击【确定】按钮，复制链接到手机浏览器下载票据文件</p>',
                   onOk: () => {
+                    this.loading=false
+
+                    this.clickCopyOK=true
 
                     let baseUrl=this.$config.serviceUrl
 
@@ -161,10 +176,17 @@ export default {
                       console.log('复制成功',e);
                     }, function (e) {
                       console.log('复制失败',e);
+                      this.copyIcon='ios-close-circle'
+                      this.copyResult='操作失败'
+                      this.copyDesc='复制链接失败，请联系管理员'
                     })
                   },
                   onCancel: () => {
-                    console.log(0)
+                    this.loading=false
+                    this.clickCopyCancel=true
+                    this.copyIcon='ios-close-circle'
+                    this.copyResult='操作失败'
+                    this.copyDesc='未复制链接，请返回上一页'
                   }
                 })
               }
@@ -191,4 +213,13 @@ export default {
   font-weight:bold;
   color: black;
 }
+.copy{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.copy-icon{
+  font-size: 100px;
+}
 </style>