js 仿微信投诉—引入vue.js，拆分组件为单个js
效果
页面目录
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">你应保证你的投诉行为基于善意，并代表你本人真实意思。
腾讯作为中立的平台服务者，收到你投诉后，会尽快按照相关法律法规的规定独立判断并进行处理。
腾讯将会采取合理的措施保护你的个人信息；除法律法规规定的情形外，未经用户许可腾讯不会向第三方公开、
透露你的个人信息。</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">网络异常，请稍后尝试</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: '请选择投诉该网页的原因:',
bottomtxt: '遇到网页流量被劫持怎么办',
link_url: 'javascript:;',
types: [{
"id": 1,
"title": "网页包含欺诈信息（如: 假红包）"
},
{
"id": 2,
"title": "网页包含色情信息"
},
{
"id": 3,
"title": "网页包含暴力恐怖信息"
},
{
"id": 4,
"title": "网页包含政治敏感信息"
},
{
"id": 5,
"title": "网页在收集个人隐私信息（如: 钓鱼链接）"
},
{
"id": 6,
"title": "网页包含诱导分享/关注性质的内容"
},
{
"id": 7,
"title": "网页可能包含谣言信息"
},
{
"id": 8,
"title": "网页包含赌博信息"
},
]
}
}
}) 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')
})
js 仿微信投诉—引入vue.js，拆分组件为单个js的更多相关文章
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat
基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...
- vue聊天室|h5+vue仿微信聊天界面|vue仿微信
一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...
- js仿微信语音播放
html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...
- Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App
基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom. svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+ ...
- 🏃♀️点亮你的Vue技术栈，万字Nuxt.js实践笔记来了~
前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...
- html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...
随机推荐
- 二分+mu函数实质及应用（原理）！——bzoj2440好题
首先想到用二分来判断 不是平方数的倍数,即没有次数>=2的质因子显然用容斥原理,即所有答案-1个质因子的平方的所有倍数+2个质因子的所有平方倍...等价于对于每个数,如果它有奇数个质因子,那么其 ...
- Vue实现一个学生信息录入系统，实现录入和删除
效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- NX二次开发-UFUN工程图导入视图UF_DRAW_import_view
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...
- NX二次开发-UF_MODL_ask_point_containment获取一个点是在体(面,边)的边界内部,外部,还是边界上
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_curve.h> #include < ...
- LeetCode刷题笔记-回溯法-分割回文串
题目描述: 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回 s 所有可能的分割方案. 示例: 输入: "aab"输出:[ ["aa", ...
- Phpthink入门基础大全（CURD部分）
[ad code=1 align=center] $data[1]['name'] = ‘阳光雨' $data[1]['email'] = 'sccscc@vip.qq.com' $User>a ...
- 漏洞：会话固定攻击（session fixation attack）
什么是会话固定攻击? 会话固定攻击(session fixation attack)是利用应用系统在服务器的会话ID固定不变机制,借助他人用相同的会话ID获取认证和授权,然后利用该会话ID劫持他人的会 ...
- JMeter安装和环境变量搭建
下载安装Java JDK环境,设置环境变量 elasticsearch for windows:https://www.cnblogs.com/Neeo/articles/10368280.html ...
- npm -v 报错：cannot find module 'core-util-is'
今天想打开之前的项目运行看看,结果报错:cannot find module 'core-util-is',以为只是缺少模块core-util-is,然后npm install --save core ...
- kcptun搭建
wget --no-check-certificate https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh sha ...