vue3小兔鲜商城项目学习笔记+资料分享07

建议大家先去看我第一篇小兔鲜的文章，强烈建议，非常建议，十分建议，从头开始看更完整。
下面是学习笔记

填写订单模块

填写订单实现

本节目标: 实现填写订单跳转

填写订单页组件和路由

1）准备填写订单页面

新建页面组件：src/views/Checkout/index.vue

<script setup lang="ts">
//
script>

<template>
  <div>填写订单页面div>
template>

2）二级路由：router/index.ts

  {
    path: '/',
    component: Layout,
    children: [
      ...
      {
        path: "/member/checkout",
        component: () => import("@/views/Checkout/index.vue"),
      },
    ]
  },

购物车页结算按钮

思路分析

购物车页，填写订单环节的主要任务就是做各种判断，其中包括

1. 判断是否选中商品，没选中商品提醒。

2. 判断是否登录，未登录提醒。

   满足以上条件跳转去填写订单页面。

落地代码

src\views\Cart\index.vue

// 点击填写订单按钮
const router = useRouter();
const goToCheckout = () => {
  // 1. 判断选中数量不能为零
  if (!selectedListCount.value) {
    return message({ type: "warn", text: "请选择商品下单" });
  }
  // 2. 判断是否登录
  if (!member.isLogin) {
    return message({ type: "warn", text: "请先登录~" });
  }
  // 跳转到填写订单
  router.push("/member/checkout");
};


填写订单

获取预付订单数据

本节目标: 获取预付订单数据并定义TS类型声明文件。

接口：生成订单(即填写订单或结算页)

基本信息

Path： /member/order/pre

Method： GET

请求参数

无

获取订单数据

实现步骤

1. 准备订单的 Store
2. 定义获取结算信息 API 接口
3. 页面组件获取数据，渲染页面内容

代码落地

新建 Store： src/store/modules/order.ts

import { defineStore } from 'pinia';

// 定义 Store 时建议遵循命名规范 useXxxStore
const useOrderStore = defineStore('order', {
  // state 相当于 data
  state: () => ({}),
  // getters 相当于 computed
  getters: {},
  // actions 相当于 methods
  actions: {},
});

export default useOrderStore;

合并 Store，src/store/index.ts

import useOrderStore from './modules/order';

const useStore = defineStore('main', {
  state: () => ({
     // ...代码省略
    order: useOrderStore(),
  }),
});

准备 actions

 actions: {
    async getCheckoutInfo() {
      const res = await http('GET', '/member/order/pre');
      console.log('GET', '/member/order/pre', res);
    },
  },

组件中调用

<script setup lang="ts">
const { order } = useStore();
order.getCheckoutInfo();
script>

定义 TS 类型文件

新建类型文件 src\types\modules\order.d.ts

export interface UserAddresse {
  id: string;
  receiver: string;
  contact: string;
  provinceCode: string;
  cityCode: string;
  countyCode: string;
  address: string;
  isDefault: number;
  fullLocation: string;
  postalCode: string;
  addressTags: string;
}

export interface Good {
  id: string;
  name: string;
  picture: string;
  count: number;
  skuId: string;
  attrsText: string;
  price: string;
  payPrice: string;
  totalPrice: string;
  totalPayPrice: string;
}

export interface Summary {
  goodsCount: number;
  totalPrice: number;
  totalPayPrice: number;
  postFee: number;
  discountPrice: number;
}

// 生成订单
export interface CheckoutInfo {
  userAddresses: UserAddresse[];
  goods: Good[];
  summary: Summary;
}

合并导出 src\types\index.d.ts

// 统一导出所有自定义的类型文件
...
export * from "./api/order";

填写订单数据渲染

本节目标：完成结算页静态结构和数据渲染

静态结构

1）准备结构 src/views/Checkout/index.vue

<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页XtxBreadItem>
        <XtxBreadItem to="/cart">购物车XtxBreadItem>
        <XtxBreadItem>填写订单XtxBreadItem>
      XtxBread>
      <div class="wrapper">
        
        <h3 class="box-title">收货地址h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <ul>
                <li><span>收 货 人：span>朱超li>
                <li><span>联系方式：span>132****2222li>
                <li>
                  <span>收货地址：span>海南省三亚市解放路108号物质大厦1003室
                li>
              ul>
              
            div>
            <div class="action">
              <XtxButton class="btn">切换地址XtxButton>
              <XtxButton class="btn">添加地址XtxButton>
            div>
          div>
        div>
        
        <h3 class="box-title">商品信息h3>
        <div class="box-body">
          <table class="goods">
            <thead>
              <tr>
                <th width="520">商品信息th>
                <th width="170">单价th>
                <th width="170">数量th>
                <th width="170">小计th>
                <th width="170">实付th>
              tr>
            thead>
            <tbody>
              <tr v-for="item in 4" :key="item">
                <td>
                  <a href="javascript:;" class="info">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/cd9b2550cde8bdf98c9d083d807474ce.png"
                      alt=""
                    />
                    <div class="right">
                      <p>轻巧多用锅雪平锅 麦饭石不粘小奶锅煮锅p>
                      <p>颜色：白色 尺寸：10cm 产地：日本p>
                    div>
                  a>
                td>
                <td>¥100.00td>
                <td>2td>
                <td>¥200.00td>
                <td>¥200.00td>
              tr>
            tbody>
          table>
        div>
        
        <h3 class="box-title">配送时间h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;"
            >不限送货时间：周一至周日a
          >
          <a class="my-btn" href="javascript:;">工作日送货：周一至周五a>
          <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日a>
        div>
        
        <h3 class="box-title">支付方式h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">在线支付a>
          <a class="my-btn" href="javascript:;">货到付款a>
          <span style="color: #999">货到付款需付5元手续费span>
        div>
        
        <h3 class="box-title">金额明细h3>
        <div class="box-body">
          <div class="total">
            <dl>
              <dt>商品件数：dt>
              <dd>5件dd>
            dl>
            <dl>
              <dt>商品总价：dt>
              <dd>¥5697.00dd>
            dl>
            <dl>
              <dt>运<i>i>费：dt>
              <dd>¥0.00dd>
            dl>
            <dl>
              <dt>应付总额：dt>
              <dd class="price">¥5697.00dd>
            dl>
          div>
        div>
        
        <div class="submit">
          <XtxButton type="primary">提交订单XtxButton>
        div>
      div>
    div>
  div>
template>

<style scoped lang="less">
.wrapper {
  background: #fff;
  padding: 0 20px;
  .box-title {
    font-size: 16px;
    font-weight: normal;
    padding-left: 10px;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;
  }
  .box-body {
    padding: 20px 0;
  }
}
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  .info {
    display: flex;
    text-align: left;
    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }
    .right {
      line-height: 24px;
      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }
  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }
    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;
      &:first-child {
        border-left: 1px solid #f5f5f5;
      }
      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;
  &.active,
  &:hover {
    border-color: @xtxColor;
  }
}
.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;
    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }
    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;
      &.price {
        font-size: 20px;
        color: @priceColor;
      }
    }
  }
}
.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}
// 对话框地址列表
.xtx-dialog {
  .addressWrapper {
    max-height: 500px;
    overflow-y: auto;
  }
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
style>

渲染基本信息

渲染商品列表

<tbody>
  <tr v-for="item in checkoutInfo.goods" :key="item.skuId">
    <td>
      <RouterLink :to="`/goods/${item.id}`" class="info">
        <img :src="item.picture" alt="" />
        <div class="right">
          <p>{{ item.name }}p>
          <p>{{ item.attrsText }}p>
        div>
      RouterLink>
    td>
    <td>¥{{ item.payPrice }}td>
    <td>{{ item.count }}td>
    <td>¥{{ item.totalPrice }}td>
    <td>¥{{ item.totalPayPrice }}td>
  tr>
tbody>

金额明细

金额明细

  

    

      
商品件数：
      
{{ checkoutInfo.summary.goodsCount }}件
    
    

      
商品总价：
      
¥{{ checkoutInfo?.summary.totalPrice }}
    
    

      
运费：
      
¥{{ checkoutInfo?.summary.postFee }}
    
    

      
应付总额：
      
¥{{ checkoutInfo?.summary.totalPayPrice }}
    
  

加载优化体验

**本节目标：**加载订单信息用时较长，添加 loading 效果（骨架屏同理）。

修改代码：

温馨提示：添加了 v-if="checkoutInfo" 后，结构内部访问 checkoutInfo 数据的时候，不需要大量书写 ?. 可选链操作符。

渲染收货地址

测试账号 sujiehao/zhousg 密码：123456 测试账号下有多个收货地址

收货地址字段比较特殊一些，一个用户可能有多个地址，也有可能随时切换收获地址，所以我们单独设置一个响应式数据用来渲染收获地址

隐藏手机号部分信息

本节目标：Vue3 没有过滤器，模板中要对数据进行处理直接调用函数即可。

src\utils\index.ts

/**
 * JSDoc注释 隐藏用户手机号码
 * @param mobile 手机号码
 * @returns 处理后的手机号码
 */
export const hiddenMobileNumber = (mobile: string) => {
  // 普通写法
  // return mobile.slice(0, 3) + '****' + mobile.slice(-4);
  // 正则替换，编组() 与 $n
  return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
};

    联系方式：
-    {{ currAddress.contact }}
+    {{ hiddenMobileNumber(currAddress.contact) }}

对话框组件基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1v5Gfdc2-1668073160876)(media/image-20220225121348926.png)]

基本使用

const visible = ref(true);


  
    
    
  



    切换地址

层级问题

position: fixed 固定定位，指定元素相对于屏幕视口（viewport）的位置来指定元素位置。

拓展阅读：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

踩坑：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

问题代码演示

+  
+  

    
      
      
    
+  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zoqLjuRV-1668073160878)(media/image-20220225122447034.png)]

结论：transform 属性会对fixed属性造成影响。

Vue3 新增：Teleport 传送门组件

本节目标：Teleport 是 Vue3 才新增的内置组件。

拓展阅读：官方文档

Vue3 官方文档中提到同样的定位问题：

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

• position: fixed 能够相对于视口放置的条件是：没有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。而如果我们想要用 transform 为祖先节点设置动画，则会破坏模态框的布局结构！
• 模态框的 z-index 被包含它的元素所制约。

基本用法

• 传送门 to 属性可以指定传送到某个节点。

传送到指定结构

• index.html 中准备一个结构。

• 如果要传送到指定结构，结构需要提前准备，否则报错。

收货地址处理 - 课后练习

切换收货地址 - 课后练习

任务目标: 能够切换当前显示的地址

测试账号 zhousg/sujiehao 123456 账号下有多个收货地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPl8mw2P-1668073160880)(media/03-1628459174479.png)]

实现步骤

1. 对话框中渲染一个地址列表
2. 实现可以选中的效果，点击确认后变更显示地址

代码落地

1）渲染地址列表

2）显示dialog时，默认选中

切换地址

// 收货地址
const currAddress = ref();
// 临时收货地址
const tempAddress = ref();

// 打开切换收货地址的对话框
const changeAddress = () => {
  tempAddress.value = currAddress.value;
  visible.value = true;
}

3）实现选中交互效果

// 通过id判断active类名是否存在

3）确定按钮之后修改地址

添加收货地址 - 课后练习

任务目标: 实现收货地址的添加操作

• 新注册账户，还没有收货地址，我们支持他进行收货地址的添加操作。
• 注意事项：一个账号下最多只有 10 个收货地址，如果要进行练习，可以用 PostMan 等测试工具调用接口删除地址后再添加新地址。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QJ6dJ43-1668073160882)(media/04-16459815553228.png)]

实现思路

1. 完成表单布局
2. 完成确认添加操作

代码落地

1）准备添加功能弹框

<script setup lang="ts">
//  准备控制弹框展示的响应式数据
const addVisible = ref(false)
script>

<template>
  
  <XtxDialog title="添加收货地址" :visible="addVisible" @close="addVisible=false">
    <div class="address-edit">
      <div class="xtx-form">
        <div class="xtx-form-item">
          <div class="label">收货人：div>
          <div class="field">
            <input class="input" placeholder="请输入收货人" />
          div>
        div>
        <div class="xtx-form-item">
          <div class="label">手机号：div>
          <div class="field">
            <input class="input" placeholder="请输入手机号" />
          div>
        div>
        <div class="xtx-form-item">
          <div class="label">地区：div>
          <div class="field">
            <XtxCity placeholder="请选择所在地区" />
          div>
        div>
        <div class="xtx-form-item">
          <div class="label">详细地址：div>
          <div class="field">
            <input class="input" placeholder="请输入详细地址" />
          div>
        div>
        <div class="xtx-form-item">
          <div class="label">邮政编码：div>
          <div class="field">
            <input class="input" placeholder="请输入邮政编码" />
          div>
        div>
        <div class="xtx-form-item">
          <div class="label">地址标签：div>
          <div class="field">
            <input class="input" placeholder="请输入地址标签，逗号分隔" />
          div>
        div>
      div>
    div>
    <template #footer>
      <XtxButton type="gray" style="margin-right: 20px">取消XtxButton>
      <XtxButton type="primary">确认XtxButton>
    template>
  XtxDialog>
  ...
    
      
      <XtxButton class="btn" @click="addVisible = true">添加地址XtxButton>
    
template>


<style scoped lang="less">
// 样式优化：
.xtx-city {
  margin-left: 0px;
  /deep/ .select {
    height: 50px;
    line-height: 50px;
  }
  /deep/ .select .value {
    font-size: 14px;
  }
}
style>

2）实现表单数据和双向绑定

 // 表单数据
const addressForm = reactive({
  receiver: '',
  contact: '',
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  address: '',
  postalCode: '',
  addressTags: '',
  isDefault: 0,
  fullLocation: ''
})

// 选择地区
const changeCty = (data) => {
  formData.provinceCode = data.provinceCode
  formData.cityCode = data.cityCode
  formData.countyCode = data.countyCode
  formData.fullLocation = data.fullLocation
}

  

    

      
收货人：
      

        
      
    
    

      
手机号：
      

        
      
    
    

      
地区：
      

        
      
    
    

      
详细地址：
      

        
      
    
    

      
邮政编码：
      

        
      
    
    

      
地址标签：
      

        
      
    
  

3）准备新增接口函数src/api/order.js

/**
 * 添加收货地址信息
 * @param {Object} address - 地址对象
 */
export const reqAddAddress = (address) => request('/member/address', 'post', address)

/**
 * 获取收货地址列表
 */
export const reqFindAddAddress = () => {
  return request('/member/address', 'get')
}

4）调用接口完成新增

// 提交操作
const submit = async () => {
  // 添加收货地址
  await reqAddAddress(addressForm)
  message({ type: 'success', text: '新增地址成功' })
  addVisible.value = false
  // 更新收货地址列表
  const { result } = await reqFindAddAddress()
  checkoutInfo.value.userAddresses = result
}

提交订单

任务目标: 汇总提交订单需要的数据，进行提交

实现步骤

1. 绑定提交订单点击事件，收集后端所需数据对象，进行提交即可。
2. 提交成功之后，提示用户
3. 重新拉取一下购物车列表
4. 跳转到支付页。

代码落地

接口：提交订单

基本信息

Path： /member/order

Method： POST

接口描述：

Body

名称	类型	是否必须	默认值	备注	其他信息
goods	object []	必须		商品集合	item 类型: object
├─ skuId	string	必须		skuId
├─ count	integer	必须		数量
addressId	string	必须		所选地址Id
deliveryTimeType	integer	必须		配送时间类型，1为不限，2为工作日，3为双休或假日
payType	integer	必须		支付方式，1为在线支付，2为货到付款
payChannel	integer	必须		支付渠道：支付渠道，1支付宝、2微信–支付方式为在线支付时，传值，为货到付款时，不传值
buyerMessage	string	必须		买家留言

完成提交订单业务

添加 actions

  actions: {
    // 提交订单(创建订单)
    async createOrder(data: object) {
      // 创建订单
      const res = await http('POST', '/member/order', data);
      console.log('POST', '/member/order', res);
      // 成功提醒用户
      message({ type: 'success', text: '下单成功~' });
      // 刷新购物车列表
      const { cart } = useStore();
      cart.getCartList();
      // 跳转到支付页并传递订单 id
      router.push('/member/pay?')
    },
  },

点击提交订单按钮

到此，我们就完成了结算页面的所有核心功能，接下来我们就可以进行正式的支付环节了。