微信小程序购物车页面加购物车底部
css页面
.container {
background-color: #F2f2f2;
min-height: 100%;
padding-bottom: 100rpx;
}
.swiper-container{
width: 100%;
position: relative;
}
.swiper_box {
width: 100%;
height:748rpx;
}
swiper-item image {
width: 100%;
display: inline-block;
overflow: hidden;
height:748rpx;
}
.swiper-container .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #000;
border-radius: 50%;
transition: all .6s;
opacity: .3;
}
.swiper-container .dots .dot.active{
opacity: .6;
}
.goods-info{
background-color: #fff;
padding: 35rpx 0;
margin-bottom: 24rpx;
width: 100%;
position: relative;
}
.goods-info-fx {
position: absolute;
width: 50px;
height: 60px;
right: 0;
top: 0;
}
.goods-info-fx button {
position: absolute;
width: 50px;
height: 60px;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.goods-info-fx image {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 10px 10px 0 5px;
}
.goods-info-fx text {
position: absolute;
bottom: 3px;
left: 0;
z-index: 1;
font-size: 10px;
text-align: center;
}
.goods-info .goods-title{
box-sizing: border-box;
padding: 0 35rpx;
font-size: 32rpx;
line-height: 1.4;
color: #000;
margin-bottom: 28rpx;
}
.goods-info .goods-share{
box-sizing: border-box;
padding: 0 35rpx;
font-size: 25rpx;
line-height: 1.4;
color: #CC0000;
margin-bottom: 28rpx;
}
.goods-info .goods-price{
box-sizing:border-box;
color:#e64340;
font-size: 28rpx;
font-weight: bold;
width: 30%;
float:left;
}
.row-arrow{
width: 100%;
box-sizing: border-box;
padding: 0 120rpx 0 35rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 102rpx;
font-size: 28rpx;
line-height: 102rpx;
margin-bottom: 28rpx;
background: #fff url(https://cdn.it120.cc/images/weappshop/arrow-right.png) no-repeat 697rpx center;
background-size: 18rpx auto;
}
.goods-des-info{
width: 100%;
box-sizing: border-box;
background-color: #fff;
}
.label-title{
font-size:28rpx;
color:#000000;
padding: 30rpx;
}
.goods-text{
padding: 0 10rpx;
font-size:28rpx;
color:#666666;
line-height: 56rpx;
margin-bottom: 30rpx;
}
.des-imgs{
width:100%;
}
.des-imgs image{
width: 100%;
}
.footer-box{
width: 100%;
height: 100rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
display: flex;
box-shadow:0 0 8rpx 0 ;
}
.footer-box .contact{
position: relative;
width: 120rpx;
height: 100%;
line-height: 100rpx;
text-align: center;
padding-top: 26rpx;
font-size:20rpx;
color:#008000;
box-sizing: border-box;
background:url(“https://cdn.it120.cc/images/weappshop/kefu.png”) no-repeat center 21rpx;
background-size: 55rpx auto;
}
.footer-box .shop-cart-btn{
position: relative;
width: 150rpx;
height: 100%;
line-height: 100rpx;
text-align: center;
padding-top: 26rpx;
font-size:20rpx;
color:#acacb7;
box-sizing: border-box;
background:url(“https://cdn.it120.cc/images/weappshop/cart.png”) no-repeat center 21rpx;
background-size: 44rpx auto;
}
.footer-box .shop-cart-btn .shop-num{
position: absolute;
color:#e64340;
left: 80rpx;
top:-20rpx;
}
.footer-box .join-shop-cart{
text-align: center;
width: 250rpx;
height: 100%;
line-height: 100rpx;
background-color: #ff6850;
color:#fff;
font-size: 34rpx;
}
.footer-box .now-buy{
text-align: center;
height: 100%;
width: 250rpx;
line-height: 100rpx;
background-color: #e64340;
color:#fff;
font-size: 34rpx;
}
.show-popup{
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
z-index: 4;
}
.popup-mask{
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 5;
}
.popup-contents{
position: fixed;
left: 0;
bottom: 0;
width:100%;
background-color: #fff;
z-index: 6;
}
.pop-goods-info{
display: flex;
flex-direction: row;
align-items: center;
margin-left: 30rpx;
padding: 30rpx 0;
border-bottom: 1px solid #eee;
}
.pop-img-box{
width: 120rpx;
height: 120rpx;
overflow: hidden;
margin-right: 26rpx;
}
.pop-img-box .goods-thumbnail{
width: 120rpx;
height: 120rpx;
}
.pop-goods-title{
width: 484rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size:26rpx;
color:#000000;
}
.pop-goods-price{
font-size:26rpx;
color:#e64340;
margin-top:20rpx;
}
.pop-goods-close{
width: 36rpx;
height: 36rpx;
flex: 1;
background:url(“https://cdn.it120.cc/images/weappshop/popup-close.png”) no-repeat center center;
background-size: 36rpx auto;
align-self: flex-start;
margin-top: -10rpx;
}
.size-label-box .label{
font-size:26rpx;
color:#000;
padding-left: 30rpx;
padding: 30rpx 0 20rpx 30rpx;
}
.size-label-box .label-item-box{
display: flex;
margin-left: 30rpx;
flex-direction: row;
flex-wrap:wrap;
}
.size-label-box .label-item{
font-size:26rpx;
color:#000;
padding: 14rpx 20rpx;
border: 1px solid #ddd;
border-radius: 6rpx;
margin: 0 20rpx 20rpx 0;
}
.size-label-box .label-item.active{
color: #e64340;
border: 1px solid #e64340;
}
.buy-num-box{
display: flex;
justify-content: space-between;
padding: 30rpx 30rpx 48rpx 0;
margin-left: 30rpx;
border-top: 1px solid #eee;
margin-top: 30rpx;
align-items: center;
}
.num-label{
font-size:26rpx;
color:#000000;
}
.buy-num-box .num-box{
display: flex;
}
.buy-num-box .num-box .num-jian,
.buy-num-box .num-box .num-input,
.buy-num-box .num-box .num-jia{
width: 80rpx;
height: 64rpx;
line-height: 62rpx;
text-align: center;
border: 1px solid #eee;
}
.buy-num-box .num-box .num-input{
font-size: 28rpx;
}
.buy-num-box .num-box .num-input input{
height: 100%;
}
.popup-join-btn{
width: 100%;
height: 89rpx;
text-align: center;
line-height: 89rpx;
font-size:34rpx;
color:#ffffff;
background-color: #e64340;
}
.buy-num-box .num-box .hui{
background-color: #f5f5f9;
}
js页面
//index.js
//获取应用实例
var app = getApp();
// var WxParse = require(’…/…/wxParse/wxParse.js’);
Page({
data: {
autoplay: true,
interval: 3000,
duration: 1000,
goodsDetail:{},
swiperCurrent: 0,
hasMoreSelect:false,
selectSize:“选择：”,
selectSizePrice:0,
shopNum:0,
hideShopPopup:true,
buyNumber:0,
buyNumMin:1,
buyNumMax:0,
propertyChildIds:"",
propertyChildNames:"",
canSubmit:false, // 选中规格尺寸时候是否允许加入购物车
shopCarInfo:{},
shopType: "addShopCar",//购物类型，加入购物车或立即购买，默认为加入购物车
},
//事件处理函数
swiperchange: function(e) {
//console.log(e.detail.current)
this.setData({
swiperCurrent: e.detail.current
})
},
onLoad: function (e) {
if (e.inviter_id) {
wx.setStorage({
key: ‘inviter_id_’ + e.id,
data: e.inviter_id
})
}
var that = this;
// 获取购物车数据
wx.getStorage({
key: ‘shopCarInfo’,
success: function(res) {
that.setData({
shopCarInfo:res.data,
shopNum:res.data.shopNum
});
}
})
wx.request({
url: ‘https://api.it120.cc/’+ app.globalData.subDomain +’/shop/goods/detail’,
data: {
id: e.id
},
success: function(res) {
var selectSizeTemp = “”;
if (res.data.data.properties) {
for(var i=0;i
}
that.setData({
hasMoreSelect:true,
selectSize:that.data.selectSize + selectSizeTemp,
selectSizePrice:res.data.data.basicInfo.minPrice,
});
}
that.data.goodsDetail = res.data.data;
if (res.data.data.basicInfo.videoId) {
that.getVideoSrc(res.data.data.basicInfo.videoId);
}
that.setData({
goodsDetail:res.data.data,
selectSizePrice:res.data.data.basicInfo.minPrice,
buyNumMax:res.data.data.basicInfo.stores,
buyNumber:(res.data.data.basicInfo.stores>0) ? 1: 0
});
WxParse.wxParse(‘article’, ‘html’, res.data.data.content, that, 5);
}
})
this.reputation(e.id);
},
goShopCar: function () {
wx.reLaunch({
url: “/pages/shop-cart/index”
});
},
toAddShopCar: function () {
this.setData({
shopType: “addShopCar”
})
this.bindGuiGeTap();
},
tobuy: function () {
this.setData({
shopType: “tobuy”
});
this.bindGuiGeTap();
/* if (this.data.goodsDetail.properties && !this.data.canSubmit) {
this.bindGuiGeTap();
return;
}
if(this.data.buyNumber < 1){
wx.showModal({
title: ‘提示’,
content: ‘暂时缺货哦~’,
showCancel:false
})
return;
}
this.addShopCar();
this.goShopCar();*/
},
/**
- 规格选择弹出框
/
bindGuiGeTap: function() {
this.setData({
hideShopPopup: false
})
},
/* - 规格选择弹出框隐藏
/
closePopupTap: function() {
this.setData({
hideShopPopup: true
})
},
numJianTap: function() {
if(this.data.buyNumber > this.data.buyNumMin){
var currentNum = this.data.buyNumber;
currentNum–;
this.setData({
buyNumber: currentNum
})
}
},
numJiaTap: function() {
if(this.data.buyNumber < this.data.buyNumMax){
var currentNum = this.data.buyNumber;
currentNum++ ;
this.setData({
buyNumber: currentNum
})
}
},
/* - 选择商品规格
- @param {Object} e
/
labelItemTap: function(e) {
var that = this;
/
console.log(e)
console.log(e.currentTarget.dataset.propertyid)
console.log(e.currentTarget.dataset.propertyname)
console.log(e.currentTarget.dataset.propertychildid)
console.log(e.currentTarget.dataset.propertychildname)
*/
// 取消该分类下的子栏目所有的选中状态
var childs = that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods;
for(var i = 0;i < childs.length;i++){
that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods[i].active = false;
}
// 设置当前选中状态
that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods[e.currentTarget.dataset.propertychildindex].active = true;
// 获取所有的选中规格尺寸数据
var needSelectNum = that.data.goodsDetail.properties.length;
var curSelectNum = 0;
var propertyChildIds= “”;
var propertyChildNames = “”;
for (var i = 0;i < that.data.goodsDetail.properties.length;i++) {
childs = that.data.goodsDetail.properties[i].childsCurGoods;
for (var j = 0;j < childs.length;j++) {
if(childs[j].active){
curSelectNum++;
propertyChildIds = propertyChildIds + that.data.goodsDetail.properties[i].id + “:”+ childs[j].id +",";
propertyChildNames = propertyChildNames + that.data.goodsDetail.properties[i].name + “:”+ childs[j].name +" ";
}
}
}
var canSubmit = false;
if (needSelectNum == curSelectNum) {
canSubmit = true;
}
// 计算当前价格
if (canSubmit) {
wx.request({
url: ‘https://api.it120.cc/’+ app.globalData.subDomain +’/shop/goods/price’,
data: {
goodsId: that.data.goodsDetail.basicInfo.id,
propertyChildIds:propertyChildIds
},
success: function(res) {
that.setData({
selectSizePrice:res.data.data.price,
propertyChildIds:propertyChildIds,
propertyChildNames:propertyChildNames,
buyNumMax:res.data.data.stores,
buyNumber:(res.data.data.stores>0) ? 1: 0
});
}
})
}
this.setData({
goodsDetail: that.data.goodsDetail,
canSubmit:canSubmit
})
},
/**
-
加入购物车
*/
addShopCar:function(){
if (this.data.goodsDetail.properties && !this.data.canSubmit) {
if (!this.data.canSubmit){
wx.showModal({
title: ‘提示’,
content: ‘请选择商品规格！’,
showCancel: false
})
}
this.bindGuiGeTap();
return;
}
if(this.data.buyNumber < 1){
wx.showModal({
title: ‘提示’,
content: ‘购买数量不能为0！’,
showCancel:false
})
return;
}
//组建购物车
var shopCarInfo = this.bulidShopCarInfo();this.setData({
shopCarInfo:shopCarInfo,
shopNum:shopCarInfo.shopNum
});// 写入本地存储
wx.setStorage({
key:“shopCarInfo”,
data:shopCarInfo
})
this.closePopupTap();
wx.showToast({
title: ‘加入购物车成功’,
icon: ‘success’,
duration: 2000
})
//console.log(shopCarInfo);//shopCarInfo = {shopNum:12,shopList:[]}
},
/**- 立即购买
*/
buyNow:function(){
if (this.data.goodsDetail.properties && !this.data.canSubmit) {
if (!this.data.canSubmit) {
wx.showModal({
title: ‘提示’,
content: ‘请选择商品规格！’,
showCancel: false
})
}
this.bindGuiGeTap();
wx.showModal({
title: ‘提示’,
content: ‘请先选择规格尺寸哦~’,
showCancel:false
})
return;
}
if(this.data.buyNumber < 1){
wx.showModal({
title: ‘提示’,
content: ‘购买数量不能为0！’,
showCancel:false
})
return;
}
//组建立即购买信息
var buyNowInfo = this.buliduBuyNowInfo();
// 写入本地存储
wx.setStorage({
key:“buyNowInfo”,
data:buyNowInfo
})
this.closePopupTap();
wx.navigateTo({
url: “/pages/to-pay-order/index?orderType=buyNow”
})
},
/** - 立即购买
-
组建购物车信息
*/
bulidShopCarInfo: function () {
// 加入购物车
var shopCarMap = {};
shopCarMap.goodsId = this.data.goodsDetail.basicInfo.id;
shopCarMap.pic = this.data.goodsDetail.basicInfo.pic;
shopCarMap.name = this.data.goodsDetail.basicInfo.name;
// shopCarMap.label=this.data.goodsDetail.basicInfo.id; 规格尺寸
shopCarMap.propertyChildIds = this.data.propertyChildIds;
shopCarMap.label = this.data.propertyChildNames;
shopCarMap.price = this.data.selectSizePrice;
shopCarMap.left = “”;
shopCarMap.active = true;
shopCarMap.number = this.data.buyNumber;
shopCarMap.logisticsType = this.data.goodsDetail.basicInfo.logisticsId;
shopCarMap.logistics = this.data.goodsDetail.logistics;
shopCarMap.weight = this.data.goodsDetail.basicInfo.weight;
var shopCarInfo = this.data.shopCarInfo;
if (!shopCarInfo.shopNum) {
shopCarInfo.shopNum = 0;
}
if (!shopCarInfo.shopList) {
shopCarInfo.shopList = [];
}
var hasSameGoodsIndex = -1;
for (var i = 0; i < shopCarInfo.shopList.length; i++) {
var tmpShopCarMap = shopCarInfo.shopList[i];
if (tmpShopCarMap.goodsId == shopCarMap.goodsId && tmpShopCarMap.propertyChildIds == shopCarMap.propertyChildIds) {
hasSameGoodsIndex = i;
shopCarMap.number = shopCarMap.number + tmpShopCarMap.number;
break;
}
}
shopCarInfo.shopNum = shopCarInfo.shopNum + this.data.buyNumber;
if (hasSameGoodsIndex > -1) {
shopCarInfo.shopList.splice(hasSameGoodsIndex, 1, shopCarMap);
} else {
shopCarInfo.shopList.push(shopCarMap);
}
return shopCarInfo;
},
/**
* 组建立即购买信息
*/
buliduBuyNowInfo: function () {
var shopCarMap = {};
shopCarMap.goodsId = this.data.goodsDetail.basicInfo.id;
shopCarMap.pic = this.data.goodsDetail.basicInfo.pic;
shopCarMap.name = this.data.goodsDetail.basicInfo.name;
// shopCarMap.label=this.data.goodsDetail.basicInfo.id; 规格尺寸
shopCarMap.propertyChildIds = this.data.propertyChildIds;
shopCarMap.label = this.data.propertyChildNames;
shopCarMap.price = this.data.selectSizePrice;
shopCarMap.left = “”;
shopCarMap.active = true;
shopCarMap.number = this.data.buyNumber;
shopCarMap.logisticsType = this.data.goodsDetail.basicInfo.logisticsId;
shopCarMap.logistics = this.data.goodsDetail.logistics;
shopCarMap.weight = this.data.goodsDetail.basicInfo.weight;
var buyNowInfo = {};
if (!buyNowInfo.shopNum) {
buyNowInfo.shopNum = 0;
}
if (!buyNowInfo.shopList) {
buyNowInfo.shopList = [];
}
/* var hasSameGoodsIndex = -1;
for (var i = 0; i < toBuyInfo.shopList.length; i++) {
var tmpShopCarMap = toBuyInfo.shopList[i];
if (tmpShopCarMap.goodsId == shopCarMap.goodsId && tmpShopCarMap.propertyChildIds == shopCarMap.propertyChildIds) {
hasSameGoodsIndex = i;
shopCarMap.number = shopCarMap.number + tmpShopCarMap.number;
break;
}
}
toBuyInfo.shopNum = toBuyInfo.shopNum + this.data.buyNumber;
if (hasSameGoodsIndex > -1) {
toBuyInfo.shopList.splice(hasSameGoodsIndex, 1, shopCarMap);
} else {
toBuyInfo.shopList.push(shopCarMap);
}*/
buyNowInfo.shopList.push(shopCarMap);
return buyNowInfo;
},
onShareAppMessage: function () {
return {
title: this.data.goodsDetail.basicInfo.name,
path: ‘/pages/goods-details/index?id=’ + this.data.goodsDetail.basicInfo.id + ‘&inviter_id=’ + app.globalData.uid,
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
},
reputation: function (goodsId) {
var that = this;
wx.request({
url: ‘https://api.it120.cc/’ + app.globalData.subDomain + ‘/shop/goods/reputation’,
data: {
goodsId: goodsId
},
success: function (res) {
if (res.data.code == 0) {
//console.log(res.data.data);
that.setData({
reputation: res.data.data
});
}
}
})
},
getVideoSrc: function (videoId) {
var that = this;
wx.request({
url: ‘https://api.it120.cc/’ + app.globalData.subDomain + ‘/media/video/detail’,
data: {
videoId: videoId
},
success: function (res) {
if (res.data.code == 0) {
that.setData({
videoMp4Src: res.data.data.fdMp4
});
}
}
})
}
})