Vue3电商项目实战-结算&支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】

这篇具有很好参考价值的文章主要介绍了Vue3电商项目实战-结算&支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


05-结算-收货地址-添加

目的:实现收货地址的添加。

大致步骤:

  • 独立组件,准备一个对话框
  • 完成表单布局
  • 完成确认添加操作

落的代码:

1.独立组件,准备一个对话框
src/views/member/pay/components/address-edit.vue 添加地址组件

<template>
  <XtxDialog title="添加收货地址" v-model:visible="dialogVisible">
    <div class="address-edit">
      表单
    </div>
    <template v-slot:footer>
      <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
      <XtxButton type="primary">确认</XtxButton>
    </template>
  </XtxDialog>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'AddressEdit',
  setup () {
    const dialogVisible = ref(false)
    // 打开函数
    const open = () => {
      dialogVisible.value = true
    }
    return { dialogVisible, open }
  }
}
</script>
<style scoped lang="less">
.address-edit {

}
</style>

src/views/member/pay/components/checkout-address.vue 使用添加地址组件

    // 添加收货地址组件
+   const addressEdit = ref(null)
+   const openAddressEdit = () => {
+     addressEdit.value.open()
+   }
    return {
      showAddress,
      dialogVisible,
      selectedAddress,
      openDialog,
      confirmAddress,
+      addressEdit,
+      openAddressEdit
    }
<XtxButton @click="openAddressEdit()" class="btn">添加地址</XtxButton>

2.完成表单布局
src/views/member/pay/components/address-edit.vue 结构和样式

    <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>
.xtx-dialog {
  :deep(.wrapper){
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.xtx-form {
  padding: 0;
  input {
    outline: none;
    &::placeholder {
      color: #ccc;
    }
  }
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}

src/components/library/xtx-city.vue 暴露占位文字

    placeholder: {
      type: String,
      default: '请选择配送地址'
    }
<span v-if="!fullName" class="placeholder">{{placeholder}}</span>

3.完成确认添加操作
src/views/member/pay/components/address-edit.vue 动态绑定表单

    // 表单数据
    const formData = 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
    }
    return { dialogVisible, open, formData, changeCty }
    <div class="xtx-form">
      <div class="xtx-form-item">
        <div class="label">收货人:</div>
        <div class="field">
+          <input v-model="formData.receiver" class="input" placeholder="请输入收货人" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">手机号:</div>
        <div class="field">
+          <input v-model="formData.contact" class="input" placeholder="请输入手机号" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地区:</div>
        <div class="field">
          <XtxCity
            placeholder="请选择所在地区"
+            :fullLocation="form.fullLocation"
+            @change="changeCty"
          />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">详细地址:</div>
        <div class="field">
+          <input  v-model="formData.address" class="input" placeholder="请输入详细地址" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">邮政编码:</div>
        <div class="field">
+          <input  v-model="formData.postalCode" class="input" placeholder="请输入邮政编码" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地址标签:</div>
        <div class="field">
+          <input v-model="formData.addressTags" class="input" placeholder="请输入地址标签,逗号分隔" />
        </div>
      </div>
    </div>

src/api/order.js 接口函数

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

src/components/library/xtx-city.vue 提供占位文字属性


    placeholder: {
      type: String,
      default: '请选择配送地区'
    }
<span class="placeholder" v-if="!fullLocation">{{placeholder}}</span>

src/views/member/pay/components/address-edit.vue 进行提交操作

    // 选择地区
    const changeCty = (data) => {
      formData.provinceCode = data.provinceCode
      formData.cityCode = data.cityCode
      formData.countyCode = data.countyCode
+      formData.fullLocation = data.fullLaction
    }
+    // 提交操作
+    const submit = () => {
+      addAddress(formData).then(data => {
+        // 添加成功
+        Message({ text: '添加收货地址成功', type: 'success' })
+        formData.id = data.result.id
+        dialogVisible.value = false
+        emit('on-success', formData)
+      })
+    }
+    return { dialogVisible, open, formData, changeCty, submit }

src/views/member/pay/components/checkout-address.vue 接受添加成功的地址对象

+    // 成功
+    const successHandler = (formData) => {
+      const json = JSON.stringify(formData)  // 需要克隆下,不然使用的是对象的引用
+      // eslint-disable-next-line vue/no-mutating-props
+      props.list.unshift(JSON.parse(json))
+    }
    return {
      showAddress,
      dialogVisible,
      selectedAddress,
      openDialog,
      confirmAddress,
      addressEdit,
      openAddressEdit,
+      successHandler
    }
    <!-- 添加地址 -->
    <AddressEdit ref="addressEdit" @on-success="successHandler" />

src/views/member/pay/components/address-edit.vue 每次打开对话框清空表单

    // 打开函数
    const open = (form) => {
      dialogVisible.value = true
+      // 传人{}的时候就是清空,否则就是赋值
+      for (const key in formData) {
+        formData[key] = form[key]
+      }
    }

06-结算-收货地址-修改

目的:在添加收货地址组件基础之上完成修改逻辑。

大致步骤:

  • 打开对话框的时候传人当前需要修改的地址对象
  • 再添加组件open函数处,接收数据赋值给表单,修改标题。
  • 封装一个API接口函数实现修改,在提交事件中合并修改操作
  • 父组件修改数据

落的代码:

1.打开对话框的时候传人当前需需改的地址对象
src/views/member/pay/checkout-address.vue

<a @click="openAddressEdit(showAddress)" v-if="showAddress" href="javascript:;">修改地址</a>

2.再添加组件open函数处,接收数据赋值给表单,修改标题
src/views/member/pay/address-edit.vue

    const formData = reactive({
+      id: '',
      receiver: '',
      contact: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
+      fullLocation: '',
      address: '',
      postalCode: '',
      addressTags: '',
      isDefault: 0
    })
<XtxDialog :title="(formData.id?'编辑':'添加')+'收货地址'" v-model:visible="dialogVisible">

3.封装一个API接口函数实现修改,在提交事件中合并修改操作
src/api/order.js

/**
 * 编辑收货地址信息
 * @param {Object} address - 地址对象
 */
export const editAddress = (address) => {
  return request('/member/address', 'put', address)
}

src/views/member/pay/address-edit.vue

    // 打开对话框函数
    const open = (address) => {
      // 先填充数据 - 编辑
      if (address.id) {
        for (const key in formData) {
          formData[key] = address[key]
        }
      } else {
        // 先清空数据 - 添加
        for (const key in formData) {
          if (key !== 'isDefault') {
            formData[key] = ''
          }
        }
      }
      dialogVisible.value = true
    }
    // 提交操作
    const app = getCurrentInstance()
    const submit = () => {
+      if (formData.id) {
+        editAddress(formData).then(data => {
+          // 修改成功
+          Message(app, { text: '修改收货地址成功', type: 'success' })
+          dialogVisible.value = false
+          emit('on-success', formData)
+        })
+      } else {
        addAddress(formData).then(data => {
          // 添加成功
          Message(app, { text: '添加收货地址成功', type: 'success' })
          formData.id = data.result.id
          dialogVisible.value = false
          emit('on-success', formData)
        })
+      }
    }

4.父组件修改数据
src/views/member/pay/components/checkout-address.vue

    // 成功
    const successHandler = (formData) => {
+      const editAddress = props.list.find(item => item.id === formData.id)
+      if (editAddress) {
+        // 修改
+        for (const key in editAddress) {
+          editAddress[key] = formData[key]
+        }
+      } else {
        // 添加
        const json = JSON.stringify(formData) // 需要克隆下,不然使用的是对象的引用
        // eslint-disable-next-line vue/no-mutating-props
        props.list.unshift(JSON.parse(json))
+      }

07-结算-提交订单

目的:汇总提交订单需要的数据,进行提交。

大致步骤:

  • 定义需要提交的数据对象
  • 绑定提交订单点击事件,进行提交即可

落的代码:

1.定义需要提交的数据对象
src/views/member/pay/checkout.vue

  setup () {
    const checkoutInfo = ref(null)
    findCheckoutInfo().then(data => {
      checkoutInfo.value = data.result
+      // 设置提交时候的商品
+      requestParams.goods = checkoutInfo.value.goods.map(item => {
+        return {
+          skuId: item.skuId,
+          count: item.count
+        }
+      })
    })
    // 需要提交的字段
    const requestParams = reactive({
      addressId: null,
+      deliveryTimeType: 1,
+      payType: 1,
+      buyerMessage: '',
+      goods: []
    })

2.绑定提交订单点击事件,进行提交即可
src/api/order.js 提交订单API函数

/**
 * 提交订单
 * @param {Object} order - 订单信息对象
 */
export const createOrder = (order) => {
  return request('/member/order', 'post', order)
}

src/views/member/pay/checkout.vue 提交订单文章来源地址https://www.toymoban.com/news/detail-400705.html

        <!-- 提交订单 -->
        <div class="submit">
          <XtxButton @click="submitOrder" type="primary">提交订单</XtxButton>
        </div>
    // 提交订单
    const router = useRouter()
    const submitOrder = () => {
      if (!requestParams.addressId) return Message({ text: '请选择收货地址' })
      createOrder(requestParams).then(data => {
        router.push({ path: '/member/pay', query: { id: data.result.id } })
      })
    }
    return { checkoutInfo, changeAddress, submitOrder }

到了这里,关于Vue3电商项目实战-结算&支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目实战-电商后台管理系统

    该项目为电商后台的管理系统。设计了登录页面。 管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面: 管理页面由五个子模块组成:用户管理,权限管理,商品管理,订单管理,数据统计; 每个子模块有若干子模块组成,用户管理下-用户列表

    2024年02月03日
    浏览(88)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

    模板代码 创建 srcviewsDetailindex.vue 文件,添加以下代码: 配置路由 在 srcrouterindex.js 中添加对应路由【 /detail/{goodId} 】: 链接跳转 对 srcviewsHomecomponentsHomeNew.vue 文件及其他涉及商品信息的页面修改路由跳转: 封装接口 在 srcapisdetail.js 文件中封装接口用于获取商品信息

    2024年02月10日
    浏览(56)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(八)登录页面

    登录页面的主要功能就是表单校验和登录登出业务。 account password cdshi0080 123456 cdshi0081 123456 cdshi0082 123456 cdshi0083 123456 cdshi0084 123456 cdshi0085 123456 cdshi0086 123456 cdshi0087 123456 cdshi0088 123456 模版代码 在 srcviewsLoginindex.vue 中添加登录页代码: 配置路由跳转 修改 srcviewsLayoutcompon

    2024年02月10日
    浏览(51)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

    通过 Counter 案例 体验Vue3新引入的组合式API 特点: 代码量变少 分散式维护变成集中式维护 ![image.png]( create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应 ![image.png]( 前置条件 - 已安装16.0或更高版本的Node.js 执行如下命令,这一指

    2024年03月17日
    浏览(55)
  • Vue+JS+Element UI实战(电商项目1)

    目录 1.电商业务概述 2.电商后台管理系统的功能 ​3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后台接口是否正常 6.登录/退出功能 1.登录概述 1.登录业务流程 2.登录业务的相关技术点 3.token原理  2.登录功能

    2024年02月05日
    浏览(39)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇:什么是pinia,1. 创建空Vue项目【附代码文档】

    Pinia 是 Vue 的专属状态管理库,可以实现跨组件或页面共享状态,是 vuex 状态管理工具的替代品,和 Vuex相比,具备以下优势 提供更加简单的API (去掉了 mutation ) 提供符合组合式API风格的API (和 Vue3 新语法统一) 去掉了modules的概念,每一个store都是一个独立的模块 搭配

    2024年03月21日
    浏览(46)
  • Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常

    微信使用腾讯x5内核,IOS使用系统浏览器内核;so,看看Android支付宝APP使用的内核是什么. 下拉看到支付宝使用的UC浏览器内核; 把浏览器内核检测工具 Browser kernel v2.6 测试查看浏览器内核版本用二维码生成,支付宝扫码进入查看浏览器内核版本;  浏览器内核版本是Chrome 69.0.3497

    2024年02月11日
    浏览(74)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(46)
  • 闲鱼/支付宝 自动收货诈骗套路分析

    他人闲鱼被骗经历 最近发现闲鱼有一种“自动收货”的套路,就是在闲鱼下单后,卖家发一个二维码,称让你支付运费,该二维码以闲鱼之类的logo为诱惑,让你相信是真的运费支付二维码 正如上文知乎所说,二维码是跳转到支付宝并打开一个骗子网页 那么骗子是如何在神不

    2024年02月03日
    浏览(30)
  • Vue3项目实战

    目录 一、项目准备 二、基础语法应用 2.1、mixin应用 2.2、网络请求 2.3、显示与隐藏 2.4、编程式路由跳转 2.5、下载资料 2.6、调用方法 2.7、监听路由变化 2.8、pinia应用 (1)存储token(user.js) (2)全选全不选案例(car.js) 下载: cnpm i unplugin-auto-import -D   //setup 语法糖插件 npm i -D @types

    2024年02月11日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包