DIY购物+验货增值服务——前端交互与后端状态机-CSDN博客
功能说明
反向海淘用户经常要求定制化服务：如“帮我检查衣服是否线头”、“拍照确认颜色”。Taocarts系统支持DIY购物（用户自定义规格）和验货增值服务（付费拍照+模板）。
一、DIY购物表单设计（Vue + 动态表单）
<
template
>
<
form @submit
=
"addToCart"
>
<
div v
-
for
=
"option in product.custom_options"
:
key
=
"option.name"
>
<
label
>
{
{
option
.
name
}
}
:
<
/
label
>
<
input
v
-
if
=
"option.type === 'text'"
v
-
model
=
"form[option.name]"
/
>
<
select
v
-
else
-
if
=
"option.type === 'select'"
v
-
model
=
"form[option.name]"
>
<
option
v
-
for
=
"v in option.values"
>
{
{
v
}
}
<
/
option
>
<
/
select
>
<
small
>
额外费用
:
{
{
option
.price
}
}
<
/
small
>
<
/
div
>
<
button
type
=
"submit"
>
加入购物车
(
DIY
)
<
/
button
>
<
/
form
>
<
/
template
>
二、验货增值服务——模板定制
用户购买“验货拍照”服务（$0.99/商品），可选择拍照模板：正面、背面、细节、量尺。后端保存订单项的服务标记。
// 订单项表增加service_extra字段
Schema
::
table
(
'order_items'
,
function
(
Blueprint
$table
)
{
$table
->
json
(
'value_added_services'
)
->
nullable
(
)
;
// ['photo_verification'=>true, 'template'=>'front_back']
}
)
;
// 验货任务生成
public
function
createInspectionTask
(
$orderItem
)
{
$templates
=
$orderItem
->
value_added_services
[
'photo_template'
]
??
[
'default'
]
;
InspectionTask
::
create
(
[
'order_item_id'
=>
$orderItem
->
id
,
'photos_required'
=>
$templates
,
'status'
=>
'pending'
]
)
;
}
三、验货结果上传（React Native App供仓库人员使用）
// 仓库端拍照界面
const
takePicture
=
async
(
templateName
)
=>
{
const
photo
=
await
camera
.
takePicture
(
)
;
await
api
.
post
(
`
/inspection/
${
taskId
}
/photo
`
,
{
template
:
templateName
,
image
:
photo
.
base64
}
)
;
}
;
四、客户前端查看验货照片
<
ImageGallery
images
=
{
inspectionPhotos
}
/
>
<
button onClick
=
{
(
)
=
>
approveGoods
(
)
}
>
确认无误，发货
<
/
button
>
<
button onClick
=
{
(
)
=
>
requestReturn
(
)
}
>
不满意，申请退货
<
/
button
>
结语
通过DIY购物和验货增值，Taocarts提升了反向海淘的用户体验。搜索代购系统操作流程、代购 APP 开发可以看到完整演示。