html

<view class='Selecte'>
<text wx:for="{{properties}}" wx:key="item" class='Shoptool'>{{item.name}}</text> 

<text class='textSelect' bindtap='show'>
  <text class='txt'>選擇規(guī)格：選擇服務(wù) 測(cè)試規(guī)格</text> 
  <text class='textleft'>></text>
</text>

<view class="shopcar" hidden="{{flag}}">

   <view class="top">

       <image src="{{basicInfo.pic}}"/> 

       <view class="title">
          <text class="name">{{basicInfo.name}}</text>
          <text class="price" >￥299</text>
      </view>

      <view class="x" bindtap='hide'>X</view>

  </view>

  <view class="classify">
       <view wx:for="{{properties}}" wx:key="index" class="classifywrap" data-index='{{index}}' wx:for-index='index'>
       <view class="otitle">{{item.name}}</view>

       <view class="gg">
          <view wx:for="{{item.childsCurGoods}}" wx:key="index" data-in='{{index}}' data-index='{{index1}}' class="ggview{{item.oflag ? 'ggactive' : ''}}" wx:for-index='index1' bindtap='ChangColor'>{{item.name}}</view>
       </view>

     </view>
   </view>

   <view class="num">
      <view class="ootitle">購(gòu)買數(shù)量</view>
      <view class="onum">
          <text bindtap='can'>-</text>
          <text>{{count}}</text>
          <text bindtap='add'>+</text>
      </view>
   </view>

   <view class="cart">
       <text bindtap='addCart'> 加入購(gòu)物車</text>
    </view>

 </view>
</view>
<view class="item">
    <view wx:for="{{titleData}}" wx:key="index" class="tabclass {{num == item.id ? 'active' : ''}}" data-index='{{index}}' bindtap='titleflag'>{{item.name}}</view>

    </view>
       <view hidden='{{ohide}}'>
            <template is="wxParse" data="{{wxParseData:article.nodes}}"  />
      </view>

      <view hidden='{{!ohide}}'>暫無(wú)評(píng)論 </view>
      <view class="car">
           <image src='../../static/icon/在線客服.png' class='iconimgage'/>
           <image src='../../static/icon/購(gòu)物車.png' class='iconimgage' bindtap='Carting'/>
           <text class='count' hidden='{{!count}}'>{{count}}</text>
           <image src='../../static/icon/收藏.png' class='iconimgage'/>
           <text>立即購(gòu)買</text>
           <text bindtap='Cart'> 加入購(gòu)物車</text>
      </view>

js

    data: {
    titleData: [
      {
        id: 0,
        name: '商品介紹'
      },
      {
        id: 1,
        name: '商品評(píng)價(jià)'
      }
    ],
    ohide: false,
    num: 0,
    NUM: 0,
    properties: '',
    oflag: false,
    count: 1,
    cart:false
  },
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {
    // console.log(options.id)
    var that = this;
    wx.request({
      url: 'https://api.it120.cc/small4/shop/goods/detail?id=' + options.id,
      method: 'POST',
      data: {
        // 'id': options.id
      },
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        // console.log(res.data.data)
        // 解析HTML
        var article = res.data.data.content
        // console.log(article)
        WxParse.wxParse('article', 'html', article, that, 5);
        this.setData({
          Shopdetail: res.data.data.pics,
          properties: res.data.data.properties,
          basicInfo: res.data.data.basicInfo
        })
      }
    })
   
    var value = wx.getStorageSync('CartData');  // 異步存儲(chǔ)方法  數(shù)據(jù)同步存儲(chǔ)的方法
     // 1. 判斷一進(jìn)頁(yè)面的時(shí)候你的同步存儲(chǔ)數(shù)據(jù)是否有數(shù)據(jù)
    if (value === "") {  //同步存儲(chǔ)數(shù)據(jù)等于空的話 data=false
    wx.setStorage({
      key: 'CartData',
      data: false
    })
    } else { // 3 乾颁。否則 的話 用wx.getStorage拿到你點(diǎn)擊加入購(gòu)物車  這個(gè)res.data==false判斷時(shí)保存的數(shù)據(jù)  再將數(shù)據(jù)用wx.setStorage將數(shù)據(jù)保存
    wx.getStorage({
      key: 'CartData',
      success: (res) => {
        console.log(res.data)
        wx.setStorage({
          key: 'CartData',
          data: res.data       
        })
      }
    })
  }
    
  },
  // 點(diǎn)擊規(guī)格讓要選擇的規(guī)格出現(xiàn)英岭，
  show: function (e) {
    this.setData({
      flag: false
    })
  },
  // 點(diǎn)擊x讓剛出現(xiàn)的選擇規(guī)格消失
  hide: function (e) {
    this.setData({
      flag: true
    })
  },
  //切換標(biāo)題的樣式
  titleflag: function (e) {
    // console.log(e)
    this.setData({
      num: e.currentTarget.dataset.index
    })
    if (e.currentTarget.dataset.index == 0) {
      this.setData({
        ohide: false
      })
    } else if (e.currentTarget.dataset.index == 1) {
      this.setData({
        ohide: true
      })
    }
  },
  // 點(diǎn)擊選擇規(guī)格時(shí) 傳了兩個(gè)index值
  ChangColor:function(e) {
    // console.log(e.currentTarget.dataset)
    // 規(guī)格的index
    let ind = e.currentTarget.dataset.in;
    // 顏色的index
    let index = e.currentTarget.dataset.index;
    // console.log(e)
    // 利用規(guī)格的index值給當(dāng)前渲染在頁(yè)面的總源頭數(shù)據(jù)的每個(gè)兒子
    for (var i = 0; i < this.data.properties[ind].childsCurGoods.length; i++) {
      // 讓當(dāng)前所有的頁(yè)面的總源頭數(shù)據(jù)下的兒子的每個(gè)元素都處于關(guān)閉狀態(tài)
      this.data.properties[ind].childsCurGoods[i].oflag = false;
    }
    // 讓當(dāng)前點(diǎn)擊的頁(yè)面的總源頭數(shù)據(jù)下的兒子的index元素都處于open的狀態(tài)
    this.data.properties[ind].childsCurGoods[index].oflag = true;
    // this.setData 設(shè)置數(shù)據(jù)
    this.setData({
      properties: this.data.properties
    })
  },
  // 加法
  add: function (e) {
    // console.log(this.data.count)
    this.data.count++; // 在data中定義的count值++
    //  然后在設(shè)置一下count值
    this.setData({
      count: this.data.count
    })
  },
  // 減法  
  can: function (e) {
    this.data.count--;
    // console.log(this.data.count)
    if (this.data.count <= 1) {
      this.data.count = 1
    }
    this.setData({
      count: this.data.count
    })
  },
  // 點(diǎn)擊加入購(gòu)物車
  addCart: function (e) {
    this.setData({
      cart:true
    })
    // console.log(e)
    let num = 0 // 相當(dāng)于一個(gè)開關(guān)
    let properties = []
    for (let i = 0; i < this.data.properties.length; i++) {
      properties.push(this.data.properties[i].name)  //定義的properties  就是為了裝尺寸和顏色的
      for (let j = 0; j < this.data.properties[i].childsCurGoods.length; j++) {
        if (this.data.properties[i].childsCurGoods[j].oflag) {  //判斷規(guī)格數(shù)據(jù)中的每個(gè)數(shù)據(jù)是否是選中的狀態(tài)  是的話吭狡，就將選中的元素添加在childsCurGoods數(shù)組中
          properties.push(this.data.properties[i].childsCurGoods[j].name);
          // console.log(childsCurGoods)  ["1.8M", "珊瑚粉"]
          num++
        }
      }
    }
    // 將你要傳的數(shù)據(jù)放到這個(gè)對(duì)象當(dāng)中
    let obj = {
      'name': this.data.basicInfo.name,
      'src': this.data.basicInfo.pic,
      "value": properties,
      'count': this.data.count,
      'checked': false
    }
  //  本地存儲(chǔ) 
    // console.log(properties)
    // 當(dāng)你點(diǎn)擊加入購(gòu)物車的時(shí)候 你需要先將object用wx.getStorage獲取到
    wx.getStorage({
      key: 'CartData',   // 它獲取的是一進(jìn)頁(yè)面時(shí)的數(shù)據(jù)同步時(shí)為空的數(shù)據(jù) 缔俄，所以data=false
      success: function (res) {   // 獲取成功的時(shí)候  使用res.data進(jìn)行判斷
        // console.log(res)  因?yàn)橐贿M(jìn)頁(yè)面弛秋，數(shù)據(jù)同步也是空的俐载， data: false 
        if (res.data == false) {  // 數(shù)據(jù)同步時(shí)的為空要走這個(gè)判斷條件 res.data ==false 將第一次點(diǎn)擊添加的數(shù)據(jù)進(jìn)行一次保存
          wx.setStorage({
            key: "CartData", //只是一個(gè)key名
            data: [obj]  // 要保存的數(shù)據(jù) Object/ string
          })
        }else{  // 4 状婶。res.data==  數(shù)據(jù)時(shí) 
          let flagarr=false; //定義兩個(gè)開關(guān)
          let indexarr=false;
          // console.log(res.data); 數(shù)據(jù)
          for(var i=0;i<res.data.length;i++){
            console.log(i)
            // console.log(res.data[i].name)  商品的名字  例 簡(jiǎn)約知全棉四件套
            // 相當(dāng)于一個(gè)數(shù)組去重
            if (res.data[i].name == obj.name) {  //判斷res.data[i].name 是不是等于obj.name
              // console.log(obj.value)   規(guī)格數(shù)據(jù)
              // console.log(!obj.value[3])   false
              // console.log(res.data[i].value[1])  1.8 / 1.5
              // console.log(obj.value[3])  珊瑚粉
              if (res.data[i].value[1] == obj.value[1] && res.data[i].value[3]  ==obj.value[3] ) { //判斷 res.data[i].value[1]的數(shù)據(jù)  等于等于 obj.value[1]   與 res.data[i].value[3]  的數(shù)據(jù)  等于等于 obj.value[3]    執(zhí)行以下
                 flagarr=i;  // 0 是 關(guān)閉狀態(tài)
                     indexarr=i+1;  //定義的時(shí)候indexarr = false = 0  現(xiàn)在 indexarr = true = 1  indexarr為true的時(shí)候令杈，
                    break; // 使用break跳出本次循環(huán) 進(jìn)行下一個(gè)indexarr 為true的判斷
                }
              }
            }
            if(!indexarr){ // true 時(shí)
              // console.log(1)
              res.data.push(obj) // res.data 將obj 添加逗噩，
              wx.setStorage({
              key: "CartData", //只是一個(gè)key名
              data:res.data  // 添加了obj的res.data
              })
              flagarr = false;
              indexarr = false;  //關(guān)閉
            }else{ // 關(guān)閉時(shí)  
              //  console.log(1) 添加第三次執(zhí)行 數(shù)量
              let count =res.data[flagarr].count+obj.count;
              // console.log(num) //  數(shù)量 2
              res.data[flagarr].count=count //數(shù)據(jù)重復(fù)出現(xiàn)的數(shù)量加加后賦值給保存的數(shù)據(jù)的數(shù)量
              // console.log(res.data[flagarr].count)  //數(shù)量 2
              wx.setStorage({
                key: 'CartData',
                data: res.data
              })
            }
          }
        }
      })
    if (num == this.data.properties.length) {  //num==2  當(dāng)num 的開關(guān)的數(shù)值等于 properties的長(zhǎng)度的話  執(zhí)行一個(gè)成功的彈框
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000,
        mask: true
      })
      this.setData({
        flag: true
      })
    } else { // num 不等于properties的長(zhǎng)度話，就執(zhí)行一個(gè)請(qǐng)選擇規(guī)格的彈框
      wx.showToast({
        title: '請(qǐng)選擇規(guī)格',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    }
  },
  // 點(diǎn)擊加入購(gòu)物車 顯示規(guī)格款
  Cart: function (e) {
    this.setData({
      flag: false
    })
  },
  // 點(diǎn)擊購(gòu)物車小圖標(biāo)示绊，到購(gòu)物車頁(yè)面
  Carting:function(e){
    wx.switchTab({
      url: '../cart/cart'
    })
  },