opt

src/App.vue

@@ -27,14 +27,14 @@ export default {
     })
   },
   methods: {
-    ...mapIndexActions(['getAppId', 'getUser', 'getShare', 'putShare']),
+    ...mapIndexActions(['getAppId', 'getUser', 'getShare']),
     async init () {
       try {
         await this.getAppId()
         await this.getCode()
         await this.getUser({ code: this.code })
         this.showPage = true
-        this.putShare()
+        this.getShare()
       } catch (err) {
         console.log(err)
       }

src/pages/home/index.vue

@@ -9,7 +9,7 @@
         alt
       >
     </div>
-    <div class="subPage" v-if="showPage">
+    <div class="subPage" v-if="showPage" style="overflow: visible;">
       <img
         src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-12.png"
         style="z-index: 3;"
@@ -107,11 +107,11 @@
           <img
             src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-13.png"
             class="icon13"
-            style="width:66vw;display:inline-block;margin-top: .4rem;"
+            style="width:66vw;display:inline-block;margin-top: 0;"
             :class="{'active': currentPage === 2}"
             alt
           >
-          <div class="content">
+          <div class="content" style="overflow: visible">
             <span
               v-for="(item, index) in selectFlag"
               :key="index"
@@ -122,7 +122,7 @@
           </div>
         </div>
       </div>
-      <div class="page3" :class="{'show': currentPage === 3 && imgSrc === null}">
+      <div class="page3" :class="{'show': currentPage === 3 && imgSrc === null}" :style="{overflow: currentPage === 3 && imgSrc === null ? 'visible' : 'hidden'}">
         <img
           src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-8.png"
           class="icon8"
@@ -137,15 +137,37 @@
         >
         <div class="userIcon" style="z-index: 20;">
           <a>
-            <img :src="userIcon" class="centerLabel cover" alt>
+            <img
+              v-if="userInfo !== null"
+              :src="userInfo.Headimgurl.replace(/http:\/\/.+\.qlogo\.cn\//i, 'http://wx.jinchengjiaye.com/wechat-avatar/') || ''"
+              class="cover"
+              alt
+            >
           </a>
         </div>
-        <div class="centerLabel" style="z-index: 20">
-          <img
-            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-15.png"
-            width="100%"
-            alt
-          >
+        <div class="centerLabel" style="z-index: 20;">
+          <span>新年好呀！</span>
+          <span>Flag只要敢想，都有可能实现！</span>
+          <span></span>
+          <span v-if="showEndTextIndex === 0">别人的青春由N颗痘痘代言，</span>
+          <span v-if="showEndTextIndex === 0">你的青春凝聚在一脸胶原蛋白。</span>
+          <span v-if="showEndTextIndex === 0">感谢2018的我们努力将自己打磨，</span>
+          <span v-if="showEndTextIndex === 0">变仙女！变男神！</span>
+          <span v-if="showEndTextIndex === 0">2019，我们都将是锦鲤本鲤！</span>
+          <span v-if="showEndTextIndex === 1">生活无非是认清它的真面目，</span>
+          <span v-if="showEndTextIndex === 1">然后爱它，</span>
+          <span v-if="showEndTextIndex === 1">2019，愿你不再犹豫，</span>
+          <span v-if="showEndTextIndex === 1">不再惧怕，不再疲惫，不再焦虑。</span>
+          <span v-if="showEndTextIndex === 1">初心不变，动力不减，</span>
+          <span v-if="showEndTextIndex === 1">撸起袖子创造幸福！！</span>
+          <span v-if="showEndTextIndex === 2">信杨超越，信王思聪，信锦鲤... ...</span>
+          <span v-if="showEndTextIndex === 2">2018我们信得太多，</span>
+          <span v-if="showEndTextIndex === 2">2019还是要信自己！</span>
+          <span v-if="showEndTextIndex === 2">信不弛于空想，</span>
+          <span v-if="showEndTextIndex === 2">信不骛于虚声，</span>
+          <span v-if="showEndTextIndex === 2">信一步一个脚印</span>
+          <span v-if="showEndTextIndex === 2">信锦鲤不是转发来的，是靠自己赢来的！</span>
+          <!-- <img src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-15.png" width="100%" alt>
           <span></span>
           <img
             src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-16.png"
@@ -164,12 +186,16 @@
             v-if="showEndTextIndex === 2"
             width="100%"
             alt
-          >
+          > -->
         </div>
         <div class="bottomText">
           <div class="qrCode">
             <a>
-              <img src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-19.png" class="centerLabel cover" alt>
+              <img
+                src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-19.png"
+                class="cover"
+                alt
+              >
             </a>
           </div>
           <span>长按二维码</span>
@@ -184,15 +210,17 @@
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
 import html2canvas from 'html2canvas'
 import musicPlay from '../../util/music'
+const { mapState: mapUserState } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
       showPage: false,
       imgNum: 0,
-      imgTotal: 19,
+      imgTotal: 20,
       currentPage: 0,
       userIcon: '',
       qrCode: '',
@@ -231,6 +259,9 @@ export default {
     }
   },
   computed: {
+    ...mapUserState({
+      userInfo: item => item.userInfo
+    })
   },
   components: {
   },
@@ -239,7 +270,7 @@ export default {
       while (true) {
         const inx = Math.floor(Math.random() * this.flagList.length)
         const res = this.flagList[inx]
-        if (this.selectFlag.indexOf(res) === -1) {
+        if (!this.selectFlag.filter(x => x.value === res)[0]) {
           this.selectFlag.push({
             select: false,
             value: res
@@ -251,18 +282,20 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      musicPlay('http://wx.jinchengjiaye.com/h5-2019/static/images/Thomas%20Greenberg.mp3')
+      musicPlay('https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/Thomas%20Greenberg.mp3')
     })
   },
   methods: {
     nextStep () { // 下一步
       this.currentPage = this.userSelectFlag.length ? 3 : 2
-      window.setTimeout(() => {
+      // window.setTimeout(() => {
+      this.$nextTick(() => {
         this.convert2canvas(document.getElementById('canvasPage')).then((res) => {
           this.imgSrc = res
           this.currentPage = 4
         })
-      }, 300)
+      })
+      // }, 300)
     },
     selectFlagItem (item, index) {
       document.getElementsByClassName('flagItem')[index].style = 'transition: all .3s ease;-webkit-transition: all .3s ease;'
@@ -287,7 +320,7 @@ export default {
         var width = shareContent.offsetWidth // 获取dom 宽度
         var height = shareContent.offsetHeight // 获取dom 高度
         var canvas = document.createElement('canvas') // 创建一个canvas节点
-        var scale = 1 // 定义任意放大倍数 支持小数
+        var scale = window.devicePixelRatio // 定义任意放大倍数 支持小数
         canvas.width = width * scale // 定义canvas 宽度 * 缩放
         canvas.height = height * scale // 定义canvas高度 *缩放
         canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale

src/pages/home/page.scss

@@ -76,7 +76,7 @@
           position: absolute;
           top: -0.35rem;
           left: -0.2rem;
-          background-image: url("../../assets/c.png");
+          background-image: url("http://wx.jinchengjiaye.com/h5-2019/static/images/icon-20.png");
           background-size: 100% 100%;
           -webkit-animation: cir_p 5s linear 0s infinite;
           animation: cir_p 5s linear 0s infinite;
@@ -128,19 +128,12 @@
         >.centerLabel{
           width: 100%;
           z-index: 11;
-          h1{
-            width: 100%;
-            text-align: center;
-            color: #fff;
-            font-size: .24rem;
-            font-weight: normal;
-          }
           .content{
             width: 82vw;
             height: 65vh;
             position: relative;
             overflow: hidden;
-            margin: 0 auto;
+            margin: 0 auto 0;
             z-index: 11;
             .flagItem{
               display: inline-block;
@@ -151,20 +144,22 @@
               &:nth-child(2n){
                 transform: translateX(-1rem);
                 -webkit-transform: translateX(-1rem);
-                transition: all 1.4s ease 1.5s;
-                -webkit-transition: all 1.4s ease 1.5s;
+                transition: all 2s ease 1.5s;
+                -webkit-transition: all 2s ease 1.5s;
               }
               &:nth-child(2n-1){
                 transform: translateX(1rem);
                 -webkit-transform: translateX(1rem);
-                transition: all .8s ease 1.6s;
-                -webkit-transition: all .8s ease 1.6s;
+                transition: all 2s ease 1.6s;
+                -webkit-transition: all 2s ease 1.6s;
               }
               opacity: 0;
               &.active{
                 opacity: 1;
                 transform: translateX(0);
                 -webkit-transform: translateX(0);
+                transform: scale(1, 1);
+                -webkit-transform: scale(1, 1);
               }
               &::after{
                 content: '';
@@ -184,14 +179,16 @@
               background: #5bcff1;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #5bcff1 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 right: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -202,18 +199,20 @@
               top: .3rem;
               font-size: .22rem;
               color: #fff;
-              line-height: .52rem;
+              line-height: .32rem;
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
@@ -228,14 +227,16 @@
               background: #de7ba2;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #de7ba2 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -246,18 +247,20 @@
               top: 1rem;
               font-size: .18rem;
               color: #fff;
-              line-height: .32rem;
+              line-height: .3rem;
               background: #fdc17a;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #fdc17a transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 right: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
@@ -272,14 +275,16 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -294,14 +299,16 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
@@ -312,20 +319,22 @@
               top: 1.9rem;
               font-size: .22rem;
               color: #fff;
-              line-height: .54rem;
+              line-height: .34rem;
               background: #a57dd1;
               border-radius: .1rem;
               overflow: visible;
-              transform: translateX(-50%);
-              -webkit-transform: translateX(-50%);
+              transform: scale(1, 1) translateX(-50%);
+              -webkit-transform: scale(1, 1) translateX(-50%);
               &.selected{
                 opacity: 0;
+                transform: scale(0, 0) translateX(-50%);
+                -webkit-transform: scale(0, 0) translateX(-50%);
               }
               &::after{
                 content: '';
                 border-color: #a57dd1 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -340,14 +349,16 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -362,14 +373,16 @@
               background: #fdc17a;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #fdc17a transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
@@ -384,14 +397,16 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
-              &.selected{
-                opacity: 0;
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0);
+              //   -webkit-transform: scale(0, 0);
+              // }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
-                border-width: .15rem;
-                bottom: -.24rem;
+                border-width: .1rem;
+                bottom: -.16rem;
                 left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
@@ -400,9 +415,7 @@
           }
         }
       }
-      &.page3,
-      &.page4,
-      &.page5{
+      &.page3{
         >div.centerLabel{
           width: 66vw;
           margin-top: -.5rem;
@@ -414,6 +427,7 @@
             line-height: .22rem;
             font-size: .14rem;
             min-height: .22rem;
+            white-space: nowrap;
             &:nth-child(1),
             &:nth-child(2),
             &:nth-child(3){
@@ -429,11 +443,9 @@
           top: 12.8vh;
           a{
             width: 100%;
+            height: 12.8vw;
             display: block;
-            padding-bottom: 100%;
-            height: 0;
             position: relative;
-            overflow: hidden;
             background: rgba(255, 255, 255, .6);
           }
         }
@@ -447,10 +459,8 @@
           a{
             width: 100%;
             display: block;
-            padding-bottom: 100%;
-            height: 0;
+            height: .7rem;
             position: relative;
-            overflow: hidden;
             background: rgba(255, 255, 255, .6);
             margin-bottom: .05rem;
           }

src/pages/home/shareNum.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mainPage">
+    <div class="centerLabel" style="width:100%;overflow:hidden;">
+      <span style="display:block;text-align:center;font-size: .20rem;color:#fff;">累计参与人数{{shareNum.message.custnum || 0}}人</span>
+      <span style="display:block;text-align:center;font-size: .20rem;color:#fff;margin-top:.1rem;">已分享{{shareNum.message.total || 0}}次</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState } = createNamespacedHelpers('user')
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapUserState({
+      shareNum: item => item.shareNum
+    })
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 import index from '../pages/index'
 
 import home from '../pages/home/index'
+import shareNum from '../pages/home/shareNum'
 
 Vue.use(Router)
 
@@ -18,6 +19,11 @@ let router = new Router({
       name: 'home',
       component: home,
       children: []
+    }, {
+      path: '/shareNum',
+      name: 'shareNum',
+      component: shareNum,
+      children: []
     }]
   }]
 })

src/store/user/index.js

@@ -35,7 +35,7 @@ export default {
     },
     getUser (context, payload) {
       return new Promise((resolve, reject) => {
-        wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]), code: payload.code }, {
+        wxsdk({ link: encodeURIComponent(window.location.href.split('#')[0]), code: payload.code }, {
           title: '2019，这些我都想要！ ',
           desc: '立下Flag，打开你的新年心愿清单',
           link: `${window.location.origin}${window.location.pathname}#/home`,

src/util/api.js

@@ -12,11 +12,11 @@ const $api = {
   },
   getShare: { // 获取分享总数
     method: 'get',
-    url: `${baseurl}/appid`
+    url: `${baseurl}/share`
   },
   putShare: { // 分享成功
     method: 'put',
-    url: `${baseurl}/appid`
+    url: `${baseurl}/share`
   }
 }
 

src/util/share.js

@@ -1,6 +1,7 @@
 import Ajax from './ajax'
 import api from './api'
 import wx from 'weixin-jsapi'
+import store from '../store'
 
 function wxsdk (params, config) {
   // const wx = require('weixin-js-sdk')
@@ -9,7 +10,8 @@ function wxsdk (params, config) {
     title: config.title, // 分享标题
     desc: config.desc, // 分享标题
     link: config.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-    imgUrl: config.thu_image // 分享图标
+    imgUrl: config.thu_image, // 分享图标
+    success: () => {}
   }
   // 初始化
   return new Promise(function (resolve, reject) {
@@ -38,9 +40,12 @@ function wxsdk (params, config) {
         ]
       })
       wx.ready(function () {
+        shareData.success = () => {
+          store.dispatch('user/putShare')
+        }
         wx.onMenuShareTimeline(shareData)
         wx.onMenuShareAppMessage(shareData)
-        resolve(resultmessage.user)
+        resolve(result.message.user)
       })
 
       wx.error(function (err) {