微信小程序：收藏、客服、分享、加入购物车、图片放大预览

微信小程序：收藏、客服、分享、加入购物车、图片放大预览

微信小程序包含功能

·轮播

·图片放大预览

·收藏

·客服

·加入购物车

在goods_detail下的index.wxml写页面代码

<!--pages/goods_detail/index.wxml-->
<!-- <text>pages/goods_detail/index.wxml</text> -->
<!-- 详情轮播图 -->
<view class="detail_swiper">
  <swiper autoplay circular indicator-dots interval="3000">
    <swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bind:tap="handlePrevewImage" data-url="{{item.pic_mid}}">
      <image mode="widthFix" src="{{item.pics_mid}}"></image>
    </swiper-item>
  </swiper>
</view>
<!-- 详情轮播图 -->

<!-- 价格 -->
<view class="goods_price">￥{{goodsObj.goods_price}}</view>
<!-- 价格 -->

<!-- 介绍和收藏 -->
<view class="goods_name_row">
  <!-- 左 -->
  <view class="goods_name">{{goodsObj.goods_name}}</view>
  <!-- 右 -->
  <view class="goods_collect" bind:tap="handleCollect">
    <text class="iconfont {{isCollect?'icon-shoucang2':'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 open-type="switchTab" url="/pages/cart/index" class="tool_item">
    <view class="iconfont icon-gouwuche"></view>
    <view>购物车</view>
  </navigator>
  <view class="tool_item btn_cart" bind:tap="handleCartAdd">
    加入购物车
  </view>
  <view class="tool_item btn_buy">
    立即购买
  </view>

</view>
<!-- 详情页底部 -->

在goods_detail下的index.wxss写样式

/* pages/goods_detail/index.wxss */
.detail_swiper swiper{
  height: 65vw;
  text-align: center;
}
.detail_swiper swiper 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-size: 30rpx;
  padding: 0 15rpx;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_collect{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid #000;
}
.icon-shoucang{
  color: var(--themeColor);
}
.goods_info_title{
  font-size: 32rpx;
  color: var(--themeColor);
  font-weight: 600;
  padding: 20rpx;
  border-bottom: 1rpx solid #dedede;
}

.btm_tool{
  border-top: 2rpx solid #dedede;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
}
.tool_item{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tool_item button{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.btn_cart{
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: orange;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
.btn_buy{
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}

在goods_detail下的index.js写逻辑代码

// pages/goods_detail/index.js
// 引入封装好的请求数据的js文件
import { request } from '../../request/index.js';
// 支持es7的async语法
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsObj:[],
    isCollect:false
  },

  //商品对象
  goodsInfo:{},

  /**
   * 生命周期函数--监听页面加载
   */
  onShow: function () {
    //获取上一页传过来的数据
    let pages = getCurrentPages();
    let currentPage = pages[pages.length-1];
    let options = currentPage.options;

    const {goods_id} = options;
    this.getGoodsDetail(goods_id);
  },
  //获取商品详情数据
  async getGoodsDetail(goods_id){
    const goodsObj = await request({ url:"/goods/detail",data:{goods_id}});
    console.log(goodsObj);
    this.goodsInfo=goodsObj;

    //1 获取缓存中商品收藏的按钮
    let collect = wx.getStorageSync("collect") || [];
    //2 判断当前商品是否被收藏
    let isCollect = collect.some(v => v.goods_id===this.goodsInfo.goods_id);

    this.setData({
      goodsObj:{
        goods_name:goodsObj.goods_name,
        goods_price:goodsObj.goods_price,
        goods_introduce:goodsObj.goods_introduce.replace(/\.webp/g,'.jpg'),//正则表达式
        pics:goodsObj.pics
      },
      isCollect
    })
  },
  //点击轮播图放大预览
  handlePrevewImage(e){
    console.log("你好");
    //先构造要预览的图片数组
    const urls = this.goodsInfo.pics.map(v => v.pics_mid);
    //接收传递过来的URL图片
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      current:current,
      urls:urls
    });
  },
  //点击加入购物车
  handleCartAdd(){
    console.log("gouwuc");
    //1 获取缓存中的购物车数组
    let cart = wx.getStorageSync("cart") || [];
    //2 判断商品对象是否存在数组中
    let index = cart.findIndex(v => v.goods_id===this.goodsInfo.goods_id);//遍历
    console.log(index);
    if(index===-1){
      //3 不存在 第一次添加
      this.goodsInfo.num=1;
      this.goodsInfo.checked=true;
      cart.push(this.goodsInfo);
    }else{
      //4 已经存在 执行num++
      cart[index].num++;
    }
    //5 把购物车重新添加回缓存中
    wx.setStorageSync("cart", cart);
    //6 弹窗提是
    wx.showToast({
      title: '加入购物车成功',
      icon: 'success',
      mask: true
    });
  },
  handleCollect(){
    let isCollect = false;
    //1 获取缓存中商品收藏的数组
    let collect = wx.getStorageSync("collect") || [];
    //2判断该商品是否被收藏过
    let index = collect.findIndex(v=>v.goods_id===this.goodsInfo.goods_id);
    //当index不等于-1时表示已经收藏过
    if(index!=-1){
      collect.splice(index,1);
      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);
    this.setData({
      isCollect
    })
  }
})