添加采集成功跳转页面

src/assets/scss/pages/caiji.scss

@@ -1,4 +1,4 @@
-.bg-app {
+.bg-caiji {
   background-color: rgba(189, 214, 255, 0.89);
   height: 100%;
   width: 100vw;
@@ -39,7 +39,8 @@
     justify-content: center;
 
     .btn {
-      width: 100px;
+      width: 150px;
+      font-size: 16px;
     }
   }
 }
@@ -47,3 +48,35 @@
 .picker_content {
   color: rgb(59, 59, 59);
 }
+
+.bg-caiji-success {
+  height: 100vh;
+  width: 100vw;
+
+  text-align: center;
+  .title {
+    background-color: rgba(189, 214, 255, 0.89);
+    padding: 20px;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .main {
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .icon-success {
+      font-size: 40px;
+      // width: 20px;
+      // height: 20px;
+    }
+
+    .success-content {
+      margin-top: 10px;
+      font-size: 25px;
+    }
+  }
+}

src/router/index.js

@@ -53,6 +53,15 @@ export const pageRoutes = [
       title: "居民信息填报",
     },
   },
+  {
+    path: "/caijisuccess",
+    props: true,
+    name: "caijisuccess",
+    component: () => import("@/views/pages/caijisuccess"),
+    meta: {
+      title: "居民信息填报",
+    },
+  },
 ];
 
 // 模块路由(基于主入口布局页面)

src/views/pages/caiji.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-app">
+  <div class="bg-caiji">
     <div class="title">
       居民信息填报
     </div>
@@ -202,6 +202,7 @@
 import { requestPost } from "@/js/dai/request";
 import { Toast } from "mint-ui";
 import { MessageBox } from 'mint-ui';
+import { Loading } from 'element-ui' // 引入Loading服务
 
 let loading // 加载动画
 export default {
@@ -318,7 +319,8 @@ export default {
     let envShow = process.env.VUE_APP_NODE_ENV
     console.log('环境', envShow)
 
-    let internalShequId = ['1202807601961984002', '6e511da6816e53af4cda952365a26eb9',]
+    // let internalShequId = ['1202807601961984002', '6e511da6816e53af4cda952365a26eb9',]
+    let internalShequId = ['1202807601961984002',]
     // if (envShow === 'dev' || envShow === 'prod:sit') { // 开发环境
     //   internalShequId = null
     // } else if (envShow === 'prod:uat') { // 体验
@@ -614,22 +616,26 @@ export default {
       this.formData.memberList = this.memberList
       console.log(this.formData)
       this.btnDisabled = true
+      this.startLoading()
       const url = "/epmetuser/icresicollect/save"
 
       const { data, code, msg } = await requestPost(url, this.formData)
-
+      this.endLoading()
+      this.btnDisabled = false
       if (code === 0) {
-        Toast({
-          message: '提交成功',
-          duration: 3000
-        });
-        this.btnDisabled = false
+
+        this.$router.replace({ name: 'caijisuccess' })
+        // Toast({
+        //   message: '提交成功',
+        //   duration: 3000
+        // });
+
       } else {
         Toast({
           message: msg,
           duration: 3000
         });
-        this.btnDisabled = false
+
       }
     },
 
@@ -824,7 +830,21 @@ export default {
 
     },
 
-
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
 
 
   }

src/views/pages/caijisuccess.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="bg-caiji-success">
+    <div class="title">
+      居民信息填报
+    </div>
+
+    <div class="main">
+
+      <div class="icon-success">
+        <i class="el-icon-circle-check "></i>
+      </div>
+      <div class="success-content"> 提交成功</div>
+
+    </div>
+  </div>
+</template>
+<script>
+
+
+import { requestPost } from "@/js/dai/request";
+import { Toast } from "mint-ui";
+import { MessageBox } from 'mint-ui';
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+
+
+    }
+  },
+  components: {},
+  computed: {
+
+  },
+  created () { },
+  mounted () {
+
+  },
+
+  methods: {
+
+
+
+
+
+  }
+}
+</script>
+
+<style lang="scss" scoped >
+@import "@/assets/scss/pages/caiji.scss";
+
+.my-field /deep/ .mint-field-core {
+  text-align: right;
+  margin-right: 20px;
+}
+
+/deep/ .mint-popup-bottom {
+  width: 100vw;
+}
+
+.picker-toolbar-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #eee;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+  .usi-btn-cancel,
+  .usi-btn-sure {
+    color: #26a2ff;
+    font-size: 16px;
+  }
+}
+</style>