贷款-订单详情页新增图片预览、接口调用失败提示

htmldev/loan/src/views/loan/detail/index.vue

@@ -53,7 +53,8 @@
               </p>
               <div class="attest-wrap">
                 <div v-for="(item, index) in [...checks[1].checkContent1, ...checks[1].checkContent2]" :key="index">
-                  <img :src="item" alt="">
+                  <img :src="item + '?x-oss-process=image/resize,m_fill,h_82'" alt=""
+                       @click="funImagePreview(index, [...checks[1].checkContent1, ...checks[1].checkContent2])">
                 </div>
               </div>
               <p class="time">{{ checks[1].updatedAt }}</p>
@@ -129,6 +130,7 @@
 </template>
 
 <script>
+  import { ImagePreview, Toast } from 'vant'
   import { getOrderDetail } from './api'
 
   export default {
@@ -173,7 +175,18 @@
             this.commanyPhone = commanyPhone
             this.orderFinalRemark = orderFinalRemark
             this.checks = checks
+          } else {
+            Toast(res.msg)
           }
+        }).catch(() => {
+          Toast('出错啦')
+        })
+      },
+      funImagePreview (index, images) {
+        ImagePreview({
+          images: images,
+          startPosition: index,
+          closeable: true
         })
       }
     }
@@ -283,6 +296,16 @@
   }
 
   .flow-0 {
+    .description {
+      span:nth-of-type(2) {
+        font-weight: bold;
+      }
+
+      span:nth-of-type(3) {
+        margin: 0 5px;
+      }
+    }
+
     .time {
       margin-top: 18px;
     }