👨💻个人主页:@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏:微信小程序开发
⭐🅰⭐
奶茶点餐小程序
文章目录
⭐前言⭐
随着智能手机的普及和移动互联网的迅速发展,微信小程序作为一种新兴的应用形态,正逐渐成为人们日常生活中不可或缺的一部分。尤其是在餐饮行业,微信小程序为商家和顾客提供了更为便捷的服务方式。奶茶作为一种受欢迎的饮品,拥有广泛的消费群体,开发一个功能完善的奶茶点餐小程序不仅可以提升用户体验,还能帮助商家提高运营效率。
本项目旨在开发一个专为奶茶店设计的微信小程序点餐系统,通过现代化的技术手段,实现线上点餐、实时订单管理以及个性化服务。这一小程序的开发过程将包括需求分析、系统设计、前端与后端开发、用户体验优化等多个步骤。
项目背景
奶茶市场在近年来呈现出快速增长的趋势,顾客对便捷和高效的点餐体验有着越来越高的期望。传统的线下点餐方式往往会面临排队等候、信息传递不准确等问题。微信小程序的出现,为解决这些问题提供了新的解决方案。通过微信小程序,顾客可以轻松地浏览菜单、选择喜欢的饮品、进行个性化定制,并快速完成支付。这不仅提升了顾客的购物体验,也使得商家能够更好地管理订单和优化运营流程。
开发目标
- 用户友好:设计简洁易用的界面,使用户能够快速完成点餐流程,并享受流畅的操作体验。
- 功能全面:实现奶茶菜单浏览、饮品定制、订单管理、支付功能等核心功能。
- 系统稳定:确保小程序的稳定性和安全性,处理高并发访问时的性能需求。
- 数据管理:提供实时的数据统计和分析功能,帮助商家了解销售情况和顾客偏好。
技术概述
为了实现上述目标,本项目将采用微信小程序开发框架,结合前端的WXML和WXSS技术、后端的云函数或服务器端编程,以及数据库的管理和数据处理技术。通过这些技术的有机结合,确保系统的高效性和稳定性。
基本目录展示:其中项目中的图片自行去浏览器中寻找,博主不提供。
前期工作:app.json部分
{
"pages": [
"pages/order/list/list",
"pages/index/index",
"pages/logs/logs",
"pages/list/list",
"pages/order/balance/balance",
"pages/mine/mine",
"pages/order/detail/detail"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FF9C35",
"navigationBarTitleText": "奶茶可可",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#FF9C35",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/home_s.png",
"iconPath": "images/home.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/order_s.png",
"iconPath": "images/order.png",
"pagePath": "pages/order/list/list",
"text": "订单"
},
{
"selectedIconPath": "images/mine_s.png",
"iconPath": "images/mine.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
🎶 一、点餐首页
随着生活节奏的加快,越来越多的消费者希望能够在繁忙的日常中快速完成奶茶点餐,享受美味而无需排队等待。为了满足这一需求,我们推出了这款专为奶茶店设计的微信小程序,通过创新的技术手段,让您的点餐体验更加顺畅、高效。
- 简洁直观的界面:我们设计了清晰易懂的用户界面,帮助您快速浏览菜单、选择心仪的饮品,并轻松完成订单。
- 个性化定制:支持多种饮品定制选项,您可以根据自己的口味喜好调整甜度、冰块量等,打造属于您的专属奶茶。
- 便捷支付方式:集成微信支付功能,让您可以安全、快捷地完成支付,无需再为找零或携带现金烦恼。
- 实时订单追踪:随时查看您的订单状态,了解制作进度,安心等待美味奶茶的到来。
- 数据统计与分析:为商家提供全面的数据支持,帮助了解顾客需求和市场趋势,优化服务和产品。
用户体验
我们充分考虑了用户体验,力求通过每一个细节的优化,让您的点餐过程更加顺畅。无论是浏览菜单、选择商品,还是完成支付、查看订单,我们都力求为您提供无缝对接的操作体验。
我们希望通过这款小程序,为奶茶爱好者提供一个高效、便捷的点餐平台,让每一位顾客都能享受到优质的服务和美味的饮品。同时,我们也期待通过数据分析帮助商家更好地了解顾客需求,提升运营效率,推动业务增长。
(1)index.wxml
<!--index.wxml-->
<view>
<!-- 顶部轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="unique">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!-- 操作按钮 -->
<view class='btn-bar'>
<view class='btn-block' bindtap='golist'>
<view class="btn_op1">开始订餐</view>
</view>
<view class='btn-block'>
<view class="btn_op2">预约订餐</view>
</view>
</view>
<!-- 中部广告 -->
<view class="ad-box">
<image src='../../images/2-1.jpg' class="image_ad"></image>
</view>
<!-- 底部横向滑动box -->
<view class='bottom-box'>
<scroll-view scroll-x="true" class="scroll-box">
<view class='slide-inline-box'>
<image src='../../images/bottom_1.png' class='bottom-image'></image>
</view>
<view class='slide-inline-box'>
<image src='../../images/bottom_2.png' class='bottom-image'></image>
</view>
<view class='slide-inline-box'>
<image src='../../images/bottom_3.png' class='bottom-image'></image>
</view>
</scroll-view>
</view>
</view>
(2)index.wxss
/**index.wxss**/
.slide-image{
width:100%;
height:280rpx;
}
.btn_op1{
text-align: center;
font-size:14px;
color:#FF9C35;
padding: 5px 20px;
border:1px solid #FF9C35;
border-radius: 25px;
width: 100px;
z-index: 10;
}
.btn_op2{
text-align: center;
font-size:14px;
color:#B6D9A9;
padding: 5px 20px;
border:1px solid #B6D9A9;
border-radius: 25px;
width: 100px;
}
.btn-bar{
display: flex;
margin-top:20px;
}
.btn-block{
width: 50%;
display: flex;
justify-content:center;
}
.ad-box{
margin-top:30px;
width: 100%;
text-align: center;
}
.image_ad{
width: 95%;
height:370rpx;
}
.scroll-box{
display:flex;
white-space: nowrap;
width:95%
}
.bottom-box{
margin-top:40rpx;
display: flex;
justify-content:center;
}
.bottom-image{
width:300rpx;
height:170rpx
}
.slide-inline-box{
display:inline-block;
margin-right:10px;
}
(3)index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//轮播图
imgUrls: [
'../../images/1.png',
'../../images/3.png',
'../../images/4.png'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},
onLoad: function () {
},
golist: function () {
wx.navigateTo({
url: '../list/list'
})
},
})
运行结果的显示:
🎶 二、奶茶订单
在奶茶点餐小程序中,订单管理是确保顾客体验流畅和商家运营高效的核心功能之一。高效的订单处理不仅能提升顾客满意度,还能优化商家的运营流程,实现业务的持续增长。
订单管理功能
- 实时订单接收:系统能及时接收顾客的点餐请求,并将订单信息准确传递到商家的后台,确保无延迟处理。
- 订单状态跟踪:提供详细的订单状态更新,从“待处理”到“制作中”、再到“已完成”,顾客可以实时查看每个阶段的进度。
- 订单修改与取消:允许顾客在一定时间内对订单进行修改或取消,方便应对临时需求变更。
- 支付确认:集成支付系统,确保每一笔交易的安全性和准确性,自动更新订单状态。
- 历史订单记录:提供订单历史查询功能,帮助顾客和商家查看和管理过去的交易记录。
设计目标 - 简化操作:通过直观的界面和流畅的操作流程,简化订单管理的复杂性,让商家能够高效处理每一笔订单。
- 提高准确性:减少人工干预,通过自动化的数据处理,降低订单出错的风险。
- 增强透明度:提供清晰的订单状态跟踪,让顾客能够实时了解订单进度,增强服务透明度。
开发愿景
我们的目标是通过精确的订单管理功能,为奶茶店提供一个可靠、高效的工具,不仅提升顾客的使用体验,也帮助商家优化运营,提升整体服务水平。通过这一系统,我们希望能够推动奶茶店的业务增长,并为每一位顾客带来满意的购物体验。
(1)list.wxml
<view>
<view class="shopping"><!----><!--大框架-->
<view class="nav_left"><!--侧边栏盒子-->
<block wx:for="{{leftitem}}" wx:key="id">
<!--这里定义了一个变量index,并把这个变量赋值为index,这个是wx:for循环产生的下标,传到js,通过这个下标完成商品的显示-->
<view class="nav_left_items {{count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{{index}}"><!--文字盒子-->
{{item.name}}
</view>
</block>
</view>
<view class="nav_right"><!--右边主体部分-->
<!--通过侧边栏的选择传到js中的index的值与js中data数据中的tag进行比较,完成商品的分类显示-->
<view class="nav_right_goods" wx:for="{{rightitem}}" wx:key="id" wx:if="{{count==item.tag}}" bindtap="changeImage" ><!--商品详情的盒子-->
<view bindtap="click_nav_right" data-index_two="{{index}}" class="nav">
<image src="{{item.url}}" mode="widthFix" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;"></image><!--商品图片-->
<view class="nav_right_textandprice"><!--文字和价格的盒子-->
<text class="nav_right_text" style="color: black; font-size: 12px;">{{item.name}}</text><!--商品文字-->
<view class="nav_right_price"><!--商品价格-->
¥{{item.price}}.00
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部操作菜单 -->
<view class="operate-bar" wx:if="{{loading}}">
<view class='gouwuche'>
<view style='padding:5px;display:flex'>
<i class="iconfont icon-gouwuchefill gouwuche-icon {{sumMonney!=0?'activity-color':'' }}" bindtap="showCartList">
<span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span>
</i>
<view class='gouwuche-price' wx:if="{{sumMonney==0}}">购物车是空的</view>
<view class='gouwuche-price' style='color:white;font-size:18px' wx:if="{{sumMonney!=0}}">¥ {{sumMonney}}.00</view>
</view>
</view>
<view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}" bindtap='goBalance'>
<view class="submit-btn-label {{sumMonney!=0?'color-white':'' }}">选好了</view>
</view>
</view>
</view>
<!-- 选择弹窗 -->
<view class="drawer_screen" bindtap="selectInfo" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view class="drawer_box_ad" wx:if="{{showModalStatus}}">
<view class="drawer_content_ad">
<view style='font-size:16px;display:flex;justify-content:center; '> {{listData[currentType].foods[currentIndex].name}} </view>
<view class="select-line-nav">规格</view>
<view style='display:flex'>
<view class="select-tab {{index==sizeIndex?'select-active':''}}" wx:for="{{size}}" wx:key="unique" data-type='0' data-index='{{index}}' bindtap='chooseSE'>{{item}}</view>
</view>
<view class="select-line-nav">糖度</view>
<view style='display:flex'>
<view class="select-tab {{index==sugarIndex?'select-active':''}}" wx:for="{{sugar}}" wx:key="unique" bindtap='chooseSE' data-type='1' data-index='{{index}}'>{{item}}</view>
</view>
<view class="select-line-nav">温度</view>
<view style='display:flex'>
<view class="select-tab {{index==temIndex?'select-active':''}}" wx:for="{{tem}}" wx:key="unique" bindtap='chooseSE' data-type='2' data-index='{{index}}'>{{item}}</view>
</view>
<view class="select-price">¥{{listData[currentType].foods[currentIndex].specfoods[0].price}}.00
<button class="btn-putIn" bindtap='addToCart'>加入购物车</button>
</view>
</view>
</view>
<!-- 购物车 -->
<view class="drawer_screen" bindtap="showCartList" data-statu="close" wx:if="{{showCart}}"></view>
<view class="cartlist-float" wx:if="{{showCart}}">
<view style='background:#F0F0F0;height:30px'>
<label class='label-cart-bar'>
<label style='padding:5px'>已选商品</label>
</label>
<label class='icon-clear' bindtap='clearCartList'>
<i class="iconfont icon-lajitong"></i>
<label class="label-clear">清空购物车</label>
</label>
</view>
<scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}">
<view class='cart-list-box' wx:for="{{cartList}}" wx:key="unique" style='border-bottom:1px #E3E3E3 solid'>
<view class='list-info'>
<view>{{item.name}}</view>
<view class='list-info-size'>{{item.detail}}</view>
</view>
<view style='width:50%;padding:10px;'>
<view style='float:right'>
<label class='activity-color'>¥ {{item.sum}}.00</label>
<i class="iconfont icon-jian icon-li-circle" data-index="{{index}}" bindtap="decNumber"></i>
{{item.number}}
<i class="iconfont icon-jiahao2fill activity-color font20" data-index="{{index}}" bindtap="addNumber"></i>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 优惠宣传条 -->
<view class='cut-bar' wx:if="{{sumMonney==0&&loading}}">
<label>满20立减3元(手机点餐专享)</label>
</view>
<view class='cut-bar' wx:if="{{sumMonney<20&&sumMonney!=0&&loading}}">
<label>满20立减3元,还差{{20-sumMonney}}元,去凑单></label>
</view>
(2)list.wxss
/* pages/list/list.wxss */
.hr {
border: 1px solid #ddbcbc;
width: 100%;
opacity: 0.6;
}
/*输入框样式*/
input {
margin: 15rpx 32rpx;
border: 1px solid #FF9C35;
border-radius: 50rpx;
text-align: center;
font-size: 32rpx;
}
/*布局样式*/
.content {
display: flex;
flex-direction: row;
}
/*大框架*/
.shopping {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color: #808080;
}
/*左侧栏主盒子*/
.nav_left{
position: fixed;
top: 0;
left: 0;
display: inline-block;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
.nav_left .nav_left_items{
height: 30px;
line-height: 30px;
padding: 6px 0;
border-bottom: 1px solid #dedede;
font-size: 14px;
}
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
.nav{
display: flex;
padding: 40rpx;
}
.nav_right_textandprice{
display: flex;
flex-direction: column;
padding-left: 20rpx;
position: relative;
}
.nav_right_price{
color: #FF9C35;
position: absolute;
bottom: 20rpx;
}
.active-tag{
background-color: white;
color: #FF9C35;
border-left: 5px solid #FF9C35;
border-radius: 5px;
}
.operate-bar{
z-index: 1001;
position: absolute;
bottom: 0px;
height:55px;
width:100%;
display: flex;
}
.gouwuche{
width:75%;
background:#353535;
height: 100%;
}
.gouwuche-icon{
font-size:40px;
color:#87888E;
margin-left:10px;
position: relative;
}
.number-msg{
padding: 1px 7px;
border-radius:50%;
background:#FF9C35;
color:white;
font-size:14px;
position: absolute;
text-align: center;
top:0px;
right:-5px;
}
.gouwuche-price{
color:#A9A9A9;
display:flex;
align-items: center;
margin-left:10px;
font-size:15px
}
.submit-btn{
height:100%;
background:#F7F7F7;
width:25%;
display:flex;
}
.submit-btn-label{
color:#A9A9A9;
font-size:15px;
margin:auto;
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
.drawer_box_ad {
margin-left: 7%;
width: 86%;
overflow: hidden;
position: fixed;
top: 15%;
z-index: 1001;
background: #FFFFFF;
border-radius: 4px;
}
.cartlist-float{
width: 100%;
overflow: hidden;
position: fixed;
z-index: 1001;
bottom: 55px;
max-height: 250px;
}
.drawer_content_ad {
height: 289px;
width: 100%;
padding: 10px;
}
.select-line-nav{
font-size:12px;
margin-left:5px;
margin-top:10px;
color:#ABABAB;
}
.select-tab{
padding:5px 7px;
border:1px solid #ABABAB;
font-size:12px;
border-radius:5px;
margin:5px;
color:#ABABAB;
z-index:1002;
}
.select-active{
color:#FF9C35;
border:1px solid #FF9C35;
}
.select-price{
font-size:14px;
color:#FF9C35;
margin-top:20px;
display:flex;
align-items: center;
margin-left:10px;
}
.btn-putIn{
height:40px;
width:100px;
font-size:14px;
background:#FF9C35;
color:white;
margin-right:20px;
}
.activity-color{
color:#FF9C35;
}
.color-white{
color:white;
}
.activity-color-bg{
background:#FF9C35;
}
.label-cart-bar{
color:#878787;
font-size:12px;
border-left:4px solid #FF9C35;
margin-left: 20px;
}
.icon-clear{
color:#878787;
float: right;
margin-right: 10px;
}
.label-clear{
color:#878787;
font-size: 12px;
}
.cart-list-box{
background:#FFFFFF;
display:flex;
font-size:13px;
}
.list-info{
width:50%;
padding:5px 15px;
}
.list-info-size{
font-size:10px;
color:#B1B1B1;
}
.icon-li-circle{
margin-left:15px;
font-size:20px
}
.font20{
font-size:20px
}
.cart-scroll-list{
height:450rpx;
}
.cut-bar{
height:20px;
position: fixed;
bottom:55px;
background:#FFCD9B;
width:100%;
color:#FFF7EC;
font-size:12px;
text-align:center;
}
(3)list.js
// pages/list/list.js
Page({
changeImage:function(){
wx.navigateTo({
url: '/pages/qin/qin',
})
},
data: {
//leftitem是定义左边侧边栏的选项,rightitem是定义右边商品的展示,tag主要是把商品进行一个类别的划分
leftitem:[
{id:1,name:"真鲜果茶"},
{id:2,name:"醇香奶茶"},
{id:3,name:"轻乳系列"},
{id:4,name:"新鲜冰淇淋"},
{id:5,name:"芝士奶盖"},
{id:6,name:"原味纯茶"},
{id:7,name:"美味咖啡"}
],
rightitem:[
{id:1,name:"菠萝甜心橘",price:8,url:"../../images/caomeibobo.jpg",tag:0,},
{id:1,name:"草莓啵啵",price:9,url:"../../images/molilvcha.jpg",tag:0},
{id:1,name:"柠檬绿茶",price:5,url:"../../images/ningmenglvcha.jpg",tag:0},
{id:2,name:"芋圆奶茶",price:8,url:"../../images/yuanweibingqiling.jpg",tag:1},
{id:2,name:"布丁奶茶",price:7,url:"../../images/zhishilvcha.jpg",tag:1},
{id:3,name:"草莓椰奶露",price:7,url:"../../images/zhishisijic.jpg",tag:2},
],
count:0,//我们把前端的index值传到js中,并把它赋值给count,储存在js中,方便右边商品通过count完成与侧边栏的相同的那一类的商品展示,同时完成侧边栏的样式,保证选中的选项有与其他未选择的选项的区别
},
click_nav_right(event){//这个主要是完成商品分类页的数据传递到商品详情页
var data_one=event.currentTarget.dataset.index_two//前端的右边商品定义了一个index_two这个变量,我们在js中把这个值赋值给data变量,并传递到商品详情页
//console.log(data_one)
wx.navigateTo({//通过这个函数,完成两个页面中数据的传递,具体的用法可以到微信的小程序文档中搜索,当然除了用这个函数,也可以通过引用全局变量的方式完成数据的传递
url: '/pages/detail/detail?data='+data_one,
})
},
switchRightTab(event){
this.setData({
count:event.target.dataset.index
});//改变count原本的值,完成右侧商品的根据侧边栏的不同展示商品
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var sysinfo = wx.getSystemInfoSync().windowHeight;
console.log(sysinfo)
wx.showLoading({
title: '努力加载中',
})
//将本来的后台换成了easy-mock 的接口,所有数据一次请求完 略大。。
wx.request({
url: 'https://easy-mock.com/mock/59abab95e0dc66334199cc5f/coco/aa',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function (res) {
wx.hideLoading();
console.log(res)
that.setData({
listData: res.data,
loading: true
})
}
})
},
selectMenu: function (e) {
var index = e.currentTarget.dataset.index
console.log(index)
this.setData({
activeIndex: index,
toView: 'a' + index,
// scrollTop: 1186
})
console.log(this.data.toView);
},
scroll: function (e) {
console.log(e)
var dis = e.detail.scrollTop
if (dis > 0 && dis < 1189) {
this.setData({
activeIndex: 0,
})
}
if (dis > 1189 && dis < 1867) {
this.setData({
activeIndex: 1,
})
}
if (dis > 1867 && dis < 2180) {
this.setData({
activeIndex: 2,
})
}
if (dis > 2180 && dis < 2785) {
this.setData({
activeIndex: 3,
})
}
if (dis > 2785 && dis < 2879) {
this.setData({
activeIndex: 4,
})
}
if (dis > 2879 && dis < 4287) {
this.setData({
activeIndex: 5,
})
}
if (dis > 4287 && dis < 4454) {
this.setData({
activeIndex: 6,
})
}
if (dis > 4454 && dis < 4986) {
this.setData({
activeIndex: 7,
})
}
if (dis > 4986) {
this.setData({
activeIndex: 8,
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
selectInfo: function (e) {
var type = e.currentTarget.dataset.type;
var index = e.currentTarget.dataset.index;
this.setData({
showModalStatus: !this.data.showModalStatus,
currentType: type,
currentIndex: index,
sizeIndex: 0,
sugarIndex: 0,
temIndex: 0
});
},
chooseSE: function (e) {
var index = e.currentTarget.dataset.index;
var type = e.currentTarget.dataset.type;
if (type == 0) {
this.setData({
sizeIndex: index
});
}
if (type == 1) {
this.setData({
sugarIndex: index
});
}
if (type == 2) {
this.setData({
temIndex: index
});
}
},
addToCart: function () {
var a = this.data
var addItem = {
"name": a.listData[a.currentType].foods[a.currentIndex].name,
"price": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,
"detail": a.size[a.sizeIndex] + "+" + a.sugar[a.sugarIndex] + "+" + a.tem[a.temIndex],
"number": 1,
"sum": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,
}
var sumMonney = a.sumMonney + a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price;
var cartList = this.data.cartList;
cartList.push(addItem);
this.setData({
cartList: cartList,
showModalStatus: false,
sumMonney: sumMonney,
cupNumber: a.cupNumber + 1
});
console.log(this.data.cartList)
},
showCartList: function () {
console.log(this.data.showCart)
if (this.data.cartList.length != 0) {
this.setData({
showCart: !this.data.showCart,
});
}
},
clearCartList: function () {
this.setData({
cartList: [],
showCart: false,
sumMonney: 0
});
},
addNumber: function (e) {
var index = e.currentTarget.dataset.index;
console.log(index)
var cartList = this.data.cartList;
cartList[index].number++;
var sum = this.data.sumMonney + cartList[index].price;
cartList[index].sum += cartList[index].price;
this.setData({
cartList: cartList,
sumMonney: sum,
cupNumber: this.data.cupNumber+1
});
},
decNumber: function (e) {
var index = e.currentTarget.dataset.index;
console.log(index)
var cartList = this.data.cartList;
var sum = this.data.sumMonney - cartList[index].price;
cartList[index].sum -= cartList[index].price;
cartList[index].number == 1 ? cartList.splice(index, 1) : cartList[index].number--;
this.setData({
cartList: cartList,
sumMonney: sum,
showCart: cartList.length == 0 ? false : true,
cupNumber: this.data.cupNumber-1
});
},
goBalance: function () {
if (this.data.sumMonney != 0) {
wx.setStorageSync('cartList', this.data.cartList);
wx.setStorageSync('sumMonney', this.data.sumMonney);
wx.setStorageSync('cupNumber', this.data.cupNumber);
wx.navigateTo({
url: '../order/balance/balance'
})
}
},
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
运行结果的显示:
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖