Vue3电商项目实战-结算支付 2【03-结算-对话框组件封装、04-结算-收货地址-切换】

news/2024/11/7 15:29:00/

文章目录

    • 03-结算-对话框组件封装
    • 04-结算-收货地址-切换

03-结算-对话框组件封装

目的：实现一个对话框组件可设置标题，动态插入内容，动态插入底部操作按钮，打开关闭功能。

在这里插入图片描述

大致步骤：

  • 参照xtx-confirm定义一个基础布局
  • 实现设置标题
  • 实现插入内容
  • 实现插入底部操作按钮
  • 实现打开关闭功能

落的代码：

1.参照xtx-confirm定义一个基础布局
src/components/library/xtx-dialog.vue 定义组件

<template><div class="xtx-dialog" :class="{fade}"><div class="wrapper" :class="{fade}"><div class="header"><h3>切换收货地址</h3><a href="JavaScript:;" class="iconfont icon-close-new"></a></div><div class="body">对话框内容</div><div class="footer"><XtxButton type="gray" style="margin-right:20px">取消</XtxButton><XtxButton type="primary">确认</XtxButton></div></div></div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {name: 'XtxDialog',setup () {const fade = ref(false)onMounted(() => {// 结构和样式同时加上无过度效果，需要些延时。setTimeout(() => {fade.value = true}, 0)})return { fade }}
}
</script>
<style scoped lang="less">
.xtx-dialog {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 8887;background: rgba(0,0,0,0);&.fade {transition: all 0.4s;background: rgba(0,0,0,.5);}.wrapper {width: 600px;background: #fff;border-radius: 4px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-60%);opacity: 0;&.fade {transition: all 0.4s;transform: translate(-50%,-50%);opacity: 1;}.body {padding: 20px 40px;font-size: 16px;.icon-warning {color: @priceColor;margin-right: 3px;font-size: 16px;}}.footer {text-align: center;padding: 10px 0 30px 0;}.header {position: relative;height: 70px;line-height: 70px;padding: 0 20px;border-bottom: 1px solid #f5f5f5;h3 {font-weight: normal;font-size: 18px;}a {position: absolute;right: 25px;top: 25px;font-size: 24px;width: 20px;height: 20px;line-height: 20px;text-align: center;color: #999;&:hover {color: #666;}}}}
}
</style>

src/views/member/pay/components/checkout-address.vue 使用组件

<XtxDialog />

2.实现设置标题
src/components/library/xtx-dialog.vue 定义组件

  props: {title: {type: String,default: ''}},

      <div class="header"><h3>{{title}}</h3><a href="JavaScript:;" class="iconfont icon-close-new"></a></div>

src/views/member/pay/components/checkout-address.vue 使用组件

<XtxDialog title="切换收货地址" />

3.实现插入内容
src/components/library/xtx-dialog.vue 定义组件

      <div class="body">
+        <slot /></div>

src/views/member/pay/components/checkout-address.vue 使用组件

<XtxDialog title="切换收货地址" >对话框内容
</XtxDialog>

4.实现插入底部操作按钮
src/components/library/xtx-dialog.vue 定义组件

      <div class="footer">
+        <slot name="footer" /></div>

src/views/member/pay/components/checkout-address.vue 使用组件

    <XtxDialog title="切换收货地址">对话框内容<!-- vue3.0 仅支持v-slot+template写法 -->  <template v-slot:footer><XtxButton type="gray" style="margin-right:20px">取消</XtxButton><XtxButton type="primary">确认</XtxButton></template></XtxDialog>

5.实现打开关闭功能

  • 1.打开关闭通过v-model来实现
  • 2.动画根据打开关闭状态来控制

src/components/library/xtx-dialog.vue 定义组件

<div class="xtx-dialog" :class="{fade}" v-show="visible">

import { ref, watch } from 'vue'
export default {name: 'XtxDialog',props: {title: {type: String,default: ''},visible: {type: Boolean,default: false}},setup (props, { emit }) {const fade = ref(true)// 改造动画执行时机watch(() => props.visible, () => {setTimeout(() => {fade.value = props.visible}, 0)}, { immediate: true })// 关闭的时候通知父组件const close = () => {emit('update:visible', false)}return { fade, close }}
}

src/views/member/pay/components/checkout-address.vue 使用组件

    <div class="action">
+      <XtxButton @click="dialogVisible=true" class="btn">切换地址</XtxButton><XtxButton class="btn">添加地址</XtxButton></div>
+    <XtxDialog title="切换收货地址" v-model:visible="dialogVisible">对话框内容<template v-slot:footer>
+        <XtxButton @click="dialogVisible=false" type="gray" style="margin-right:20px">取消</XtxButton>
+        <XtxButton @click="dialogVisible=false" type="primary">确认</XtxButton></template></XtxDialog>

    // 对话框显示隐藏const dialogVisible = ref(false)return { dialogVisible }

04-结算-收货地址-切换

目的：能够切换当前显示的地址，且通知结算组件当前地址ID用于提交订单使用。

在这里插入图片描述

大致步骤：

  • 组件初始化的时候需要得到一个默认的地址ID通知给结算组件
  • 对话框中渲染一个地址列表
  • 实现可以选中的效果，点击确认后变更显示地址，通知结算组件地址ID

落地代码：

1.组件初始化的时候需要得到一个默认的地址ID通知给结算组件
地址组件 components/checkout-address.vue

   // 对话框显示隐藏const dialogVisible = ref(false)
+    // 默认通知一个地址ID给父
+    emit('change', showAddress.value?.id)return { showAddress, dialogVisible }

  // 1. 在拥有根元素的组件中，触发自定义事件，有没有emits选项无所谓// 2. 如果你的组件渲染的代码片段，vue3.0规范，需要在emits中申明你所触发的自定义事件// 3. 提倡：你发了自定义事件，需要在emits选项申明下，代码可读性很高emits: ['change'],

结算组件 checkout.vue

    // 需要提交的字段const requestParams = reactive({addressId: null})// 切换地址const changeAddress = (id) => {requestParams.addressId = id}return { checkoutInfo, changeAddress }

<CheckoutAddress @change="changeAddress" :list="checkoutInfo.userAddresses" />

2.对话框中渲染一个地址列表
地址组件 components/checkout-address.vue

    <XtxDialog title="切换收货地址" v-model:visible="dialogVisible">
+      <div class="text item" v-for="item in list" :key="item.id">
+        <ul>
+          <li><span>收<i/>货<i/>人：</span>{{item.receiver}}</li>
+          <li><span>联系方式：</span>{{item.contact}}</li>
+          <li><span>收货地址：</span>{{item.fullLocation.replace(/ /g,'')+item.address}}</li>
+        </ul>
+      </div><template v-slot:footer>

.xtx-dialog {.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;}}}
}

3.实现可以选中的效果，点击确认后变更显示地址，通知结算组件地址ID
地址组件 components/checkout-address.vue

  // 对话框显示隐藏const dialogVisible = ref(false)// 打开对话框const openDialog = () => {dialogVisible.value = trueselectedAddress.value = null}// 确认地址const confirmAddress = () => {dialogVisible.value = falseshowAddress.value = selectedAddress.value// 默认通知一个地址ID给父emit('change', showAddress.value?.id)}// 选择的地址const selectedAddress = ref(null)return { showAddress, dialogVisible, selectedAddress, openDialog, confirmAddress }

    <XtxDialog title="切换收货地址" v-model:visible="dialogVisible"><divclass="text item"
+        :class="{active:selectedAddress&&item.id===selectedAddress.id}"
+        @click="selectedAddress=item"v-for="item in list":key="item.id"><ul>

<XtxButton @click="openDialog()" class="btn">切换地址</XtxButton>

<XtxButton @click="confirmAddress()" type="primary">确认</XtxButton>

http://www.ppmy.cn/news/31677.html

相关文章

Day913.反向代理和网关是什么关系 -SpringBoot与K8s云原生微服务实践

Day913.反向代理和网关是什么关系 -SpringBoot与K8s云原生微服务实践

反向代理和网关是什么关系 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于反向代理和网关是什么关系的内容。 一、反向代理 反向代理 是一种网络技术&#xff0c;用于将客户端的请求转发到一个或多个服务器上&#xff0c;并将响应返回给客户端。与正向代理不同&am…
阅读更多...
字符函数和字符串函数详解(1)

字符函数和字符串函数详解(1)

目录前言strlen函数strlensizeofstrcpy函数strcat函数strcmp函数总结前言 最近要调整状态&#xff0c;写的文章质量不佳让大家失望&#xff0c;我现在也在反思我在做什么&#xff0c;我会什么&#xff0c;我学了什么。等我想明白的那天&#xff0c;我一定能跟大家顶峰相见的&a…
阅读更多...
带恒温冷藏功能的便携式自动采样器——可用于毒情监测

带恒温冷藏功能的便携式自动采样器——可用于毒情监测

污水采样在验毒的工作流程中是怎样进行的呢&#xff1f; 污水采样&#xff1a;每个季度采样一次。例如在某市48家污水处理厂54个进水口采取水样&#xff0c;用便携式水质自动采样器连续采样7天&#xff0c;一天采样12次成为一个混合样。也就是说&#xff0c;一次采样的话&…
阅读更多...
axios 封装，API接口统一管理

axios 封装，API接口统一管理

分享一个自己封装的 axios 网络请求 主要的功能及其优点&#xff1a; 将所有的接口放在一个文件夹中管理&#xff08;api.js&#xff09;。并且可以支持动态接口&#xff0c;就是 api.js 文件中定义的接口可以使用 :xx 占位&#xff0c;根据需要动态的改变。动态接口用法模仿…
阅读更多...
华为OD机试题 - 最少数量线段覆盖（JavaScript）| 机考必刷

华为OD机试题 - 最少数量线段覆盖（JavaScript）| 机考必刷

更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：最少数量线段覆盖题目输入输出示例一输入输出说明Code解题思路版…
阅读更多...
Element-UI实现复杂table表格结构

Element-UI实现复杂table表格结构

Element-UI组件el-table用于展示多条结构类似的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。将使用到以下两项&#xff0c;来完成今天demo演示&#xff1a;多级表头&#xff1a;数据结构比较复杂的时候&#xff0c;可使用多级表头来展现数据的层次关系。合…
阅读更多...
vscode环境配置(支持跳转，阅读linux kernel)

vscode环境配置(支持跳转，阅读linux kernel)

目录 1.卸载clangd插件 2.安装C插件 3. 搜索框内输入 “intell”&#xff0c;将 C_Cpp&#xff1a;Intelli Sense Engine 开关设置为 Default。 4.ubuntu安装global工具 5.vscode安装插件 6.验证是否生效 7.建立索引 1.卸载clangd插件 在插件管理中卸载clangd插件 2.安…
阅读更多...
海思ubootsd卡协议

海思ubootsd卡协议

在start_armboot()函数中调用mmc_initialize(0)初始化mmc;最终调用到int hi_mci_initialize(unsigned int dev_num)函数;内容如下:static int hi_mci_initialize(unsigned int dev_num) {struct mmc *mmc NULL;static struct himci_host *host;unsigned int regval;unsigned l…
阅读更多...
最新文章

Copyright @ 2022~2023