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
}
})
}