1.解决在购物车中暴露总价时 js的计算问题 0.1+0.1!=0.2
问题:在计算总价时用个数乘以单价 单价不都是整的 有些有一位小数 怎么解决呢? 如下
return getters.selectedList.reduce((p, c) => p + (c.nowPrice * 100 * c.count), 0) / 100
意思就是变成整数再通过计算 p代表上一次计算的结果 c代表本此计算的item
2.重温回顾对象的遍历赋值
for( key in obj){
obj[key] = goods[key]
}
3.使用useIntervaFn
第一步先引入import { useIntervalFn } from '@vueuse/core'
然后用
const { pause, resume } = useIntervalFn(() => {
time.value--
timeText.value = dayjs.unix(time.value).format('mm分ss秒')
if (time.value <= 0) {
pause()
}
}, 1000, false)
首先把结束开始方法解构出来 然后写下来暂停条件 再在上面写时间流逝和要做的事情
4.支付思路的实现
- PC前台点击支付按钮,新开标签页打开后台提供的支付链接带上订单ID还有回跳地址
- 后台服务发起支付,等待支付结果,修改订单状态,回跳PC前台结果页
- PC前台在结果页获取回跳URL参数订单ID查询支付状态,展示支付结果
# 支付地址回调地址(可变)
http://www.corho.com:8080/#/pay/callback
测试:如果使用客户端需要下载 沙箱支付宝
开放平台扫码下载。
买家账号jfjbwb4477@sandbox.com
登录密码111111
支付密码111111
// 支付地址
// const payUrl = '后台服务基准地址+支付页面地址+订单ID+回跳地址'
const redirect = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`
<a class="btn alipay" :href="payUrl" target="_blank"></a>
5. 关于菜单的激活遇到的问题
如图所示我们本来的效果是当route是/member/order时我的订单选项被激活 但是当route变为/member/order/id时它就会失活
怎么实现呢?
router-link-active 当你的路由路径包含 router-link组件的to属性值,当前组件会加上它
router-link-exact-active 当你的路由路径完全和你的router-link组件的to属性值一致,当前组件会加上它
可以用第一个
<RouterLink to="/member/order" exact-class="active">我的订单</RouterLink>
router中:
path: '/member',
component: MemberLayout,
children: [
{ path: '/member', component: MemberHome },
{ path: '/member/order', component: MemberOrder },
{ path: '/member/order/:id', component: MemberOrderDetail },
]
这样可以进行一个模糊匹配
但是在v3中必须 有嵌套关系
router中:
{
path: '/member/order/',
// vue3.0 需要有嵌套关系才能模糊匹配
component: { render: () => h(<RouterView/>) },
children: [
{ path: '', component: MemberOrder },
{ path: ':id', component: MemberOrderDetail }
]
}
6.jsx
jsx语法,它能够让我们创建节点和写html一样
// 1. 动态插值表达式{} 2. 尽量三元表示式做判断,使用map来遍历 3.事件使用原始方式绑定
使用的时候看文档边写
绑定方法 渲染什么的 直接看文档写