微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车

亦凉 2023-02-20 03:18 41阅读 0赞

## 微信小程序–商品详情页面 ##

> 包含功能点：
> 
>  *  商品收藏
>  *  图片预览
>  *  客服
>  *  分享
>  *  加入购物车
>  *  跳转到购物车页面（`注意：open-type="switchTab"`）

### 结构：goods\_detail.wxml ###

<view class="detail_swiper">
      <swiper autoplay="{
       {true}}" circular="{
       {true}}" indicator-dots="{
       {true}}">
        <swiper-item wx:for="{
       {goodsObj.pics}}" wx:key="pics_id" bindtap="handlePrevewImage" data-url="{
       {item.pics_mid}}">
          <image src="{
       {item.pics_mid}}" mode="widthFix" />
        </swiper-item>
      </swiper>
    </view>
    
    <view class="goods_price">￥{
       {goodsObj.goods_price}}</view>
    
    <view class="goods_name_row">
      <view class="goods_name">{
       {goodsObj.goods_name}}{
       {goodsObj.goods_name}}</view>
      <view class="goods_collect" bindtap="handleCollect">
        <text class="iconfont {
       {isCollect?'icon-shoucang1':'icon-shoucang'}}"></text>
        <view class="collect_text">收藏</view>
      </view>
    </view>
    
    <view class="goods_info">
      <view class="goods_info_title">图文详情</view>
      <view class="goods_info_content">
        
        <rich-text nodes="{
       {goodsObj.goods_introduce}}"></rich-text>
      </view>
    </view>
    
    <view class="btm_tool">
      <view class="tool_item">
        <view class="iconfont icon-kefu"></view>
        <view>客服</view>
        <button open-type="contact"></button>
      </view>
      <view class="tool_item">
        <view class="iconfont  icon-fenxiang"></view>
        <view>分享</view>
        <button open-type="share"></button>
      </view>
      <navigator class="tool_item" url="/pages/cart/cart" open-type="switchTab">
        <view class="iconfont  icon-gouwuche"></view>
        <view>购物车</view>
      </navigator>
      <view class="tool_item btn_cart" bindtap="handleCartAdd">加入购物车</view>
      <view class="tool_item btn_buy">立即购买</view>
    </view>

### 样式：goods\_detail.less ###

// 底部tab栏：固定定位--遮挡内容
    page {
      padding-bottom: 90rpx;
    }
    
    // 轮播图
    .detail_swiper {
    
      // 原图：400 * 400px，比例：1-1
      swiper {
        // 高 = 宽，也是比例：1-1；根据需要微调为65vw(该写：100vw)
        height: 65vw;
        text-align: center;
    
        swiper-item {
          image {
            width: 60%;
          }
        }
      }
    }
    
    // 商品价格
    .goods_price {
      padding: 15rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: var(--themeColor);
    }
    
    // 商品名称和收藏
    .goods_name_row {
      border-top: 5rpx solid #dedede;
      border-bottom: 5rpx solid #dedede;
      padding: 10rpx 0;
      display: flex;
    
      .goods_name {
        flex: 5;
        color: #000;
        font-style: 30rpx;
        padding: 0 10rpx;
    
        // 文字溢出--省略号代替...
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    
      .goods_collect {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1rpx solid #000;
    
        .icon-shoucang1 {
          color: orangered;
        }
        .collect_text {}
      }
    }
    
    // 商品详情
    .goods_info {
      .goods_info_title {
        font-size: 32rpx;
        font-weight: 600;
        color: var(--themeColor);
        padding: 20rpx;
      }
    
      .goods_info_content {}
    }
    
    // 底部tab栏
    .btm_tool {
      position: fixed;
      left: 0;
      bottom: 0;
      // 块级元素：添加绝对、固定定位之后，需要给一个宽度；否则宽度由内容撑开了
      width: 100%;
      height: 90rpx;
      background-color: #fff;
      border-top: 1rpx solid #ccc;
      display: flex;
    
      .tool_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        position: relative;
    
        // 隐形的button按钮：绝对定位，继承父元素宽高，不透明
        button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    
      .btn_cart {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 2;
        background-color: #ffa500;
        color: #fff;
        font-size: 30rpx;
        font-weight: 600;
      }
    
      .btn_buy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 2;
        background-color: #eb4450;
        color: #fff;
        font-size: 30rpx;
        font-weight: 600;
      }
    }

### 逻辑：goods\_detail.js文件 ###

// pages/goods_detail/goods_detail.js
    import {  request } from "../../request/index.js";
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        // 接口：商品详情数据
        goodsObj: { },
        // 商品是否被收藏
        isCollect: false
      },
      // 商品对象--全局变量
      GoodsInfo: { },
    
      // 点击轮播图 放大预览
      handlePrevewImage(e) { 
    
        // 1.先构造要预览的图片数组
        const urls = this.GoodsInfo.pics.map(v => v.pics_mid);
    
        // 2.接收传递过来的图片url
        const current = e.currentTarget.dataset.url;
    
        wx.previewImage({ 
          current,
          urls,
          success: (result) => { 
            console.log(result)
          }
        });
      },
      // 点击 加入购物车
      handleCartAdd() { 
    
        // 1.获取缓存中的购物车 数组格式
        let cart = wx.getStorageSync("cart") || [];
    
        // 2.先判断 当前的商品是否已经存在于 购物车 (缓存中的商品id === 商品对象的id)
        let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);
    
        if (index === -1) { 
          // 3. 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素带上购买数量属性 num 重新把购物车数组 填充回缓存中
          this.GoodsInfo.num = 1;
    
          // 重点：添加属性--商品选中状态--为购物车页面准备
          this.GoodsInfo.checked = true;
          cart.push(this.GoodsInfo)
    
        } else { 
    
          // 4. 已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组 填充回缓存中
          cart[index].num++;
    
        }
    
        // 5. 不管该商品是否存在于购物车数组中，都需要把购物车数组填充回缓存中
        wx.setStorageSync("cart", cart);
    
        // 6. 弹框提示
        wx.showToast({ 
          title: '加入成功',
          icon: 'success',
          // 防止用户手抖 疯狂点击按钮
          mask: true
        });
    
      },
      // 获取商品详情数据
       getGoodsDetail(goods_id) { 
    
         request({  url: "/goods/detail", data: {  goods_id } }).then(goodsObj=>{ 
    
          // 将接口数据赋值给全局变量
          this.GoodsInfo = goodsObj;
    
          // 1.获取缓存中的商品收藏的按钮
          let collect = wx.getStorageSync("collect") || [];
    
          // 2.判断当前商品是否被收藏
          let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
    
          // 3. 提取有用信息
          this.setData({ 
            goodsObj: { 
              goods_name: goodsObj.goods_name,
              goods_price: goodsObj.goods_price,
              /** * iphone 部分手机 不识别webp图片格式 * 最好找到后台 让他做修改 * 临时自己修改 确保后台存在 1.webp => 1.jpg */
              goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
              pics: goodsObj.pics
            },
            isCollect
          })
    
        });
      },
      /** * 点击收藏按钮 * 1. 判断该商品是否存在于缓存数组中 * 2. 已经存在 把该商品删除 * 3. 没有存在 把该商品添加到收藏数组中 存入缓存中即可。 */
      handleCollect() { 
    
        // 默认：没有被收藏
        let isCollect = false;
    
        // 1.获取缓存中的商品收藏数组
        let collect = wx.getStorageSync("collect") || [];
    
        // 2.判断该商品是否被收藏过
        let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);
    
        // 3.当index!= -1 表示 已经收藏过了
        if (index !== -1) { 
    
          // 能找到 已经收藏过了 在数组中删除该商品
          collect.splice(index, 1);
    
          // 取消收藏
          isCollect = false;
    
          wx.showToast({ 
            title: '取消成功',
            icon: 'success',
            mask: true
          });
            
        }else { 
    
          // 没有收藏过
          collect.push(this.GoodsInfo)
    
          // 添加收藏
          isCollect = true;
    
          wx.showToast({ 
            title: '收藏成功',
            icon: 'success',
            mask: true
          });
        }
        // 4.把数组存入缓存中
        wx.setStorageSync("collect", collect);
    
        // 5.修改data中的数据
        this.setData({ 
          isCollect
        })
    
      },
    /** * 生命周期函数--监听页面显示 */
      onLoad: function (options) { 
        console.log(options.goods_id)
      },
      /** * 生命周期函数--监听页面显示 * * 页面 onShow 的时候：收藏逻辑放在了 this.getGoodsDetail() 函数里面 * 1. 加载缓存中的商品收藏的数据 * 2. 判断当前商品是不是被收藏 * 是 改变页面的图标 * 不是 继续执行下面操作 */
      onShow: function (options) { 
    
        // 获取页面栈
        let pages = getCurrentPages();
        
        // 获取当前页面
        let currentPages = pages[pages.length - 1]
    
        // 获取url中传递过来的参数
        const {  goods_id } = currentPages.options;
    
        // 发请求获取该商品的详情信息
        this.getGoodsDetail(goods_id)
    
      }
    })

### 页面配置文件：goods\_detail.json文件 ###

{ 
      "usingComponents": { },
      "navigationBarTitleText": "商品详情"
    }