vue移动端项目经验(三)
登录成功后跳转回上一页而非主页
评论页：
sendComment(){
axios.get(`${common.commentapi}/comment?aid=${this.aid}`).then(res=>{
if(res.data.code==200){
this.$toast({
message:'收藏成功',
duration:2000,
})
}else if(res.data.code==401){
Dialog.confirm({
message: '登录后才能收藏哦',
confirmButtonText: "去登录",
cancelButtonText: "下次吧"
}).then(()=>{
this.$router.replace({ //将当前页面路由替换成登录页路由，并将当前页面路由保存在query中为后面跳转回来做准备
path:"/user/login",
query: {redirect: this.$router.currentRoute.fullPath}
})
}).catch(()=>{})
}
})
}
登录页：
login(){
axios.post(`${common.userapi}/login`,params).then(res=>{
if(res.data.code==200){
this.$toast({
message:'登录成功',
duration:2000,
})
if(this.$route.query.redirect){ //判断若是路由中保存了上一页的路由信息，则执行以下代码跳转回上一页。这里注意route与router的区别使用
this.$router.replace({path:decodeURIComponent(this.$route.query.redirect)}) //这里为什么用replace不用push？因为直接替换路由不会产生新的history记录。以防止产生新的history记录导致相关页面的router.go(-1)出现问题
}else{
this.$router.push('/') //否则则跳往首页
}
}
})
}
数据轮询，使用定时器每过60秒请求一次数据
data(){
return{
setTimeGet:null //轮询定时器
}
},
created(){
this.getData() //初始化页面时执行函数(不设的话，则初始时不执行定时器，在60000ms后开始执行)
},
beforeDestroy() { //关闭页面之前清除定时器
clearInterval(this.setTimeGet)
},
//若该页面使用了keepAlive缓存，则beforeDestroy生命周期不可用，改为deactivated生命周期
//deactivated(){
// clearInterval(this.setTimeGet)
//},
methods:{
getData(){
axios.get(`${common.demoapi}/getdemo?id=${this.rid}`).then(res=>{ //初始化页面时请求一次
if(res.data.code==200){
......
}
})
this.setTimeGet=setInterval(()=>{ //设置定时器，继第一次请求之后，每60秒轮询一次
axios.get(`${common.demoapi}/getdemo?id=${this.rid}`).then(res=>{
if(res.data.code==200){
......
}
})
},60000)
},
}
获取验证码
getVerifyCode(){
this.verifyImg=`${common.base}/getVerification?t=${Math.random()}`
}
router路由在新窗口打开页面
goIndex(){
let goIndex=this.$router.resolve({name:'Index'}) //这里要用resolve方式。 push,go方式无效
window.open(goIndex.href,'_blank')
}
银行卡号每四位空格显示
银行卡号正则：
if(/^([1-9]{1})(\d{11}|\d{15}|\d{16}|\d{17}|\d{18})$/.test(this.cardId)==false){
this.$toast('请检查您的银行卡号是否正确')
return
}
使用slice或substr或substring分割达到每4位一个空格效果:
<div class="cardId"><span>银行卡号：</span><span>{{`${item.bankcardid.slice(0,4)} ${item.bankcardid.slice(4,8)} ${item.bankcardid.slice(8,12)} ${item.bankcardid.slice(12,16)} ${item.bankcardid.slice(16,20)}`}}</span></div>
substr,substring,slice的区别
https://blog.csdn.net/qq_38047742/article/details/82144266
axios设置请求头
zfbpay(){
let config={ //配置请求头
headers:{
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
}
}
let params=new URLSearchParams()
params.append('money',this.moneyAmount)
params.append('ispc',2)
this.$axios.post(`${common.orderApi}/amstc/userRechargeAccountByAliPay`,params,config).then(res=>{
if(res.data.code==200){
let divbody=document.createElement('div')
divbody.innerHTML=res.data.data
document.body.appendChild(divbody)
document.forms[0].submit()
}
}).catch(err=>{})
},
判断是否是微信
isWechat() {
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
this.iswx = true
} else {
this.iswx = false;
}
}
判断是否是ios
iosCheck(){
let u = navigator.userAgent;
if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
this.isIos=true
}else{
this.isIos=false
}
},
移动端下载文件功能
注：移动端下载文件功能在微信内置浏览器中不可用，需要先判断网页是否在微信中打开，判断方法如上
download(url){
window.location.href=url
}
全局部署404(在router/index.js添加)
import NotFound from '@/pages/notFound/notFound' //404
export default new Router({
mode: 'history', //去掉url中的#
routes: [
{
path: '/',
name: 'Index',
component: Index,
meta:{title:'首页'}
},
。。。
{ //在路由最末尾部署，记住要在最末尾
path:'/notFound',
name:'NotFound',
component:NotFound,
meta:{
title:'页面不存在'
}
},
{
path:'*',
redirect:'/notFound',
}
]
vue获取上一页路由和当前页路由
beforeRouteEnter(to, from, next) {
next(()=>{
console.log(from) //上一页路由信息
console.log(to) //当前页路由信息
})
},
input框ios端去除输入法首字母大写状态
<input type="text" autocapitalize="off" autocorrect="off" />
微信分享后返回上一页(有上一页则返回上一页，没有则返回首页)
goBack(){
if(window.history?.state?.back){
this.$router.back()
}else{
this.$router.push('/')
}
},
