你能帮我写一份微信小程序点单的代码嘛
时间: 2024-01-12 12:02:30 浏览: 25
当然可以!不过点单的代码需要根据具体的业务需求和设计进行编写。以下是一个简单的点单功能的代码示例,供您参考:
1. WXML文件
在WXML文件中,您需要创建一个商品列表和一个购物车列表,商品列表包含了菜品的名称、价格和图片等信息,购物车列表显示了用户已选的商品信息。代码如下:
```html
<view class="goods-list">
<block wx:for="{{goodsList}}" wx:key="index">
<view class="goods-item">
<image class="goods-img" src="{{item.imgUrl}}"></image>
<view class="goods-info">
<view class="goods-name">{{item.name}}</view>
<view class="goods-price">{{item.price}}</view>
</view>
<view class="goods-action">
<button class="add-btn" data-index="{{index}}" bindtap="addCart">加入购物车</button>
</view>
</view>
</block>
</view>
<view class="cart-list">
<block wx:for="{{cartList}}" wx:key="index">
<view class="cart-item">
<view class="cart-name">{{item.name}}</view>
<view class="cart-price">{{item.price}}</view>
<view class="cart-action">
<button class="minus-btn" data-index="{{index}}" bindtap="minusCart">-</button>
<view class="cart-num">{{item.num}}</view>
<button class="add-btn" data-index="{{index}}" bindtap="addCart">+</button>
</view>
</view>
</block>
</view>
```
2. JS文件
在JS文件中,您需要定义商品列表和购物车列表的数据结构,以及添加、删除商品等相关的业务逻辑。代码如下:
```javascript
Page({
data: {
goodsList: [
{
name: '红烧肉',
price: '28元',
imgUrl: 'https://example.com/images/hongshaorou.jpg'
},
{
name: '宫保鸡丁',
price: '22元',
imgUrl: 'https://example.com/images/gongbaojiding.jpg'
},
{
name: '烤鸭',
price: '58元',
imgUrl: 'https://example.com/images/kaoya.jpg'
}
],
cartList: []
},
addCart: function (e) {
var index = e.currentTarget.dataset.index;
var item = this.data.goodsList[index];
var cartList = this.data.cartList;
var exist = false;
for (var i = 0; i < cartList.length; i++) {
if (cartList[i].name === item.name) {
exist = true;
cartList[i].num++;
break;
}
}
if (!exist) {
cartList.push({
name: item.name,
price: item.price,
num: 1
});
}
this.setData({
cartList: cartList
});
},
minusCart: function (e) {
var index = e.currentTarget.dataset.index;
var cartList = this.data.cartList;
var item = cartList[index];
if (item.num <= 1) {
cartList.splice(index, 1);
} else {
item.num--;
}
this.setData({
cartList: cartList
});
}
})
```
以上代码仅供参考,您需要根据自己的实际需求进行修改和优化。希望能对您有所帮助!