静态页面

src/assets/css/reset.scss

@@ -17,7 +17,7 @@ body {
     -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    color: #333;
+    // color: #333;
     font-size: .13rem;
   }
 

src/pages/index/DingDanXiangQing/index.vue

@@ -39,14 +39,15 @@
         <div class="PhotoInfo">
           <span>彩票照片</span>
           <div v-if="!DetailInfo.bettingDetail.betting.isDrawn && DetailInfo.bettingDetail.betting.status - 0 !== 2">
-            <a class="Add" @click="$refs.VantFile.click()">
+            <van-uploader v-model="VantFileList" :after-read="AfterRead" @delete="ImgDelete" />
+            <!-- <a class="Add" @click="$refs.VantFile.click()">
               <i class="iconfont iconjia centerLabel"></i>
             </a>
             <van-uploader style="overflow: hidden;position: absolute;top: 0;left: 0;opacity: 0;" ref="VantFile" :after-read="CpFileChange" v-model="CpImgArr" :preview-image="false"></van-uploader>
             <div v-for="(item, index) in CpImgArr" :key="index">
               <img :src="item.content" class="centerLabel contain" alt="" @click="CheckBigImg(item)">
               <a class="iconfont iconguanbi" @click="DeleteCpImg(index)"></a>
-            </div>
+            </div> -->
             <!-- <input type="file" ref="CpFile" @change="CpFileChange" style="display: none" accept="image/*"> -->
           </div>
           <img v-else v-for="(item, index) in (DetailInfo.bettingDetail.betting.lotteryPicture || '').split(',')" :src="item" :key="index" width="100%" style="margin-top: 0.15rem" alt="">
@@ -83,6 +84,7 @@ export default {
   name: 'index',
   data () {
     return {
+      ResImgArr: [],
       VantFileList: [],
       BigImgUrl: null,
       ShowBigImg: false,
@@ -126,6 +128,18 @@ export default {
         this.DetailInfo = res.data.data
       })
     },
+    ImgDelete (file, target) {
+      this.ResImgArr.splice(target.index, 1)
+    },
+    AfterRead (file) {
+      file.status = 'uploading'
+      file.message = '上传中...'
+
+      this.UploadBase64Img({ data: { image: file.content } }).then((res) => {
+        this.ResImgArr.push(res.data.data)
+        file.status = 'done'
+      })
+    },
     CheckBigImg (item) {
       this.BigImgUrl = item.content
       this.ShowBigImg = true
@@ -141,7 +155,7 @@ export default {
       })
     },
     ToProcessOrder () { // 出票
-      if (!this.CpImgArr.length) {
+      if (!this.ResImgArr.length) {
         this.Toast('请先上传出票图片')
         return false
       }
@@ -151,26 +165,15 @@ export default {
       }).then(() => {
         if (this.DataLock) return
         this.DataLock = true
-        let Arr = []
-        this.CpImgArr.map((item) => {
-          this.UploadBase64Img({ data: { image: item.content } }).then((res) => {
-            Arr.push(res.data.data)
-            if (Arr.length === this.CpImgArr.length) {
-              console.log(`开始出票，时间是${Date.now()}`)
-              this.ProcessOrder({ data: { lotteryPicture: Arr.length ? Arr.join(',') : null, orderId: this.DetailInfo.orderId } }).then((res) => {
-                this.Toast('出票成功')
-                console.log(`出票成功，时间是${Date.now()}`)
-                this.DetailInfo.status = 1
-                this.DetailInfo.bettingDetail.betting.isDrawn = true
-                this.DataLock = false
-                this.$router.go(-1)
-              }).catch((res) => {
-                console.log(`出票失败，时间是${Date.now()}`)
-                this.Toast(res.data.message)
-                this.DataLock = false
-              })
-            }
-          })
+        this.ProcessOrder({ data: { lotteryPicture: this.ResImgArr.length ? this.ResImgArr.join(',') : null, orderId: this.DetailInfo.orderId } }).then((res) => {
+          this.Toast('出票成功')
+          this.DetailInfo.status = 1
+          this.DetailInfo.bettingDetail.betting.isDrawn = true
+          this.DataLock = false
+          this.$router.go(-1)
+        }).catch((res) => {
+          this.Toast(res.data.message)
+          this.DataLock = false
         })
       })
     },

src/pages/index/DingDanXiangQing/page.scss

@@ -23,52 +23,53 @@
         display: block;
       }
       > div {
-        font-size: 0;
         margin-top: 0.15rem;
-        position: relative;
-        > a.Add {
-          display: inline-block;
-          vertical-align: middle;
-          width: 0.6rem;
-          height: 0.6rem;
-          border: 0.01rem dashed #ccc;
-          position: relative;
-          overflow: hidden;
-          margin-right: 0.1rem;
-          margin-bottom: 0.1rem;
-          > i {
-            font-size: 0.22rem;
-            color: #ccc;
-          }
-        }
-        > div {
-          display: inline-block;
-          vertical-align: middle;
-          width: 0.62rem;
-          height: 0.62rem;
-          position: relative;
-          overflow: visible;
-          background: #ccc;
-          margin-right: 0.1rem;
-          margin-bottom: 0.1rem;
-          > img {
-            z-index: 1;
-          }
-          > a {
-            display: inline-block;
-            position: absolute;
-            font-size: 0.1rem;
-            width: 0.16rem;
-            line-height: 0.16rem;
-            text-align: center;
-            color: #fff;
-            border-radius: 100%;
-            background: #d91e36;
-            right: -0.04rem;
-            top: -0.04rem;
-            z-index: 2;
-          }
-        }
+        // font-size: 0;
+        // margin-top: 0.15rem;
+        // position: relative;
+        // > a.Add {
+        //   display: inline-block;
+        //   vertical-align: middle;
+        //   width: 0.6rem;
+        //   height: 0.6rem;
+        //   border: 0.01rem dashed #ccc;
+        //   position: relative;
+        //   overflow: hidden;
+        //   margin-right: 0.1rem;
+        //   margin-bottom: 0.1rem;
+        //   > i {
+        //     font-size: 0.22rem;
+        //     color: #ccc;
+        //   }
+        // }
+        // > div {
+        //   display: inline-block;
+        //   vertical-align: middle;
+        //   width: 0.62rem;
+        //   height: 0.62rem;
+        //   position: relative;
+        //   overflow: visible;
+        //   background: #ccc;
+        //   margin-right: 0.1rem;
+        //   margin-bottom: 0.1rem;
+        //   > img {
+        //     z-index: 1;
+        //   }
+        //   > a {
+        //     display: inline-block;
+        //     position: absolute;
+        //     font-size: 0.1rem;
+        //     width: 0.16rem;
+        //     line-height: 0.16rem;
+        //     text-align: center;
+        //     color: #fff;
+        //     border-radius: 100%;
+        //     background: #d91e36;
+        //     right: -0.04rem;
+        //     top: -0.04rem;
+        //     z-index: 2;
+        //   }
+        // }
       }
     }
     > .Tips {