一 样式class,style
- tab切换样式
<div class="buy-ways cursor marginRight" :class="{ activeSty: activeWay === 1 }" @click="getWay(1)">
<img src="../../assets/image/zhifubao-3.png" alt="" />
<span>支付宝</span>
</div>
<div class="buy-ways cursor" :class="{ activeSty: activeWay === 2 }" @click="getWay(2)">
<img src="../../assets/image/weixinzhifu-2.png" alt="" />
<span>微信</span>
</div>
getWay(key) {
this.activeWay = key
},
也可也直接 @click="activeWay = 1"
- vuex的使用
state:{
count: 0
}
mutions:{
getCount (state, count) {
state.count = count
}
}
调用
this.$store.commit('getCount', 1)
使用
this.$store.state.count
辅助性函数的使用
mapState mapAction
import { mapState, mapMutations } from 'vuex'
computed: mapState(['count'])
相当于:
computed: {
count () {
return this.$store.state.count
}
}
methods:{
...mapMutations({
getCountFunc: 'getCount'
}),
// 或者
...mapMutations(['getCount'])
this.getCountFunc(1)
}
相当于
this.$store.commit('getCount', 1)
- this.$router.resolve新窗口打开
let routerJump = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
window.open(routerJump.href, '_blank')
由于最后是要用href,所以可以解构为
const { href } = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
window.open(href, '_blank')
--- '_blank' 打开新窗口
--- '_self' 关闭当前窗口打开新窗口
- this.$set() 添加新属性
$set(traget, propertyName, value)
-----
this.$set(this.nowData, index, { name: val.name, id: val.id })
this.$set(this.orderData[index], 'tt', tt)
- 路由跳转
this.$router.push('/login')
this.$router.push({
path: '/administration/admindetail',
query: {
rowData: rowDataNow,
proId: proId,
batchId: batchId,
},
})
获取
this.$route.query
- vue 计算总价: 单价 * 数量 = 总价
无论是单价,还是数量的变化,都会引起总价的变化,所以关键就是对单价和数量进行监听
computed: {
address() {
const { phoneCount, singlePrice } = this
return {
phoneCount,
singlePrice,
}
},
},
watch: {
address(val) {
console.log('val', val)
this.allPrice = (val.phoneCount * val.singlePrice).toFixed(2)
},
},
- pc 端的支付流程,以及实现
支付流程:
- 第一步:先下单,拿到订单号
- 第二步:根据订单号和选择的支付方式进行支付
- 第三步:支付的结果,微信和支付宝不一样。支付宝是通过returnUrl来回跳(你需要告诉后端回跳的地址),微信没有returnUrl的回跳,所以通过定时器来监听支付结果
实现
- 调用下单接口,获取订单号,并且把订单号和支付方式传给支付接口
// 支付,先下单
orderFunc(phoneCount, id) {
const way = this.activeWay === 1 ? 'Alipay' : 'Wechat'
getOrder(
{
goods_list: [
{
count: phoneCount,
goods_id: id,
},
],
},
(res) => {
console.log('下单', res.data)
const order = res.data.data.TradeNo
this.getPayOrderWay(way, order) // 传递订单号和支付方式
},
(err) => {
console.log(err)
}
)
},
- 支付:
支付宝有returnUrl所以直接跳转
window.open(url, ‘_blank’)
微信没有 returnUrl 所以跳转指定路劲
this.$router.resolve…
window.open(routerJump.href, ‘_blank’)
getPayOrderWay(way, order) {
getPayOrder(
{
payment_way: way,
trade_no: order,
},
(res) => {
const payment = res.data.data
this.getTradeNoFunc(payment.TradeNo)
console.log('222', this.$store.state.tradeNo)
const payNumber = (res.data.data.TotalPrice / 100).toFixed(2)
const url = res.data.data.Url
this.handleClose()
if (way === 'Wechat') {
let routerJump = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
window.open(routerJump.href, '_blank')
this.getStateFunc(true)
} else if (way === 'Alipay') {
window.open(url, '_blank')
this.getStateFunc(true)
}
},
(err) => {
console.log(err)
}
)
},
微信定时监听
startLoop() {
this.timer = setInterval(() => {
this.myPaySuccess()
}, 3000)
- 时间戳,格式化
1. 下载安装
npm install moment --save
2. main.js全局引入
import Moment from 'moment'
Vue.prototype.moment = Moment
3. 使用
filters: {
dateFilter(res) {
// return this.moment(+res * 1000).format('YYYY-MM-DD HH:mm') 两者都可
return this.moment.unix(+res).format('YYYY-MM-DD HH:mm')
},
},
- 计算过期时间
getTime(
'',
(res) => {
console.log('系统时间', res.data.data.time_now)
this.nowTime = res.data.data.time_now
this.orderData.forEach((val, index) => {
let newTime = (val.expire_time - this.nowTime) * 1000
let days = Math.floor(newTime / (24 * 3600 * 1000)) // 计算出天数
let leavel = newTime % (24 * 3600 * 1000) // 计算天数后剩余的时间
let hours = Math.floor(leavel / (3600 * 1000)) // 计算剩余的小时数
let leavel2 = leavel % (3600 * 1000) // 计算剩余小时后剩余的毫秒数
let minutes = Math.floor(leavel2 / (60 * 1000)) // 计算剩余的分钟数
let tt = `${days}天${hours}时${minutes}分`
this.$set(this.orderData[index], 'tt', tt)
})
},
1.this.$route.query的使用
A、传参数:
this.$router.push({
path: '/monitor',
query:{
id:id,
}
})
B、获取参数:
this.$route.query.id
C、在url中形式(url中带参数)
http://172.19.186.224:8080/#/monitor?id=1
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)
2.this.$route.params的使用
A、传参数:
this.$router.push({
name: 'monitor',
params:{
id:id,
}
})
B、获取参数:
this.$route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)
- formdate 数据的传递 和upload组件使用和进度条的使用
上传 两步 : 上传 确认
actionPath: api.defaults.baseURL + "/Common/Upload",
headers: { token: window.localStorage.getItem("tokenPhone") },
loadProgress: 0, // 动态显示进度条
<el-upload
ref="upload"
:action="actionPath"
:headers="headers"
multiple
:limit="1"
accept=".apk"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload"
:on-progress="uploadProcess"
>
handleAvatarSuccess(response, file, fileList) {
console.log("mzid数据传递", this.mzyList);
console.log("response.data", response.data);
const { file_ext, file_name, temporary } = response.data;
this.appUploadData.file_ext = file_ext;
this.appUploadData.file_name = file_name;
this.appUploadData.temporary = temporary;
this.appUploadData.mzy_ids = this.mzyList;
},
uploadProcess(event, file, fileList) {
this.isUploading = false; // 显示进度条
this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
if (this.loadProgress >= 100) {
this.loadProgress = 100;
setTimeout(() => {
this.loadProgress = 0;
this.isUploading = true;
}, 1000); // 一秒后关闭进度条
}
},
- 三元表达式事件
@submitbtn="searchText ? searchFuncId(searchText) : ''"
13: scope的解构赋值
<template slot-scope="{row:{r_id,r_title,r_answer}}">
<div @click="edit(r_id,r_title,r_answer)">
</div>
</template>
- 路由权限校验
// 利用导航守卫控制访问权限和动态标题
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title // 页面标题的展示
}
const tokenStr = window.localStorage.getItem('Mail')
if ((to.path === '/login' || to.path === '/registered') && tokenStr) {
// console.log('啥也不缺,直接调到主角面')
return next('/create')
}
if (to.path === '/login' || to.path === '/registered') return next()
if (!tokenStr) return next('/login')
// 如果输入主界面地址,但是无token,则返回登录页
next() // 最后一定要next一些
})