DIY购物+验货增值服务——前端交互与后端状态机

功能说明
反向海淘用户经常要求定制化服务：如“帮我检查衣服是否线头”、“拍照确认颜色”。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 开发可以看到完整演示。