微信小程序 商品详情页弹窗
<view class="goods-detail-chooseCategory-title" catchtap="normal" data-statu="open">
<!-- {{clickShowAlertState}} -->
<view class="goods-detail-chooseCategory-titleLeft">{{chooseCategoryTemp == null || currentChooseCategoryIndexTemp == -1 ?"选择"+goodsInfo.category:"已选:"+chooseCategoryTemp.category+" "+currentCategoryNumTemp+"个"}}</view>
<view class="goods-detail-chooseCategory-titleRight">></view>
</view>
<!--button-->
<!-- <view class="btn" >button</view> -->
<!--mask-->
<!-- <view class="drawer_screen" catchtap="showOrHideCategory" data-statu="close" wx:if="{{showModalStatus}}"></view> -->
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="category-box" wx:if="{{showModalStatus}}">
<view class='category-box-inner'>
<!--drawer content-->
<view class="category-box-top">
<view class='category-box-top-left'>
<image class='category-box-top-icon'></image>
<view class='category-box-top-left-center'>
<text class='price'>¥{{chooseCategoryTemp==null || currentChooseCategoryIndexTemp==-1?(goodsInfo.activesFlag == '0' ? goodsInfo.priceRange : goodsInfo.eventPriceRange):(goodsInfo.activesFlag == '0' ?chooseCategoryTemp.price:chooseCategoryTemp.eventPrice)}}</text>
<text>库存：{{chooseCategoryTemp == null || currentChooseCategoryIndexTemp == -1 ? goodsInfo.qty : chooseCategoryTemp.qty}}</text>
<text>{{chooseCategoryTemp==null || currentChooseCategoryIndexTemp==-1?"请选择"+goodsInfo.category:"已选:"+chooseCategoryTemp.category}}</text>
</view>
</view>
<image class='category-box-top-close' catchtap="showOrHideCategory" data-statu="x-close"></image>
</view>
<view class="category-box-content">
<view class=' category-box-content-category '>
<text class='category-box-content-category-text '>选择{{goodsInfo.category}}</text>
<view class='category '>
<block wx:for="{{goodsInfo.goodsc}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<text class="{{index==currentChooseCategoryIndexTemp?'category-text-yes':'category-text-no'}}" catchtap='onCategoryItemChecked' data-category-index='{{index}}' data-category-item='{{item}}'>{{item.category}}</text>
</block>
</view>
</view>
<view class='category-buy'>
<text>购买数量(起订量*{{goodsInfo.start_qty}})</text>
<view class='category-number-view'>
<text catchtap='categoryReduce'>-</text>
<input bindinput='dealInputCategoryNum' type='number' value='{{currentCategoryNumTemp}}'></input>
<text catchtap='categoryPlus'>+</text>
</view>
</view>
</view>
<view class="btn_ok" catchtap="showOrHideCategory" data-statu="ok-close">确定</view>
</view>
</view>
onCategoryItemChecked: function (event) {
var data = event.currentTarget.dataset
var categoryItem = data.categoryItem
var chooseIndex = data.categoryIndex
if (categoryItem.qty >= this.data.goodsInfo.start_qty) {
this.setData({
chooseCategoryTemp: categoryItem,
currentChooseCategoryIndexTemp: chooseIndex,
// currentCategoryNum: this.data.goodsInfo.start_qty
currentCategoryNumTemp: chooseIndex == this.data.currentChooseCategoryIndex ? this.data.currentCategoryNum : this.data.goodsInfo.start_qty
})
} else {
wx.showToast({
title: '该品类无法选择',
icon: 'none'
})
}
},
// 显示或者隐藏 选择品类
showOrHideCategory: function (e) {
// LogUtil.show(this.data.chooseCategory.id == this.data.chooseCategoryTemp.id)
LogUtil.show("打印 显示或隐藏 ----------")
LogUtil.show(e)
var currentStatu = e.currentTarget.dataset.statu
var alertFlag = e.currentTarget.dataset.alertFlag
switch (currentStatu) {
case "open":
LogUtil.show("打开弹窗")
break
case "x-close":
LogUtil.show("点击叉号关闭弹窗")
this.setData({
chooseCategoryTemp: this.data.chooseCategory,
currentChooseCategoryIndexTemp: this.data.currentChooseCategoryIndex,
currentCategoryNumTemp: this.data.currentCategoryNum
// checkedCategory: "已选:" + this.data.currentCategoryText + +"个"
})
break
case "ok-close":
LogUtil.show("点击确定关闭弹窗")
if (this.data.chooseCategoryTemp == null || this.data.currentChooseCategoryIndexTemp == -1) {
wx.showToast({
title: '请选择' + this.data.goodsInfo.category,
icon: 'none'
})
return
}
this.setData({
chooseCategory: this.data.chooseCategoryTemp,
currentChooseCategoryIndex: this.data.currentChooseCategoryIndexTemp,
currentCategoryNum: this.data.currentCategoryNumTemp
// checkedCategory: "已选:" + this.data.currentCategoryText + +"个"
})
LogUtil.show("点击确定的标记 --- isFromFlag:" + isFromFlag)
// if (alertFlag) {
switch (isFromFlag) {
case 1:
LogUtil.show("请求加入购物车")
this.requestToCar()
break
case 2:
// this.requestToCar()
wx.showToast({
title: '立即购买 逻辑未处理',
icon: 'none'
})
break
// case STATE_FLAG_NORMAL:
// this.setData({
// })
// break
// }
}
break
}
this.util(currentStatu)
},
util: function (currentStatu) {
/* 动画部分 */
// 第1步：创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
// 第2步：这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步：执行第一组动画
animation.opacity(0).translateY(100).step();
// 第4步：导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
})
// 第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).translateY(0).step();
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
})
//关闭
if (currentStatu == "x-close" || currentStatu == "ok-close") {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData(
{
showModalStatus: true
}
);
}
},
dealInputCategoryNum: function (event) {
var categoryNum
if (event.detail.value == '' || event.detail.value < this.data.goodsInfo.start_qty) {
categoryNum = this.data.goodsInfo.start_qty
} else if (event.detail.value > (this.data.chooseCategoryTemp == null || this.data.currentChooseCategoryIndexTemp == -1 ? this.data.goodsInfo.qty : this.data.chooseCategoryTemp.qty)) {
categoryNum = (this.data.chooseCategoryTemp == null || this.data.currentChooseCategoryIndexTemp == -1 ? this.data.goodsInfo.qty : this.data.chooseCategoryTemp.qty)
} else {
categoryNum = event.detail.value
}
this.setData({
// currentCategoryNum: categoryNum
currentCategoryNumTemp: categoryNum
})
},
categoryReduce: function () {
LogUtil.show(this.data.currentCategoryNumTemp + " ---- " + this.data.goodsInfo.start_qty)
if (this.data.currentCategoryNumTemp > this.data.goodsInfo.start_qty) {
this.setData({
// currentCategoryNum: --this.data.currentCategoryNum
currentCategoryNumTemp: --this.data.currentCategoryNumTemp
})
} else {
wx.showToast({
title: '最低购买数量不能小于起订量',
icon: 'none'
})
}
},
categoryPlus: function () {
if (this.data.currentCategoryNumTemp < (this.data.chooseCategoryTemp == null || this.data.currentChooseCategoryIndexTemp == -1 ? this.data.goodsInfo.qty : this.data.chooseCategoryTemp.qty)) {
LogUtil.show(this.data.currentCategoryNumTemp + " ---- " + this.data.goodsInfo.start_qty)
this.setData({
// currentCategoryNum: ++this.data.currentCategoryNum
currentCategoryNumTemp: ++this.data.currentCategoryNumTemp
})
} else {
wx.showToast({
title: '最高购买数量不能大于该分类当前库存',
icon: 'none'
})
}
},
/**
* 页面的初始数据
*/
data: {
headerUrl: APP.url.header,
enterShopBeanUrl: APP.url.enterShopBeanUrl,
loading: false,
actionSheetHidden: true,
cutFlowerHidden: false,
foreverFlowerHidden: false,
zicaiHidden: false,
huapenHidden: false,
penhuaHidden: false,
detailBody: {},
goodsId: "",
showModalStatus: false,
goodsInfo: {},
isShowActive: "",
activesTypeTag: "",
activesTypeText: "",
activesTimeFlag: "", // 倒计时的时间标记 1 为距活动结束 否则 距活动开始
countDownDay: 0,
countDownHour: 0,
countDownMinute: 0,
countDownSecond: 0,
chooseCategoryTemp: {}, // 临时的当前选择品类
chooseCategory: {}, // 确定的当前选择品类
isInit: true,
currentCategoryNumTemp: 1, // 临时 当前的个数
currentCategoryNum: 1, // 当前的个数
currentChooseCategoryIndexTemp: -1, // 临时 只有1个时 默认 多个时 不默认
currentChooseCategoryIndex: -1, // 只有1个时 默认 多个时 不默认
},
normal: function (e) {
isFromFlag = 0
this.showOrHideCategory(e)
},
addToCar: function (e) {
isFromFlag = 1
if ((this.data.chooseCategoryTemp == null || this.data.currentChooseCategoryIndexTemp == -1)) {
wx.showToast({
title: '请选择' + this.data.goodsInfo.category,
icon: 'none'
})
this.showOrHideCategory(e)
return
} else {
this.requestToCar()
}
},
requestToCar: function () {
var that = this
LogUtil.show(APP.url.goodsAddCarUrl())
wx.request({
url: APP.url.goodsAddCarUrl(),
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
mobileLogin: 'true',
goods_id: this.data.goodsInfo.id,
categoryId: this.data.chooseCategory.id,
qty: this.data.currentCategoryNum
},
success: function (res) {
LogUtil.show(res)
if (res.data.success) {
wx.showToast({
title: '添加购车成功',
})
that.setData({
chooseCategoryTemp: {},
currentChooseCategoryIndexTemp: -1,
chooseCategory: {},
currentChooseCategoryIndex: -1
})
} else {
wx.showToast({
title: res.data.msg,
icon: 'none'
})
}
},
fail: function (res) {
LogUtil.show(res)
}
})
},