js imitation micro channel complaints - introducing vue.js, a single split component js

effect:

Page directory:

index.html:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="x-dns-prefetch-control" content="on">
        <title>投诉</title>
        <link rel="stylesheet" href="css/weui.css">
        <link rel="stylesheet" href="css/wxappeal.css">
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="js/tools/jquery.js"></script>
        <script src="js/tools/methods.js"></script>
        <!--组件js引入要注意顺序，否则会报错-->
        <script src="js/components/TopNav.js"></script>
        <script src="js/components/BottomNav.js"></script>
        <script src="js/components/AppealNav.js"></script>
        <script src="js/pages/AppealDetail.js"></script>
        <script src="js/pages/AppealSuccess.js"></script>
        <script src="js/pages/ChooseAppeal.js"></script>
        <script src="js/pages/ChooseType.js"></script>
        <script src="js/pages/NetError.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div id="app">
            <keep-alive>
                <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>

            <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
        </div>

        <!-- 选择投诉类型 start-->
        <script type="text/x-template" id="chooseTypeCom">
            <div class='all'>
                <TopNav :toptxt="toptxt"></TopNav>
                <router-link tag='li' v-for="item in types" :to="{name:'ChooseAppeal',query:{id:item.id}}" class="weui-cell weui-cell_access js_item" data-id="button">
                    <div class="weui-cell__bd">
                        <p class="bold">{{item.title}}</p>
                    </div>
                    <div class="weui-cell__ft"></div>
                </router-link>
                <BottomNav :bottomtxt="bottomtxt" :link_url="link_url"></BottomNav>
                <AppealNav></AppealNav>
            </div>
        </script>
        <!-- 选择投诉类型 end-->

        <!- micro-letter groups submitted to Start -> 
            <div class = "All">
        <Script type = "text / X-Template" ID = "chooseAppealCom">
                <TopNav :toptxt="toptxt"></TopNav>
                <li class="weui-cell weui-cell_access js_item" data-id="button" @click="submitAppeal">
                    <div class="weui-cell__bd">
                        <p class="bold">{{title}}</p>
                    </div>
                    <div class="weui-cell__ft"></div>
                </li>
                <BottomNav :bottomtxt="bottomtxt" :link_url="link_url"></BottomNav>
                <AppealNav></AppealNav>
            </div>
        </script>
        <!-- 提交给微信团队 end-->

        <!-- 投诉须知 start-->
        <script type="text/x-template" id="appealDetailCom">
            <div class="backWhite">you should ensure that your complaint in good faith behavior, and represent the true meaning of your own.
                    <span class = "Small">
                <p class="appealTitle center">投诉须知</p>
                <div class = "Content"> 
                    Tencent platform as a neutral service provider, after receiving your complaint will be processed as quickly as possible and independent judgment in accordance with the provisions of relevant laws and regulations. 
                    Tencent will take reasonable steps to protect your personal information; Except as provided in laws and regulations, without the user's permission Tencent will not be disclosed to third parties, 
                    disclose your personal information. </ span> 
                </ div> 
            </ div> 
        </ Script> 
        <-! Complaint Information End -> 

        <-! submitted successfully Start -> 
        <Script of the type = "text / the X-Template-" the above mentioned id = " appealSuccessCom "> 
            <div class =" weui-MSG "> 
                <div class =" weui-msg__icon-Area "> 
                    <I class ="
                <div class = "weui-msg__text-Area">
                    <p class = "weui-msg__desc left"> micro-letter team will verify as soon as possible, and by "micro-letter team" to inform you of the results of the audit. thank you for your support. </ P> 
                </ div> 
                <div class = "weui-msg__opr-Area"> 
                    <P class = "weui-BTN-Area"> 
                        <A the href = "JavaScript :;" class = "weui-BTN-btn_primary weui "@click =" $ close "> close </a> 
                    </ the p-> 
                </ div> 
            </ div> 
        </ Script> 
        <-! submitted successfully End -> 

        <-! submission failed start -> 
        <Script type = "text / X-Template" ID = "netErrorCom"> 
            <div class = "
                    <i class="weui-icon-warn weui-icon_msg"></i>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">错误</h2>
                    <p class="weui-msg__desc">网络异常，请稍后尝试</p>
                </div>
                <div class="weui-msg__opr-area">
                    <p class="weui-btn-area">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" @click="$close">关闭</a>
                    </p>
                </div>
            </div>
        </script>
</ HTML>
    </ body>
        <! - failure to submit End ->

weui.css: v2.0.1 uses WeUI ( https://github.com/weui/weui )

wxappeal.css:

body {
    width: 100%;
    height: 100%;
}

.all {
    width: 100%;
    height: 100%;
    /* background-color: #ededed; */
}

div {
    margin: 0;
    padding: 0;
    font-size: 17px;
}

.content {
    width: 90%;
    margin: auto;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.gray {
    color: rgba(0, 0, 0, 0.5);
}

.deepBlue {
    color: #576B95;
}

.small {
    font-size: 14px;
}

.bold {
    /* font-weight: 600; */
}

.top-nav {
    padding: 12px 16px 5px 16px;
}

.bottom-nav {
    padding: 5px 16px 0 16px;
}

.weui-cell {
    background-color: #ffffff;
}

.appeal-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 7%;
}

.backWhite {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}


.appealTitle {
    margin: 20px 0;
}

methods.js:

Close = $ Vue.prototype. Function () {   // Close the browser micro-channel, micro-channel is valid only in the end, the other being given 
    document.addEventListener ( 'WeixinJSBridgeReady', function () { 
        WeixinJSBridge.call ( 'closeWindow' ); 
    }, to false ); 
    WeixinJSBridge.call ( 'closeWindow' ); 
}

TopNav.js:

// 顶部组件  start
var TopNav = Vue.extend({
    template: "<p class='top-nav gray small'>{{toptxt}}</p>",
    data() {
        return {
            toptxt: ''
        }

    },
    props: ['toptxt'],
    watch: {
        toptxt: function(newVal, oldVal) {
            this.toptxt = newVal;
        }
    }
})

Vue.component(TopNav)
// 顶部组件  end

BottomNav.js:

// 底部组件  start
var BottomNav = Vue.extend({
    template: "<p class='small bottom-nav'><a class='deepBlue'" +
        ":href='link_url'>{{bottomtxt}}</a></p>",
    data() {
        return {
            bottomtxt: '',
            link_url: ''
        }

    },
    props: ['bottomtxt', 'link_url'],
    watch: {
        bottomtxt: function(newVal, oldVal) {
            this.bottomtxt = newVal;
        },
        link_url: function(newVal, oldVal) {
             the this .link_url = newVal; 
        } 
    } 
}) 

Vue.component (BottomNav) 
// bottom end assembly

AppealNav.js:

// bottom complaints assembly Start 
var AppealNav = Vue.extend ({ 
    Template: "<P class = 'Appeal NAV-Small'> <Router-Link class = 'deepblue'" + 
        "to = '/ appealDetail'> complaints Information < / Router-Link> </ P> " , 
}) 

Vue.component (AppealNav) 
// bottom end assembly complaint

AppealDetail.js:

// complaints assembly instructions Start 
var AppealDetail = Vue.extend ({ 
    Template: "#appealDetailCom" , 
}) 

Vue.component (AppealDetail) 
// complaints end component Conditions

AppealSuccess.js:

//   complaints successful assembly Start 
var AppealSuccess = Vue.extend ({ 
    Template: "#appealSuccessCom" , 
}) 

Vue.component (AppealSuccess) 
//   complaints successful end assembly

ChooseAppeal.js:

// file a complaint Start 
var ChooseAppeal = Vue.extend ({ 

    Template: "#chooseAppealCom" , 
    Components: { 
        topnav, 
        BottomNav, 
        AppealNav 
    }, 
    Data () { 
        return { 
            toptxt: 'you can:' , 
            bottomtxt: '' , 
            LINK_URL : ':; JavaScript' , 
            title: 'review submitted to micro-letter group' , 
            I: '' 
        } 
    }, 
    Mounted () { 
        the let _this = the this ;
        _this.setUrl();
    },
    methods: {
        submitAppeal() {
            let _this = this;
            _this.$router.push({
                name: "AppealSuccess"
            })
        },
        setUrl() {
            let _this = this,
                i = _this.$route.query.id;
            _this.i = i;
            if (i == 6) {
                _this.bottomtxt = '了解什么是诱导分享类内容';
                _this.link_url = 'www.baidu.com'; 
            } The else  IF (I ==. 7 ) { 
                _this.bottomtxt = 'understanding of the micro-channel control rumors' ; 
                _this.link_url = '' ; 
            } 
        } 
    } 
}) 

Vue.component (ChooseAppeal) 
// submit a complaint end

ChooseType.js:

// choose the type of complaint Start 
var ChooseType = Vue.extend ({ 
    Template: "#chooseTypeCom" , 
    Components: { 
        topnav, 
        BottomNav, 
        AppealNav 
    }, 
    Data () { 
        return { 
            toptxt: 'Please select the page complaint reasons:' , 
            bottomtxt: 'hijacked web traffic encountered how to do' , 
            LINK_URL: 'JavaScript :;' , 
            types: [{
                     "the above mentioned id": 1 ,
                     "title": "web page that contains fraudulent information (such as: fake red)" 
                }, 
                {
                     "id": 2,
                     "Title": "pages that contain pornography" 
                }, 
                {
                     "the above mentioned id": 3 ,
                     "title": "pages with violent terrorist information" 
                }, 
                {
                     "the above mentioned id": 4 ,
                     "title": "pages that contain politically sensitive information " 
                }, 
                {
                     " the above mentioned id ": 5 ,
                     " title ":" page in the collection of personally identifiable information (such as: fishing link) " 
                }, 
                {
                     " the above mentioned id ": 6 ,
                     " title ":" page contains induce Share / concerned with the nature of content " 
                },
                {
                     "The above mentioned id": 7 ,
                     "title": "Web pages may contain information rumor"
                }, 
                {
                     "ID":. 8 ,
                     "title": "Web page contains information gambling" 
                }, 
            ] 
        } 
    } 
}) 

Vue.component (ChooseType) 
// choose the type of complaints end

NetError.js:

// complaint failed component Start 
var NetError = Vue.extend ({ 
    Template: "#netErrorCom" , 
}) 

Vue.component (NetError) 
//   complaint failed end assembly

main.js:

'use strict';
$(document).ready(function() {
    Vue.use(VueRouter);

    var router = new VueRouter({
        routes: [{
                path: '/',
                name: 'ChooseType',
                meta: {
                    index: 0,
                    keepAlive: true,
                    title: '投诉'
                },
                component: ChooseType
            },
            {
                path: '/chooseAppeal',
                name: 'ChooseAppeal',
                meta: {
                    index: 1,
                    keepAlive: false,
                    title: '投诉'
                },
                component: ChooseAppeal
            },
            {
                path: '/appealDetail',
                name: 'AppealDetail',
                meta: {
                    index: 3,
                    keepAlive: false,
                    title: '投诉须知'
                },
                component: AppealDetail
            },
            {
                path: '/appealSuccess',
                name: 'AppealSuccess',
                meta: {
                    index: 4,
                    keepAlive: false,
                    title: '投诉'
                },
                component: AppealSuccess
            },
            {
                path: '/netError',
                name: 'NetError',
                meta: {
                    index: 5,
                    keepAlive: false,
                    title: '投诉'
                },
                component: NetError
            },

        ]
    })

    router.beforeEach((to, from, next) => {
        var toDepth = to.meta.index;
        var fromDepth = from.meta.index;

        if (to.meta.title) {
            document.title = to.meta.title;
            if (toDepth == 'undefined' || toDepth == undefined) {
                next({
                    path: "/netError"
                })
            } else if (toDepth < fromDepth) { //类似缓存效果
                from.meta.keepAlive = false;
                to.meta.keepAlive = true;
                next()
            } else {
                next()
            }
        } else {
            next()
        }
    })

    var app = new Vue({
        el: '#app',
        router
    }).$mount('#app')
})

js imitation micro channel complaints - introducing vue.js, a single split component js

Guess you like