.

src/main/nine-space/src/components/order/OrderOpen.vue

@@ -0,0 +1,254 @@
+<template>
+    <van-overlay :show="show" z-index="99" @click="show = false">
+        <div class="content" @click.stop="">
+            <img class="bg" ref="bg" src="../../assets/open1.png" alt="" />
+
+            <div class="box">
+                <img class="img1" src="../../assets/box1.png" alt="" />
+                <img class="img2" ref="img2" src="../../assets/box2.png" alt="" />
+                <img class="img3" ref="img3" src="../../assets/png-kapian.png" alt="" />
+                <img class="guang" src="../../assets/png-guang.png" alt="" />
+            </div>
+
+            <div class="product" ref="product">
+                <img class="productBg" src="../../assets/png-cangping-bg.png" alt="" />
+                <img class="productImg" :src="imgSrc" />
+            </div>
+
+            <img src="../../assets/icon_fenxiang_close.png" alt="" class="close" />
+        </div>
+    </van-overlay>
+</template>
+
+<script>
+export default {
+    props: {
+        imgSrc: {
+            type: String,
+            defalut: ''
+        }
+    },
+    data() {
+        return {
+            show: true
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            this.open();
+        }, 1000);
+    },
+    methods: {
+        open() {
+            this.addClass('img2', 'animate__rollOut', false)
+                .then(() => {
+                    return this.addClass('img3', 'animate__bounceOutUp', false);
+                })
+                .then(() => {
+                    setTimeout(() => {
+                        this.addClass('bg', 'bg1');
+                    }, 300);
+                    // return this.addClass('product', 'animate__bounceInDown', true);
+                });
+        },
+        //组件名，动画名，展示（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>
+
+<style lang="less" scoped>
+.content {
+    position: absolute;
+    width: 100vw;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+
+    .bg {
+        width: 100%;
+        display: block;
+        transition: transform ease-in-out 0.3s;
+        &.bg1 {
+            transform: scale(2);
+        }
+    }
+
+    .close {
+        width: 40px;
+        height: 40px;
+        margin-top: 10px;
+    }
+}
+
+.box {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    .img1 {
+        width: 280px;
+        display: block;
+    }
+    .img2 {
+        width: 280px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 3;
+    }
+    .guang {
+        width: 280px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 1;
+    }
+    .img3 {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left: calc(50% - 10px);
+        top: calc(50% - 10px);
+        z-index: 2;
+        opacity: 0;
+    }
+}
+
+.product {
+    position: fixed;
+    left: 0;
+    top: calc(40% - 450 / 375 * 50vw);
+    display: none;
+    .productBg {
+        width: 100vw;
+        display: block;
+    }
+    .productImg {
+        width: 280/375 * 100vw;
+        height: 280/375 * 100vw;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 106/375 * 100vw;
+        border-radius: 30px;
+        object-fit: cover;
+    }
+}
+
+.animate__rollOut {
+    animation: rollOut ease-in-out 0.8s;
+}
+
+@keyframes rollOut {
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
+        transform: translate3d(100%, 0, 0) rotate(120deg);
+    }
+}
+
+.animate__bounceOutUp {
+    animation: bounceOutUp ease-in-out 0.8s;
+}
+
+@keyframes bounceOutUp {
+    20% {
+        -webkit-transform: translate3d(0, -10px, 0) scale(1.1);
+        transform: translate3d(0, -10px, 0) scale(1.1);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 20px, 0) scale(1.2);
+        transform: translate3d(0, 20px, 0) scale(1.2);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0) scale(3);
+        transform: translate3d(0, -2000px, 0) scale(3);
+    }
+}
+
+.animate__bounceInDown {
+    animation: bounceInDown ease-in-out 0.8s;
+}
+
+@keyframes bounceInDown {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
+        transform: translate3d(0, -3000px, 0) scaleY(3);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
+        transform: translate3d(0, 25px, 0) scaleY(0.9);
+    }
+    75% {
+        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
+        transform: translate3d(0, -10px, 0) scaleY(0.95);
+    }
+    90% {
+        -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
+        transform: translate3d(0, 5px, 0) scaleY(0.985);
+    }
+    to {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+}
+
+.animate__heartBeat {
+    animation: heartBeat ease-in-out 0.8s;
+}
+@keyframes heartBeat {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    14% {
+        -webkit-transform: scale(1.3);
+        transform: scale(1.3);
+    }
+    28% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    42% {
+        -webkit-transform: scale(1.3);
+        transform: scale(1.3);
+    }
+    70% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+</style>

src/main/nine-space/src/views/order/Detail.vue

@@ -69,13 +69,16 @@
                 {{ info.payTime }}
             </div>
         </div>
+        <order-open :imgSrc="getImg(changeImgs(info.pic))"></order-open>
     </div>
 </template>
 
 <script>
+import OrderOpen from '../../components/order/OrderOpen.vue';
 import order from '../../mixins/order';
 import product from '../../mixins/product';
 export default {
+    components: { OrderOpen },
     name: 'detail',
     data() {
         return {