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 ...
随机推荐
- 【硬盘】RAID卡
独立磁盘冗余阵列,或简称磁盘阵列(Redundant Array of Independent Disks) RAID是一种把多块独立的物理硬盘按不同方式组合起来形成一个逻辑硬盘,一般分为硬RAID卡 ...
- thinkphp入口文件
ThinkPHP采用单一入口模式进行项目部署和访问,无论完成什么功能,一个应用都有一个统一(但不一定是唯一)的入口. 应该说,所有应用都是从入口文件开始的,并且不同应用的入口文件是类似的. 入口文件定 ...
- lsof 详解
lsof常用参数 lsof 如果不加任何参数,就会打开所有被打开的文件,建议加上一下参数来具体定位lsof -i 列出所有网络连接lsof -i tcp 列出所有tcp连接信息lsof -i udp ...
- Python查看对象属性的方法
帮助https://docs.python.org/2/library/functions.html dir() 函数 D:\pythontest>python Python (v3. , :: ...
- NX二次开发-创建圆弧(圆心-半径)UF_CURVE_create_arc
NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_ui.h> #include <u ...
- 从yjz那里偷来的fread读入挂
struct fastio{ char s[100005]; int it,len; fastio(){it=len=0;} inline char get(){ if(it<len)retur ...
- Invalid Rom
问题描述 原因说明 这多半是因为单片机超频被锁,就是HSE_VALUE设置的与实际值不一致,容易造成这个问题. 解放方法 1. 先正确配置 HSE_VLAUE, 看HSE_VALUE 修改问题. 2. ...
- 剑指offer——20删除链表中重复的结点
题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
- nodejs中命令行和node交互模式的区分
来自:廖雪峰教程 么么哒~ 命令行模式和Node交互模式 请注意区分命令行模式和Node交互模式. 看到类似C:\>是在Windows提供的命令行模式: 在命令行模式下,可以执行node进入No ...
- scala容器对象（转载）
1Array 数组 Scala的数组是这个样子: val arr = new Array[String](3) 程序员们基本都看得懂,new 一个Array对象,它的类型是String,长度为3.对元 ...