wx-购物车添加

<!--pages/goods_detail/index.wxml-->
<view class="detail_swiper">
    <swiper autoplay="{{true}}" circular="{{true}}" indicator-dots>
        <swiper-item wx:for="{{goodsobj.pics}}" wx:key="pics_id" bindtap="handpreviewImage" data-url="{{item.pics_mid}}">
            <image src="{{item.pics_mid}}" mode="widthFix"></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">
        <text class="iconfont 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 class="" nodes="{{goodsobj.goods_introduce}}">
            
        </rich-text>
         <!--{{goodsobj.goods_introduce}}-->
     </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" open-type="switchTab" url="/pages/cart/index">
        <view class="iconfont icon-gouwuche"></view>
        <view>购物车</view>
    </navigator>
    <view class="tool_item btn_car" bindtap="handlecartAdd">
        <view>加入购物车</view>
    </view> 
    <view class="tool_item btn_buy">
        <view>立即购买</view>
    </view>  
</view>
  
  

.detail_swiper swiper {
  height: 65vw;
  text-align: center;
}
.detail_swiper swiper image {
  width: 60%;
}
.goods_price {
  padding: 15rpx;
  color: var(--thremColor);
  font-size: 32rpx;
  font-weight: 600;
}
.goods_name_row {
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 0;
  display: flex;
}
.goods_name_row .goods_name {
  flex: 5;
  color: #000;
  font-size: 30rpx;
  padding: 0 10rpx;
  /*防止内容多，盒子被撑大*/
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_name_row .goods_collect {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*主轴方向：上下*/
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid #000;
}
.goods_info .goods_info_title {
  font-size: 32rpx;
  color: var(--thremColor);
  font-weight: 600;
  padding: 20rpx;
}
.btm_tool {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
}
.btm_tool .tool_item {
  border-top: 1px solid #000;
  flex: 1;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  position: relative;
}
.btm_tool .tool_item button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.btm_tool .btn_car {
  flex: 2;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffa500;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
.btm_tool .btn_buy {
  flex: 2;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eb4450;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}

// pages/goods_detail/index.js
import {request} from "../../request/index.js"
Page({

  /**
   * 页面的初始数据
   */
  data: { 
    goodsobj:{}
  },
  //全局对象：商品对象
  GoodsInfo:{},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const goods_id = options.goods_id
    this.getgoodsdetail(goods_id)
  },
  //获取商品详情
  async getgoodsdetail(goods_id){
    const  goodsobj= await request({url:"/goods/detail",data:{goods_id}})
    // console.log(goodsobj)
    this.GoodsInfo=goodsobj;
    this.setData({
      goodsobj:{
        goods_name:goodsobj.data.message.goods_name,
        goods_price:goodsobj.data.message.goods_price,
        //iphone部分手机，不识别webp图片格式
        //一、后台更改
        //二、前端修改
        //   确保后台存在图片，利用正则修改图片格式
        goods_introduce:goodsobj.data.message.goods_introduce.replace(/\.webp/g,‘.jpg‘),
        pics:goodsobj.data.message.pics,
      }
    })
    // console.log(this.data.goodsobj)
  },
  //点击轮播图放大预览
  handpreviewImage(e){
    //1、预购要预览的图片数组
    const urls = this.GoodsInfo.data.message.pics.map(v=>v.pics_mid);
    // console.log(urls)
    //2、点击事件触发，接收传过来的图片URL
    const current = e.currentTarget.dataset.url
    wx.previewImage({
      urls: urls,
      current:current
    })
  },
  // 点击  加入购物车：在前端利用缓存模拟
  handlecartAdd(){
    // console.log("flasdhfl;kasdhfl;asdjf;lkasdjf;asdjf;asd")
    // 1、获取缓存中的购物车数据  数组格式
    let cart=wx.getStorageSync("cart")||[];
    // 2、判断当前商品是否存在购物车内
    let index=cart.findIndex(v=>v.data.message.goods_id===this.GoodsInfo.data.message.goods_id)

    if(index===-1){
      //3、不存在，第一次添加
      this.GoodsInfo.num=1
      cart.push(this.GoodsInfo)
    }else{
      //4、已经存在数据，执行++
      cart[index].num++
    }
    //5、把购物车重新填充到缓存中
    wx.setStorageSync("cart", cart);
    //6、弹出提示
    wx.showToast({
      title: ‘加入成功‘,
      icon: ‘success‘,
      //mask值为True,防止用户连续点击，休眠1.5秒后才执行++操作
      mask: true
    });
      

  }
})