效果展示

步骤1：加载商品信息

onShow: function () {let cart=wx.getStorageSync("cart");const address=wx.getStorageSync("address")let allchecked=cart.length>0?cart.every(v=>v.checked):false// console.log(allchecked)let totalPrice=0let num=0cart.forEach(element => {if(element.checked){totalPrice =totalPrice+(element.goods_price * element.num)num+=element.num}else{allchecked=false}})allchecked=cart.length!=0?allchecked:false// console.log(totalPrice)this.setData({cart:cart,address:address,allchecked:allchecked,totalPrice:totalPrice,totalNum:num})}

步骤2：将地址渲染至页面

<!-- 添加地址 --><view wx:if="{{address.userName}}">{{address.userName}}电话{{address.telNumber}}<view>地址：{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.detailInfo}}</view></view><view wx:else><button class="btnAddress" bindtap="addAddress">添加地址</button></view>

步骤3：封装相关请求方法

// 状态const getSetting=()=>{return new Promise((resovle,reject)=>{wx.getSetting({success:(result)=>{resovle(result)},fail:(err)=>{reject(err)}})})}// 获取地址const chooseAddress=()=>{return new Promise((resovle,reject)=>{wx.chooseAddress({success: (result)=>{resovle(result)},fail: (err)=>{reject(err)}});})}// 打开权限,说明：openSetting不能使用promise进行异步请求const openSet=()=>{wx.openSetting({success: (result)=>{console.log(result)},fail: ()=>{},complete: ()=>{}});}export{getSetting,chooseAddress,openSet}

步骤4：地址不存在时，获取地址

async addAddress(){// 获取状态try{const res1=await getSetting()// console.log(res1)const flag=res1.authSetting["scope.address"]// console.log(flag,typeof flag) if(flag===false){openSet()}const address=await chooseAddress()console.log(address)wx.setStorageSync("address", address);this.setData({address:address})}catch(err){console.log(err)}}

步骤6：修改商品数量

opeaNum(e){// console.log(e)let goodsid=e.currentTarget.dataset.goodsidlet opeation=e.currentTarget.dataset.opeation// console.log(opeation)let cart=this.data.cartlet index=cart.findIndex((v)=>{return v.goods_id==goodsid})// console.log(index)if(opeation=="dec"){if(cart[index].num>0){cart[index].num-=1}else{console.log('不能再减了。。')}}if(opeation=="add"){cart[index].num+=1}// console.log(cart[index].num)wx.setStorageSync("cart",cart)let allchecked=cart.length>0?cart.every(v=>v.checked):false// console.log(allchecked)let totalPrice=0let num=0cart.forEach(element => {if(element.checked){totalPrice =totalPrice+(element.goods_price * element.num)num+=element.num}else{allchecked=false}})allchecked=cart.length!=0?allchecked:false// console.log(totalPrice)this.setData({cart:cart,allchecked:allchecked,totalPrice:totalPrice,totalNum:num})}

步骤6：商品全选取反

handleAllSelect(){let {cart,allchecked}=this.dataallchecked=!allcheckedcart.forEach((v)=>{v.checked=allchecked})wx.setStorageSync("cart",cart)// console.log(allchecked)let totalPrice=0let num=0cart.forEach(element => {if(element.checked){totalPrice =totalPrice+(element.goods_price * element.num)num+=element.num}else{allchecked=false}})allchecked=cart.length!=0?allchecked:false// console.log(totalPrice)this.setData({cart:cart,allchecked:allchecked,totalPrice:totalPrice,totalNum:num})}

步骤7：商品选中

// 选择商品，取消商品handleChecked(e){// console.log(e)let goodsid=e.currentTarget.dataset.goodsidlet cart=this.data.cart// console.log(cart)// console.log(goodsid)let index=cart.findIndex((v)=>{return v.goods_id==goodsid})console.log(index)cart[index].checked=!cart[index].checked//this.setData({cart:cart})wx.setStorageSync("cart",cart)let allchecked=cart.length>0?cart.every(v=>v.checked):false// console.log(allchecked)let totalPrice=0let num=0cart.forEach(element => {if(element.checked){totalPrice =totalPrice+(element.goods_price * element.num)num+=element.num}else{allchecked=false}})allchecked=cart.length!=0?allchecked:false// console.log(totalPrice)this.setData({cart:cart,allchecked:allchecked,totalPrice:totalPrice,totalNum:num})}

步骤8：去支付页面

goPayment(){let {totalNum,address}=this.dataif(totalNum===0){wx.showToast({tit le: '还没选购商品',icon: 'success',image: '',duration: 1500,mask: true})return}if(!address.userName){wx.showToast({title: '还没选择地址',icon: 'none',image: '',duration: 1500,mask: false,})return}wx.navigateTo({url: '/pages/payment/payment'});}

支付页面

步骤1：获取已选中的商品数据

onShow: function () {const address=wx.getStorageSync("address")let cart=wx.getStorageSync("cart");cart=cart.filter((v)=>{// console.log(v.checked)return v.checked})console.log(cart)let allchecked=cart.length>0?cart.every(v=>v.checked):false// console.log(allchecked)let totalPrice=0let num=0cart.forEach(element => {if(element.checked){totalPrice =totalPrice+(element.goods_price * element.num)num+=element.num}else{allchecked=false}})allchecked=cart.length!=0?allchecked:false// console.log(totalPrice)this.setData({cart:cart,address:address,allchecked:allchecked,totalPrice:totalPrice,totalNum:num})}

步骤2：支付页面

个人信息地址

<view>{{address.userName}}电话{{address.telNumber}}<view>地址：{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.detailInfo}}</view></view>

支付的产品信息

<view class="cartProduct"><view class="rowArea" wx:for="{{cart}}" wx:key="index"><view class="imgBox"><image class="proPic" mode="widthFix" src="{{item.goods_small_logo}}"></image></view><view class="nameBox"><view class="textSet"><text>{{item.goods_name}}</text></view><view class="bottomSec"><text class="price">￥{{item.goods_price}}</text> <text class="count">x {{item.num}}</text></view></view></view></view>

核算区域

<!-- 核算区域 --><view class="footCompute"><view class="footLeft"><view class="totalRight"><text class="priceSet">总计：￥{{totalPrice}}</text><view >包含运费</view></view></view><view class="computeAll" bindtap="goPayment">支付({{totalNum}})</view></view>