Springboot3 + MyBatis-Plus + MySql + Uniapp 实现商品规格选择sku（附带自设计数据库，最新保姆级教程）

Springboot3 + MyBatis-Plus + MySql + Uniapp 实现商品规格选择sku（附带自设计数据库，最新保姆级教程）

  • 1、效果展示
  • 2、数据库设计
    • 2.1 商品表
    • 2.2 商品价格和规格中间表
    • 2.3 商品规格表
  • 3、后端代码
    • 3.1 model
    • 3.2 vo
    • 3.3 mapper、server、serverImp
    • 3.4 controller
  • 4、前端代码
    • 4.1 request.js
    • 4.2 index.js
    • 4.3 shop-info.vue
    • 4.4 ShopBottomButton.vue

1、效果展示

在这里插入图片描述

2、数据库设计

2.1 商品表

/*Navicat Premium Data TransferSource Server         : Test1Source Server Type    : MySQLSource Server Version : 80200Source Host           : localhost:3306Source Schema         : yunshangshequTarget Server Type    : MySQLTarget Server Version : 80200File Encoding         : 65001Date: 21/09/2024 12:59:26
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for shop
-- ----------------------------
DROP TABLE IF EXISTS `shop`;
CREATE TABLE `shop`  (`id` int NOT NULL AUTO_INCREMENT COMMENT '商品ID',`business_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '标签/自营？',`title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品简介',`sale_number` int NULL DEFAULT NULL COMMENT '已售数量',`old_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '旧价格',`new_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '现售价',`in_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '进货价',`inventory_num` int NULL DEFAULT NULL COMMENT '库存',`main_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品主图',`shop_type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品分类',`shop_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '店铺名称',`create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',`update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',`is_deleted` tinyint NULL DEFAULT NULL COMMENT '逻辑删除',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of shop
-- ----------------------------
INSERT INTO `shop` VALUES (1, '自营', '新货【三只松鼠_量贩碧根果500g】特大健康坚果零食奶油味长寿果', 138, 39.90, 29.90, 19.90, 200, 'https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg', '1', '三只松鼠旗舰店', NULL, NULL, 0);
INSERT INTO `shop` VALUES (2, '', '新货【三只松鼠_量贩碧根果1500g】特大健康坚果零食奶油味长寿果', 28, 59.90, 49.90, 39.90, 2000, 'https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg', '2', '三只耗子', NULL, NULL, 0);SET FOREIGN_KEY_CHECKS = 1;

2.2 商品价格和规格中间表

/*Navicat Premium Data TransferSource Server         : Test1Source Server Type    : MySQLSource Server Version : 80200Source Host           : localhost:3306Source Schema         : yunshangshequTarget Server Type    : MySQLTarget Server Version : 80200File Encoding         : 65001Date: 21/09/2024 12:59:16
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for shop_specs
-- ----------------------------
DROP TABLE IF EXISTS `shop_specs`;
CREATE TABLE `shop_specs`  (`id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',`goods_id` int NULL DEFAULT NULL COMMENT '规格对应的商品id',`price` decimal(10, 2) NULL DEFAULT NULL COMMENT '对应规格的价格',`sku1` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',`sku2` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',`sku3` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',`sku4` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',`create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',`update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',`is_deleted` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '逻辑删除',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of shop_specs
-- ----------------------------
INSERT INTO `shop_specs` VALUES (1, 1, 39.90, '1', '2', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (2, 1, 29.90, '1', '4', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (3, 1, 59.90, '3', '2', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (4, 1, 49.00, '3', '4', NULL, NULL, NULL, NULL, '0');SET FOREIGN_KEY_CHECKS = 1;

2.3 商品规格表

/*Navicat Premium Data TransferSource Server         : Test1Source Server Type    : MySQLSource Server Version : 80200Source Host           : localhost:3306Source Schema         : yunshangshequTarget Server Type    : MySQLTarget Server Version : 80200File Encoding         : 65001Date: 21/09/2024 12:59:04
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for shop_sku
-- ----------------------------
DROP TABLE IF EXISTS `shop_sku`;
CREATE TABLE `shop_sku`  (`id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',`attr` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '属性名',`attr_value` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '属性值',`create_time` datetime NULL DEFAULT NULL,`update_time` datetime NULL DEFAULT NULL,`is_deleted` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of shop_sku
-- ----------------------------
INSERT INTO `shop_sku` VALUES (1, '重量', '1kg', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (2, '大小', '大果', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (3, '重量', '2kg', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (4, '大小', '中果', NULL, NULL, '0');SET FOREIGN_KEY_CHECKS = 1;

3、后端代码

3.1 model

BaseEntity 所有表字段的基本组成字段

package com.zhong.model.entity;import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonIgnore;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;import java.io.Serializable;
import java.util.Date;@Data
public class BaseEntity implements Serializable {@Schema(description = "主键")@TableId(value = "id", type = IdType.AUTO)private Long id;@Schema(description = "创建时间")@TableField(value = "create_time", fill = FieldFill.INSERT)@JsonIgnoreprivate Date createTime;@Schema(description = "更新时间")@TableField(value = "update_time", fill = FieldFill.UPDATE)@JsonIgnoreprivate Date updateTime;@Schema(description = "逻辑删除")@TableField("is_deleted")@JsonIgnoreprivate Byte isDeleted;}

shop 表

package com.zhong.model.entity.shop;import java.io.Serializable;
import java.math.BigDecimal;import com.zhong.model.entity.BaseEntity;
import lombok.Data;/*** * @TableName shop 商品信息*/
@Data
public class Shop extends BaseEntity {/*** 标签/自营？*/private String businessName;/*** 商品简介*/private String title;/*** 已售数量*/private Integer saleNumber;/*** 旧价格*/private BigDecimal oldPrice;/*** 现售价*/private BigDecimal newPrice;/*** 进货价*/private BigDecimal inPrice;/*** 库存*/private Integer inventoryNum;/*** 商品主图*/private String mainImage;/*** 商品分类*/private String shopType;/*** 店铺名称*/private String shopName;private static final long serialVersionUID = 1L;
}

shop_img_swiper 表 轮播图

package com.zhong.model.entity.shop;import java.io.Serializable;import com.zhong.model.entity.BaseEntity;
import lombok.Data;/*** * @TableName shop_img_swiper*/
@Data
public class ShopImgSwiper extends BaseEntity {/*** 图片地址*/private String url;/*** 商品id*/private Integer fatherId;private static final long serialVersionUID = 1L;
}

shop_img_info表 商品详情图片

package com.zhong.model.entity.shop;import java.io.Serializable;import com.zhong.model.entity.BaseEntity;
import lombok.Data;/*** * @TableName shop_img_info*/
@Data
public class ShopImgInfo extends BaseEntity {/*** 图片地址*/private String url;/*** 商品id*/private Integer fatherId;private static final long serialVersionUID = 1L;
}

shop_specs 表 商品规格与商品中间表

package com.zhong.model.entity.shop;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;import com.zhong.model.entity.BaseEntity;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;/*** * @TableName shop_specs*/
@TableName(value ="shop_specs")
@Data
public class ShopSpecs extends BaseEntity {@Schema(description = "主键")@TableId(value = "id", type = IdType.AUTO)private Long id;/*** 规格对应的商品id*/private Integer goodsId;/*** 对应规格的价格*/private BigDecimal price;/*** 对应的规格*/private String sku1;/*** 对应的规格*/private String sku2;/*** 对应的规格*/private String sku3;/*** 对应的规格*/private String sku4;@TableField(exist = false)private static final long serialVersionUID = 1L;
}

shop_sku 商品规格

package com.zhong.model.entity.shop;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import java.util.Date;import com.fasterxml.jackson.annotation.JsonIgnore;
import com.zhong.model.entity.BaseEntity;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;/*** * @TableName shop_sku*/
@TableName(value ="shop_sku")
@Data
public class ShopSku extends BaseEntity {@Schema(description = "主键")@TableId(value = "id", type = IdType.AUTO)@JsonIgnoreprivate Long id;/*** 属性名*/private String attr;/*** 属性值*/private String attrValue;@TableField(exist = false)private static final long serialVersionUID = 1L;
}

3.2 vo

ShopVo

package com.zhong.vo.shop;import com.zhong.model.entity.shop.Shop;
import com.zhong.model.entity.shop.ShopSpecs;
import lombok.Data;import java.util.List;/*** @ClassName : ShopVo* @Description :* @Author : zhx* @Date: 2024-09-15 18:55*/
@Data
public class ShopVo extends Shop {private List<String> shopImgSwiper;private List<String> shopImgInfo;private List<ShopSpecs> shopSpecs;
}

ShopInfoVo

package com.zhong.vo.shop;import com.zhong.model.entity.shop.Shop;
import com.zhong.model.entity.shop.ShopSku;
import com.zhong.model.entity.shop.ShopSpecs;
import lombok.Data;import java.util.List;
import java.util.Map;
import java.util.Set;/*** @ClassName : ShopVo* @Description :* @Author : zhx* @Date: 2024-09-15 18:55*/
@Data
public class ShopInfoVo extends Shop {private List<String> shopImgSwiper;private List<String> shopImgInfo;// 所有规格信息 方便渲染private List<Map<String, Object>> skuGroup;// 规格信息对应价格private List<ShopSkuVo> shopSpecs;
}

ShopSkuVo

package com.zhong.vo.shop;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.zhong.model.entity.shop.ShopSku;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;import java.math.BigDecimal;
import java.util.List;/*** @ClassName : ShopSkuVo* @Description :* @Author : zhx* @Date: 2024-09-20 10:46*/
@Data
public class ShopSkuVo {@Schema(description = "主键")@TableId(value = "id", type = IdType.AUTO)private Long id;private BigDecimal price;private List<ShopSku> skus;
}

SkuGroupVo

package com.zhong.vo.shop;import lombok.Data;import java.util.List;/*** @ClassName : skuGroupVo* @Description :* @Author : zhx* @Date: 2024-09-20 13:49*/
@Data
public class SkuGroupVo {private String skuKey;private List<String> skuValue;
}

3.3 mapper、server、serverImp

依赖mybatis自动生成，生成后将文件剪贴到对应位置即可。model 也可以自动生成 只不过要稍加修改

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 controller

ShopController

package com.zhong.controller.shop;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zhong.model.entity.shop.Shop;
import com.zhong.result.Result;
import com.zhong.service.ShopService;
import com.zhong.vo.shop.ShopInfoVo;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;/*** @ClassName : ShopController* @Description :* @Author : zhx* @Date: 2024-09-15 18:23*/@RestController
@RequestMapping("/app/shop/")
@Tag(name = "商品信息")
public class ShopController {@Autowiredprivate ShopService service;@Operation(summary = "分页获取商品信息")@GetMapping("listItem")public Result<Page<Shop>> listItem(@RequestParam long current, @RequestParam long size) {LambdaQueryWrapper<Shop> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(Shop::getIsDeleted, "0");Page<Shop> shopPage = new Page<>(current, size);Page<Shop> page = service.page(shopPage, queryWrapper);return Result.ok(page);}@Operation(summary = "根据id获取商品详细信息")@GetMapping("getDetailById")public Result<ShopInfoVo> getDetailById(@RequestParam Long id) {ShopInfoVo shopInfoVo = service.getDetailById(id);return Result.ok(shopInfoVo);}
}

ShopService

package com.zhong.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.zhong.model.entity.shop.Shop;
import com.zhong.vo.shop.ShopInfoVo;
import com.zhong.vo.shop.ShopVo;/**
* @author zhong
* @description 针对表【shop】的数据库操作Service
* @createDate 2024-09-15 18:18:13
*/
public interface ShopService extends IService<Shop> {ShopInfoVo getDetailById(Long id);
}

ShopServiceImpl

package com.zhong.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zhong.mapper.shop.ShopMapper;
import com.zhong.model.entity.shop.Shop;
import com.zhong.model.entity.shop.ShopSku;
import com.zhong.model.entity.shop.ShopSpecs;
import com.zhong.service.ShopService;
import com.zhong.service.ShopSkuService;
import com.zhong.vo.shop.ShopInfoVo;
import com.zhong.vo.shop.ShopSkuVo;
import com.zhong.vo.shop.ShopVo;
import com.zhong.vo.shop.SkuGroupVo;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.*;
import java.util.stream.Collectors;/*** @author zhong* @description 针对表【shop】的数据库操作Service实现* @createDate 2024-09-15 18:18:13*/
@Service
public class ShopServiceImpl extends ServiceImpl<ShopMapper, Shop>implements ShopService {@Autowiredprivate ShopMapper shopMapper;@Autowiredprivate ShopSkuService service;@Overridepublic ShopInfoVo getDetailById(Long id) {// 返回的数据voShopInfoVo shopInfoVo = new ShopInfoVo();// 根据商品ID查询信息ShopVo detailById = shopMapper.getDetailById(id);// 获取查询到的商品信息的规格列表List<ShopSpecs> shopSpecs = detailById.getShopSpecs();// 新建一个vo对象保存 规格信息对应价格和列表List<ShopSkuVo> shopSkuLists = new ArrayList<>();
//        // 新建一个顶层数组 group vo 方便添加
//        List<List<SkuGroupVo>> skuGroupVos = new ArrayList<>();// 遍历每一个规格信息shopSpecs.forEach(x -> {
//            // 新建一个 二层数组 group vo 方便添加
//            List<SkuGroupVo> skuGroupList = new ArrayList<>();
//            // 新建一个 三层数组 group vo 方便添加
//            SkuGroupVo skuGroup = new SkuGroupVo();// 新建一个规格信息 Vo 方便后续添加到 listVoShopSkuVo shopSkuVo = new ShopSkuVo();// 新建一个规格详情信息 Vo 方便后续添加到 shopSkuVoList<ShopSku> skuArrayList = new ArrayList<>();// 获取 skuGroupVo 的 keyList<String> skuGroupKey = new ArrayList<>();// 获取 skuGroupVo 的 valueList<String> skuGroupValue = new ArrayList<>();// 判断是否含有第一种规格if (x.getSku1() != null) {// 新建一个 shopSku 方便添加到 List<ShopSku>ShopSku shopSku = new ShopSku();// 根据规格ID获取规格详情ShopSku sku = service.getById(x.getSku1());// 将规格ID详情添加到 shopSkuVoshopSkuVo.setId(x.getId());// 将规格价格详情添加到 shopSkuVoshopSkuVo.setPrice(x.getPrice());// 将规格标题添加到 shopSkushopSku.setAttr(sku.getAttr());skuGroupKey.add(sku.getAttr());skuGroupValue.add(sku.getAttrValue());// 将规格值添加到 shopSkushopSku.setAttrValue(sku.getAttrValue());// 添加到规格详情List  List<ShopSku>skuArrayList.add(shopSku);}// 判断是否含有第二种规格if (x.getSku2() != null) {// 新建一个 shopSku 方便添加到 List<ShopSku>ShopSku shopSku = new ShopSku();// 根据规格ID获取规格详情ShopSku sku = service.getById(x.getSku2());// 将规格ID详情添加到 shopSkuVoshopSkuVo.setId(x.getId());// 将规格价格详情添加到 shopSkuVoshopSkuVo.setPrice(x.getPrice());// 将规格标题添加到 shopSkushopSku.setAttr(sku.getAttr());skuGroupKey.add(sku.getAttr());skuGroupValue.add(sku.getAttrValue());// 将规格值添加到 shopSkushopSku.setAttrValue(sku.getAttrValue());// 添加到规格详情List  List<ShopSku>skuArrayList.add(shopSku);}// 判断是否含有第三种规格if (x.getSku3() != null) {// 新建一个 shopSku 方便添加到 List<ShopSku>ShopSku shopSku = new ShopSku();// 根据规格ID获取规格详情ShopSku sku = service.getById(x.getSku3());// 将规格ID详情添加到 shopSkuVoshopSkuVo.setId(x.getId());// 将规格价格详情添加到 shopSkuVoshopSkuVo.setPrice(x.getPrice());// 将规格标题添加到 shopSkushopSku.setAttr(sku.getAttr());skuGroupKey.add(sku.getAttr());skuGroupValue.add(sku.getAttrValue());// 将规格值添加到 shopSkushopSku.setAttrValue(sku.getAttrValue());// 添加到规格详情List  List<ShopSku>skuArrayList.add(shopSku);}// 判断是否含有第四种规格if (x.getSku4() != null) {// 新建一个 shopSku 方便添加到 List<ShopSku>ShopSku shopSku = new ShopSku();// 根据规格ID获取规格详情ShopSku sku = service.getById(x.getSku4());// 将规格ID详情添加到 shopSkuVoshopSkuVo.setId(x.getId());// 将规格价格详情添加到 shopSkuVoshopSkuVo.setPrice(x.getPrice());// 将规格标题添加到 shopSkushopSku.setAttr(sku.getAttr());skuGroupKey.add(sku.getAttr());skuGroupValue.add(sku.getAttrValue());// 将规格值添加到 shopSkushopSku.setAttrValue(sku.getAttrValue());// 添加到规格详情List  List<ShopSku>skuArrayList.add(shopSku);}shopSkuVo.setSkus(skuArrayList);shopSkuLists.add(shopSkuVo);});BeanUtils.copyProperties(detailById, shopInfoVo);shopInfoVo.setShopSpecs(shopSkuLists);List<Map<String, Object>> skuGroup = computeSkuGroup(shopSkuLists);shopInfoVo.setSkuGroup(skuGroup);return shopInfoVo;}public List<Map<String, Object>> computeSkuGroup(List<ShopSkuVo> shopSpecs) {// 用于存放规格结果Map<String, Set<String>> resultMap = new LinkedHashMap<>();// 遍历每个商品的skus，提取属性和属性值for (ShopSkuVo item : shopSpecs) {for (ShopSku sku : item.getSkus()) {String attr = sku.getAttr();String attrValue = sku.getAttrValue();// 如果resultMap中不存在该属性，则初始化一个空的SetresultMap.putIfAbsent(attr, new LinkedHashSet<>());// 将属性值加入对应的SetresultMap.get(attr).add(attrValue);}}// 将结果格式化为所需的输出格式List<Map<String, Object>> finalResult = new ArrayList<>();for (Map.Entry<String, Set<String>> entry : resultMap.entrySet()) {Map<String, Object> temp = new HashMap<>();temp.put("key", entry.getKey());// 将Set转换为List并排序List<String> sortedValues = new ArrayList<>(entry.getValue());Collections.sort(sortedValues); // 对属性值进行排序// 创建一个包含info和isCheck的结构，假设第一个元素被选中List<Map<String, Object>> attrValueItems = new ArrayList<>();for (int i = 0; i < sortedValues.size(); i++) {Map<String, Object> valueMap = new HashMap<>();valueMap.put("info", sortedValues.get(i));valueMap.put("isCheck", i == 0); // 默认第一个值为true，其他为falseattrValueItems.add(valueMap);}temp.put("value", attrValueItems);finalResult.add(temp);}// 输出结果System.out.println(finalResult);return finalResult;}
}

ShopMapper

package com.zhong.mapper.shop;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zhong.model.entity.shop.Shop;
import com.zhong.vo.shop.ShopVo;
import org.apache.ibatis.annotations.Mapper;/**
* @author zhong
* @description 针对表【shop】的数据库操作Mapper
* @createDate 2024-09-15 18:18:13
* @Entity generator.domain.Shop
*/
@Mapper
public interface ShopMapper extends BaseMapper<Shop> {ShopVo getDetailById(Long id);
}> ShopMapper.xml```xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zhong.mapper.shop.ShopMapper"><resultMap id="ShopVoMap" type="com.zhong.vo.shop.ShopVo" autoMapping="true"><id column="id" property="id"/><collection property="shopImgSwiper" ofType="string"><result column="siu"/></collection><collection property="shopImgInfo" ofType="string" autoMapping="true"><result column="ssu"/></collection><collection property="shopSpecs" ofType="com.zhong.model.entity.shop.ShopSpecs" autoMapping="true"><id column="sssid" property="id"/></collection></resultMap><select id="getDetailById" resultMap="ShopVoMap">select sp.id,sp.business_name,sp.title,sp.sale_number,sp.old_price,sp.new_price,sp.in_price,sp.inventory_num,sp.main_image,sp.shop_type,sp.shop_name,si.url siu,ss.url ssu,sss.id sssid,sss.sku1,sss.sku2,sss.sku3,sss.sku4,sss.pricefrom shop spleft join shop_img_info si on sp.id = si.father_id and si.is_deleted = 0left join shop_img_swiper ss on sp.id = ss.father_id and ss.is_deleted = 0left join shop_specs sss on sp.id = sss.goods_id and sss.is_deleted = 0where sp.is_deleted = 0and sp.id = #{id}</select>
</mapper>

4、前端代码

4.1 request.js

import axios from 'axios'// 创建 axios 实例
const service = axios.create({// baseURL: import.meta.env.PROD ? import.meta.env.VITE_APP_BASE_URL : '/',  // 根据环境设置 baseURLbaseURL: '/api', // 根据环境设置 baseURL// timeout: ResultEnum.TIMEOUT,timeout: 10000,
})/*** @description: 请求拦截器*/
service.interceptors.request.use((config) => {// const userStore = useUserStore()// const token = userStore.token// if (token) {//   config.headers['access-token'] = token// }config.headers['access-token'] ="eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzUwMzcyNjUsInN1YiI6IkxPR0lOX1VTRVIiLCJ1c2VySWQiOjgsInVzZXJuYW1lIjoiMTMwMzY0OTc1NjIifQ.BJudKwWdt48h4eQaYRte2aXZWDYFRG7SHopRYSMr7D4"return config},(error) => {// 使用 uni.showToast 替换 ElMessage.erroruni.showToast({title: error.message,icon: 'none',duration: 2000})return Promise.reject(error)}
)/*** @description: 响应拦截器*/
service.interceptors.response.use((response) => {const {data} = response// console.log(data.code);// // * 登陆失效// if (ResultEnum.EXPIRE.includes(data.code)) {// 	RESEETSTORE()// 	uni.showToast({// 		title: data.message || ResultEnum.ERRMESSAGE,// 		icon: 'none',// 		duration: 2000// 	})// 	router.replace(LOGIN_URL)// 	return Promise.reject(data)// }if (data.code && data.code !== 200) {uni.showToast({title: data.message || ResultEnum.ERRMESSAGE,icon: 'none',duration: 2000})return Promise.reject(data)}return data.data},(error) => {// 处理 HTTP 网络错误let message = ''const status = error.response?.statusswitch (status) {case 400:message = "请求错误";break;case 401:message = "未授权，请登录";break;case 403:message = "拒绝访问";break;case 404:message = `请求地址出错: ${error.response?.config?.url}`;break;case 408:message = "请求超时";break;case 500:message = "服务器内部错误";break;case 501:message = "服务未实现";break;case 502:message = "网关错误";break;case 503:message = "服务不可用";break;case 504:message = "网关超时";break;case 505:message = "HTTP版本不受支持";break;default:message = "网络连接故障";}// 使用 uni.showToast 提示错误信息uni.showToast({title: message,icon: 'none',duration: 2000})return Promise.reject(error)}
)/*** @description: 导出封装的请求方法*/
const http = {get(url, params) {return service.get(url, params)},post(url, data) {return service.post(url, data)},put(url, data) {return service.put(url, data)},delete(url, data) {return service.delete(url, {data})}
}export default http

4.2 index.js

import http from '@/utils/request.js';export const getAllShopApi = (params) => {return http.get(`/app/shop/listItem?current=${params.current}&size=${params.size}`)
}export const getShopByIdApi = (id) => {return http.get(`/app/shop/getDetailById?id=${id}`)
}

4.3 shop-info.vue

<template><view><template v-for="(item, index) in [data]" :key="index"><view class=""><up-swiper :list="item.shopImgSwiper" circular :autoplay="true" bgColor="#ffffff" height="360rpx"imgMode="auto"></up-swiper></view><view class="connect card card-shadow"><view class="price"><view class=""><up-text mode="price" :text="item.newPrice" color="red" size="24"></up-text></view><view class=""><text>已售{{item.saleNumber}}</text></view></view><!-- 标题 --><view class="title"><up-row customStyle="margin-bottom: 10px"><up-col span="2" v-if="item.businessName"><view class="" style="display: flex;"><up-tag :text="item.businessName" size="mini" type="error"></up-tag></view></up-col><up-col :span="item.businessName?10 :12"><text>{{item.title}}</text></up-col></up-row></view><!-- 发货 --><view class="logistics flex" style=" position: relative;"><up-icon name="car"></up-icon><view class="" style="width: 20rpx;"></view><view class="font-lite-size"><text>承诺24小时内发货，晚发必赔</text></view><view class="" style="position: absolute;right: 10rpx;"><up-icon name="arrow-right"></up-icon></view></view><!-- 破损 --><view class="pock flex" style=" position: relative;"><up-icon name="car"></up-icon><view class="" style="width: 20rpx;"></view><view class="font-lite-size"><text>破损包退 | 退货运费险 | 极速退款 | 7天无理由退换</text></view><view class="" style="position: absolute;right: 10rpx;"><up-icon name="arrow-right" size="16"></up-icon></view></view></view><!-- 评价 --><view class="card card-shadow"><ShopCommentVue></ShopCommentVue></view><!-- 店铺信息 --><view class="card card-shadow"><StoreInformationVue></StoreInformationVue></view><!-- 商品详情图片 --><view class="bb-info card card-shadow" v-if="data.shopImgInfo.length> 0"><ShopInfoImageListVue :imgList="data.shopImgInfo"></ShopInfoImageListVue></view><!-- 提示 --><view class="tips card card-shadow"><ShopTipsVue></ShopTipsVue></view><!-- 底部tabbar安全距离 --><view class="" style="height: 140rpx;"></view></template><!-- 加入购物车等操作 --><view class="bottom"><ShopBottomButtonVue :data="data"></ShopBottomButtonVue></view></view>
</template><script setup>import {reactive,ref,onMounted} from 'vue';import ShopCommentVue from '@/pages/components/Home/ShopComment.vue';import StoreInformationVue from '@/pages/components/Home/StoreInformation.vue';import ShopInfoImageListVue from '@/pages/components/Home/ShopInfoImageList.vue';import ShopTipsVue from '@/pages/components/Home/ShopTips.vue';import ShopBottomButtonVue from '@/pages/components/Home/ShopBottomButton.vue';import {onLoad} from "@dcloudio/uni-app"import {getShopByIdApi} from "@/pages/api/shop/index.js"const shopId = ref();const data = ref();onLoad((options) => {shopId.value = options.id;})onMounted(async () => {console.log(shopId.value);let res = await getShopByIdApi(shopId.value);data.value = res;console.log(res);})// 父组件中的价格数据const price = ref(null);// 处理子组件传来的价格更新const handlePriceUpdate = (newPrice) => {price.value = newPrice;};
</script><style lang="less" scoped>.card-shadow {border-radius: 20rpx;box-shadow: 10rpx 10rpx 10rpx 10rpx rgba(0.2, 0.1, 0.2, 0.2);}.card {margin: 20rpx;padding: 20rpx;background-color: #FFF;border-radius: 20rpx;}.font-lite-size {font-size: 26rpx;}.flex {display: flex;align-items: center;}.title {margin-top: 20rpx;}.pock {margin: 20rpx 0;}.price {padding-right: 20rpx;display: flex;justify-content: space-between;align-items: center;}
</style>

4.4 ShopBottomButton.vue

<template><view class="mains"><view class="connect"><view class="letf-connect"><up-icon name="gift" size="40rpx"></up-icon><text style="font-size: 26rpx;">店铺</text></view><view class="letf-connect"><up-icon name="kefu-ermai" size="40rpx"></up-icon><text style="font-size: 26rpx;">客服</text></view><view class="letf-connect" @click="toShopCart"><up-icon name="shopping-cart" size="40rpx"></up-icon><text style="font-size: 26rpx;">购物车</text></view><view class="" style="display: flex;flex: 1;padding-left: 20rpx;"><up-button text="加入购物车" type="warning" @click="show=true"></up-button><up-button text="立即购买" type="success"></up-button></view></view><!-- 弹出层选择商品规格 --><up-popup :show="show" mode="bottom" :round="10" @close="close" @open="open"><view><view class="top"><up-image :src="props.data.mainImage" width="200rpx" height="300rpx" radius="10"></up-image><view style="padding-left: 40rpx;"><text style="flex: 1;overflow: hidden;">{{props.data.title}}</text><view style="padding: 20rpx 0;"><up-text mode="price" :text="calculatedPrice" color="red" size="20"></up-text></view><view style="display: flex;padding-top: 20rpx;"><up-number-box v-model="shopNum" min="1"></up-number-box></view></view></view><!-- 渲染规格 --><view class=""><template v-for="(item,index) in resSkuGroup"><view style="padding-left: 20rpx;">{{item.key}}</view><view style="display: flex;"><template v-for="(tag,i) in item.value" :key="i"><view class="" style="display: flex;padding:20rpx;"><up-tag :text="tag.info" :plain="!tag.isCheck" :color="tag.isCheck?'#FFF':'#000'":borderColor="tag.isCheck?'#FFF':'#000'" type="error"@click="changeTagIsCheckFun(tag,index)"></up-tag></view></template></view></template></view><view class="" style="padding: 20rpx;"><up-button text="加入购物车" shape="circle" type="error" @click="addCartFun"></up-button></view></view></up-popup></view>
</template><script setup>import {computed,onMounted,reactive,defineEmits,watch,ref} from 'vue';// 创建响应式数据const show = ref(false);const resData = ref();const resSkuData = ref();const resSkuGroup = ref();const resDataFun = async() => {resSkuGroup.value = await props.data.skuGroup;resSkuData.value = await props.data.shopSpecs;console.log(props.data.shopSpecs);console.log( resSkuData.value);}const changeTagIsCheckFun = (item, index) => {resSkuGroup.value[index].value.map(x => {if (x.info == item.info) {x.isCheck = true;} else {x.isCheck = false;}})console.log(resSkuGroup.value);}// 通过 computed 计算选中的属性值const checkedAttributes = computed(() => {return resSkuGroup.value.map(option => ({attr: option.key,attrValue: option.value.find(item => item.isCheck)?.info || null}));});// 商品数量const shopNum = ref(1);// 根据选中的属性值匹配 SKU，计算出价格const calculatedPrice = computed(() => {if (resSkuData.value) {// 找到与选中属性完全匹配的 SKUconst matchingSku = resSkuData.value.find(sku => {return sku.skus.every(skuAttr => {return checkedAttributes.value.some(attr => attr.attr === skuAttr.attr && attr.attrValue === skuAttr.attrValue);});});// 返回匹配的价格，没有匹配的返回 nullreturn matchingSku ? matchingSku.price * shopNum.value: null;}});// // 定义 emit// const emit = defineEmits(['updatePrice']);// // 监听计算的价格变化并向父组件传值// watch(calculatedPrice, (newPrice) => {// 	emit('updatePrice', newPrice);// });const toCartData = reactive({num: 1,})const props = defineProps({data: Object});onMounted(() => {console.log(props.data);resDataFun();})// 定义方法  const open = () => {// 打开逻辑，比如设置 show 为 true  show.value = true;// console.log('open');  }const close = () => {// 关闭逻辑，设置 show 为 false  show.value = false;// console.log('close');  }const toShopCart = () => {uni.navigateTo({url: "/pages/src/home/shop-cart/shop-cart"})}const addCartFun = () => {close();}
</script><style lang="scss" scoped>.top {display: flex;padding: 40rpx;}.mains {position: fixed;bottom: 0;left: 0;width: 100%;/* 占据全宽 */height: 120rpx;/* Tabbar 高度 */background-color: #FFF;border-top: 2rpx solid #7d7e80;}.connect {display: flex;justify-content: space-around;padding: 20rpx;align-items: center;}.letf-connect {padding: 0 10rpx;display: flex;flex-direction: column;align-items: center;}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/428507.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用express或koa或nginx部署history路由模式的单页面应用

使用express或koa或nginx部署history路由模式的单页面应用

使用hash模式会有#&#xff0c;影响美观&#xff0c;所以使用history模式会是个更好的选择。 前端项目打包上线部署&#xff0c;可以使用下面的方式部署history模式的项目&#xff0c;下面以 jyH5 为例 expressjs部署 express脚手架搭建的app.js中添加如下代码&#xff1a; …
阅读更多...
CDA Level 1 业务数据分析

CDA Level 1 业务数据分析

目录 理解业务数据分析方法、掌握业务数据分析流程、能够使用及设计创建业务指标、能够结合业务模型及业务分析方法正确理解业务问题&#xff0c;找到问题原因&#xff0c;并能够提出解决问题建议&#xff0c;这个章节的应用会考的比较多&#xff08;终于正经起来了呢&#xf…
阅读更多...
设计模式 组合模式（Composite Pattern）

设计模式 组合模式（Composite Pattern）

组合模式简绍 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以用一致的方式处理单个对象和组合对象。这样&#xff0c;可以在不知道对象具体类型的条…
阅读更多...
7--SpringBoot-后端开发、原理详解（面试高频提问点）

7--SpringBoot-后端开发、原理详解（面试高频提问点）

目录 SpringBoot原理 起步依赖 自动配置 配置优先级 Bean设置 获取Bean 第三方Bean SpringBoot原理 内容偏向于底层的原理分析 基于Spring框架进行项目的开发有两个不足的地方&#xff1a; 在pom.xml中依赖配置比较繁琐&#xff0c;在项目开发时&#xff0c;需要自己去找…
阅读更多...
手写Spring

手写Spring

简单实现Spring基于注解配置 ComponentScan Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) public interface ComponentScan {String value() default ""; } 相当于component-scan HspSpringConfig ComponentScan(value "spring.write.com…
阅读更多...
C#自定义曲线绘图面板

C#自定义曲线绘图面板

一、实现功能 1、显示面板绘制。 2、拖动面板&#xff0c;X轴、Y轴都可以拖动。 3、显示面板缩放&#xff0c;放大或者缩小。 4、鼠标在面板中对应的XY轴数值。 5、自动生成的数据数组&#xff0c;曲线显示。 6、鼠标是否在曲线上检测。 二、界面 拖动面板 鼠标在曲线上…
阅读更多...
【随手笔记】使用J-LINK读写芯片内存数据

【随手笔记】使用J-LINK读写芯片内存数据

第一种使用JLINK.exe 1. 打开j-link.exe 2.输入【usb】 3. 连接芯片 输入【connect】输入芯片型号【STM32L071RB】输入连接方式 【S】 使用SWD连接方式输入连接速率 【4000】连接成功 4. 输入【&#xff1f;】查看指令提示 5. 读写指令 Mem Mem [<Zone>…
阅读更多...
DataFrame生成excel后为什么多了一行数字

DataFrame生成excel后为什么多了一行数字

问题描述 python查询数据生成excel文件&#xff0c;生成的excel多了第一行数字索引&#xff0c;1,2,3,4,5...... 代码&#xff1a; df pd.DataFrame(data)df.to_excel(filename, sheet_name用户信息表, indexFalse) 解决&#xff1a; 原理也很简单&#xff0c;就是设置个参…
阅读更多...
【python设计模式7】行为型模式2

【python设计模式7】行为型模式2

目录 策略模式 模板方法模式 策略模式 定义一个个算法&#xff0c;把它们封装起来&#xff0c;并且使它们可以相互替换。本模式使得算法可独立于使用它的客户而变化。角色有&#xff1a;抽象策略、具体策略和上下文。 from abc import abstractmethod, ABCMeta from datetim…
阅读更多...
前端vue-ref与document.querySelector的对比

前端vue-ref与document.querySelector的对比

ref只在本组件中查找&#xff0c;而document.querySelector是在整个页面查找
阅读更多...
Golang | Leetcode Golang题解之第414题第三大的数

Golang | Leetcode Golang题解之第414题第三大的数

题目&#xff1a; 题解&#xff1a; func thirdMax(nums []int) int {var a, b, c *intfor _, num : range nums {num : numif a nil || num > *a {a, b, c &num, a, b} else if *a > num && (b nil || num > *b) {b, c &num, b} else if b ! ni…
阅读更多...
SQL Server性能优化之读写分离

SQL Server性能优化之读写分离

理论部分: 数据库读写分离&#xff1a; 主库&#xff1a;负责数据库操作增删改 20% 多个从库&#xff1a;负责数据库查询操作 80% 读写分离的四种模式 1.快照发布&#xff1a;发布服务器按照预定的时间间隔向订阅服务器发送已发布的数据快照 2.事务发布[比较主流常见]&#xf…
阅读更多...
Ceph 基本架构（一）

Ceph 基本架构（一）

Ceph架构图 Ceph整体组成 Ceph 是一个开源的分布式存储系统&#xff0c;设计用于提供优秀的性能、可靠性和可扩展性。Ceph 的架构主要由几个核心组件构成&#xff0c;每个组件都有特定的功能&#xff0c;共同协作以实现高可用性和数据的一致性。 以下是 Ceph 的整体架构及其…
阅读更多...
2024 “华为杯” 中国研究生数学建模竞赛（C题）深度剖析|数据驱动下磁性元件的磁芯损耗建模|数学建模完整代码+建模过程全解全析

2024 “华为杯” 中国研究生数学建模竞赛（C题）深度剖析|数据驱动下磁性元件的磁芯损耗建模|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; CS团队倾注了大量时间和心血&#xff0c;深入挖掘解…
阅读更多...
使用LangGPT提示词让大模型比较浮点数

使用LangGPT提示词让大模型比较浮点数

使用LangGPT提示词让大模型比较浮点数 背景介绍环境准备创建虚拟环境安装一些必要的库安装其他依赖部署大模型启动图形交互服务设置提示词与测试 LangGPT结构化提示词 背景介绍 LLM在对比浮点数字时表现不佳&#xff0c;经验证&#xff0c;internlm2-chat-1.8b (internlm2-cha…
阅读更多...
MySQL聚合统计和内置函数

MySQL聚合统计和内置函数

【数据库】MySQL聚合统计 王笃笃-CSDN博客https://blog.csdn.net/wangduduniubi?typeblog显示平均工资低于2000的部门和它的平均工资 mysql> select deptno,avg(sal) deptavg from emp group by deptno; --------------------- | deptno | deptavg | --------------…
阅读更多...
【第33章】Spring Cloud之SkyWalking服务链路追踪

【第33章】Spring Cloud之SkyWalking服务链路追踪

文章目录 前言一、介绍1. 架构图2. SkyWalking APM 二、服务端和控制台1. 下载2. 解压3. 初始化数据库4. 增加驱动5. 修改后端配置6. 启动7. 访问控制台8. 数据库表 三、客户端1. 下载2. 设置java代理3. idea配置3.1 环境变量3.2 JVM参数3.3 启动日志 4. 启用网关插件 四、链路…
阅读更多...
C++和OpenGL实现3D游戏编程【目录】

C++和OpenGL实现3D游戏编程【目录】

欢迎来到zhooyu的专栏。 个人主页&#xff1a;【zhooyu】 文章专栏&#xff1a;【OpenGL实现3D游戏编程】 贝塞尔曲面演示&#xff1a; 贝塞尔曲面演示zhooyu 本专栏内容&#xff1a; 我们从游戏的角度出发&#xff0c;用C去了解一下游戏中的功能都是怎么实现的。这一切还是要…
阅读更多...
电脑ip会因为换了网络改变吗

电脑ip会因为换了网络改变吗

在当今数字化时代&#xff0c;IP地址作为网络世界中的“门牌号”&#xff0c;扮演着至关重要的角色。它不仅是设备在网络中的唯一标识&#xff0c;也是数据交换和信息传递的基础。然而&#xff0c;对于普通用户而言&#xff0c;一个常见的问题便是&#xff1a;当电脑连接到不同…
阅读更多...
Visual Studio 2022 - QT 环境中文字符乱码问题

Visual Studio 2022 - QT 环境中文字符乱码问题

Visual Studio 2022 - QT 环境中文字符乱码问题 一、Visual Studio 2022 - Qt 环境 在 QT 中使用中文字符串常会出现乱码现象&#xff0c;如下&#xff1a;以下提供了几个解决方法&#xff0c;仅供参考 QString str "百香果真是一直可爱的小猫咪"; qDebug() <…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发