html
<view class='Selecte'>
<text wx:for="{{properties}}" wx:key="item" class='Shoptool'>{{item.name}}</text>
<text class='textSelect' bindtap='show'>
<text class='txt'>选择规格：选择服务 测试规格</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">购买数量</view>
<view class="onum">
<text bindtap='can'>-</text>
<text>{{count}}</text>
<text bindtap='add'>+</text>
</view>
</view>
<view class="cart">
<text bindtap='addCart'> 加入购物车</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}}'>暂无评论 </view>
<view class="car">
<image src='../../static/icon/在线客服.png' class='iconimgage'/>
<image src='../../static/icon/购物车.png' class='iconimgage' bindtap='Carting'/>
<text class='count' hidden='{{!count}}'>{{count}}</text>
<image src='../../static/icon/收藏.png' class='iconimgage'/>
<text>立即购买</text>
<text bindtap='Cart'> 加入购物车</text>
</view>
js
data: {
titleData: [
{
id: 0,
name: '商品介绍'
},
{
id: 1,
name: '商品评价'
}
],
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
})
},
/**
* 生命周期函数--监听页面加载
*/
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'); // 异步存储方法 数据同步存储的方法
// 1. 判断一进页面的时候你的同步存储数据是否有数据
if (value === "") { //同步存储数据等于空的话 data=false
wx.setStorage({
key: 'CartData',
data: false
})
} else { // 3 。否则 的话 用wx.getStorage拿到你点击加入购物车 这个res.data==false判断时保存的数据 再将数据用wx.setStorage将数据保存
wx.getStorage({
key: 'CartData',
success: (res) => {
console.log(res.data)
wx.setStorage({
key: 'CartData',
data: res.data
})
}
})
}
},
// 点击规格让要选择的规格出现，
show: function (e) {
this.setData({
flag: false
})
},
// 点击x让刚出现的选择规格消失
hide: function (e) {
this.setData({
flag: true
})
},
//切换标题的样式
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
})
}
},
// 点击选择规格时 传了两个index值
ChangColor:function(e) {
// console.log(e.currentTarget.dataset)
// 规格的index
let ind = e.currentTarget.dataset.in;
// 颜色的index
let index = e.currentTarget.dataset.index;
// console.log(e)
// 利用规格的index值给当前渲染在页面的总源头数据的每个儿子
for (var i = 0; i < this.data.properties[ind].childsCurGoods.length; i++) {
// 让当前所有的页面的总源头数据下的儿子的每个元素都处于关闭状态
this.data.properties[ind].childsCurGoods[i].oflag = false;
}
// 让当前点击的页面的总源头数据下的儿子的index元素都处于open的状态
this.data.properties[ind].childsCurGoods[index].oflag = true;
// this.setData 设置数据
this.setData({
properties: this.data.properties
})
},
// 加法
add: function (e) {
// console.log(this.data.count)
this.data.count++; // 在data中定义的count值++
// 然后在设置一下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
})
},
// 点击加入购物车
addCart: function (e) {
this.setData({
cart:true
})
// console.log(e)
let num = 0 // 相当于一个开关
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) { //判断规格数据中的每个数据是否是选中的状态 是的话，就将选中的元素添加在childsCurGoods数组中
properties.push(this.data.properties[i].childsCurGoods[j].name);
// console.log(childsCurGoods) ["1.8M", "珊瑚粉"]
num++
}
}
}
// 将你要传的数据放到这个对象当中
let obj = {
'name': this.data.basicInfo.name,
'src': this.data.basicInfo.pic,
"value": properties,
'count': this.data.count,
'checked': false
}
// 本地存储
// console.log(properties)
// 当你点击加入购物车的时候 你需要先将object用wx.getStorage获取到
wx.getStorage({
key: 'CartData', // 它获取的是一进页面时的数据同步时为空的数据 ，所以data=false
success: function (res) { // 获取成功的时候 使用res.data进行判断
// console.log(res) 因为一进页面，数据同步也是空的， data: false
if (res.data == false) { // 数据同步时的为空要走这个判断条件 res.data ==false 将第一次点击添加的数据进行一次保存
wx.setStorage({
key: "CartData", //只是一个key名
data: [obj] // 要保存的数据 Object/ string
})
}else{ // 4 。res.data== 数据时
let flagarr=false; //定义两个开关
let indexarr=false;
// console.log(res.data); 数据
for(var i=0;i<res.data.length;i++){
console.log(i)
// console.log(res.data[i].name) 商品的名字 例 简约知全棉四件套
// 相当于一个数组去重
if (res.data[i].name == obj.name) { //判断res.data[i].name 是不是等于obj.name
// console.log(obj.value) 规格数据
// 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]的数据 等于等于 obj.value[1] 与 res.data[i].value[3] 的数据 等于等于 obj.value[3] 执行以下
flagarr=i; // 0 是 关闭状态
indexarr=i+1; //定义的时候indexarr = false = 0 现在 indexarr = true = 1 indexarr为true的时候，
break; // 使用break跳出本次循环 进行下一个indexarr 为true的判断
}
}
}
if(!indexarr){ // true 时
// console.log(1)
res.data.push(obj) // res.data 将obj 添加，
wx.setStorage({
key: "CartData", //只是一个key名
data:res.data // 添加了obj的res.data
})
flagarr = false;
indexarr = false; //关闭
}else{ // 关闭时
// console.log(1) 添加第三次执行 数量
let count =res.data[flagarr].count+obj.count;
// console.log(num) // 数量 2
res.data[flagarr].count=count //数据重复出现的数量加加后赋值给保存的数据的数量
// console.log(res.data[flagarr].count) //数量 2
wx.setStorage({
key: 'CartData',
data: res.data
})
}
}
}
})
if (num == this.data.properties.length) { //num==2 当num 的开关的数值等于 properties的长度的话 执行一个成功的弹框
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000,
mask: true
})
this.setData({
flag: true
})
} else { // num 不等于properties的长度话，就执行一个请选择规格的弹框
wx.showToast({
title: '请选择规格',
icon: 'none',
duration: 2000,
mask: true
})
}
},
// 点击加入购物车 显示规格款
Cart: function (e) {
this.setData({
flag: false
})
},
// 点击购物车小图标，到购物车页面
Carting:function(e){
wx.switchTab({
url: '../cart/cart'
})
},
