实现一个购物清单，增删改查

实现⼀个购物清单
功能：

1. 增删改查
   增：输⼊商品名称，增加⼀条记录，新增加的记录位于列表顶部
   删：只能删除未购买的商品，可以进⾏批量删除（需要有全选、反选）
   改：修改商品名称
   查：显示购物清单列表，需要显示商品名、创建⽇期，操作按钮
   未购买的在前⾯，已购买的在后⾯，且需要有样式上的区分
   根据商品名称查询
2. 标记为已购买
   已购买的商品放到未购买的商品后⾯
3. 未购买商品拖拽排序
   要求：
   原⽣JS实现，封装⼀个⽅法，⼊参为shoppingList数组，根据数组的内容进⾏⻚⾯显示，⻚⾯样式简洁整⻬
   DOM操作和数据需要分离，不能混杂在⼀起
   // 数据结构
   // status: 0 - 未购买 1 - 已购买
   const shoppingList = [
   { id: 1, productName: '开发书籍', createTime: '2021-11-11 09:00:00', status: 0 },
   { id: 3, productName: '⽇⽤品', createTime: '2021-11-11 09:00:00', status: 0 },
   { id: 2, productName: '玩具', createTime: '2021-11-10 09:00:00', status: 1 }
   ];
   // 渲染⻚⾯
   function render(shoppingList) {
   // 根据数组的内容操作DOM进⾏⻚⾯显示
   }

// 添加记录
function add(data) {
shoppingList.unshift(data);
render(shoppingList); // 修改了数据后调⽤render⽅法渲染

你尝试尝试做啊，有啥问题，不会的地方再来发帖子问，不然永远都不会，