Men的博客

欢迎光临!

0%

JavaScript Call 应用

我们项目中经常会用到订单的场景,订单往往是一个列表,列表总是有一些方便我们快速点击的按钮
比如说待支付的订单,会有立即支付的按钮
但是同样的订单详情一定会有相同的按钮,相同的功能。
但是我们不能将业务逻辑在列表实现一遍后再去详情去实现一遍吧?
这样不光是浪费代码,还浪费时间。
一个功能如果需要修改的话,也需要去两个地方去修改。
那有什么办法能让这个功能在一个地方实现呢?
因为我是做移动端开发的,这个场景立即让我想到了controller,控制器,业务逻辑应该在控制器去实现
但是,我应该怎么去绑定这些事件呢?
我想到最简单的办法是我写一个方法,把this指针传递过去,
列表传列表的this,详情传详情的this,这样我就可以在controller里面去调用这个方法了
但是,这样会让this很麻烦,也很不优雅,而且还是要实现方法才能调用,
怎么样能不在列表和详情实现方法,而是抽离在controller里面呢?
这时候我就想到了JavaScript的call方法,call方法可以改变this的指向,
问题又来了,我们怎么绑定呢?
这里我们根据数据来实现的,列表和详情的数据对象基本一致。
我们在列表和详情对象上都使用call方法绑定上按钮和事件
那么不论是列表还是详情都可以用call去执行方法了

定义call函数,生成buttons和事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
// 0: "待付款",
// 1: "待发货",
// 2: "待收货",
// 3: "已完成",
// 4: "已取消",
// 5: "商家取消",
// 6: "退款中",
// 7: "退款成功",
// listHide : 订单列表隐藏按钮
// orderUserType :1: 买家 2: 卖家 3: 中间商
export function callOrderButtons(userInfo) {
// 1: 买家 2: 卖家 3: 中间商
var orderUserType = 0;
if (this.isCross == 1) {
// 串货订单
if (this.crossSaleUserId == userInfo.id) {
orderUserType = 2;
} else if (this.saleUserId == userInfo.id) {
orderUserType = 3;
} else {
// 买家
orderUserType = 1;
}
} else {
// 非串货订单
if (this.saleUserId == userInfo.id) {
//卖家
orderUserType = 2;
} else {
// 买家
orderUserType = 1;
}
}
var buttons = [];
if (this.status == 0) {
// 卖家可以取消订单、订单改价
// 买家可以取消订单和付款
if (orderUserType == 2) {
buttons.push({
name: "取消订单",
method: methods.handler_b_cancel,
class: "cancel-btn",
listHide: true,
});
buttons.push({
name: "订单改价",
method: methods.handler_b_modify,
class: "cancel-btn",
listHide: true,
});
} else if (orderUserType == 1) {
buttons.push({
name: "取消订单",
method: methods.handler_c_cancel,
class: "cancel-btn",
});
buttons.push({
name: "立即付款",
method: methods.handler_c_pay,
class: "pay-btn",
});
}
} else if (this.status == 1) {
// 卖家可以发货、拒绝订单
// 买家可以申请退款
if (orderUserType == 2) {
buttons.push({
name: "拒绝订单",
method: methods.handler_b_reject,
class: "cancel-btn",
listHide: true,
});
buttons.push({
name: "立即发货",
method: methods.handler_b_delivery,
class: "pay-btn",
});
} else if (orderUserType == 1) {
buttons.push({
name: "申请退款",
method: methods.handler_c_refund,
class: "cancel-btn",
listHide: true,
});
}
} else if (this.status == 2) {
//
// 卖家可以查看物流 、同意拒绝延期
// 买家可以查看物流和确认收货和申请退款 、申请延期
if (orderUserType == 3) {
buttons.push({
name: "查看物流",
method: methods.handler_logistics,
class: "pay-btn",
listHide: true,
});
}else if (orderUserType == 2) {
buttons.push({
name: "查看物流",
method: methods.handler_logistics,
class: "pay-btn",
listHide: true,
});
const isSale =
!this.isCross ||
(this.isCross == 1 && this.crossSaleUserId == userInfo.id);
if (
this.delayedReceiveApply &&
this.delayedReceiveApply.applyStatus == 0 &&
isSale
) {
buttons.push({
name: "拒绝延期",
method: methods.handler_deferred_delivery_reject,
class: "cancel-btn",
});
buttons.push({
name: "同意延期",
method: methods.handler_deferred_delivery_done,
class: "pay-btn",
});
}
} else if (orderUserType == 1) {
buttons.push({
name: "申请退款",
method: methods.handler_c_refund,
class: "cancel-btn",
listHide: true,
});
if (
!this.delayedReceiveApply ||
this.delayedReceiveApply.applyStatus != 0
) {
buttons.push({
name: "申请延期",
method: methods.handler_deferred_delivery_apply,
class: "cancel-btn",
listHide: true,
});
}
buttons.push({
name: "查看物流",
method: methods.handler_logistics,
class: "pay-btn",
listHide: true,
});
buttons.push({
name: "确认收货",
method: methods.handler_c_done,
class: "pay-btn",
});
}
} else if (this.status == 3) {
// 卖家无操作
// 买家可以申请退款
const latestRefundTime = new Date(this.latestRefundTime).getTime();
const now = new Date().getTime();
const timeEnable = now < latestRefundTime;
const refundDays = this.refundDays;
if (orderUserType == 1 && timeEnable && refundDays > 0) {
buttons.push({
name: "申请退款",
method: methods.handler_c_refund,
class: "cancel-btn",
listHide: true,
});
}
} else if (this.status == 6) {
// 非退货列表中的退货数据
if (orderUserType == 2) {
buttons.push({
name: "售后详情",
method: methods.handler_b_after_sale,
class: "pay-btn",
});
} else if (orderUserType == 1) {
buttons.push({
name: "售后详情",
method: methods.handler_c_after_sale,
class: "pay-btn",
});
}
} else if (this.status == 7) {
// 退货列表中退货数据
if (orderUserType == 2) {
if (this.refundApply) {
if (this.refundApply.refundStatus == 0) {
buttons.push({
name:
this.refundApply.refundType == 1 ? "拒绝退货" : "拒绝退货退款",
method: methods.handler_b_refund_reject,
class: "cancel-btn",
});
buttons.push({
name:
this.refundApply.refundType == 1 ? "同意退货" : "同意退货退款",
method: methods.handler_b_refund_agree,
class: "pay-btn",
});
} else if (this.refundApply.refundStatus == 1) {
if (this.refundApply.deliveryStatus == 1) {
buttons.push({
name: "确认收货",
method: methods.handler_b_refund_done,
class: "pay-btn",
});
}
}
}
} else if (orderUserType == 1) {
if (this.refundApply) {
if (this.refundApply.refundStatus == 0) {
buttons.push({
name: "撤销申请",
method: methods.handler_c_refund_cancel,
class: "pay-btn",
});
}else if (
this.refundApply.refundStatus == 1 &&
this.refundApply.deliveryStatus == 0
) {
buttons.push({
name: "退货给商家",
method: methods.handler_c_refund_to_b,
class: "pay-btn",
});
}
}
}
}
this.buttons = buttons;
this.orderUserType = orderUserType;
// orderName
if (
this.isCross == 1 &&
this.crossStoreId != userInfo.openStoreId &&
orderUserType != 1
) {
this.orderName = "串货订单";
} else {
this.orderName = this.storeVo ? this.storeVo.storeName : "-";
}
}

controller按钮点击事件

export const methods = {
// B端取消
async handler_b_cancel(order) {

},
// B端订单改价
handler_b_modify(order) {

},
// C端取消
async handler_c_cancel(order) {

},
handler_c_pay(order) {

},
handler_pay(order) {

},
handler_b_reject(order) {

},
handler_b_delivery(order) {

},
handler_c_refund(order) {

},
handler_logistics(order) {

},
async handler_deferred_delivery_done(order) {

},
async handler_deferred_delivery_reject(order) {

},
async handler_deferred_delivery_apply(order) {

},
async handler_c_done(order) {

},
handler_b_refund_reject(order) {

},
async handler_b_refund_agree(order) {

},
async handler_b_refund_done(order) {

},
handler_c_after_sale(order) {

},
async handler_c_refund_cancel(order) {

},
handler_b_after_sale(order) {

},
handler_c_refund_to_b(order) {

},
};

数据列表item绑定callOrderButtons

1
callOrderButtons.call(item, this.userMixin);

渲染buttons

1
2
<view v-for="(btn, btnIndex) in order.buttons" v-if="btn.listHide != true" :key="btnIndex" 
:class="btn.class" @click="btnClick(btn, order)"> {{ btn.name }}</view>

按钮点击事件

1
2
3
btnClick(btn, order) {
btn.method.call(this, order);
},