小程序?qū)崿F(xiàn)購物車完整版

第小程序?qū)崿F(xiàn)購物車完整版小程序?qū)崿F(xiàn)完整購物車[全選/反選計(jì)算金額/加減計(jì)算數(shù)量跟金額]，供大家參考，具體內(nèi)容如下

一、wxml頁面代碼模塊

viewwx:if="{{hasList}}"

view

viewwx:for="{{list}}"wx:key="{{index}}"

viewwx:if="{{item.selected}}"catchtap="selectList"data-index="{{index}}"

imagesrc="/images/serch/xuanze.png"/

/view

viewcatchtap="selectList"data-index="{{index}}"wx:else

imagesrc="/images/serch/gouxuan.png"/

/view

!--列表商品圖片--

view

imagesrc="{{item.image}}"/

/view

view

view

!--列表標(biāo)題--

view{{item.title}}/view

viewcatchtap="deletes"data-index="{{index}}"

imagesrc="/images/serch/detel.png"/

/view

/view

!--規(guī)格--

view規(guī)格：{{_name}}/view

view

!--價(jià)格--

view￥{{item.price}}/view

!--商品數(shù)量加減--

view

!--減按鈕--

viewcatchtap="btn_minus"data-obj="{{obj}}"data-index="{{index}}"

!--按鈕圖片--

imagesrc="/images/serch/jian-1.png"/

/view

!--數(shù)量--

view{{item.num}}/view

!--加按鈕--

viewcatchtap="btn_add"data-index="{{index}}"

!--按鈕圖片--

imagesrc="/images/serch/add-1.png"/

/view

/view

/view

/view

/view

/view

!--固定底部--

view

view

view

viewcatchtap="selectAll"wx:if="{{selectAllStatus}}"

imagesrc="/images/serch/gouxuan.png"/

/view

viewcatchtap="selectAll"wx:else

imagesrc="/images/serch/gouxuan.png"/

/view

view全選/view

/view

view

view

imagesrc="/images/serch/fenxiang.png"/

/view

view分享/view

/view

/view

view

view

view合計(jì)：￥{{totalPrice}}/view

/view

view

!--提交訂單--

viewcatchtap="btn_submit_order"立即購買/view

view預(yù)約試衣/view

/view

/view

/view

/view

!--購物車沒訂單--

viewwx:else

view購物車是空的哦~/view

/view

二、樣式代碼

page{

background-color:rgba(238,238,238,0.5);

.order{

height:238rpx;

background-color:#fefeff;

margin:27rpx;

border-radius:4rpx;

display:flex;

align-items:center;

.xuanze{

width:40rpx;

height:40rpx;

/*background-color:darkgoldenrod;*/

border-radius:50%;

margin:011rpx;

.xuanzeimage{

width:100%;

height:100%;

display:block;

border-radius:50%;

.order_img{

width:180rpx;

height:180rpx;

.order_imgimage{

width:100%;

height:100%;

display:block;

.order_text{

margin-left:20rpx;

width:58%;

height:180rpx;

.text_top{

display:flex;

justify-content:space-between;

align-items:center;

.title{

width:70%;

font-size:28rpx;

color:#4b5248;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:1;

overflow:hidden;

.detel{

width:30rpx;

height:30rpx;

.detelimage{

width:100%;

height:100%;

display:block;

.size{

font-size:24rpx;

color:#a8ada6;

.text_bottom{

display:flex;

margin-top:50rpx;

align-items:center;

justify-content:space-between;

.money{

font-size:30rpx;

color:#a5937f;

.number{

display:flex;

justify-content:space-around;

align-items:center;

width:170rpx;

.reduce{

width:46rpx;

height:46rpx;

.reduceimage{

width:100%;

height:100%;

display:block;

.numb{

font-size:30rpx;

color:#a5937f;

.add{

width:46rpx;

height:46rpx;

.addimage{

width:100%;

height:100%;

display:block;

/*購買按鈕*/

.buy{

height:180rpx;

width:696rpx;

position:fixed;

left:27rpx;

bottom:41rpx;

background-color:#555555f3;

border-radius:4rpx;

.buy_top{

border-bottom:1pxsolidrgb(98,98,99);

height:75rpx;

display:flex;

align-items:center;

justify-content:space-between;

.top_left{

display:flex;

align-items:center;

.left_img{

width:37rpx;

height:37rpx;

margin:11rpx;

.left_imgimage{

width:100%;

height:100%;

display:block;

.left_name{

font-size:24rpx;

color:#fefeff;

margin-right:29rpx;

.buy_bottom{

display:flex;

height:104rpx;

justify-content:space-between;

align-items:center;

padding:0rpx30rpx0rpx12rpx;

.buy_left{

font-size:26rpx;

color:#fff;

.buy_right{

display:flex;

align-items:center;

.liji{

width:180rpx;

height:70rpx;

border:2rpxsolidrgba(248,248,248,1);

box-sizing:border-box;

border-radius:4rpx;

line-height:70rpx;

text-align:center;

font-size:26rpx;

color:#FEFEFF;

.two{

margin-left:12rpx;

.active{

background-color:#A5937F;

border:none;

}

三、js代碼模塊

Page({

*頁面的初始數(shù)據(jù)

data:{

hasList:true,//默認(rèn)展示列表數(shù)據(jù)

//商品列表數(shù)據(jù)

list:[{

id:1,

title:'園藝大師抗皺精華露',

image:'/images/serch/2.png',

pro_name:"30ml",

num:1,

price:180,

selected:true

id:2,

title:'伊芙琳玫瑰護(hù)手霜',

image:'/images/serch/1.png',

pro_name:"25g",

num:1,

price:62,

selected:true

id:2,

title:'燕麥山羊乳舒緩護(hù)手霜',

image:'/images/serch/2.png',

pro_name:"75ml",

num:1,

price:175,

selected:true

//金額

totalPrice:0,//總價(jià)，初始為0

//全選狀態(tài)

selectAllStatus:true,//全選狀態(tài)，默認(rèn)全選

*生命周期函數(shù)--監(jiān)聽頁面加載

onLoad:function(options){

*生命周期函數(shù)--監(jiān)聽頁面顯示

onShow:function(){

wx.showToast({

title:'加載中',

icon:"loading",

duration:1000

//價(jià)格方法

this.count_price();

/**當(dāng)前商品選中事件*/

selectList(e){

varthat=this;

//獲取選中的radio索引

varindex=e.currentTarget.dataset.index;

//獲取到商品列表數(shù)據(jù)

varlist=that.data.list;

//默認(rèn)全選

that.data.selectAllStatus=true;

//循環(huán)數(shù)組數(shù)據(jù)，判斷--選中/未選中[selected]

list[index].selected=!list[index].selected;

//如果數(shù)組數(shù)據(jù)全部為selected[true],全選

for(vari=list.length-1;ii--){

if(!list[i].selected){

that.data.selectAllStatus=false;

break;

//重新渲染數(shù)據(jù)

that.setData({

list:list,

selectAllStatus:that.data.selectAllStatus

//調(diào)用計(jì)算金額方法

that.count_price();

//刪除

deletes(e){

varthat=this;

//獲取索引

constindex=e.currentTarget.dataset.index;

//獲取商品列表數(shù)據(jù)

letlist=this.data.list;

wx.showModal({

title:'提示',

content:'確認(rèn)刪除嗎',

success:function(res){

if(res.confirm){

//刪除索引從1

list.splice(index,1);

//頁面渲染數(shù)據(jù)

that.setData({

list:list

//如果數(shù)據(jù)為空

if(!list.length){

that.setData({

hasList:false

}else{

//調(diào)用金額渲染數(shù)據(jù)

that.count_price();

}else{

console.log(res);

fail:function(res){

console.log(res);

/**購物車全選事件*/

selectAll(e){

//全選ICON默認(rèn)選中

letselectAllStatus=this.data.selectAllStatus;

//truefalse

selectAllStatus=!selectAllStatus;

//獲取商品數(shù)據(jù)

letlist=this.data.list;

//循環(huán)遍歷判斷列表中的數(shù)據(jù)是否選中

for(leti=0;ilist.length;i++){

list[i].selected=selectAllStatus;

//頁面重新渲染

this.setData({

selectAllStatus:selectAllStatus,

list:list

//計(jì)算金額方法

this.count_price();

/**綁定加數(shù)量事件*/

btn_add(e){

//獲取點(diǎn)擊的索引

constindex=e.currentTarget.dataset.index;

//獲取商品數(shù)據(jù)

letlist=this.data.list;

//獲取商品數(shù)量

letnum=list[index].num;

//點(diǎn)擊遞增

num=num+1;

list[index].num=num;

//重新渲染顯示新的數(shù)量

this.setData({

list:list

//計(jì)算金額方法

this.count_price();

*綁定減數(shù)量事件

btn_minus(e){

////獲取點(diǎn)擊的索引

constindex=e.currentTarget.dataset.index;

//constobj=e.currentTarget.dataset.obj;

//console.log(obj);

//獲取商品數(shù)據(jù)

letlist=this.data.list;

//獲取商品數(shù)量

letnum=list[index].num;

//判斷num小于等于1return;點(diǎn)擊無效

if(num=1){

returnfalse;

//elsenum大于1點(diǎn)擊減按鈕數(shù)量--

num=num-1;

list[index].num=num;

//渲染頁面

this.setData({

list:list

//調(diào)用計(jì)算金額方法

this.count_price();

//提交訂單

btn_s