首頁手記小程序做一個添加購物車選擇商品規格

小程序做一個添加購物車選擇商品規格

標簽：

Html/CSS

小程序实现添加购物车选择规格

detail.wxml:

detail.wxss:

.swiper{
height: 750rpx;
width: 750rpx;
box-sizing: border-box;
}
.swiper .slide-image{
width: 750rpx;
height: 750rpx;
}
.goods{
width: 750rpx;
height: 215rpx;
padding: 34rpx
30rpx;
box-sizing: border-box;
}
.goods .name{
width: 702rpx;
height: 70rpx;
line-height:
35rpx;
font-size: 28rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
2;
}
.goods .name{
width: 702rpx;
height: 70rpx;
}
.goods .price{
margin-top:20rpx;
color: #C62127;
font-size: 32rpx;
}
.goods .price
.left{
font-size: 24rpx;
}
.goods .price
.shop_price{
font-weight:
700;
}
.goods .price
.market_price{
font-size: 24rpx;
color: #D7D7D7;
margin-left:20rpx;
text-decoration-line:
line-through;
}
.line{
width: 750rpx;
height: 10rpx;
background: #EFEFF4;
}
.choose_spec{
width: 750rpx;
height: 90rpx;
padding: 0
20rpx;
line-height:
90rpx;
box-sizing: border-box;
}
.choose_spec
.left{
font-size: 24rpx;
color: #B6B6B6;
float: left;
}
.choose_spec
.spec{
height: 90rpx;
width: 550rpx;
margin-left:30rpx;
line-height:
90rpx;
font-size: 24rpx;
color: #707070;
float: left;
}
.choose_spec
.more{
width: 60rpx;
height: 90rpx;
margin-left:650rpx;
}
.choose_spec
.right{
width: 38rpx;
height: 8rpx;
}
.comment_head{
width: 750rpx;
height: 90rpx;
line-height:
90rpx;
font-size: 24rpx;
color: #B6B6B6;
padding: 0
20rpx;
box-sizing: border-box;
}
.comment_head
text{
float: left;
}
.comment_head
.comment_right{
width: 50rpx;
height: 90rpx;
float: left;
margin-left:604rpx;
}
.comment_head
image{
width: 38rpx;
height: 8rpx;
}
.line1{
width: 750rpx;
height: 2rpx;
background:#D7D7D7;
}
.comment{
width: 750rpx;
height: 428rpx;
padding: 20rpx
20rpx;
box-sizing: border-box;
}
.comment .top{
width: 100%;
height: 100rpx;
line-height:
100rpx;
}
.comment .top
.head_img{
width: 100rpx;
height: 100rpx;
border-radius:
50%;
float: left;
}
.comment .top
.nick_name{
font-size: 21rpx;
margin-left:12rpx;
}
.comment .top
.star{
width: 120rpx;
height: 18rpx;
margin-left:310rpx;
}
.comment .comment_content{
margin-top:20rpx;
height: 64rpx;
line-height:
32rpx;
font-size: 24rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
2;
}
.comment .comment_img{
height: 165rpx;
width: 165rpx;
overflow: hidden;
margin-top:20rpx;
}
.comment .comment_img{
height: 165rpx;
width: 100%;
}
.comment .comment_img
.comment_item_img{
width: 165rpx;
height: 165rpx;
box-sizing: border-box;
/* border:2rpx #C62127 solid; */
padding: 10rpx
10rpx;
}
.des{
width: 750rpx;
margin-bottom:
100rpx;
}
.des .des_head{
width: 750rpx;
height: 100rpx;
line-height:
100rpx;
font-size: 28rpx;
color: #707070;
text-align: center;
}
.des .des_img{
width: 750rpx;
}
.detail_footer{
width: 750rpx;
height: 100rpx;
position: fixed;
bottom: 0;
border-top: 4rpx

D7D7D7 solid;

box-sizing: border-box;
}
.detail_footer
.detail_cart{
width: 250rpx;
height: 100rpx;
background: #fff;
float: left;
}
.detail_footer
.detail_cart image{
width: 46rpx;
height: 46rpx;
margin-left:
100rpx;
margin-top:10rpx;
}
.detail_footer
.detail_cart .cart_font{
font-size: 24rpx;
text-align:center;
}
.detail_footer
.buy{
width: 250rpx;
height: 100rpx;
background:#FF9500;
margin-left:250rpx;
text-align: center;
line-height:
100rpx;
color: #fff;
}
.detail_footer
.addCart{
position: fixed;
bottom: 0;
right: 0;
width: 250rpx;
height: 99rpx;
background: #C62127;
text-align: center;
line-height:
99rpx;
color: #fff;
}
/蒙版 /
.mask{
width: 750rpx;
height: 100%;
background: #C0C0C0;
z-index: 10;
position: fixed;
top: 0;
opacity: 0.8;
}
/选择规格层面/
.choose{
display: none;
flex-direction:
row;
align-items:
center;
background-color:

fff;

position: fixed;
bottom: 0;
right: 0;
/* border: 1px solid #f44336; /
z-index: 100;
width: 750rpx;
box-sizing: border-box;
}
/知道从来点击来时候 */
.choose .modal_button{
flex-direction:
row;
background-color:

C62127;

position: inherit;
bottom: 0;
z-index: 100;
width: 750rpx;
height: 106rpx;
line-height:106rpx;
color: #fff;
text-align:center;
margin:0
auto;
}
/不知道从哪点进来时候/
.choose .modal_button_two{
flex-direction:
row;
align-items:
center;
float: left;
background-color:

fff;

position: inherit;
bottom: 0;
right: 0;
z-index: 10;
width: 100%;
height: 50px;
}
.choose .modal_button_two
button{
width: 50%;
float: left;
color: #fff;
border-radius:
0px;
}
.choose .modal_button_two
.modal_cart{
background: #FFB03F;
}
.choose .modal_button_two
.modal_buy{
background: #f44336;
}
/* */
.choose .spec_img_container{
height:100px;
border-bottom:
2px solid #F5F5F5;
position: relative;
}
.choose .spec_img_container
image{
width: 200rpx;
height: 200rpx;
position: absolute;
top:-40rpx;
left: 20rpx;
border: 2px

F5F5F5 solid;

border-radius:
5px;
}
.choose .spec_img_container
.amount{
width: 400rpx;
color: red;
position: absolute;
top: 80rpx;
left:240rpx;
}
.choose .spec_img_container
.clear{
position:absolute;
top:20rpx;
right:20rpx;
}
.choose .spec_view_container{
width: 100%;
}
.choose .spec_view_container
.modal_de_select{
font-size: 28rpx;
color: #808080;
margin-left:
20rpx;
margin-top:10rpx;
}
.choose .spec_view_container
.modal_spec{
margin-left:20rpx;
margin-top:10rpx;
font-size:28rpx;
}
.choose .spec_view_container
.modal_spec_name{
margin-left:5rpx;
margin-top:10rpx;
font-size:28rpx;
color:#8B0000;
}
/* .choose .spec_view_container .modal_spec_name::after{
content: "";
clear: both;
display: block;
overflow: hidden;
} /
/ .choose .spec_view_container .radio-group{
padding:18rpx;
} */
.choose .spec_view_container
.modal_spec_item_{
width: 750rpx;
display: inline-block;
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
min-width: 80rpx;
max-width: 400rpx;
height: 50rpx;
line-height:
50rpx;
border: 2rpx

707070 solid;

margin-left:20rpx;
margin-top:20rpx;
border-radius:
10rpx;
text-align: center;
}
.choose .spec_view_container
.modal_spec_item_active{
width: 750rpx;
display: inline-block;
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
min-width: 80rpx;
max-width: 400rpx;
height: 50rpx;
line-height:
50rpx;
/* border: 2rpx red solid; /
margin-left:20rpx;
margin-top:20rpx;
border-radius:
10rpx;
text-align: center;
background: #C62127;
color: #fff;
}
.choose .buy_num {
margin-top:40rpx;
margin-bottom:
120rpx;
font-size: 28rpx;
}
.choose .buy_num
.font_num{
margin-left:
20rpx;
}
/主容器/
.choose .buy_num
.stepper {
width: 200rpx;
height: 62rpx;
/给主容器设一个边框/
border: 2rpx
solid #ccc;
border-radius:
3px;
margin-left:40rpx;
margin-top:20rpx;
}
/加号和减号/
.choose .buy_num
.stepper text {
width: 58rpx;
line-height:
62rpx;
text-align:
center;
float: left;
}
/数值/
.choose .buy_num
.stepper input {
width: 80rpx;
height: 62rpx;
float: left;
margin: 0
auto;
text-align:
center;
font-size:
32rpx;
/给中间的input设置左右边框即可*/
border-left:
2rpx solid

ccc;

border-right:
2rpx solid

ccc;

}
/普通样式/
.choose .buy_num
.stepper .normal{
color: black;
}
/禁用样式/
.choose .buy_num
.stepper .disabled{
color: #ccc;
}

detail.js：

const app = getApp();
var selectIndex;//选择的大规格key
var attrIndex;//选择的小规格的key
var selectIndexArray = [
];//选择属性名字的数组
var selectAttrid = [];//选择的属性id
Page({
/**

页面的初始数据
/
data: {
picture: [{ img: ' },
{ img: ' },
{ img: ' },
],
//swiper相关
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
circular: true,
//选择的规格
num: 1,//初始数量
amount: 0,//初始金额
minusStatus: 'disabled',
// 使用data数据对象设置样式名
choose_modal: "block",
// 规格数量框
flag: 0,//点选规格时来源 0：规格点 1：立即购买 2：加入购物车
//规格数据
spec: [{
"id":
1, "name":
"\u989c\u8272", "child": [{
"id": 11, "name":
"\u7ea2\u8272", "isSelect":
true
}, {
"id":
111, "name":
"\u767d\u8272", "isSelect":
false
}]
}, {
"id":
2, "name":
"\u5c3a\u7801", "child": [{
"id": 21, "name":
"\u5c0f\u53f7", "isSelect":
true
}, {
"id":
22, "name":
"\u5927\u53f7", "isSelect":
false
}]
}],
selectName: "",//已选的属性名字
selectAttrid: [],//选择的属性id
//商品信息
goods_info: {},
},
/*
生命周期函数--监听页面加载
/
onLoad: function (options) {
var that = this;
wx.request({
url: app.globalData.host + '/index.php/app/goods/goodsDetails/goods_id/34',
header: {
'Content-type':
'application/json'
},
success: function (res) {
console.log(res.data.data.goods_info);
that.setData({
goods_info: res.data.data.goods_info,
});
that.init_attr();
}
})
},
/*
生命周期函数--监听页面初次渲染完成
/
onReady: function () {
},
/*
生命周期函数--监听页面显示
/
onShow: function () {
},
/*
生命周期函数--监听页面隐藏
/
onHide: function () {
},
/*
生命周期函数--监听页面卸载
/
onUnload: function () {
},
/*
页面相关事件处理函数--监听用户下拉动作
/
onPullDownRefresh: function () {
},
/*
页面上拉触底事件的处理函数
/
onReachBottom: function () {
},
/*
用户点击右上角分享
/
onShareAppMessage: function () {
},
/ 点击减号 /
bindMinus: function () {
var num = this.data.num;
// 如果大于1时，才可以减
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num <=
1 ? 'disabled' :
'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
this.change_spec();
this.change_price();
},
bindPlus: function () {
var num = this.data.num;
// 不作过多考虑自增1
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num <
1 ? 'disabled' :
'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
this.change_spec();
this.change_price();
},
/ 输入框事件 */
bindManual: function (e) {
var num = e.detail.value;
if (isNaN(num)) {
num = 1;
}
// 将数值与状态写回
this.setData({
num: parseInt(num)
});
this.change_spec();
this.change_price();
},
//弹出
modal_show: function (e) {
var flag = e.currentTarget.dataset.flag;
this.setData({
flag: flag,
choose_modal: "block",
});
},
//消失
modal_none: function () {
this.setData({
choose_modal: "none",
});
},
clickAttr: function (e) {
// console.log(e);return;
var selectIndex = e.currentTarget.dataset.selectIndex;
var attrIndex = e.currentTarget.dataset.attrIndex;
var spec = this.data.spec;
var count = spec[selectIndex].child.length;
// console.log(count); return;
for (var i =
0; i < count; i++) {
spec[selectIndex].child[i].isSelect = false;
}
spec[selectIndex].child[attrIndex].isSelect = true;
var name = spec[selectIndex].child[attrIndex].name;//点击属性的名称
var attrid = spec[selectIndex].child[attrIndex].id;
// //点击过，修改属性
var selectName =
"";
//点击过，修改属性
selectIndexArray[selectIndex].value = name;
selectAttrid[selectIndex] = attrid;
var selectIndexArraySize = selectIndexArray.length;
//将数组的所有属性名拼接起来
for (var i =
0; i < selectIndexArraySize; i++) {
selectName += ' "' + selectIndexArray[i].value +
'" ';
}
console.log(selectName);
this.setData({
spec: spec,//变换选择框
selectName: selectName,
selectAttrid: selectAttrid
});
},
//初始化规格选择
init_attr: function () {
//初始化规格选择
var name = "";
var spec = this.data.spec;
var size = spec.length;
for (var i =
0; i < size; i++) {
selectIndexArray.push({ key: i, value: spec[i].child[0].name });
selectAttrid.push(spec[i].child[0].id)
name += ' "' + selectIndexArray[i].value +
'" ';
}
var selectName =
this.data.selectName;
selectName = name;
this.setData({
selectName: selectName,
selectAttrid: selectAttrid
});
}
})

作者：周瑾ruiqi
链接：https://www.jianshu.com/p/1656398a071f

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

POPMUISE

手記
篇

粉絲

80

獲贊與收藏

426

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13213 249

Pandas 入門教程

25個小節 19596 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


熱搜

最近搜索清空

小程序做一個添加購物車選擇商品規格

小程序实现添加购物车选择规格

detail.wxml:

閱讀免費教程