微信地址修改

微信⼩程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--

收货地址

微信⼩程序–购物车页⾯（核⼼）

包含功能点：

全选和反选

计算：总价格和总数量

修改商品数量、删除商品

收货地址

结构：

获取收货地址

{{me}}

{{}}

{{ber}}

购物车

{{_name}}

{{_price}}

-

{{}}

+

全选

合计：

￥{{totalPrice}}

包含运费

结算({{totalNum}})

样式：

page{

padding-bottom:90rpx;

}

//收货地址

.receive_address_row{

.address_btn{

padding:20rpx;

button{

margin:auto;

width:60%;

}

}

//收货地址

.ur_info_row{

display:flex;

padding:20rpx;

.ur_info{

flex:5;

}

.ur_phone{

flex:3;

text-align:right;

}

}

}

//购物车内容

.cart_content{

.cart_title{

padding:20rpx;

font-size:36rpx;

color:var(--themeColor);

border-top:1rpxsolidcurrentColor;

border-bottom:1rpxsolidcurrentColor;

}

.cart_main{

text-align:center;

.cart_item{

display:flex;

padding:10rpx;

border-bottom:1rpxsolid#ccc;

.cart_chk_wrap{

flex:1;

display:flex;

justify-content:center;

align-items:center;

checkbox-group{

checkbox{}

}

}

.cart_img_wrap{

flex:2;

display:flex;

justify-content:center;

align-items:center;

image{

width:80%;

}

}

.cart_info_wrap{

flex:4;

display:flex;

flex-direction:column;

justify-content:space-around;

.goods_name{

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

text-overflow:ellipsis;

color:#666;

}

.goods_price_wrap{

display:flex;

justify-content:space-between;

.goods_price{

color:var(--themeColor);

font-size:34rpx;

}

.cart_num_tool{

display:flex;

.num_edit{

width:55rpx;

height:55rpx;

display:flex;

justify-content:center;

align-items:center;

border:1rpxsolid#ccc;

}

.goods_num{

width:55rpx;

height:55rpx;

display:flex;

justify-content:center;

align-items:center;

}

}

}

}

}

}

}

//底部⼯具栏

.footer_tool{

position:fixed;

left:0;

bottom:0;

width:100%;

height:90rpx;

background-color:#fff;

display:flex;

border-top:1rpxsolid#ccc;

.all_chk_wrap{

flex:2;

display:flex;

justify-content:center;

align-items:center;

}

.total_price_wrap{

flex:5;

padding-right:15rpx;

text-align:right;

.total_price{

_price_text{

color:var(--themeColor);

font-size:34rpx;

font-weight:600;

}

}

}

.order_pay_wrap{

flex:3;

background-color:var(--themeColor);

color:#fff;

font-size:32rpx;

font-weight:600;

display:flex;

justify-content:center;

align-items:center;

}

}

逻辑：⽂件

//pages/cart/

import{getSetting,chooAddress,openSetting,showModal,showToast}from"../../utils/"

Page({

/**

*页⾯的初始数据

*/

data:{

//收货地址

address:{},

//购物车数组

cart:[],

//全选状态

allChecked:fal,

//总价格

totalPrice:0,

//总数量

totalNum:0

},

//点击收货地址

handleChooAddress(){

try{

//1.获取权限状态

getSetting().then(res1=>{

constscopeAddress=tting["s"];

//2.判断权限状态

if(scopeAddress===fal){

//3.⽤户以前拒绝过授予权限先诱导⽤户打开授权页⾯

openSetting();

}

//4.调⽤获取收货地址api

chooAddress().then(address=>{

//完整收货地址

=ceName+me+Name+Info;

//5.存⼊缓存中

rageSync("address",address);

});

});

}catch(error){

(error)

}

},

/**

*商品的选中

*1.绑定change事件

*2.获取到被修改的商品对象

*3.商品对象的选中状态取反

*4.重新填充回data中和缓存中

*5.重新计算全选、总价格、总数量...

*@param{*}e

*/

handleItemChange(e){

//1.获取被修改的商品的id

constgoods_id=;

//2.获取购物车数组

const{cart}=;

//3.找到被修改的商品对象

letindex=dex(v=>_id===goods_id);

letindex=dex(v=>_id===goods_id);

//4.选中状态取反

cart[index].checked=!cart[index].checked;

//56设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

t(cart)

},

/**

*计算全选：

*获取缓存中的购物车数组

*2.根据购物车中的商品数据所有的商品都被选中checked=true全选就被选中

*

*every数组⽅法：会遍历会接收⼀个回调函数那么每⼀个回调函数都返回true那么every⽅法的返回值为true

*只要有⼀个回调函数返回了fal那么不再循环执⾏，直接返回fal

*注意：空数组调⽤every⽅法，返回值就是true

*constallChecked=?(v=>d):fal;

*

*计算：总价格总数量

*1.需要商品被选中，我们才拿它计算

*2.获取购物车数组

*3.遍历

*4.判断商品是否被选中

*5.总价格+=商品的单价*商品的数量

*6.总数量+=商品的数量

*7.把计算后的价格和数量设置回data中即可。

*为提⾼性能：只需要⼀次for循环就可以了，将allChecked逻辑写进去

*/

//设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

tCart(cart){

//1.初始化全选状态

letallChecked=true;

//2.总价格和总数量

lettotalPrice=0;

lettotalNum=0;

h(v=>{

if(d){

totalPrice+=*_price;

totalNum+=;

}el{

allChecked=fal;

}

})

//3.判断数组是否为空

allChecked=!=0?allChecked:fal;

//4.给data赋值

a({

cart,

allChecked,

totalPrice,

totalNum

})

//5.将cart存储在缓存中

rageSync("cart",cart);

},

/**

*商品全选功能

*1.全选复选框绑定事件change

*2.获取data中的全选变量allChecked

*3.直接取反allChecked=!allChecked

*4.遍历购物车数组让⾥⾯的商品选中状态跟随allChecked改变⽽改变

*4.遍历购物车数组让⾥⾯的商品选中状态跟随allChecked改变⽽改变

*5.把购物车数组和allChecked重新设置回data把购物车重新设置回缓存中

*/

handleItemAllChecked(){

//1.获取data中的数据

let{cart,allChecked}=;

//2.修改值

allChecked=!allChecked;

//3.循环修改cart数组中的商品选中状态

h(v=>{d=allChecked});

//4.把修改后的值，设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

t(cart)

},

/**

*商品数量的编辑

*1."+""-"按钮绑定同⼀个点击事件区分的关键⾃定义属性

*1"+""+1"或者2"-""-1"

*2.传递被点击的商品idgoods_id

*3.获取data中的购物车数组来获取需要被修改的商品对象

*4.当购物车的数量=1同时⽤户点击"-"

*弹窗提⽰(showModal)：询问⽤户是否要删除

*1确定直接执⾏删除

*2取消什么都不做

*5.直接修改商品对象的数量num

*6.把cart数组重新设置回缓存中和data中t(cart)

*/

handleItemNumEdit(e){

//1.获取传递过来的参数

const{operation,id}=t;

(operation,id);

//2.获取购物车数组

let{cart}=;

//3.找到需要修改的商品的索引

constindex=dex(v=>_id===id);

//判断是否要执⾏删除

if(cart[index].num===1&&operation===-1){

//弹框提⽰

showModal({content:"您是否要删除?"}).then(res=>{

if(m){

(index,1);

//设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

t(cart);

}

});

}el{

//4.进⾏修改数量

cart[index].num+=operation;

//5.设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

t(cart)

}

},

/**

*点击结算

*1.判断有没有收货地址信息

*2.判断⽤户有没有选购商品

*3.经过以上的验证：跳转到⽀付页⾯！

*/

handlePay(){

//1.判断收货地址

//1.判断收货地址

const{address,totalNum}=;

//2.判断有没有收货地址信息

if(!me){

showToast({title:"您还没有选择收货地址"});

return;

}

//3.判断⽤户有没有选购商品

if(totalNum===0){

showToast({title:"您还没有选购商品"});

return;

}

//4.跳转到⽀付页⾯

teTo({

url:'/pages/pay/pay'

});

},

/**

*⽣命周期函数--监听页⾯加载

*/

onLoad:function(options){

},

/**

*⽣命周期函数--监听页⾯初次渲染完成

*/

onReady:function(){

},

/**

*⽣命周期函数--监听页⾯显⽰

*/

onShow:function(){

//1.获取缓存中的收货地址信息

constaddress=rageSync("address");

//2.获取缓存中的购物车数据

constcart=rageSync("cart")||[];

//3.收货地址赋值给data

a({

address

})

//4.设置购物车状态同时：重新计算底部⼯具栏的数据全选总价格购买的数量

//作⽤：保存购物车的状态。如果⽤户修改了购物车商品状态，刷新页⾯，修改的内容不会丢失。

t(cart);

},

/**

*页⾯相关事件处理函数--监听⽤户下拉动作

*/

onPullDownRefresh:function(){

},

/**

*页⾯上拉触底事件的处理函数

*/

*/

onReachBottom:function(){

}

})

页⾯配置⽂件：⽂件

{

"usingComponents":{},

"navigationBarTitleText":"购物车"

}