2021-08-16

总结

完成功能

1.商品详情页设计

相关页面

---

2.底部照片选中展示效果

相关效果

相关代码

function chooseImage(index,image) {
        for(let i=0;i<5;i++){
          if(i==index){
            $('.imageChoose').eq(index).css('border','1rem rgb(242,2,128) solid')
          }else {
            $('.imageChoose').eq(i).css('border','none')
          }
        }

        showImage.value=image
      }

 <div style="width: 420rem;height: auto;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start">
                    <img :src="showImage" style="width: 100%;height: auto">

                    <div style="width: 100%;height: 64rem;display: flex;justify-content: space-between;align-items: center;margin-top: 10rem">
                        <span style="width: 29rem;height: 100%;"></span>
                        <img class="imageChoose" @mouseenter="chooseImage(0,goods.data.goodsImage1)" :src="goods.data.goodsImage1" style="width: auto;height: 100%">
                        <img class="imageChoose" @mouseenter="chooseImage(1,goods.data.goodsImage2)" :src="goods.data.goodsImage2" style="width: auto;height: 100%">
                        <img class="imageChoose" @mouseenter="chooseImage(2,goods.data.goodsImage3)" :src="goods.data.goodsImage3" style="width: auto;height: 100%">
                        <img class="imageChoose" @mouseenter="chooseImage(3,goods.data.goodsImage4)" :src="goods.data.goodsImage4" style="width: auto;height: 100%">
                        <img class="imageChoose" @mouseenter="chooseImage(4,goods.data.goodsImage5)" :src="goods.data.goodsImage5" style="width: auto;height: 100%">
                        <span style="width: 29rem;height: 100%;"></span>
                    </div>
                </div>

---

3.收藏商品

相关效果

相关代码

@PostMapping("/saveGoodsCollection")
    public Result<?> saveGoodsCollection(@RequestBody GoodsCollection goodsCollection){
        return Result.success(goodsCollectionService.save(goodsCollection));
    }

---

4.取消收藏

相关效果

相关代码

  @PostMapping("/deleteGoodsCollection")
    public Result<?> deleteGoodsCollection(@RequestBody GoodsCollection goodsCollection){
        QueryWrapper<GoodsCollection> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("user_id",goodsCollection.getUserId()).eq("goods_id",goodsCollection.getGoodsId());
        return Result.success(goodsCollectionService.remove(queryWrapper));
    }

---

5.收藏商品展示

相关效果

相关代码

 @GetMapping("getGoodsCollectionList")
    public Result<?> getGoodsCollectionList(@RequestParam Integer userId){
        QueryWrapper<GoodsCollection> queryWrapper=new QueryWrapper<>();

        queryWrapper.eq("user_id",userId);

        List<GoodsCollection> list=goodsCollectionService.list(queryWrapper);

        List<Goods> goodsList=new ArrayList<>();

        for(GoodsCollection goodsCollection:list){
            QueryWrapper<Goods> queryWrapper1=new QueryWrapper<>();
            queryWrapper1.eq("goods_id",goodsCollection.getGoodsId());

            goodsList.add(goodsService.getOne(queryWrapper1));
        }

        return Result.success(goodsList);
    }