掘金者说-商品置顶上移下移

我们用手机进行点餐，作为商家端在管理商品列表中，要对商品数据进行置顶、上移、下移的操作。

前端

小程序前端代码脚本，如下：

置顶

// 临时如下处理，原本：const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
if (gSort == 1) {
  console.log("商品已处于置顶位置啦");
}

上移

// 临时如下处理，原本：const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
if (gSort == 1) {
  console.log("商品已在最上面啦");
}

下移

点击下移，将商品下移一个位置，如果已经处于分类最后的位置，则tips提示“商品已在最底下啦”

// 临时如下处理，原本：const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
// 1. 获取商品列表数据, 说明：typeId-分类ID，status-状态（0-已下架，2-已上架），type-类型（11-店内，21-外卖）
const goodsData = [
  { gId: 1001, gTitle: "苹果", gTypeId: 15, gStatus: 2, gType: 21, gSort: 4 },
  { gId: 1002, gTitle: "香蕉", gTypeId: 15, gStatus: 2, gType: 21, gSort: 3 },
  { gId: 1003, gTitle: "油奈", gTypeId: 15, gStatus: 2, gType: 21, gSort: 5 },
  { gId: 1004, gTitle: "白菜", gTypeId: 16, gStatus: 2, gType: 21, gSort: 1 },
  { gId: 1005, gTitle: "长豆", gTypeId: 16, gStatus: 2, gType: 21, gSort: 2 },
  { gId: 1006, gTitle: "花菜", gTypeId: 16, gStatus: 2, gType: 21, gSort: 4 },
];
console.log("1. 获取商品列表数据", goodsData);
// 2. 获取到指定类型的商品数据的序号
const goodsMap = goodsData.map((goods) => {
  if (goods.gTypeId == gTypeId && goods.gStatus == gStatus && goods.gType == gType) {
    return goods.gSort;
  } else {
    return 0;
  }
});
console.log("2. 获取指定商品数据的序号", goodsMap);
// 3. 获取最大值
const currentMaxSort = Math.max(...goodsMap);
console.log("3. 获取最大值", currentMaxSort);

if (gSort == currentMaxSort) {
  console.log("商品已在最底下啦");
}
// 4. 下移接口操作API

后端

置顶

获取置顶数据，将表中字段小于对象顺序的所有数据的gSort+1,再将对象的gSort设置为1,查询的时候安装gSort增序排列。

select * from goods ORDER BY gSort asc;
-- 置顶id=4,seq=4的数据
update goods set gSort = gSort + 1 where gSort < 6;
update goods set gSort = 1 where gId = 1006;
select * from goods ORDER BY gSort asc;

置顶前查询：

置顶后查询：

上移

获取当前本条数据和上一条数据对象，将两条数据的序号进行交换

select * from goods ORDER BY gSort asc;
-- 1001	葡萄	15	2	21	1
select * from goods where gId=1001;
-- 1002	西瓜	16	2	21	2
SELECT * from goods WHERE ( gSort < 3  OR gSort=(SELECT MIN(gSort) FROM goods ) )  ORDER BY gSort DESC limit 1;

update goods set gSort=2 where gId=1001;
update goods set gSort=1 where gId=1002;

select * from goods ORDER BY gSort asc;

上移前查询

上移后查询

下移

获取本条数据和下一条数据内容，将两条数据的sort进行交换

select * from goods ORDER BY gSort asc;
-- 1001	葡萄	15	2	21	2
select * from goods where gId=1001;
-- 1002	西瓜	16	2	21	1
SELECT * from goods WHERE ( gSort < 2  OR gSort=(SELECT MIN(gSort) FROM goods ) )  ORDER BY gSort DESC limit 1;

update goods set gSort=1 where gId=1001;

update goods set gSort=2 where gId=1002;

select * from goods ORDER BY gSort asc;

下移前查询：

下以后查询：

附件

• 数据库表设计样例

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for goods
-- ----------------------------
DROP TABLE IF EXISTS `goods`;
CREATE TABLE `goods`  (
  `gId` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '商品编号',
  `gTitle` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品标题',
  `gTypeId` bigint(20) NULL DEFAULT NULL COMMENT '商品分类ID',
  `gStatus` tinyint(2) NULL DEFAULT NULL COMMENT '商品状态 0 已下架  1 审核中 2 已上架',
  `gType` tinyint(1) NULL DEFAULT NULL COMMENT '商品分类类型 0 店外 1 店内',
  `gSort` int(11) NOT NULL,
  PRIMARY KEY (`gId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1007 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of goods
-- ----------------------------
INSERT INTO `goods` VALUES (1001, '葡萄', 15, 2, 21, 1);
INSERT INTO `goods` VALUES (1002, '西瓜', 16, 2, 21, 2);
INSERT INTO `goods` VALUES (1003, '香蕉', 15, 2, 21, 3);
INSERT INTO `goods` VALUES (1004, '苹果', 15, 2, 21, 4);
INSERT INTO `goods` VALUES (1005, '油奈', 15, 2, 21, 5);
INSERT INTO `goods` VALUES (1006, '橘子', 16, 2, 21, 6);

SET FOREIGN_KEY_CHECKS = 1;

参考资料 www.cnblogs.com/wulisz/p/97…

个人笔记，再次做个笔记。交流学习，如有更好，欢迎留言。