Vue 学习Day10 阻止双击屏幕放大/去结算/确认订单/地址列表

阻止屏幕双击放大

在这里插入图片描述

去结算

  • 依据选中的产品,生成相应的订单(订单号,订单相关的信息),跳转到确认订单页面

后端

  • 订单的集合

在这里插入图片描述

  • 添加订单的接口设计
var express = require('express');
var router = express.Router();
var Order = require('./../sql/col/orders')
var Address = require('./../sql/col/address')
var sql = require('./../sql')
var uuid = require('node-uuid')

router.get('/', function(req, res, next) {
  res.send('订单接口')
});



/**
 * @api {post} api/order/add 生成订单
 * @apiDescription 生成订单
 * @apiGroup order
 * @apiParam { string } userid 用户id
 * @apiParam { string } orderlist [{}, {}]
 * @apiSuccessExample { json } Success-Response:
 * {
 *  code: '200',
 *  message: '生成订单,去确认订单',
 *  orderid
 * }
 * @apiSampleRequest /api/order/add
 * @apiVersion 1.0.0
 */
router.post('/add', function(req, res, next) {
  // 获取用户的 id , 产品的数据列表
  // orderlist为前端穿的数据,需要转换为对象
  let { userid, orderlist } = req.body
  // 准备订单列表数据
  orderlist = JSON.parse(orderlist)
  // 生成订单插入的数据
  sql.find(Address,{ userid, isDefault: 1 },{ _id: 0 }).then(data => {
    let userinfo = {
      flag: 0, // 有没有地址信息, 1为有 0为没有
      name: '',
      tel: '',
      province: '',
      city: '',
      county: '',
      addressDefault: ''
    }
    // 有默认地址
    if (data.length !== 0) {
      userinfo = {
        flag: 1, // 有没有地址信息, 1为有 0为没有
        name: data[0].name,
        tel: data[0].tel,
        province: data[0].province,
        city: data[0].city,
        county: data[0].county,
        addressDefault: data[0].addressDefault
      }
    }
    const orderid = `order_` + uuid.v1()
    const insertData = {
      orderid,
      userid,
      status: 0,
      userinfo,
      orderlist
    }
    console.log(orderid)
    sql.insert(Order,insertData).then(() => {
      res.send({
        code: '200',
        message: '生成订单,去确认订单',
        orderid
      })
    })
  })
});

module.exports = router;

  • 设计配送地址相关的集合
    在这里插入图片描述

前端

  • 购物车页面点击 去结算时,生成订单并且跳转

在这里插入图片描述

  • 封装添加订单的数据请求
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 修改路由
    在这里插入图片描述
    在这里插入图片描述

确认订单

后端

  • 依据 订单id 获取 订单的详细数据
    在这里插入图片描述
    在这里插入图片描述

前端

  • 查询order方法
    在这里插入图片描述
  • order页面获取信息
    在这里插入图片描述
  • 提取数据
    在这里插入图片描述
  • 渲染页面
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 确认订单页面的 配送信息
    在这里插入图片描述
  • 订单竟然没有支付的金额
    • 后端
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    • 前端
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

点击确认订单地址进入地址列表

依据用户的id 获取相应的 地址信息

  • 完成添加地址

后端

  • 生成地址管理的相关接口
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 获取前端添加地址的数据

  • 修改添加地址的组件名称为 AddressAdd.vue
    在这里插入图片描述

  • 修改路由文件 router/index.js
    在这里插入图片描述

  • 地址列表页面 更改跳转的路由
    在这里插入图片描述

  • 后端

  • 添加地址
    在这里插入图片描述
    在这里插入图片描述
    生成接口文档测试 发现,可以插入多个默认地址

    • 插入数据库时,如果当前为默认地址,先更新所有的地址为非默认地址,再执行插入

在这里插入图片描述

前端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

地址列表页面更新与渲染

  • 后端 实现获取地址列表的接口
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 前端 负责渲染数据
    在这里插入图片描述
    在这里插入图片描述
发布了48 篇原创文章 · 获赞 0 · 访问量 1747

猜你喜欢

转载自blog.csdn.net/ZywOo_/article/details/105078230