微信小程序使点击“购物车“按钮可以跳转到订单页面
<!--index.wxml-->
<view class="container">
<view class="aside">
<view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap='tabMenu'>{{item.menu}}
</view>
</view>
<view class="item-content">
<view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
<view class="item" wx:for="{{items}}" wx:key="{{item.id}}" >
<image src="{{item.image}}" mode="aspectFit"></image>
<text class="title">{{item.title}}</text>
<text class="price">￥ {{item.price}} 元</text>
<text class="{{item.active ? 'btn active' : 'btn'}}" bindtap='addOrder' data-id="{{item.id}}" data-index="{{index}}">添加</text>
</view>
</view>
</view>
<view class="{{bottomFlag ? 'bottom-bar' : 'bottom-bar hidden'}}">
<view class="count">
共 <text class="num">{{orderCount.num}} 件</text>
合计 <text class="num">{{orderCount.money}} 元</text>
</view>
<!-- <view class="btn">
<text bindtap='card'>购物车</text>
</view> -->
<view class="btn">
<text bindtap="goToOrderPage">购物车</text>
</view>
</view>
</view>
onPullDownRefresh: function () {
setTimeout(()=>{
wx.showToast({
title: '成功加载数据',
icon: 'success',
duration: 500
});
wx.stopPullDownRefresh()
}, 500);
},
tabMenu: function(event) {
let index = event.target.dataset.index;
this.setData({
tabIndex: index
});
},
// 点击去购物车结账
goToOrderPage: function() {
let that = this;
// 判断是否有选中商品
if (that.data.orderCount.num !== 0) {
// 跳转到购物车订单也
wx.redirectTo({
url: '../order/order'
});
} else {
wx.showToast({
title: '您未选中任何商品',
icon: 'none',
duration: 2000
})
}
},
addOrder: function(event) {
let that = this;
let id = event.target.dataset.id;
let index = event.target.dataset.index;
let param = this.data.items[index];
let subOrders = []; // 购物单列表存储数据
param.active ? param.active = false : param.active = true;
// 改变添加按钮的状态
this.data.items.splice(index, 1, param);
that.setData({
items: this.data.items
});
// 将已经确定的菜单添加到购物单列表
this.data.items.forEach(item => {
if (item.active) {
subOrders.push(item);
}
});
// 判断底部提交菜单显示隐藏
if (subOrders.length == 0) {
that.setData({
bottomFlag: false
});
} else {
that.setData({
bottomFlag: true
});
}
let money = 0;
let num = subOrders.length;
subOrders.forEach(item => {
money += item.price; // 总价格求和
});
let orderCount = {
num,
money
}
// 设置显示对应的总数和全部价钱
this.setData({
orderCount
});
// 将选中的商品存储在本地
wx.setStorage({
key: "orders",
data: subOrders
});
},
onLoad: function() {
}
看代码没问题，报什么错误还是没跳转？
【以下回答由 GPT 生成】
要实现点击按钮后跳转到另一个界面，你可以在按钮的点击事件处理函数中使用导航API来实现页面跳转。
首先，你需要确定订单页面的路径，例如 /pages/order/order。然后，你可以在 goToOrderPage 函数中使用 wx.navigateTo 方法来跳转到订单页面。
修改代码如下：
<!--index.wxml-->
<view class="container">
<view class="aside">
<view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap="tabMenu">
{{item.menu}}
</view>
</view>
<view class="item-content">
<view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
<view class="item" wx:for="{{items}}" wx:key="{{item.id}}">
<image src="{{item.image}}" bindtap="goToOrderPage"></image>
</view>
</view>
</view>
</view>
// index.js
Page({
goToOrderPage: function () {
wx.navigateTo({
url: '/pages/order/order',
})
},
})
请确保在小程序配置文件 app.json 中配置了订单页面的路径 /pages/order/order。
这样，当点击按钮时，就会触发 goToOrderPage 方法，跳转到订单页面。
【相关推荐】