js 仿微信投訴—引入vue.js拴念，拆分組件為單個js

效果：


仿微信投訴.gif

頁面目錄：


image.png

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-->

        <!-- 提交給微信團隊 start-->
        <script type="text/x-template" id="chooseAppealCom">
            <div class="all">
                <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">
                <p class="appealTitle center">投訴須知</p>
                <div class="content">
                    <span class="small">你應保證你的投訴行為基于善意褐缠，并代表你本人真實意思政鼠。
                    騰訊作為中立的平臺服務者，收到你投訴后队魏，會盡快按照相關法律法規(guī)的規(guī)定獨立判斷并進行處理公般。
                    騰訊將會采取合理的措施保護你的個人信息；除法律法規(guī)規(guī)定的情形外，未經(jīng)用戶許可騰訊不會向第三方公開官帘、
                    透露你的個人信息瞬雹。</span>
                </div>
            </div>
        </script>
        <!-- 投訴須知 end-->

        <!-- 提交成功 start-->
        <script type="text/x-template" id="appealSuccessCom">
            <div class="weui-msg">
                <div class="weui-msg__icon-area">
                    <i class="weui-icon-success weui-icon_msg"></i>
                </div>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">投訴已提交</h2>
                    <p class="weui-msg__desc left">微信團隊將會盡快核實，并通過"微信團隊"通知你審核結果遏佣。感謝你的支持挖炬。</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>
        <!-- 提交成功 end-->

        <!-- 提交失敗 start-->
        <script type="text/x-template" id="netErrorCom">
            <div class="weui-msg">
                <div class="weui-msg__icon-area">
                    <i class="weui-icon-warn weui-icon_msg"></i>
                </div>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">錯誤</h2>
                    <p class="weui-msg__desc">網(wǎng)絡異常，請稍后嘗試</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>
        <!-- 提交失敗 end-->
    </body>
</html>

weui.css: 采用的是WeUI v2.0.1 (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:

Vue.prototype.$close = function() {  //關閉微信瀏覽器状婶，只在微信端有效意敛，其他會報錯
    document.addEventListener('WeixinJSBridgeReady', function() {
        WeixinJSBridge.call('closeWindow');
    }, 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) {
            this.link_url = newVal;
        }
    }
})

Vue.component(BottomNav)
// 底部組件  end

AppealNav.js:

// 底部投訴組件  start
var AppealNav = Vue.extend({
    template: "<p class='appeal-nav small'><router-link class='deepBlue'" +
        "to='/appealDetail'>投訴須知</router-link></p>",
})

Vue.component(AppealNav)
// 底部投訴組件  end

AppealDetail.js:

// 投訴須知組件  start
var AppealDetail = Vue.extend({
    template: "#appealDetailCom",
})

Vue.component(AppealDetail)
// 投訴須知組件  end

AppealSuccess.js:

//  投訴成功組件  start
var AppealSuccess = Vue.extend({
    template: "#appealSuccessCom",
})

Vue.component(AppealSuccess)
//  投訴成功組件  end

ChooseAppeal.js:

//提交投訴  start
var ChooseAppeal = Vue.extend({

    template: "#chooseAppealCom",
    components: {
        TopNav,
        BottomNav,
        AppealNav
    },
    data() {
        return {
            toptxt: '你可以:',
            bottomtxt: '',
            link_url: 'javascript:;',
            title: '提交給微信團隊審核',
            i: ''
        }
    },
    mounted() {
        let _this = 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';
            } else if (i == 7) {
                _this.bottomtxt = '了解微信對謠言的治理';
                _this.link_url = '';
            }
        }
    }
})

Vue.component(ChooseAppeal)
//提交投訴  end

ChooseType.js:

// 選擇投訴類型  start
var ChooseType = Vue.extend({
    template: "#chooseTypeCom",
    components: {
        TopNav,
        BottomNav,
        AppealNav
    },
    data() {
        return {
            toptxt: '請選擇投訴該網(wǎng)頁的原因:',
            bottomtxt: '遇到網(wǎng)頁流量被劫持怎么辦',
            link_url: 'javascript:;',
            types: [{
                    "id": 1,
                    "title": "網(wǎng)頁包含欺詐信息（如: 假紅包）"
                },
                {
                    "id": 2,
                    "title": "網(wǎng)頁包含色情信息"
                },
                {
                    "id": 3,
                    "title": "網(wǎng)頁包含暴力恐怖信息"
                },
                {
                    "id": 4,
                    "title": "網(wǎng)頁包含政治敏感信息"
                },
                {
                    "id": 5,
                    "title": "網(wǎng)頁在收集個人隱私信息（如: 釣魚鏈接）"
                },
                {
                    "id": 6,
                    "title": "網(wǎng)頁包含誘導分享/關注性質的內容"
                },
                {
                    "id": 7,
                    "title": "網(wǎng)頁可能包含謠言信息"
                },
                {
                    "id": 8,
                    "title": "網(wǎng)頁包含賭博信息"
                },
            ]
        }
    }
})

Vue.component(ChooseType)
//選擇投訴類型  end

NetError.js:

// 投訴失敗組件  start
var NetError = Vue.extend({
    template: "#netErrorCom",
})

Vue.component(NetError)
//  投訴失敗組件  end

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')
})
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市膛虫，隨后出現(xiàn)的幾起案子草姻，更是在濱河造成了極大的恐慌，老刑警劉巖稍刀，帶你破解...
    沈念sama閱讀 212,383評論 6贊 493
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件撩独，死亡現(xiàn)場離奇詭異，居然都是意外死亡账月，警方通過查閱死者的電腦和手機综膀，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事泡徙」强樱” “怎么了袖外？”我有些...
    開封第一講書人閱讀 157,852評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長萄喳，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,621評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蹋半，我火速辦了婚禮他巨，結果婚禮上，老公的妹妹穿的比我還像新娘湃窍。我一直安慰自己闻蛀，他們只是感情好，可當我...
    茶點故事閱讀 65,741評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布您市。 她就那樣靜靜地躺著，像睡著了一般役衡。 火紅的嫁衣襯著肌膚如雪茵休。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,929評論 1贊 290
  • 城市分裂傳說
    那天，我揣著相機與錄音榕莺，去河邊找鬼俐芯。 笑死，一個胖子當著我的面吹牛钉鸯，可吹牛的內容都是我干的吧史。 我是一名探鬼主播，決...
    沈念sama閱讀 39,076評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼唠雕，長吁一口氣：“原來是場噩夢啊……” “哼贸营！你這毒婦竟也來了？” 一聲冷哼從身側響起岩睁，我...
    開封第一講書人閱讀 37,803評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤钞脂，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后捕儒，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冰啃，經(jīng)...
    沈念sama閱讀 44,265評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年刘莹，在試婚紗的時候發(fā)現(xiàn)自己被綠了阎毅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,716評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡点弯，死狀恐怖扇调，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情蒲拉，我是刑警寧澤肃拜，帶...
    沈念sama閱讀 34,395評論 4贊 333
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站雌团，受9級特大地震影響燃领，放射性物質發(fā)生泄漏。R本人自食惡果不足惜锦援，卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3贊 316
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一猛蔽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧灵寺，春花似錦曼库、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0贊 21
  • 一樁弒父案毁枯，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至叮称，卻和暖如春种玛，著一層夾襖步出監(jiān)牢的瞬間藐鹤，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工赂韵， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留娱节，地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2贊 361
  • 代替公主和親
    正文 我出身青樓祭示，卻偏偏與公主長得像肄满，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子质涛，可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2贊 350

推薦閱讀更多精彩內容

  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,146評論 0贊 3
  • 33稠歉、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方（存儲到物理硬盤中）1、不能跨瀏覽器傳輸：在...
    萌妹撒閱讀 2,079評論 0贊 2
  • 開始 這個項目是一個mpvue 的demo, 沒有具體的業(yè)務實現(xiàn)方法蹂窖，只有簡單的頁面切換轧抗，還有常用的一些方法封裝，...
    aimee66閱讀 6,995評論 0贊 5
  • 昨天是星期一吧瞬测。中午連著下午和海哥一起分別到了6個組上走訪兩人的14戶結對幫扶貧困戶横媚。晚上，僅一人在幫扶村女宿舍里...
    枝然閱讀 417評論 4贊 20
  • 飽蘸思戀的淚水 在寂靜的夜 滴落成 一股清泉 包裹皎潔的月光流向遠方 盛滿愛意的陽光 攜著呢喃細語 在春風浩蕩的 ...
    和風戲雨閱讀 73評論 0贊 3