微信小程序商城项目（篇8）：购物车页面以及支付页面实现
效果展示
步骤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=0
let num=0
cart.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.goodsid
let opeation=e.currentTarget.dataset.opeation
// console.log(opeation)
let cart=this.data.cart
let 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=0
let num=0
cart.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.data
allchecked=!allchecked
cart.forEach((v)=>{
v.checked=allchecked
})
wx.setStorageSync("cart",cart)
// console.log(allchecked)
let totalPrice=0
let num=0
cart.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.goodsid
let 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=0
let num=0
cart.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.data
if(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=0
let num=0
cart.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>