Browse Source

feat: 优化JS

zhangyuhan 3 năm trước cách đây
mục cha
commit
da8b0f4d80

+ 2 - 233
src/jfw/modules/app/src/web/templates/active/yearEndReport/index.html

@@ -519,249 +519,18 @@
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"/>
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"/>
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"/>
+<link rel="preload" as="script" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/index.js'/>
 <!--E-必定需要预加载的资源-->
 <!--S-当前页面的资源-->
 <script src="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"></script>
 <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 <script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/index.js'></script>
 
 <!--S-提前需要预加载的资源-->
 <link rel="prefetch" as="html" href="./yearEndReportResult"/>
 <link rel="prefetch" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"/>
 <!--E-提前需要预加载的资源-->
-<script>
-
-    function initSwiper() {
-        var interleaveOffset = 0.5; //视差比值
-
-        function playAnOfIndex(index, type = true, delay = 0) {
-            setTimeout(function () {
-                var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
-                $(tempNode).each(function () {
-                    var anName = $(this).attr('animate-name')
-                    var anDelay = $(this).attr('animate-delay') || '200'
-                    if (type) {
-                        $(this).addClass(anName)
-                        $(this).css('animation-delay', anDelay + 'ms')
-                    } else {
-                        tempNode.removeClass(anName)
-                    }
-                })
-            }, delay)
-        }
-
-        var swiperOptions = {
-            loop: false,
-            speed: 1000,
-            grabCursor: true,
-            watchSlidesProgress: true,
-            mousewheelControl: false,
-            direction: 'vertical',
-            mousewheel: true,
-            //设置宽度为全屏
-            width: window.innerWidth,
-            height: window.innerHeight,
-            allowSlideNext : false,
-            lazy: {
-                loadPrevNext: true,
-            },
-            on: {
-                init: function () {
-                    playAnOfIndex(0, true, 1000)
-                },
-                slideChangeTransitionStart: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index, false)
-                },
-                slideChangeTransitionEnd: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index)
-                },
-                slideChange: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index)
-                },
-                progress: function () {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        var slideProgress = this.slides[i].progress;
-                        var innerOffset = this.width * interleaveOffset;
-                        var innerTranslate = slideProgress * innerOffset;
-                        this.slides[i].querySelector(".slide-inner").style.transform =
-                            "translate3d(0," + innerTranslate + "px, 0)";
-                    }
-                },
-                touchStart: function () {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        this.slides[i].style.transition = "";
-                    }
-                },
-                setTransition: function (speed) {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        this.slides[i].style.transition = speed + "ms";
-                        this.slides[i].querySelector(".slide-inner").style.transition =
-                            speed + "ms";
-                    }
-                }
-            }
-        };
-
-        var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
-        this.$swiper = swiper
-    }
-
-    function initPlayMusic () {
-        var isAutoPlayMusic = false
-        var bgvid = document.getElementById("audio");
-        var b_music = document.getElementById('music-control-box')
-        var fullbox = document.querySelector('body');
-
-        fullbox.addEventListener('touchstart', function(){
-            if (isAutoPlayMusic) {
-                isAutoPlayMusic = false
-                bgvid.play()
-                b_music.classList.add('run-music')
-            }
-        }, false);
-
-        bgvid.addEventListener("playing", function(){
-            b_music.style.display = 'block'
-            b_music.classList.add('run-music')
-        });
-        bgvid.addEventListener("pause", function(){
-            b_music.classList.remove('run-music')
-        });
-        b_music.addEventListener('click', function (e) {
-            if (b_music.classList.contains('run-music')) {
-                bgvid.pause()
-                b_music.classList.remove('run-music')
-            } else {
-                bgvid.play()
-                b_music.classList.add('run-music')
-            }
-        })
-    }
-
-
-    const pageInfo = {
-        // 用户信息
-        user_name: '醉纸鸢',
-        user_head: 'https://www.jianyu360.cn/images/auto.png',
-        share_link: 'https://www.jianyu360.cn/images/auto.png',
-        // 是否新用户
-        is_new: false,
-        // 注册时间 秒
-        registration_time: 1644249599,
-        // 距离今天的天数
-        total_days: 100,
-        // 近一年登录天数
-        login_days: 50,
-        // 深夜登录天数
-        active_days: -1,
-        // 最关注的项目名称
-        focus_project: '最关注的项目名称',
-        // 浏览信息次数
-        view_total: 1000,
-        // 搜索次数
-        search_total: 999,
-        // 企业/项目关注数量
-        follow_total: -1,
-        // 繁忙月份
-        active_month: 7,
-        // 行业发布数据条数
-        industry_total: 99,
-        // 体验新功能列表
-        exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
-        // 结果页type
-        result: 1
-    }
-
-    var vPage = new Vue({
-        el: '.jy-report',
-        delimiters: ['${', '}'],
-        data: function () {
-            return {
-                pageInfo: pageInfo,
-                showToastText: false,
-                readPact: false
-            }
-        },
-        created: function () {
-            this.getPageInfo()
-        },
-        mounted: function () {
-            initPlayMusic()
-            initSwiper.bind(this)()
-        },
-        methods: {
-            goResult: function () {
-              location.href = './yearEndReportResult'
-            },
-            getPageInfo: function () {
-                var _this = this
-                $.ajax({
-                    url: '/publicapply/active/yearEndReport',
-                    type: 'GET',
-                    success: function (res) {
-                        console.log(res)
-                    },
-                    error: function () {
-                        var res = {
-                            "error_code": 0,
-                            "error_msg": "",
-                            "data": {
-                                "user_name": "微信",
-                                "user_head": "/upload/2021/03/26/2021032609182610879.jpg",
-                                "registration_time": 1462779190,
-                                "login_days": 108,
-                                "active_days": 11,
-                                "view_total": 175,
-                                "search_total": 67,
-                                "follow_total": 17,
-                                "active_month": 11,
-                                "industry_total": 680708,
-                                "exp_list": [
-                                    "大会员",
-                                    "超级订阅"
-                                ],
-                                "focus_project": [
-                                    "计算机",
-                                    "信息技术"
-                                ],
-                                "total_days": 2076,
-                                "is_new": false,
-                                "result": 7,
-                                "share_link": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share"
-                            }
-                        }
-                        if (res && res.error_msg === '' && res.data) {
-                            _this.pageInfo = res.data
-                        }
-                    }
-                })
-            },
-            changeReadPact: function () {
-                if (this.$swiper.activeIndex === 0 && this.readPact) {
-                    return
-                }
-                this.$swiper.allowSlideNext = this.readPact
-            },
-            goStart: function () {
-              if (!this.readPact) {
-                  return this.showToast('请先阅读并同意授权协议')
-              }
-              this.$swiper.allowSlideNext = this.readPact
-              this.$swiper.slideNext()
-            },
-            showToast: function (str, delay = 1500) {
-                this.showToastText = str
-                setTimeout(() => {
-                    this.showToastText = false
-                }, delay)
-            }
-        }
-    })
-
-</script>
 </body>
 
 </html>

+ 2 - 2
src/jfw/modules/app/src/web/templates/active/yearEndReport/result.html

@@ -46,9 +46,9 @@
       <div class="info">
         <div class="user">
           <div class="head-img">
-            <img src="https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg" alt="">
+            <img v-show="pageInfo.user_head" @error="pageInfo.user_head = '/images/auto.png'"  :src="pageInfo.user_head" alt="">
           </div>
-          <div class="nick-name">Wind</div>
+          <div class="nick-name">${pageInfo.user_name}</div>
         </div>
         <div class="role">
           <div class="role-placeholder">您的年度角色是</div>

+ 229 - 0
src/web/staticres/common-module/yearEndReport/js/index.js

@@ -0,0 +1,229 @@
+function initSwiper() {
+    var interleaveOffset = 0.5; //视差比值
+
+    function playAnOfIndex(index, type = true, delay = 0) {
+        setTimeout(function () {
+            var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
+            $(tempNode).each(function () {
+                var anName = $(this).attr('animate-name')
+                var anDelay = $(this).attr('animate-delay') || '200'
+                if (type) {
+                    $(this).addClass(anName)
+                    $(this).css('animation-delay', anDelay + 'ms')
+                } else {
+                    tempNode.removeClass(anName)
+                }
+            })
+        }, delay)
+    }
+
+    var swiperOptions = {
+        loop: false,
+        speed: 1000,
+        grabCursor: true,
+        watchSlidesProgress: true,
+        mousewheelControl: false,
+        direction: 'vertical',
+        mousewheel: true,
+        //设置宽度为全屏
+        width: window.innerWidth,
+        height: window.innerHeight,
+        allowSlideNext: false,
+        lazy: {
+            loadPrevNext: true,
+        },
+        on: {
+            init: function () {
+                playAnOfIndex(0, true, 1000)
+            },
+            slideChangeTransitionStart: function () {
+                var index = this.activeIndex
+                playAnOfIndex(index, false)
+            },
+            slideChangeTransitionEnd: function () {
+                var index = this.activeIndex
+                playAnOfIndex(index)
+            },
+            slideChange: function () {
+                var index = this.activeIndex
+                playAnOfIndex(index)
+            },
+            progress: function () {
+                for (var i = 0; i < this.slides.length; i++) {
+                    var slideProgress = this.slides[i].progress;
+                    var innerOffset = this.width * interleaveOffset;
+                    var innerTranslate = slideProgress * innerOffset;
+                    this.slides[i].querySelector(".slide-inner").style.transform =
+                        "translate3d(0," + innerTranslate + "px, 0)";
+                }
+            },
+            touchStart: function () {
+                for (var i = 0; i < this.slides.length; i++) {
+                    this.slides[i].style.transition = "";
+                }
+            },
+            setTransition: function (speed) {
+                for (var i = 0; i < this.slides.length; i++) {
+                    this.slides[i].style.transition = speed + "ms";
+                    this.slides[i].querySelector(".slide-inner").style.transition =
+                        speed + "ms";
+                }
+            }
+        }
+    };
+
+    var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
+    this.$swiper = swiper
+}
+
+function initPlayMusic() {
+    var isAutoPlayMusic = false
+    var bgvid = document.getElementById("audio");
+    var b_music = document.getElementById('music-control-box')
+    var fullbox = document.querySelector('body');
+
+    fullbox.addEventListener('touchstart', function () {
+        if (isAutoPlayMusic) {
+            isAutoPlayMusic = false
+            bgvid.play()
+            b_music.classList.add('run-music')
+        }
+    }, false);
+
+    bgvid.addEventListener("playing", function () {
+        b_music.style.display = 'block'
+        b_music.classList.add('run-music')
+    });
+    bgvid.addEventListener("pause", function () {
+        b_music.classList.remove('run-music')
+    });
+    b_music.addEventListener('click', function (e) {
+        if (b_music.classList.contains('run-music')) {
+            bgvid.pause()
+            b_music.classList.remove('run-music')
+        } else {
+            bgvid.play()
+            b_music.classList.add('run-music')
+        }
+    })
+}
+
+
+const pageInfo = {
+    // 用户信息
+    user_name: '醉纸鸢',
+    user_head: 'https://www.jianyu360.cn/images/auto.png',
+    share_link: 'https://www.jianyu360.cn/images/auto.png',
+    // 是否新用户
+    is_new: false,
+    // 注册时间 秒
+    registration_time: 1644249599,
+    // 距离今天的天数
+    total_days: 100,
+    // 近一年登录天数
+    login_days: 50,
+    // 深夜登录天数
+    active_days: -1,
+    // 最关注的项目名称
+    focus_project: '最关注的项目名称',
+    // 浏览信息次数
+    view_total: 1000,
+    // 搜索次数
+    search_total: 999,
+    // 企业/项目关注数量
+    follow_total: -1,
+    // 繁忙月份
+    active_month: 7,
+    // 行业发布数据条数
+    industry_total: 99,
+    // 体验新功能列表
+    exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
+    // 结果页type
+    result: 1
+}
+
+var vPage = new Vue({
+    el: '.jy-report',
+    delimiters: ['${', '}'],
+    data: function () {
+        return {
+            pageInfo: pageInfo,
+            showToastText: false,
+            readPact: false
+        }
+    },
+    created: function () {
+        this.getPageInfo()
+    },
+    mounted: function () {
+        initPlayMusic()
+        initSwiper.bind(this)()
+    },
+    methods: {
+        goResult: function () {
+            location.href = './yearEndReportResult'
+        },
+        getPageInfo: function () {
+            var _this = this
+            $.ajax({
+                url: '/publicapply/active/yearEndReport',
+                type: 'GET',
+                success: function (res) {
+                    console.log(res)
+                },
+                error: function () {
+                    var res = {
+                        "error_code": 0,
+                        "error_msg": "",
+                        "data": {
+                            "user_name": "微信",
+                            "user_head": "/upload/2021/03/26/2021032609182610879.jpg",
+                            "registration_time": 1462779190,
+                            "login_days": 108,
+                            "active_days": 11,
+                            "view_total": 175,
+                            "search_total": 67,
+                            "follow_total": 17,
+                            "active_month": 11,
+                            "industry_total": 680708,
+                            "exp_list": [
+                                "大会员",
+                                "超级订阅"
+                            ],
+                            "focus_project": [
+                                "计算机",
+                                "信息技术"
+                            ],
+                            "total_days": 2076,
+                            "is_new": false,
+                            "result": 7,
+                            "share_link": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share"
+                        }
+                    }
+                    if (res && res.error_msg === '' && res.data) {
+                        _this.pageInfo = res.data
+                    }
+                }
+            })
+        },
+        changeReadPact: function () {
+            if (this.$swiper.activeIndex === 0 && this.readPact) {
+                return
+            }
+            this.$swiper.allowSlideNext = this.readPact
+        },
+        goStart: function () {
+            if (!this.readPact) {
+                return this.showToast('请先阅读并同意授权协议')
+            }
+            this.$swiper.allowSlideNext = this.readPact
+            this.$swiper.slideNext()
+        },
+        showToast: function (str, delay = 1500) {
+            this.showToastText = str
+            setTimeout(() => {
+                this.showToastText = false
+            }, delay)
+        }
+    }
+})

+ 2 - 237
src/web/templates/active/yearEndReport/index.html

@@ -519,253 +519,18 @@
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"/>
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"/>
 <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"/>
+<link rel="preload" as="script" href='{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/index.js'/>
 <!--E-必定需要预加载的资源-->
 <!--S-当前页面的资源-->
 <script src="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"></script>
 <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 <script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
+<script src='{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/index.js'></script>
 
 <!--S-提前需要预加载的资源-->
 <link rel="prefetch" as="html" href="./yearEndReportResult"/>
 <link rel="prefetch" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"/>
 <!--E-提前需要预加载的资源-->
-<script>
-
-
-
-    function initSwiper() {
-        var interleaveOffset = 0.5; //视差比值
-
-        function playAnOfIndex(index, type = true, delay = 0) {
-            setTimeout(function () {
-                var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
-                $(tempNode).each(function () {
-                    var anName = $(this).attr('animate-name')
-                    var anDelay = $(this).attr('animate-delay') || '200'
-                    if (type) {
-                        $(this).addClass(anName)
-                        $(this).css('animation-delay', anDelay + 'ms')
-                    } else {
-                        tempNode.removeClass(anName)
-                    }
-                })
-            }, delay)
-        }
-
-        var swiperOptions = {
-            loop: false,
-            speed: 1000,
-            grabCursor: true,
-            watchSlidesProgress: true,
-            mousewheelControl: false,
-            direction: 'vertical',
-            mousewheel: true,
-            //设置宽度为全屏
-            width: window.innerWidth,
-            height: window.innerHeight,
-            allowSlideNext : false,
-            lazy: {
-                loadPrevNext: true,
-            },
-            on: {
-                init: function () {
-                    playAnOfIndex(0, true, 1000)
-                },
-                slideChangeTransitionStart: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index, false)
-                },
-                slideChangeTransitionEnd: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index)
-                },
-                slideChange: function () {
-                    var index = this.activeIndex
-                    playAnOfIndex(index)
-                },
-                progress: function () {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        var slideProgress = this.slides[i].progress;
-                        var innerOffset = this.width * interleaveOffset;
-                        var innerTranslate = slideProgress * innerOffset;
-                        this.slides[i].querySelector(".slide-inner").style.transform =
-                            "translate3d(0," + innerTranslate + "px, 0)";
-                    }
-                },
-                touchStart: function () {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        this.slides[i].style.transition = "";
-                    }
-                },
-                setTransition: function (speed) {
-                    for (var i = 0; i < this.slides.length; i++) {
-                        this.slides[i].style.transition = speed + "ms";
-                        this.slides[i].querySelector(".slide-inner").style.transition =
-                            speed + "ms";
-                    }
-                }
-            }
-        };
-
-        var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
-        this.$swiper = swiper
-    }
-
-    function initPlayMusic () {
-        var isAutoPlayMusic = false
-        var bgvid = document.getElementById("audio");
-        var b_music = document.getElementById('music-control-box')
-        var fullbox = document.querySelector('body');
-
-        fullbox.addEventListener('touchstart', function(){
-            if (isAutoPlayMusic) {
-                isAutoPlayMusic = false
-                bgvid.play()
-                b_music.classList.add('run-music')
-            }
-        }, false);
-
-        bgvid.addEventListener("playing", function(){
-            b_music.style.display = 'block'
-            b_music.classList.add('run-music')
-        });
-        bgvid.addEventListener("pause", function(){
-            b_music.classList.remove('run-music')
-        });
-        b_music.addEventListener('click', function (e) {
-            if (b_music.classList.contains('run-music')) {
-                bgvid.pause()
-                b_music.classList.remove('run-music')
-            } else {
-                bgvid.play()
-                b_music.classList.add('run-music')
-            }
-        })
-    }
-
-
-    const pageInfo = {
-        // 用户信息
-        user_name: '醉纸鸢',
-        user_head: 'https://www.jianyu360.cn/images/auto.png',
-        share_link: 'https://www.jianyu360.cn/images/auto.png',
-        // 是否新用户
-        is_new: false,
-        // 注册时间 秒
-        registration_time: 1644249599,
-        // 距离今天的天数
-        total_days: 100,
-        // 近一年登录天数
-        login_days: 50,
-        // 深夜登录天数
-        active_days: -1,
-        // 最关注的项目名称
-        focus_project: '最关注的项目名称',
-        // 浏览信息次数
-        view_total: 1000,
-        // 搜索次数
-        search_total: 999,
-        // 企业/项目关注数量
-        follow_total: -1,
-        // 繁忙月份
-        active_month: 7,
-        // 行业发布数据条数
-        industry_total: 99,
-        // 体验新功能列表
-        exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
-        // 结果页type
-        result: 1
-    }
-
-    var vPage = new Vue({
-        el: '.jy-report',
-        delimiters: ['${', '}'],
-        data: function () {
-            return {
-                pageInfo: pageInfo,
-                showToastText: false,
-                readPact: false
-            }
-        },
-        created: function () {
-            this.readPact = false
-            this.getPageInfo()
-        },
-        mounted: function () {
-            this.readPact = false
-            initPlayMusic()
-            initSwiper.bind(this)()
-        },
-        methods: {
-            goResult: function () {
-              location.href = './yearEndReportResult'
-            },
-            getPageInfo: function () {
-                var _this = this
-                $.ajax({
-                    url: '/publicapply/active/yearEndReport',
-                    type: 'GET',
-                    success: function (res) {
-                        console.log(res)
-                    },
-                    error: function () {
-                        var res = {
-                            "error_code": 0,
-                            "error_msg": "",
-                            "data": {
-                                "user_name": "微信",
-                                "user_head": "/upload/2021/03/26/2021032609182610879.jpg",
-                                "registration_time": 1462779190,
-                                "login_days": 108,
-                                "active_days": 11,
-                                "view_total": 175,
-                                "search_total": 67,
-                                "follow_total": 17,
-                                "active_month": 11,
-                                "industry_total": 680708,
-                                "exp_list": [
-                                    "大会员",
-                                    "超级订阅"
-                                ],
-                                "focus_project": [
-                                    "计算机",
-                                    "信息技术"
-                                ],
-                                "total_days": 2076,
-                                "is_new": false,
-                                "result": 7,
-                                "share_link": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share"
-                            }
-                        }
-                        if (res && res.error_msg === '' && res.data) {
-                            _this.pageInfo = res.data
-                        }
-                    }
-                })
-            },
-            changeReadPact: function () {
-                if (this.$swiper.activeIndex === 0 && this.readPact) {
-                    return
-                }
-                this.$swiper.allowSlideNext = this.readPact
-            },
-            goStart: function () {
-              if (!this.readPact) {
-                  return this.showToast('请先阅读并同意授权协议')
-              }
-              this.$swiper.allowSlideNext = this.readPact
-              this.$swiper.slideNext()
-            },
-            showToast: function (str, delay = 1500) {
-                this.showToastText = str
-                setTimeout(() => {
-                    this.showToastText = false
-                }, delay)
-            }
-        }
-    })
-
-</script>
 </body>
 
 </html>

+ 25 - 12
src/web/templates/active/yearEndReport/result.html

@@ -46,9 +46,9 @@
       <div class="info">
         <div class="user">
           <div class="head-img">
-            <img src="https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg" alt="">
+            <img v-show="pageInfo.user_head" @error="pageInfo.user_head = '/images/auto.png'"  :src="pageInfo.user_head" alt="">
           </div>
-          <div class="nick-name">Wind</div>
+          <div class="nick-name">${pageInfo.user_name}</div>
         </div>
         <div class="role">
           <div class="role-placeholder">您的年度角色是</div>
@@ -147,6 +147,7 @@
       delimiters: ['${', '}'],
       data: function() {
         return {
+          pageInfo: {},
           resultList: [
             {_id: '1', title: '逢标必中的投标达人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-1.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-1.png'},
             {_id: '2', title: '成功触手可及的追梦人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-2.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-2.png'},
@@ -203,6 +204,15 @@
           },
         }
       },
+      created () {
+        var pageInfo = sessionStorage.getItem('yearEndPeportResult')
+        if (pageInfo) {
+          this.pageInfo = JSON.parse(pageInfo)
+          this.selectType(this.pageInfo.result)
+        } else {
+          location.href = './yearEndPeport'
+        }
+      },
       computed: {
         isWeiXinBrowser: function () {
           return utils.isWeiXinBrowser
@@ -214,18 +224,21 @@
         if (utils.isWeiXinBrowser) {
           this.getWxSdkSign()
         }
-        var list = this.resultList
-        var _this = this
-        list.forEach(function(item){
-          if (item._id == utils.getParam('type')) {
-            _this.curRole._id = item._id
-            _this.curRole.title = item.title
-            _this.curRole.label = item.label
-            _this.curRole.bg = item.bg
-          }
-        })
+
       },
       methods: {
+        selectType: function (type) {
+          var list = this.resultList
+          var _this = this
+          list.forEach(function(item){
+            if (item._id == type) {
+              _this.curRole._id = item._id
+              _this.curRole.title = item.title
+              _this.curRole.label = item.label
+              _this.curRole.bg = item.bg
+            }
+          })
+        },
         showLoading: function (msg) {
           const loading = this.$toast.loading({
             duration: 0,