优化j-button样式

src/style/common.scss

@@ -65,6 +65,7 @@ input, textarea {
 
 .j-button-confirm,
 .j-button-cancel {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,6 +76,24 @@ input, textarea {
   line-height: inherit;
   text-align: center;
   border-radius: 8px;
+  &:before {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    border: inherit;
+    border-color: #000;
+    border-radius: inherit;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    opacity: 0;
+  }
+  &:active:before {
+    opacity: 0.1;
+  }
 }
 
 .j-button-cancel {

src/views/404.vue

@@ -19,7 +19,15 @@ import empty from '@/components/common/Empty.vue'
   }
 })
 
-export default class Page404 extends Vue {}
+export default class Page404 extends Vue {
+  created () {
+    const route = this.$route
+    const redirectedFrom = route.redirectedFrom
+    if (redirectedFrom) {
+      console.log('路由:%c %s %c未找到', 'color: red', redirectedFrom, 'color: #000')
+    }
+  }
+}
 </script>
 
 <style lang="scss">

src/views/Test.vue

@@ -27,6 +27,16 @@
     <van-cell-group :title="'SESSIONID  (' + SIDTITLE + ')'">
       <van-cell :value="SESSIONID ? SESSIONID : '无SESSIONID'" />
     </van-cell-group>
+
+    <div class="loader-container">
+      <div class="loader">
+        <div class="arc"></div>
+        <div class="arc"></div>
+        <div class="arc"></div>
+      </div>
+      <div class="text">loading...</div>
+    </div>
+
   </div>
 </template>
 
@@ -105,5 +115,86 @@ export default class Test extends Vue {
 </script>
 
 <style lang="scss">
+.j-test {
+  .loader-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 150px;
+  }
+
+  .loader {
+    position: relative;
+    transform-style: preserve-3d;
+    perspective: 800;
 
+    display: flex;
+    flex-wrap: wrap;
+    width: 36px;
+    height: 36px;
+
+    --primary-color: #4ec0e9;
+
+    .arc {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border-bottom: 3px solid var(--primary-color);
+
+      @for $i from 1 through 3 {
+        &:nth-child(#{$i}) {
+          animation: rotate#{$i} 1.15s linear infinite;
+        }
+      }
+
+      &:nth-child(1) {
+        animation-delay: -0.8s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -0.4s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0s;
+      }
+    }
+  }
+
+  @keyframes rotate1 {
+    from {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
+    }
+  }
+
+  @keyframes rotate2 {
+    from {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
+    }
+  }
+
+  @keyframes rotate3 {
+    from {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
+    }
+  }
+}
 </style>

src/views/buy/Buy.vue

@@ -332,14 +332,14 @@ export default class BuyReport extends Vue {
     location.href = e.target.href
   }
 
-  sendCode (cb) {
+  sendCode (next) {
     const reg = this.errorMsgMap.email.reg
     const email = this.userInfo.email
     const emailPass = reg.test(email)
     if (!emailPass) return
     this.sendedEmail = true
     // 开启倒计时计时器
-    cb && cb()
+    next && next()
     this.sendEmailCode({ email: this.userInfo.email }).then(res => {
       if (res.error_code === 0 && res.data.status === 1) {
         this.$toast({

src/views/order/detail.vue

@@ -37,7 +37,7 @@
     <div class="j-container content" v-else>
       <div class="j-main no-scrollbar">
         <div>
-          <div class="header-pic" :class="orderStateMap[orderInfo.state].bgcClassName">
+          <div class="header-pic arc-container" :class="orderStateMap[orderInfo.state].bgcClassName">
             <div class="order-state">{{ orderStateMap[orderInfo.state].text }}</div>
             <div class="surplus-time" v-if="orderStateMap[orderInfo.state].surplusTimeShow && orderInfo.surplusTime > 0">
               <span>剩余支付时间：</span>
@@ -401,23 +401,10 @@ export default class OrderDetail extends Vue {
       }
     }
     // content 部分
-    .content .header-pic {
+    // 头部使用header-mask实现
+    // 参考: https://www.sunzhongwei.com/css-div-arc-at-bottom
+    .arc-container {
       position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 220px;
-      color: #F7F9FA;
-      box-sizing: border-box;
-
-      // 头部使用header-mask实现
-      // 参考: https://www.sunzhongwei.com/css-div-arc-at-bottom
-      &>div {
-        position: relative;
-        z-index: 2;
-      }
       &:after {
         content: '';
         width: 150%;
@@ -441,6 +428,11 @@ export default class OrderDetail extends Vue {
         background-color: #C0C4CC;
       }
 
+      &>div {
+        position: relative;
+        z-index: 2;
+      }
+
       // &.blue {
       //   background: transparent url(~@/assets/image/order-detail-bg-blue2x.png) no-repeat top left;
       //   background-size: cover;
@@ -453,6 +445,17 @@ export default class OrderDetail extends Vue {
       //   background: transparent url(~@/assets/image/order-detail-bg-grey2x.png) no-repeat top left;
       //   background-size: cover;
       // }
+    }
+
+    .content .header-pic {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 220px;
+      color: #F7F9FA;
+      box-sizing: border-box;
 
       .order-state {
         margin-top: 30px;