vue3仿美团项目(6)-生成订单及地址编辑

最新推荐文章于 2024-06-14 20:45:53 发布
最新推荐文章于 2024-06-14 20:45:53 发布
阅读量761 收藏
点赞数
分类专栏： vue3-project 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57469571/article/details/130834855
版权
该文详细描述了一个Vue.js应用中生成订单和地址管理的功能实现过程，包括点击结算跳转至订单页面、计算总价格、管理用户地址、编辑和新增地址的步骤。同时，文章提供了相关组件的代码示例，如CreateOrder.vue、MyOrder.vue、AddressEdit.vue等，展示了如何使用Vuex管理和传递数据，以及利用VueRouter进行页面跳转。
摘要由CSDN通过智能技术生成

一、主要实现的功能

1.点击结算,出现生成订单页面；

2.点击生成订单按钮，跳转到订单页面；

3.点击地址导航栏，进行地址管理；

4.可以进行地址编辑和新增地址；

二、生成订单步骤

    1.新建生成订单这个组件，路由配置，在购物车页面中点击结算测试能否跳转路由

    2.页面展示的数据,通过vuex传入 订单列表数组

    3.计算总价格(问题:在控制台能计算出总价格，但是在页面不展示总价格)

    4.初始化用户信息，找到购物车CartDetails.vue组件，路由中需要传递选中商品的数据

    5.订单生成成功后跳转到我的订单界面，订单数据也需要在此页面展示，需要在vuex添加一个已经完成后订单的数组（生成订单应该在vuex管理，并且是追加的）

    6.生成成功有弹窗提示，在购物车组件点击结算按钮跳转到订单页面时将需要进行结算的商品传过去；

    7.生成订单之后，跳转到订单页面，并且把购物车中的内容给过滤一遍(留下没有生成订单的数据)

三、地址编辑步骤

1.地址管理

    1.配置路由

    2.从vant中引入，搭建页面

    3.跳转路由到地址编辑

    4.修改路由传递参数（携带数据）,用来判断是编辑地址还是新增地址

2.地址编辑或添加

   1.从vant中引入搭建页面

    2.判断一下是编辑地址还是新增地址

    3.保存和删除方法实现

    4.在vuex中统一创建地址增加、编辑、删除方法

四、完整代码

1.createOrder->CreateOrder.vue

<template>
  <div class="create_order">
    <Header title="生成订单" />

    <van-contact-card
      type="edit"
      :tel="currentContact.tel"
      :name="currentContact.name"
      @click="onEdit"
    />
    <div class="content">
      <div v-for="(item, index) in store.state.orderList" :key="index">
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.title"
          :thumb="item.pic"
        />
      </div>
    </div>
    <van-submit-bar
      :price="initPrice() * 100"
      button-text="生成订单"
      @submit="onSubmit"
      button-color="#ffc400"
    />

    <Footer />
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { Dialog } from "vant";
export default defineComponent({
  name: "App",
  components: { Header, Footer },
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      currentContact: {
        name: "Mike",
        tel: 12345678896,
      },
      //   initPrice: 0,
    });
    // 初始化用户数据
    const initUser = () => {
      store.state.userAddress.forEach((item) => {
        if (item.isDefault) {
          data.currentContact.name = item.name;
          data.currentContact.tel = item.tel;
        }
      });
    };
    // 地址编辑
    const onEdit = () => {
      router.push("/address");
    };
    const initPrice = () => {
      let price = 0;
      if (store.state.orderList.length) {
        store.state.orderList.forEach((item) => {
          return (price += item.price * item.num);
        });
      }
      //   data.initPrice = price;
      return price;
    };
    onMounted(() => {
      initPrice();
      initUser();
    });
    // console.log("initPrice",data.initPrice);
    // console.log("initPrice", initPrice());
    // console.log("store", store.state.orderList);
    // 生成订单
    const onSubmit = () => {
      Dialog.alert({
        title: "提示",
        message: "恭喜您的订单已生成！",
      }).then(() => {
        // 在购物车中的数据清除
        // newList中存储的是为生成订单的数据
        let newList = store.state.cartList.filter((item) => {
          return !route.query.list.includes(item.id + "");
        });
        // 告诉vuex更新一下数据
        store.commit("DELETE", newList);
        store.commit("UPDATEORDER");
        router.push("/order");
      });
    };

    return {
      ...toRefs(data),
      onEdit,
      store,
      onSubmit,
      initPrice,
      router,
      route,
    };
  },
});
</script>
<style lang="less" scoped>
.create_order {
  flex: 1;
  position: relative;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-flow: column;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
.van-submit-bar {
  position: fixed;
  bottom: 52px;
  border-radius: 20px;
  //   font-size: 20px;
}

</style>

2.myOrder->MyOrder.vue

<template>
  <div class="order">
    <Header title="订单" />
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab v-for="(item, index) in navData" :key="index" :title="item">
          <div
            v-for="(i, ind) in store.state.orderListed"
            :key="ind"
            v-if="item == '全部' && store.state.orderListed.length"
          >
            <van-card
              :num="i.num"
              :price="i.price"
              :title="i.title"
              :thumb="i.pic"
            />
          </div>
          <Blank v-else />
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import Footer from "../../components/Footer.vue";
import Header from "../../components/Header.vue";
import Blank from "../../components/Blank.vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "App",
  components: { Footer, Header, Blank },
  setup() {
    const store = useStore();
    let data = reactive({
      navData: ["全部", "已完成交易", "待付款", "待发货", "已发货"],
    });
    // console.log();
    return {
      ...toRefs(data),
      store,
    };
  },
});
</script>
<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>

3.addressEdit->AddressEdit.vue

<template>
  <div class="address_edit">
    <Header :title="addTitle" />
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-delete
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
import Header from "../../components/Header.vue";
export default defineComponent({
  name: "App",
  components: { Header },
  setup() {
    let store = useStore();
    let router = useRouter();
    let route = useRoute();
    let data = reactive({
      areaList: {
        // 110000：省，加100：市，加1：区
        province_list: {
          110000: "黑龙江省",
          120000: "辽宁省",
        },
        city_list: {
          110100: "哈尔滨市",
          110200: "大庆市",
          120100: "沈阳市",
          120200: "大连市",
        },
        county_list: {
          110101: "南岗区",
          110102: "香坊区",
          120102: "铁西区",
          120202: "旅顺口区",
        },
      },
      addressInfo: {}, //地址初始化
    });
    const addTitle = computed(() => {
      return route.query.type == "add" ? "添加地址" : "编辑地址";
    });
    const init = () => {
      store.state.userAddress.forEach((item) => {
        if (item.id == Number(route.query.id)) {
          data.addressInfo = item;
        }
      });
    };
    onMounted(() => {
      init();
      //   console.log("编辑中的地址addressInfo", data.addressInfo);
    });
    const onSave = (content) => {
      if (route.query.type == "add") {
        // 添加id方法一
        if (store.state.userAddress.length) {
          content.id =
            Number(
              store.state.userAddress[store.state.userAddress.length - 1].id
            ) + 1;

          //添加id方法二
          // content.id =
          //   store.state.userAddress[0].id+
          //   store.state.userAddress.length;
          // store.commit("ADDADDRESS", content);
        } else {
          content.id = 1001;
        }
        Toast("恭喜,地址保存成功!");
      } else {
        store.commit("CHANGEADDRESS", content);
        Toast("恭喜，地址修改成功!");
      }
      setTimeout(() => {
        router.back();
      }, 1000);
    };
    const onDelete = (content) => {
      store.commit("DELETEADDRESS", content);
      Toast("地址信息已成功删除!");
      setTimeout(() => {
        router.back();
      }, 1000);
    };
    return {
      ...toRefs(data),
      onSave,
      onDelete,
      addTitle,
    };
  },
});
</script>
<style lang="less" scoped>
/deep/ .van-switch--on {
  background-color: #ffc400;
}
/deep/.van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
</style>

 4.address->Address.vue

<template>
  <div class="address">
    <Header title="地址管理" />
    <van-address-list
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import Header from "../../components/Header.vue";
import { useRouter} from "vue-router";
export default defineComponent({
  name: "App",
  components: { Header },
  setup() {
    let store = useStore();
    let router = useRouter();
    let data = reactive({
      list: [],
    });
    const init = () => {
      data.list = store.state.userAddress.map((item) => {
        return {
          id: item.id,
          name: item.name,
          tel: item.tel,
          address: `${item.province}${item.city}${item.county}${item.addressDetail}`,
          isDefault: !!item.isDefault, // !!表示强制转换为布尔类型
        };
      });
    };
    onMounted(() => {
      init();
    });
    const onAdd = () => {
      //   router.push("/addressEdit");
      router.push({
        path: "/addressEdit",
        query: {
          type: "add",
        },
      });
    };
    const onEdit = (item) => {
      //   router.push("/addressEdit");
      router.push({
        path: "/addressEdit",
        query: {
          type: "change",
          id:item.id
        },
      });
    };
    return {
      ...toRefs(data),
      onAdd,
      onEdit,
    };
  },
});
</script>
<style lang="less" scoped>
/deep/.van-radio__icon {
  display: none;
}
.van-tag {
  color: #ffc400;
}
/deep/.van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
</style>

5.router->index.js

import { createRouter, createWebHashHistory } from "vue-router"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/home",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/mine",
            component: () => import("../pages/mine/Mine.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/cart",
            component: () => import("../pages/myCart/MyCart.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/order",
            component: () => import("../pages/myOrder/MyOrder.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/store",
            component: () => import("../pages/store/MyStore.vue")
        },
        {
            path: "/createOrder",
            component: () => import("../pages/createOrder/CreateOrder.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/address",
            component: () => import("../pages/address/Address.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/addressEdit",
            component: () => import("../pages/addressEdit/AddressEdit.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/login",
            component: () => import("../pages/login/Login.vue")
        },
        {
            path: "/regist",
            component: () => import("../pages/regist/Regist.vue")
        }


    ]
})

export default router

6.store->index.js

import { createStore } from "vuex";
export default createStore({
    state: {
        cartList: [],// 购物车列表
        orderList: [],//结算列表
        orderListed: [],//已完成订单
        edit: true,  // 默认编辑状态
        // 用户地址数据
        userAddress: [
            {
                id: 1001,
                name: '小明',
                tel: '13123456731',
                province: '黑龙江省',
                city: '哈尔滨市',
                county: '南岗区',
                addressDetail: 'asd',
                isDefault: true,
                areaCode: '110101',
            },
            {
                id: 1002,
                name: '张三',
                tel: '13123456731',
                province: '黑龙江省',
                city: '哈尔滨市',
                county: '香坊区',
                addressDetail: 'asd',
                isDefault: false,
                areaCode: '110101',
            },
        ],

    },
    // 处理数据的逻辑方法
    mutations: {
        ADDCART(state, value) {
            state.cartList = value
        },
        PAY(state, value) {
            state.orderList = value
        },
        DELETE(state, value) {
            state.cartList = value
        },
        EDIT(state, value) {
            if (value == "delete") {
                state.edit = true
            } else {
                state.edit = !state.edit
            }
        },
        //生成订单,追加
        UPDATEORDER(state) {
            state.orderListed = state.orderListed.concat(state.orderList)
        },
        // 添加地址
        ADDADDRESS(state, value) {
            state.userAddress.map(item => {
                // 判断一下是否是默认的，
                if (value.isDefault) {
                    item.isDefault = false
                }
            })
            state.userAddress.push(value)
        },
        // 编辑地址
        CHANGEADDRESS(state, value) {
            state.userAddress = state.userAddress.map(item => {
                // 如果编辑的是默认地址，需要循环遍历将所有的设置为false
                if (value.isDefault) {
                    item.isDefault = false
                }
                return item.id === value.id ? value : item
            })
        },
        // 删除地址
        DELETEADDRESS(state, value) {
            // 将删除之后剩余的数据过滤出来
            state.userAddress = state.userAddress.filter(item => {
                return !(value.id === item.id)
            })
            // 删除的是默认地址并且删除完之后还有别的地址，则第一条为默认的
            if (value.isDefault && state.userAddress.length) {
                // 并没有走到这里
                console.log("11111");
                state.userAddress[0].isDefault = true
            }
        }

    },
    actions: {

    }
})

 五、上传git

 

 

 

一起来学计算机
关注
专栏目录
美团 生成器问题
suv1234的博客
06-03 2048
可能是没吃饭就去面试了，一塌糊涂，好尴尬，生成器竟然卡壳了···，问的随机数生成器生成1、2、3的概率相等，都为1/3，问如何设计生成器，使得生成1、2、3的概率为0.5、0.3、0.2. 先整体总结一下之前的生成器的问题 1给定一个随机生成器fun()，生成0和1的概率分别为0.5，那么如何构造一个生成0和1的概率分别是0.3和0.7的随机生成器？ 可以考虑将其生成的数字0,1进行组合
Vue3仿美团项目--第四天
m0_65841675的博客
01-13 1951
学习历程....Vue3仿美团项目笔记....第四天
vue购物车支付生成订单
_小郑有点困了的博客
03-13 2948
首先从购物车拿来数据，然后点击提交订单，这时候同时去选择地址，查询选择id的那一条信息地址拿过来。此时会有两种操作， 1.点击返回，向订单数据库push数据之前，给他一个状态码，代表着待支付，生成待支付订单。 2.点击支付，给他一个状态吗，生成待收货订单 3.在订单中，分几个页面显示，即，通过状态码在created生命周期函数中进行查询该状态的订单，放于对应页面 4.在一些页面中可以点击，去支付，...
Vue 订单(查询+展示+收货地址)
热门推荐
weixin_47906106的博客
03-03 1万+
1. 获取订单列表数据 新建文件 index.js中配置路由 { path: '/orders', component: () => import ('../components/order/Orders.vue') }, 是否付款列使用elemenui =》Tab标签 提示信息是否可移入 :enterable="false" <template>
商城项目 ------ 订单的生成功能(vue实现)
qq_42939166的博客
02-20 5480
商城项目 ------ 订单的生成功能(vue实现) 首先理一下思路,订单功能应该是商场项目中最复杂的功能之一。 关键:其实还是一步一步想清楚了，其实分开慢慢来，还是可以做出来的。 首先我们购物的的顺序，是先将商品添加至购物车，然后在购物车中选中某一件(某一些)商品，然后提交到下一步，下一步是确认订单的页面，主要包括你要购买的商品的信息以及你的地址等信息然后填写到数据库中，随之要也要删掉前面购物车中的数据，然后生成订单。 直接看实际列子: 购物车的样子 购物车图1 然后我们要选中商品提交，那么我们勾选
系列文章--Vue实现订单管理系统
晴天雨的专栏
10-05 124
通过现阶段流行的前端框架VUE实现订单后台管理系统的系列文章，包括从零创建，以前后端分离的方式进行开发，注重过程和流程化。
Vue3仿美团项目--第五天
m0_65841675的博客
01-14 938
学习历程--Vue3仿美团项目笔记.......fighting......
基于Vue+Node.js+MongoDB的仿美团外卖系统开发
这通常包括安装Node.js运行环境、npm（Node.js的包管理器）来管理项目依赖、MongoDB数据库系统，以及Vue CLI工具来快速生成Vue项目模板。开发者还需要对开发工具链有所了解，比如编辑器（如Visual Studio Code）的...
32个uniapp项目源码 涵盖商城团购等-网盘链接提取码下载.txt
10-04
- **Mpvue**：基于Vue.js的核心库，用于开发微信小程序的前端框架，可以将Vue.js的语法和特性无缝迁移到小程序开发中。 - **兼容Web**：通过配置和适配技术，使得原本为小程序编写的代码能够在Web环境中运行。 ##...
web前端不用怕，外卖平台的项目开发流程，大全！！
weixin_53000915的博客
03-06 3210
项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.com:W-Qing/Vue-MintShop.git cd Vue-MintShop #创建客户端项目 vue init webpack mintshop-client cd mintshop-client npm install npm run dev 访问: localhost:8080 1.2 项目结构
用Vue全家桶搭建的商品订单管理系统
08-12
用 Vue 全家桶搭建的商品订单管理系统
vue实现淘宝购物车功能
10-15
主要为大家详细介绍了vue实现淘宝购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue购物车商品订单详情页面代码.zip
07-04
vue购物车商品订单详情页面代码是一款网上商城商品购买购物车地址及付款详情页，收货人信息添加修改，支付方式选择，送货清单，发票信息，使用优惠券等订单功能。
Springboot+vue网上商城之订单功能
qq_22593423的博客
09-10 452
本博客将介绍如何使用Spring Boot和Vue开发一个网上商城的订单功能。该功能包括选择地址、选择优惠券以及根据会员等级自动抵扣优惠金额等功能。
【Vue】提交订单并支付
最新发布
qq_39921135的博客
06-14 209
1 封装 API 通用方法（统一余额支付）3 注册点击事件，提交订单并支付。
Vue+element 订单相关业务实现
benlalagang的博客
09-03 1253
订单相关业务实现、面包屑导航、卡片包裹、组合输入框、渲染表格、分页器、作用域插槽传入参数、操作按钮对应各自的回调。
仿美团商品列表显示
zzq的博客
06-30 3429
仿美团商品列表显示 左边显示种类、右边显示种类中的详细 选中后加入购物车、可以清空购物车 直接上图看效果: 1,展示页面 2，选择商品后 两遍都有相应数量显示 3，你选择好后的商品也会在购物车中展示 OK    满足你要求的请拿走 源码下载地址：  点击打开链接 //---------end--
仿美团点餐列表android,仿美团，菜单列表，购物车结算
weixin_29517217的博客
06-03 812
var app = getApp()var common = require('../../utils/server.js');Page({data: {orderList: [],count: 0,total: 0,pay: 0,is_empty: false},onLoad: function (option) {if(option.pay){var pay = option.pay;if(p...
android仿美团详情页,仿美团详情页与购物车源码-订单页
weixin_35056641的博客
06-04 510
(function(){//订单卡片模版var itemTmpl = ''+''+ ''+''+''+'$poi_name'+''$status_description'+''+'$getProduct'+''+''+'$getComment'+'';/*** 渲染评价按钮* @param {}*/functiongetComment(data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值