flx

src/components/Honghe.vue

@@ -10,7 +10,11 @@
       <div class="outer6 flex-col">
         <div v-for="item in indexJPG" :key="item" class="section-item">
           <div @click="baga">
-            <img class="section-item-image" src="../assets/coverIndex.jpg" />
+            <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
+            <img
+              :class="`section-item-image ${!showPopup?'backImag':''}` "
+              src="../assets/popupImg/backImag.jpg"
+            />
           </div>
         </div>
       </div>
@@ -28,7 +32,7 @@ export default {
   },
   data() {
     return {
-      indexJPG: new Array(12).fill(undefined),
+      indexJPG: new Array(12).fill(null),
       showPopup: false
     }
   },
@@ -55,12 +59,13 @@ export default {
   background-color: #c1172d;
   background-size: 100% 100%;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   position: relative;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  overflow: auto;
 
   .topImage {
     width: 90%;
@@ -77,6 +82,7 @@ export default {
     width: 92vw;
     border: 1px solid #d0b69a;
     margin: 16px auto 0;
+    margin-bottom: 2em;
 
     .outer6 {
       flex-flow: row wrap;
@@ -91,7 +97,6 @@ export default {
       overflow: hidden;
       .section-item {
         width: 22vw;
-
         border-left: 1px solid #d0b69a;
         border-top: 1px solid #d0b69a;
         display: inline-flex;
@@ -100,6 +105,20 @@ export default {
 
           background-size: 100% 100%;
         }
+        // .backImag {
+        //   position: relative;
+        //   animation: change 0.8s linear forwards;
+        // }
+        // @keyframes change {
+        //   from {
+        //     width: 50%;
+        //     z-index: 1;
+        //     transform: rotateY(180deg);
+        //   }
+        //   to {
+        //     width: 22vw;
+        //   }
+        // }
       }
     }
   }

src/components/ImageTrans.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="card-wrapper">
+    <div :class="`card ${classDivAA?'flipped':''}`" @click="transform">
+      <div class="back">
+        <img src="../assets/popupImg/popuBody.jpg" alt />
+      </div>
+      <div class="front">
+        <img src="../assets/popupImg/backImag.jpg" alt />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImageTrans',
+  props: {
+    classDiv: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      classDivAA: false
+    }
+  },
+
+  mounted() {
+    if (this.classDiv) {
+      this.transform()
+    }
+  },
+  methods: {
+    transform() {
+      // this.classDiv = true
+      console.log(
+        '🚀 ~ file: ImageTrans.vue ~ line 34 ~ transform ~  this.classDiv',
+        // this.classDiv
+        setTimeout(() => {
+          this.classDivAA = true
+        }, 0)
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrapper {
+  perspective: 600px;
+}
+
+img {
+  width: 48vw;
+}
+.card {
+  position: relative;
+  width: 320px;
+  height: 320px;
+  margin: 200px auto;
+  color: #fff;
+  font-size: 3em;
+  text-align: center;
+  line-height: 320px;
+  box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);
+  transform-style: preserve-3d;
+  transition: all 0.8s ease;
+}
+
+.card > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* 背面不显示 */
+  backface-visibility: hidden;
+}
+
+.flipped {
+  transform: rotateY(180deg);
+}
+
+.card .front {
+}
+
+.card .back {
+  transform: rotateY(180deg);
+}
+</style>

src/components/Popup.vue

@@ -1,26 +1,48 @@
 <template>
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
     <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}">
+      <div v-show="myShareShow" class="sharetiptxt" style>
+        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
+      </div>
       <transition name="dialog">
         <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
           <div class="dialog-body">
-            <div class="dialog-popuImag">
-              <img src="../assets/popupImg/popuBody.jpg" alt />
+            <div class="card-wrapper">
+              <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
+                <!-- <ImageTrans :classDiv="show" /> -->
+                <div class="back">
+                  <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt />
+                </div>
+
+                <div class="front">
+                  <img
+                    style="width: 180px; height:492px "
+                    src="../assets/popupImg/backImag.jpg"
+                    alt
+                  />
+                </div>
+              </div>
             </div>
+
             <div class="dialog-footer">
               <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt />
             </div>
           </div>
           <!-- 右侧 -->
           <div class="section-box">
-            <div class="section-box-share">
+            <div class="section-box-share" @click="()=>{this.myShareShow=true}">
               <img src="../assets/popupImg/shareImage.png" alt />
             </div>
             <div class="section-box-receive">
-              <img src="../assets/popupImg/receiveImage.png" alt />
+              <router-link :to="{path:'SaveShare',query: {  states: 0 }}">
+                <img src="../assets/popupImg/receiveImage.png" alt />
+              </router-link>
             </div>
             <div class="section-box-save">
-              <img src="../assets/popupImg/saveImage.png" alt />
+              <router-link :to="{path:'SaveShare',query: {  states: 1 }}">
+                <img src="../assets/popupImg/saveImage.png" alt />
+              </router-link>
             </div>
           </div>
         </div>
@@ -32,6 +54,9 @@
 <script>
 export default {
   name: 'Popup',
+  components: {
+    ImageTrans: () => import('@/components/ImageTrans.vue')
+  },
   props: {
     show: {
       type: Boolean,
@@ -69,13 +94,19 @@ export default {
       name: 'dialog',
       showSelf: false,
       zIndex: this.getZIndex(),
-      bodyOverflow: ''
+      bodyOverflow: '',
+      classDivAA: false,
+      myShareShow: false
     }
   },
   watch: {
     show(val) {
       console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
       this.showSelf = val
+      if (this.show === false) {
+        this.myShareShow = false
+      }
+      this.transform()
 
       // if (!val) {
       //   this.closeMyself()
@@ -89,8 +120,28 @@ export default {
   },
   mounted() {
     this.forbidScroll()
+    if (this.show === true) {
+      this.transform()
+    }
   },
   methods: {
+    shareClick() {
+      this.$router.replace({
+        path: 'SaveShare',
+        query: { states: 0 }
+      })
+    },
+    saveClick() {
+      this.$router.replace({
+        path: 'SaveShare',
+        query: { states: 1 }
+      })
+    },
+    transform() {
+      setTimeout(() => {
+        this.classDivAA = this.show
+      }, 0)
+    },
     /** 禁止页面滚动 */
     forbidScroll() {
       this.bodyOverflow = document.body.style.overflow
@@ -128,15 +179,6 @@ export default {
 
 <style lang="less" scoped>
 // 弹窗动画
-.dialog-enter-active,
-.dialog-leave-active {
-  transition: opacity 1s;
-}
-
-.dialog-enter,
-.dialog-leave-to {
-  opacity: 0;
-}
 
 // 最外层 设置position定位
 // 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
@@ -163,6 +205,29 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    .sharetiptxt {
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      z-index: 55;
+      width: 20px;
+      height: 320px;
+      display: block;
+      position: absolute;
+      right: 1rem;
+      top: 0.5em;
+      animation: tipup 1s ease infinite;
+    }
+  }
+}
+@keyframes tipup {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(5%);
+  }
+  100% {
+    transform: translateY(0%);
   }
 }
 
@@ -185,13 +250,53 @@ export default {
     overflow-y: scroll;
     padding: 0 15px 20px 15px;
     //中间卡片
-    .dialog-popuImag {
-      position: relative;
+    .card-wrapper {
+      perspective: 600px;
 
-      display: flex;
-      justify-content: center;
-      img {
-        width: 48vw;
+      .dialog-popuImag {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        transform-style: preserve-3d;
+        transition: all 1.2s ease;
+        // div {
+        //   // position: relative;
+        //   position: absolute;
+        //   width: 100%;
+        //   height: 100%;
+        //   /* 背面不显示 */
+        //   // backface-visibility: hidden;
+        // }
+        .front {
+        }
+        .back {
+          position: absolute;
+          transform: rotateY(180deg);
+
+          // animation: change 0.8s linear forwards;
+        }
+
+        img {
+          width: 48vw;
+        }
+      }
+      .flipped {
+        animation: change 0.8s linear forwards;
+      }
+    }
+    @keyframes change {
+      from {
+        top: -20vh;
+        left: -20vw;
+        opacity: 0;
+        transform: scale(0.5);
+      }
+      to {
+        top: -0;
+        left: -0;
+        opacity: 2;
+        transform: scale(1);
+        transform: rotateY(180deg);
       }
     }
     //底部按钮

src/router/index.js

@@ -3,7 +3,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Honghe from '@/components/Honghe'
-
+import SaveShare from '@/components/SaveShare'
 // import Login from '@/Login.vue'
 
 Vue.use(Router)
@@ -25,6 +25,13 @@ export default new Router({
       component: Honghe,
 
     },
+    {
+      path: '/SaveShare',
+      name: 'SaveShare',
+      component: SaveShare,
+
+    },
+
 
 
 

src/utils/wx.js

@@ -54,7 +54,7 @@ export function share (opt) {
  * 获取 code
  * @returns 
  */
-function getCode() {
+function getCode () {
   const matched = /[?&]*code=([^&]+)/.exec(location.search)
   if (matched) {
     return decodeURIComponent(matched[1])
@@ -64,14 +64,14 @@ function getCode() {
 /**
  * 跳转授权页面
  */
-export function redirect() {
+export function redirect () {
   if (process.env.NODE_ENV === 'development') return;
 
   const originCode = localStorage.getItem('wxcode');
   const queryCode = getCode();
   localStorage.setItem('wxcode', queryCode)
 
-  if (!queryCode || queryCode !== originCode) {
+  if (!queryCode || queryCode === originCode) {
     const local = encodeURIComponent(location.origin + location.pathname)
     const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
     window.location.href = url
@@ -82,7 +82,7 @@ export function redirect() {
  * 获取 openid
  * @returns 
  */
-export function getOpenId() {
+export function getOpenId () {
   if (process.env.NODE_ENV === 'development') return Promise.resolve('123');
 
   const code = getCode()