项目--6

1、回顾

1.1 不允许用户缩放页面

userscable=no

<meta name="viewport" content="width=device-width,initial-scale=1.0,userscable=no">

1.2 分类的状态管理

1.3 mapActions辅助函数

methods: {
  ...mapActions({
    getKindlist: 'getKindlist' // 自动生成一个函数 this.$store.dispatch('getKindlist') key值为组件自定义的函数，value为状态管理器action的名字，在需要的地方触发 自定义的函数即可
  }),
}
// 在需要的地方 直接通过 this.getKindlist() 调用即可

1.4 命名空间

• 如果多个模块的actions的名字相同，谁最后引入，就用谁的，为了避免此种情况，定义store时添加属性 namespaced: true，调用时前面加 模块,比如 '/kind/getProlist'

2、提交订单

• 获取产品id，获取用户id，获取商品的数量 ---- 生成订单
• 购物车id --- 删除

点击提交订单，通过flag获取选中的数据，先清空再获取

<li @click="submitOrder">
  提交订单
</li>

data () {
  return {
    cartlist: [],
    arr: [], // 用来保存选中的信息 // +++++++++++++++++++++
    flag: false, // false 表示没有数据
    all: true
  }
},
methods: {
  submitOrder () {
    this.arr = []
    this.cartlist.map(item => {
      if (item.flag) {
        this.arr.push(item)
      }
    })
    console.log(this.arr)
  }
}

3、订单相关接口

3.1 day06/myapp/routes/order.js + app.js

3.2 设计数据库集合 sql/collection/orders.js

const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

// 设计用户表的集合
const orderSchema = new Schema({ // 设计用户集合的字段以及数据类型
  orderid: {type: String },
  userid: { type: String },
  status: { type: Number }, // 订单状态 0 待付款 1 待收货（已支付） 2 待评价 3 全部订单
  list: { type: Array }
})

module.exports = mongoose.model('Order', orderSchema);

3.3 生成订单接口

router.get('/add', (req, res, next) => {
  // res.send(req.query)
  // 1、获取前端提交的订单数据 "[{},{},{}]" -- 转成对象
  let list = JSON.parse(req.query.str)
  let userid = req.query.userid // 获取用户id
  let orderid = 'order_' + uuid.v1() // 生成订单的id
  let arr = [] // 订单列表数据
  // res.send(list)
  list.map(item => { // 遍历数据，获取订单的信息
    arr.push({
      proid: item.proid,
      proimg: item.proimg,
      proname: item.proname,
      price: item.price * 1,
      num: item.num * 1
    })
  })
  // 插入数据库
  sql.insert(Order, {
    orderid: orderid,
    userid: userid,
    status: 0, // 订单状态 0 待付款 1 待收货（已支付） 2 待评价
    list: arr
  }).then(() => {
    res.send({
      code: '200',
      message: '生成订单'
    })
  })
})

3.4 生成订单删除购物车 --- promise.all 解决异步循环问题

router.get('/add', (req, res, next) => {
  // res.send(req.query)
  // 1、获取前端提交的订单数据 "[{},{},{}]" -- 转成对象
  let list = JSON.parse(req.query.str)
  let userid = req.query.userid // 获取用户id
  let orderid = 'order_' + uuid.v1() // 生成订单的id
  let arr = [] // 订单列表数据
  // res.send(list)
  list.map(item => { // 遍历数据，获取订单的信息
    arr.push({
      proid: item.proid,
      proimg: item.proimg,
      proname: item.proname,
      price: item.price * 1,
      num: item.num * 1
    })
  })
  // 插入数据库
  sql.insert(Order, {
    orderid: orderid,
    userid: userid,
    status: 0, // 订单状态 0 待付款 1 待收货（已支付） 2 待评价
    list: arr
  }).then(() => {
    // 生成订单后要删除购物车的数据
    let p1 = list.map(item => {
      return sql.delete(Cart, { cartid: item.cartid })
    })

    return Promise.all(p1)
  }).then(() => {
    res.send({
      code: '200',
      message: '生成订单',
      data: { // 用于在确认订单页面 查询订单的信息
        orderid: orderid
      }
    })
  })
})

3.5 查看订单

// 订单
router.get('/', function(req, res, next) {
  // 获取订单的状态
  let status = req.query.status
  // 查询订单的信息 用户id和订单的id
  let findData = { userid: req.query.userid, orderid: req.query.orderid }
  if (status) { // 如果没有传值，那么查询全部的数据
    findData.status = status
  }
  sql.find(Order, findData, { _id: 0 }).then(data => {
    res.send({
      code: '200',
      message: '订单列表',
      len: data.length,
      data: data
    })
  })
});

4、订单页面

4.1 购物车页面提交订单

views/cart/index.vue

submitOrder () {
  this.arr = [] // 生成订单所要使用的数据
  this.cartlist.map(item => { // 遍历购物车的数据
    if (item.flag) { // 如果当前是选中的数据
      this.arr.push(item) // 更新订单的数据
    }
  })
  console.log(this.arr)
  if (this.arr.length === 0) { // 如果没有选中商品
    Toast('请先添加商品')
    return
  }
  // 将此数据提交到服务器 ---- 产品的信息和 用户的id
  axios.get('/order/add?str=' + JSON.stringify(this.arr) + '&userid=' + localStorage.getItem('userid')).then(res => {
    console.log('order', res.data)
    // 提交订单成功 --- 跳转到订单页面 ---- 基础一定要传递 orderid
    this.$router.push('/order?orderid=' + res.data.data.orderid)
  })
}

4.2 订单页面

views/order/index.vue

• 基本结构

• js

import axios from '@/utils/request'
export default {
  data () {
    return {
      orderlist: []
    }
  },
  created () {
    console.log(this.$route.query)
    // 用户id
    const userid = localStorage.getItem('userid')
    // 依据用户id以及订单id 查询获取订单列表的信息
    // 订单id由this.$route.query
    axios.get('/order?userid=' + userid + '&orderid=' + this.$route.query.orderid).then(res => {
      console.log('order111', res.data)
      // 更新订单的信息 -- 一定要注意层级关系----各个字段代表的含义
      this.orderlist = res.data.data[0].list
    })
  }
}

5、确认订单页面需要 收货人姓名、联系方式、收获地址、备注

5.1 修改数据库集合 sql/collection/orders.js

const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

// 设计用户表的集合
const orderSchema = new Schema({ // 设计用户集合的字段以及数据类型
  orderid: {type: String },
  userid: { type: String },
  status: { type: Number }, // 订单状态 0 待付款 1 待收货（已支付） 2 待评价 3 全部订单
  name: { type: String }, // 收货人
  tel: { type: String }, // 手机
  address: { type: String }, // 地址
  note: { type: String }, // 备注
  list: { type: Array }
})

module.exports = mongoose.model('Order', orderSchema);

5.2 修改提交订单的接口 routes/order.js

router.get('/add', (req, res, next) => {
  // res.send(req.query)
  // 1、获取前端提交的订单数据 "[{},{},{}]" -- 转成对象
  let list = JSON.parse(req.query.str)
  let userid = req.query.userid // 获取用户id
  let orderid = 'order_' + uuid.v1() // 生成订单的id
  let arr = [] // 订单列表数据
  // res.send(list)
  list.map(item => { // 遍历数据，获取订单的信息
    arr.push({
      proid: item.proid,
      proimg: item.proimg,
      proname: item.proname,
      price: item.price * 1,
      num: item.num * 1
    })
  })
  // 插入数据库
  sql.insert(Order, { // **************************
    orderid: orderid,
    userid: userid,
    status: 0, // 订单状态 0 待付款 1 待收货（已支付） 2 待评价
    name: '', // +++++++++
    tel: '', // +++++++++
    address: '', // +++++++++
    note: '', // +++++++++
    list: arr
  }).then(() => {
    // 生成订单后要删除购物车的数据
    let p1 = list.map(item => {
      return sql.delete(Cart, { cartid: item.cartid })
    })

    return Promise.all(p1)
  }).then(() => {
    res.send({
      code: '200',
      message: '生成订单',
      data: { // 用于在确认订单页面 查询订单的信息
        orderid: orderid
      }
    })
  })
})

6、添加地址管理

• routes/address.js + sql/collection/addresss.js + app.js

6.1 sql/collection/addresss.js

const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

// 地址集合
const addressSchema = new Schema({ // 地址集合
  addressid: {type: String },
  userid: { type: String },
  name: { type: String },
  tel: { type: String },
  address: { type: String },
  flag: { type: Number } // 是不是默认地址 1 表示默认地址 0 不是默认地址
})

module.exports = mongoose.model('Address', addressSchema);

6.2 设计后端的地址添加的路由

router.post('/add', (req, res, next) => {
  let { userid, name, tel, address, flag } = req.body
  flag = flag * 1 || 0
  let addressid = 'address_' + uuid.v1()
  sql.insert(Address, { userid, name, tel, address, flag, addressid }).then(() => {
    res.send({
      code: '200',
      message: '添加地址成功'
    })
  })
})

6.3 实现前端的添加地址界面

views/address/add.vue + router/index.js

<template>
  <div class="box">
    <header class="header">添加地址</header>
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit, Toast } from 'vant'
import city from '@/utils/city'
Vue.use(AddressEdit)

export default {
  data () {
    return {
      areaList: city,
      searchResult: []
    }
  },
  methods: {
    onSave (content) {
      console.log(content)
      Toast('save')
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

6.4提交地址

onSave (content) {
  console.log(content)
  axios.post('/address/add', {
    userid: localStorage.getItem('userid'),
    name: content.name,
    tel: content.tel,
    address: content.province + content.city + content.county + content.addressDetail,
    flag: content.isDefault
  }).then(() => {
    Toast('添加地址成功')
    // this.$router.back()
  })
},

6.5 获取默认地址 以及获取地址列表接口

router.get('/', function(req, res, next) {
  let { userid, flag } = req.query
  flag = flag * 1 || 0
  sql.find(Address, { userid, flag }, { _id: 0 }).then(data => {
    if (data.length === 0) {
      res.send({
        code: '30000',
        message: '没有默认地址'
      })
    } else {
      res.send({
        code: '200',
        message: '获取地址',
        data: data
      })
    }
    
  })
});

7、确认订单页面显示地址信息

<ul v-if="flag">
  <li v-for="item of addresslist" :key="item.addressid">
    {{ item.name }} - {{ item.tel }} - {{ item.address }}
  </li>
</ul>
<div v-else>没有默认地址
  <router-link to="/addAddress">添加地址</router-link>
</div>
data () {
  return {
    orderlist: [],
    addresslist: [],
    flag: false
  }
},
created () {
  console.log(this.$route.query)
  const userid = localStorage.getItem('userid')
  axios.get('/order?userid=' + userid + '&orderid=' + this.$route.query.orderid).then(res => {
    console.log('order111', res.data.data[0].list)
    this.orderlist = res.data.data[0].list
  })

  // +++++++++++++++++++++++++ 
  axios.get('/address?userid=' + userid + '&flag=1').then(res => {
    console.log('addresss', res.data.data)
    if (res.data.code === '30000') {
      this.flag = false
    } else {
      this.flag = true
      this.addresslist = res.data.data
    }
  })
}