// pages/goodsDetail/goodsDetail.js
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'../../assets/imgs/swiperImg.png',
'../../assets/imgs/swiperImg.png',
'../../assets/imgs/swiperImg.png'
],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 1000,
// input默认是1
num: 1,
// 使用data数据对象设置样式名
minusStatus: 'disabled',
tabs: ["图文详情", "商品参数", "评论（2）"],
activeIndex: 1,
sliderOffset: 0,
sliderLeft: 0,
flag: true,
flagPoster:true,
indicatoractivecolor: '#F44225',
collection:false,
classIndexColor:0,
classIndexSpecs: 0,
color:['红色','黑色'],
specs:['规格1','规格2']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
});
}
});
wx.showShareMenu({
// 要求小程序返回分享目标信息
withShareTicket: true
});
},
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
},
/* 转发*/
onShareAppMessage: function (ops) {
if (ops.from === 'button') {
// 来自页面内转发按钮
console.log(ops.target)
}
return {
title: '转发dom',
path: `pages/index/index`,
success: function (res) {
// 转发成功
console.log("转发成功:" + JSON.stringify(res));
var shareTickets = res.shareTickets;
if (shareTickets.length == 0) {
return false;
}
//可以获取群组信息
wx.getShareInfo({
shareTicket: shareTickets[0],
success: function (res) {
console.log(res)
}
})
},
fail: function (res) {
// 转发失败
console.log("转发失败:" + JSON.stringify(res));
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/* 点击减号 */
bindMinus: function (e) {
console.log(e);
var num = this.data.num;
// 如果大于1时，才可以减
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 点击加号 */
bindPlus: function (e) {
console.log(e);
var num = this.data.num;
// 不作过多考虑自增1
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 输入框事件 */
bindManual: function (e) {
var num = e.detail.value;
// 将数值与状态写回
this.setData({
num: num
});
},
//隐藏弹框
hidePopup: function () {
this.setData({
flag: !this.data.flag
})
},
//展示弹框
showPopup() {
this.setData({
flag: !this.data.flag
})
}
,
showPoster(){
this.setData({
flagPoster:false
})
},
hidePoster() {
this.setData({
flagPoster:true
})
},
/**
* 图片预览方法
* 此处注意的一点就是，调用 "wx.previewImage"时，第二个参数要求为数组形式哦
* 当然，做过图片上传功能的应该会注意到，如果涉及到多张图片预览，图片链接数组集合即为参数 urls！
*/
previewImage: function (e) {
var current = e.target.dataset.src;
console.log(current);
wx.previewImage({
current: current,
urls: [current]
})
},
// 收藏
collection(){
this.setData({
collection: !this.data.collection
})
},
// 选择颜色
chooseColor(e){
this.setData({
classIndexColor: e.currentTarget.dataset.index,
});
},
// 选择规格
chooseSpecs(e){
this.setData({
classIndexSpecs: e.currentTarget.dataset.index,
});
},
// 去购物车
toCart(){
wx.switchTab({
url: '../cart/cart'
})
},
// 去确认订单
toOrderConfirm(){
wx.navigateTo({
url: '../orderConfirm/orderConfirm',
})
},
// 加入购物车
addToCart(){
wx.showToast({
title: '加入成功',
})
}
})
手机商城前端静态页面模板源码 （163个子文件） 
.gitignore 159B goodsDetail.js 5KB sharecode.js 5KB cart.js 5KB person.js 4KB test.js 4KB classify.js 3KB goodsList.js 3KB myAddr.js 2KB app.js 2KB index.js 2KB order.js 2KB addrMan.js 2KB orderConfirm.js 1KB orderDetail.js 1KB mycollection.js 1KB myCoupon.js 1KB addAddr.js 1KB search.js 1KB orderPay.js 849B integral.js 849B balance.js 847B util.js 472B logs.js 261B app.json 2KB project.config.json 1KB sitemap.json 191B balance.json 132B integral.json 132B person.json 131B addrMan.json 54B logs.json 52B myCoupon.json 51B goodsList.json 48B sharecode.json 48B mycollection.json 48B goodsDetail.json 48B orderDetail.json 48B orderConfirm.json 48B addAddr.json 48B myAddr.json 48B orderPay.json 48B cart.json 45B order.json 42B search.json 42B index.json 2B classify.json 2B test.json 2B
banner.png 200KB listImg2.png 186KB swiperImg.png 111KB miniPro.png 108KB listImg.png 85KB sharecode_bg_head.png 58KB per_pop_sgin_ic_coin.png 13KB twoListC3.png 10KB twoListC1.png 10KB twoListC2.png 10KB per_header_pic_bg.png 6KB details_share_pop_ic_wechat.png 6KB sharecode_poster_pop_bg.png 4KB myorder_details_ic_order.png 4KB goodDetail.png 4KB per_header_ic_portrait_def.png 3KB home_hotbar_ic_hot.png 3KB home_hotbar_ic_favor.png 3KB sharecode_pic_people.png 3KB sharecode_pic_people.png 3KB sharecode_pic_money.png 3KB sharecode_pic_money.png 3KB list_screen_ic_empty.png 3KB details_share_poster_ic_head_def.png 3KB per_header_ic_sign.png 3KB details_share_pop_ic_poster.png 2KB coupon_pic_tichet_def.png 2KB home_hotbar_ic_form.png 2KB home_hotbar_ic_list.png 2KB per_service_ic_address.png 2KB home_nav_ic_my_def.png 2KB per_order_ic_repair.png 2KB coupon_pic_tichet_used.png 2KB per_service_ic_set.png 2KB per_service_ic_wallet.png 2KB home_nav_ic_home_def.png 1KB order_pay_pay.png 1KB per_service_ic_collection.png 1KB per_service_ic_Invite.png 1KB home_nav_ic_cart_def.png 1KB home_nav_ic_my_pre.png 1KB per_order_ic_shipped.png 1KB home_nav_ic_home_pre.png 909B per_service_ic_sign.png 901B details_nav_ic_collection_red.png 888B per_service_ic_cart.png 881B details_nav_ic_collection.png 875B home_nav_ic_cart_pre.png 845B oder_ic_pint.png 736B myorder_details_ic_pint.png 694B msg.png 661B per_service_ic_coupon.png 660B共 163 条
- 1
- 2
资源评论
