第一卷：今天学了什么 小兔鲜项目 2022.9.6

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.事件使用原始方式绑定

使用的时候看文档边写

绑定方法 渲染什么的 直接看文档写