等级

src/components/Level.vue

@@ -1,6 +1,6 @@
 <template>
-    <van-overlay :show="show" @click="show = false" z-index="99">
-        <div class="box">
+    <van-overlay :show="show" @click="close" z-index="99">
+        <div class="box" ref="box">
             <van-image width="260" height="220" :src="levelInfo.bg" fit="contain" />
             <div class="box-top">
                 <div class="box-title" :style="{ color: levelInfo.color, borderColor: levelInfo.color }">
@@ -27,6 +27,20 @@
             </div>
         </div>
     </van-overlay>
+    <div v-if="isLogin && !show" ref="medal" class="medal-info" @click="$router.push('/mineLevel')">
+        <div class="medal-icon">
+            <van-image :src="levelInfo.icon" width="32" height="32" />
+            <span class="text1" :style="{ color: levelInfo.color }">{{ levelInfo.level }}</span>
+        </div>
+        <div class="medal-text">
+            <div class="text1" :style="{ color: levelInfo.color, backgroundColor: levelInfo.color + '33' }">
+                {{ levelInfo.title }}
+            </div>
+            <div class="text2" :style="{ color: levelInfo.color }">
+                {{ levelInfo.realm }}
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -51,6 +65,14 @@ export default {
                 },
                 { body: 'json' }
             );
+        },
+        close() {
+            this.addClass('box', 'zoomOutUp', false, 200).then(() => {
+                this.show = false;
+                this.$nextTick(() => {
+                    this.$refs.medal.className += ' flipInX';
+                });
+            });
         }
     }
 };
@@ -63,9 +85,11 @@ export default {
     overflow: hidden;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    width: 260px;
+    height: 338px;
     position: absolute;
-
+    margin-top: -169px;
+    margin-left: -130px;
     .box-content {
         padding: 16px 23px 20px;
         .text1 {
@@ -136,4 +160,63 @@ export default {
         top: 38px;
     }
 }
+.medal-info {
+    position: absolute;
+    right: 0;
+    top: 140px;
+    .flex();
+    padding: 2px 0 5px 10px;
+    border-radius: 100px 0px 0px 100px;
+    z-index: 20;
+    background-color: #f5f7fa;
+    .medal-icon {
+        flex-shrink: 0;
+        position: relative;
+
+        .van-image {
+            display: block;
+        }
+
+        .text1 {
+            position: absolute;
+            left: 14px;
+            top: 10px;
+            font-size: 12px;
+            transform: scale(0.8);
+            line-height: 10px;
+            font-weight: bold;
+        }
+    }
+    .medal-text {
+        .flex-col();
+        align-items: center;
+        justify-content: center;
+        transform: scale(0.8) translateX(-2px);
+        .text1 {
+            font-size: 12px;
+            line-height: 16px;
+            padding: 0 6px;
+            border-radius: 2px;
+            min-width: 50px;
+            text-align: center;
+            position: relative;
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: -1;
+                background-color: #fff;
+            }
+        }
+
+        .text2 {
+            font-size: 12px;
+            margin-top: 2px;
+            line-height: 10px;
+        }
+    }
+}
 </style>

src/components/order/OrderOpen.vue

@@ -60,20 +60,7 @@ export default {
                 });
         },
         //组件名，动画名，展示（true:出现，false:消失）
-        addClass(elName = '', className = '', show = '') {
-            this.$refs[elName].className = this.$refs[elName].className + ` ${className}`;
-            if (show === true) {
-                this.$refs[elName].style.display = 'block';
-            }
-            return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    if (show === false) {
-                        this.$refs[elName].style.display = 'none';
-                    }
-                    resolve();
-                }, 600);
-            });
-        }
+        
     }
 };
 </script>

src/main.js

@@ -106,7 +106,10 @@ const loadSplash = (onload, onerror) =>
         function hideSplash() {
             if (isHide) return;
             isHide = true;
-            document.body.removeChild(splash);
+            splash.style.opacity = 0;
+            setTimeout(() => {
+                document.body.removeChild(splash);
+            }, 800);
             resolve();
         }
 

src/mixins/common.js

@@ -166,6 +166,20 @@ export default {
         },
         wait() {
             this.$toast('敬请期待');
+        },
+        addClass(elName = '', className = '', show = '', time = 600) {
+            this.$refs[elName].className = this.$refs[elName].className + ` ${className}`;
+            if (show === true) {
+                this.$refs[elName].style.display = 'block';
+            }
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    if (show === false) {
+                        this.$refs[elName].style.display = 'none';
+                    }
+                    resolve();
+                }, time);
+            });
         }
     }
 };

src/mixins/level.js

@@ -73,7 +73,7 @@ export default {
     computed: {
         levelInfo() {
             if (this.isLogin) {
-                let level = Math.floor(this.money / 10);
+                let level = Math.floor(this.money / this.$rating);
                 console.log(level);
                 let info = {};
                 [...this.medals].forEach(item => {

src/plugins/colors.js

@@ -17,5 +17,10 @@ export default {
                 bg3: '#0f0f0f'
             };
         }
+        if (process.env.NODE_ENV == 'development') {
+            app.config.globalProperties.$rating = 7;
+        } else {
+            app.config.globalProperties.$rating = 1000;
+        }
     }
 };

src/styles/app.less

@@ -228,4 +228,6 @@ input:-webkit-autofill {
     bottom: 0;
     z-index: 9999;
     object-fit: cover;
+    opacity: 1;
+    transition: opacity .8s ease-in-out;
 }

src/styles/common/common.less

@@ -192,3 +192,57 @@
     padding-bottom: calc(@height + constant(safe-area-inset-bottom));
     padding-bottom: calc(@height + env(safe-area-inset-bottom));
 }
+@keyframes zoomOutUp {
+    40% {
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    }
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    }
+}
+
+.zoomOutUp {
+    animation: zoomOutUp 0.4s ease-in-out;
+}
+
+@keyframes flipInX {
+    0% {
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+        -webkit-transform: perspective(400px) rotateX(90deg);
+        transform: perspective(400px) rotateX(90deg);
+    }
+    40% {
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        -webkit-transform: perspective(400px) rotateX(-20deg);
+        transform: perspective(400px) rotateX(-20deg);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: perspective(400px) rotateX(10deg);
+        transform: perspective(400px) rotateX(10deg);
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotateX(-5deg);
+        transform: perspective(400px) rotateX(-5deg);
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+.flipInX {
+    animation: flipInX 1.8s ease-in-out;
+}
+

src/views/Mine.vue

@@ -26,8 +26,9 @@
                             <img
                                 @click="$router.push('/verifiedSuc')"
                                 v-if="authStatus === '已认证'"
-                                src="@assets/renzheng_icon_pre.png"
+                                src="@assets/yirenzhng-geren-icon.png"
                                 alt=""
+                                class="renzhen-img"
                             />
 
                             <van-button
@@ -196,8 +197,6 @@ export default {
                         this.org = this.form.org;
                     }
                 });
-
-         
         }
     },
     methods: {
@@ -229,6 +228,7 @@ export default {
     padding-bottom: 100px;
     background-color: @bg;
     padding-top: 0 !important;
+    position: relative;
 }
 
 .top {
@@ -470,6 +470,7 @@ export default {
     display: flex;
     align-items: center;
     transform: translateX(-5px);
+    position: relative;
     .van-image {
         border: 5px solid @bg;
         flex-shrink: 0;
@@ -490,13 +491,13 @@ export default {
             color: @text0;
             line-height: 24px;
             .flex();
-            img {
-                width: 18px;
-                height: 18px;
-                display: inline-block;
-                margin-left: 5px;
-                vertical-align: middle;
-            }
+            // img {
+            //     width: 18px;
+            //     height: 18px;
+            //     display: inline-block;
+            //     // margin-left: 5px;
+            //     vertical-align: middle;
+            // }
         }
         .text2 {
             font-size: @font2;
@@ -510,6 +511,14 @@ export default {
             }
         }
     }
+
+    .renzhen-img {
+        position: absolute;
+        left: 60px;
+        bottom: 5px;
+        width: 20px;
+        height: 20px;
+    }
 }
 .menus {
     margin: 0 16px;

src/views/user/Level.vue

@@ -13,10 +13,14 @@
 
         <swiper slidesPerView="auto" :spaceBetween="16" class="box-swiper">
             <swiper-slide class="box" v-for="(item, index) in medals" :key="index">
-                <van-image class="box-bg" :src="item.bg" width="88" height="100" />
+                <van-image :src="item.bg" width="88" height="100" />
+
                 <div class="box-content">
-                    <van-image width="35" height="35" :src="item.icon" />
-                    <div class="box-text">Lv{{ item.start }}-{{ item.end }}</div>
+                    <div class="box-bg">
+                        <van-image width="35" height="35" :src="item.icon" />
+                        <span class="text1" :style="{ color: item.color }">**</span>
+                    </div>
+                    <div class="box-text" :style="{ color: item.color }">Lv{{ item.start }}-{{ item.end }}</div>
                 </div>
             </swiper-slide>
         </swiper>
@@ -136,5 +140,19 @@ export default {
             border-radius: 12px;
         }
     }
+
+    .box-bg {
+        position: relative;
+
+        .text1 {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            font-size: 12px;
+            font-weight: bold;
+            line-height: 10px;
+            transform: scale(0.8);
+        }
+    }
 }
 </style>