上一篇: 带你进入异步Django+Vue的世界 - Didi打车实战(5)
后台创建订单、Channels群发群收
Demo: https://didi-taxi.herokuapp.com/
前端处理订单更新
用户登录后，针对乘客还是司机，显示不同的界面。
- 司机：不需要下单按钮，替换为抢单按钮
- 抢单页面，显示所有当前处于
REQUESTED状态的单子
image.png
更新一下导航栏
# /src/App.vue
...
computed: {
...mapState(['alert', 'user']),
menuItems () {
let items = [
{ icon: 'face', title: 'Register', route: '/sign_up' },
{ icon: 'lock_open', title: 'Login', route: '/log_in' }
]
if (this.userIsAuthenticated) {
items = this.user.group === 'driver' ? [
{ icon: 'notifications', title: 'Pending', route: '/all_requests' },
{ icon: 'exit_to_app', title: 'Exit', route: '' }
] : [
{ icon: 'local_taxi', title: 'Call', route: '' },
{ icon: 'exit_to_app', title: 'Exit', route: '' }
]
}
return items
},
新增路由：
# /src/router.js
{
path: '/all_requests',
name: 'all_requests',
component: Requests
},
Vue抢单页面：
# /views/Requests.vue
快来抢单
{{ card_text }}
{{ item.pick_up_address }} to {{ item.drop_off_address }}
{{ item.created | datefilter(true) }}
![]()
Start
{{ item.status }}
created: {{ item.created | datefilter }}
updated: {{ item.updated | datefilter }}
接单流程
-
打开浏览器窗口，以乘客身份下单：
显示REQUESTED状态，并且司机头像为灰色，说明暂时无人接单
image.png 打开浏览器隐身窗口，以司机角色登录
会显示提示：“有新的订单”
image.png
-
司机点击“START”，乘客端会显示“已接单”，并且显示司机的信息
image.png -
司机端则提示下一步操作为“Pick-Up”
image.png -
司机接到乘客后，点“Pick-Up”，提示下一步操作为“Drop-Off”
image.png -
司机到达目的地后，点“Drop-off”，订单结束！
image.png
以上步骤看起来很复杂，其实，我们之前已经搭建好框架，通过添加Vuex store的actions、mutations就可以了。
点击“Pick-up”之后，同一group里的成员，都会收到echo.message:
WS create.trip
在前一篇已经阐述了。
这里要添加的是：新订单创建后，司机群里的成员都能收到。
WS received:
{"type":"echo.message",
"data":{"...
","status":"REQUESTED"}}
我们在store里添加OnMessage，如果收到echo.message的Trip.status==REQUESTED，则通知司机们：
# /src/store/modules/ws.js
// handle msg from server
wsOnMessage ({ dispatch, commit }, e) {
const rdata = JSON.parse(e.data)
console.log('WS received: ' + JSON.stringify(rdata))
switch (rdata.type) {
case 'create.trip':
commit('setAlert', { type: 'info', msg: '成功添加订单' }, { root: true })
commit('messages/addTrip', rdata.data, { root: true })
break
case 'update.trip':
commit('setAlert', { type: 'info', msg: '成功更新订单' }, { root: true })
commit('messages/updateTrip', rdata.data, { root: true })
// driver redirect to Home.vue
router.push('/')
break
case 'echo.message':
switch (rdata.data.status) {
case 'REQUESTED':
commit('setAlert', { type: 'info', msg: '有新的订单！' }, { root: true })
commit('messages/updateTrip', rdata.data, { root: true })
// driver redirect to Requests.vue
router.push('/all_requests')
break
case 'STARTED':
...
}
break
}
WS update.trip
乘客和司机会同时收到两条：
WS received:
{"type":"update.trip",
"data":{"id":"6e446f7f-606d-488c-9274-f786b9f06800","driver":{"id":6,"username":"driver3","first_name":"","last_name":"","group":"driver"},"rider":{"id":2,"username":"rider1","first_name":"","last_name":"","group":null},"created":"2019-05-18T07:18:31.096533Z","updated":"2019-05-20T05:06:47.219332Z","pick_up_address":"南京","drop_off_address":"镇江","status":"STARTED"}}
WS received:
{"type":"echo.message",
"data":{"id":"6e446f7f-606d-488c-9274-f786b9f06800","driver":{"id":6,"username":"driver3","first_name":"","last_name":"","group":"driver"},"rider":{"id":2,"username":"rider1","first_name":"","last_name":"","group":null},"created":"2019-05-18T07:18:31.096533Z","updated":"2019-05-20T05:06:47.219332Z","pick_up_address":"南京","drop_off_address":"镇江","status":"STARTED"}}
同理，在/src/store/modules/ws.js里，针对Trip.status==XXX进行操作即可。
Vue页面处理
Requests.vue ，处理“Start”按钮：
# /src/views/Requests.vue
store里添加actions:
# /src/store/modules/ws.js
async createTrip ({ commit }, message) {
await wsService.createTrip(state.websocket.ws, message)
},
async updateTrip ({ commit }, message) {
await wsService.updateTrip(state.websocket.ws, message)
}
Home.vue ，不同状态，显示不同按钮
# /src/views/Home.vue
{{ item.pick_up_address }} to {{ item.drop_off_address }}
{{ item.created | datefilter(true) }}
![]()
account_circle
![]()
Pick-Up
Drop-off
{{ item.updated | datefilter(true)}}
司机已接单，飞奔而来
{{ item.updated | datefilter(true)}}
正驶往目的地
{{ item.status }}
created: {{ item.created | datefilter }}
updated: {{ item.updated | datefilter }}
Cancel