task#13728,新服务商加答题确认弹框

src/views/newcomerTraining/newTrainingList.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="wrap">
     <div class="navBar">
-      <van-nav-bar title="新人培训"  :border="false" :fixed="true" :safe-area-inset-top="true"/>
+      <van-nav-bar title="新人培训"  :border="false" :fixed="true" :safe-area-inset-top="true">
+        <template slot="left" v-if="isFinished">
+         <van-icon @click="allProcessed" name="checked" color="#37ec37" size="20"/>
+        </template>
+      </van-nav-bar>
     </div>
     <div class="contentWrap" v-show="!showEmpty">
       <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
@@ -20,24 +24,27 @@
           </template>
         </div>
       </van-pull-refresh>
+      <van-popup v-model="showPoup" class="poupWrap">
+        <div class="wrap">
+          <div class="title">培训提醒</div>
+          <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
+          <div class="btn" @click="showPoup = false">确定</div>
+        </div>
+      </van-popup>
     </div>
     <div class="empty" v-show="showEmpty">
       <img src="@/assets/empty.png" />
     </div>
-<!--    <van-popup v-model="showPoup">
-      <div>
-
-      </div>
-    </van-popup>-->
   </div>
 </template>
 
 <script>
-import { Dialog } from 'vant';
+import { Dialog  } from 'vant';
 import {myMixins} from "@/utils/myMixins"
 import {pageList} from  "@/api/mine"
+
 export default {
-  name: "trainDocment",
+  name: "newTrainingList",
   computed: {
   },
   mixins:[myMixins],
@@ -50,11 +57,13 @@ export default {
       show:false,
       showEmpty:false,
       isLoading:false,
-      showPoup:false,
+      showPoup:true,//进入弹框
+      isFinished:false,
     }
   },
   mounted() {
     this.getList();
+
   },
   methods:{
     onRefresh() {
@@ -74,30 +83,9 @@ export default {
       this.pageList=res.data;
       let aaa=this.pageList.every(item=>item.listShowButton != 1)
       if(aaa){
-        // let that=this
+        this.showPoup=false
-        Dialog.confirm({
+        this.isFinished=true
-          title: '提示',
+        await this.allProcessed()
-          message: '恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。',
-          confirmButtonText: '前往',
-          cancelButtonText: '稍后'
-        })
-            .then(() => {
-              console.log("=====")
-              let data = {"action":"goBack","params":""}
-              var u = navigator.userAgent;
-              var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-              if(isiOS){
-                window.webkit.messageHandlers.nativeObject.postMessage(data);
-              }else {
-                window.android.sendMessage("goBack");
-              }
-              // that.goBack();
-            })
-            .catch(() => {
-              // on cancel
-            });
-        this.showPoup=true
-        console.log("全部处理")
       }
       if(res.data.length === 0){
         this.showEmpty  = true
@@ -107,8 +95,30 @@ export default {
     },
     initShow(){
       this.keyword= '',
-          this.getList()
+      this.getList()
-    }
+    },
+    allProcessed(){
+      Dialog.confirm({
+        title: '提示',
+        message: '恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。',
+        confirmButtonText: '前往',
+        cancelButtonText: '稍后'
+      })
+          .then(() => {
+            let data = {"action":"goBack","params":""}
+            var u = navigator.userAgent;
+            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+            if(isiOS){
+              window.webkit.messageHandlers.nativeObject.postMessage(data);
+            }else {
+              window.android.sendMessage("goBack");
+            }
+          })
+          .catch(() => {
+            // on cancel
+          });
+      console.log("全部处理")
+    },
   }
 }
 </script>
@@ -122,4 +132,31 @@ export default {
   margin-right: 8px;
   text-align: right
 }
+.poupWrap{
+  box-sizing: border-box;
+  width: 75%;
+  padding:15px 20px;
+  border-radius: 8px;
+  height: 160px;
+  .wrap{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #FFFFFF;
+    .title{
+      font-weight: bold;
+    }
+    .btn{
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background-color: #2A5094;
+      border-radius: 15px;
+      color: #FFFFFF;
+
+    }
+  }
+}
 </style>