【微信小程序开发】——奶茶点餐小程序的制作（二）

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

⭐前言⭐

  随着智能手机的普及和移动互联网的迅速发展，微信小程序作为一种新兴的应用形态，正逐渐成为人们日常生活中不可或缺的一部分。尤其是在餐饮行业，微信小程序为商家和顾客提供了更为便捷的服务方式。奶茶作为一种受欢迎的饮品，拥有广泛的消费群体，开发一个功能完善的奶茶点餐小程序不仅可以提升用户体验，还能帮助商家提高运营效率。

  本项目旨在开发一个专为奶茶店设计的微信小程序点餐系统，通过现代化的技术手段，实现线上点餐、实时订单管理以及个性化服务。这一小程序的开发过程将包括需求分析、系统设计、前端与后端开发、用户体验优化等多个步骤。

项目背景
  奶茶市场在近年来呈现出快速增长的趋势，顾客对便捷和高效的点餐体验有着越来越高的期望。传统的线下点餐方式往往会面临排队等候、信息传递不准确等问题。微信小程序的出现，为解决这些问题提供了新的解决方案。通过微信小程序，顾客可以轻松地浏览菜单、选择喜欢的饮品、进行个性化定制，并快速完成支付。这不仅提升了顾客的购物体验，也使得商家能够更好地管理订单和优化运营流程。

开发目标

• 用户友好：设计简洁易用的界面，使用户能够快速完成点餐流程，并享受流畅的操作体验。
• 功能全面：实现奶茶菜单浏览、饮品定制、订单管理、支付功能等核心功能。
• 系统稳定：确保小程序的稳定性和安全性，处理高并发访问时的性能需求。
• 数据管理：提供实时的数据统计和分析功能，帮助商家了解销售情况和顾客偏好。
  技术概述
    为了实现上述目标，本项目将采用微信小程序开发框架，结合前端的WXML和WXSS技术、后端的云函数或服务器端编程，以及数据库的管理和数据处理技术。通过这些技术的有机结合，确保系统的高效性和稳定性。

基本目录展示：其中项目中的图片自行去浏览器中寻找，博主不提供。

🎶 一、奶茶订单的结算与优惠卷的使用

  在微信小程序奶茶点餐系统中，订单结算与优惠卷使用是提升顾客满意度和促进销售的关键环节。通过优化这两个功能，可以实现更高效的支付流程和更具吸引力的促销策略。

订单结算功能
便捷支付：集成微信支付，确保订单支付过程快速、安全，支持多种支付方式，提升用户体验。
订单确认：提供详细的订单确认页面，让顾客在支付前核对商品信息、总金额及配送地址，确保准确无误。
电子发票：支持电子发票的开具和管理，为顾客提供便捷的税务服务，同时简化商家的财务管理。
优惠卷使用
优惠卷管理：商家可以创建和管理各种优惠卷，包括满减、折扣等类型，灵活应对不同的促销需求。
优惠卷使用规则：设定优惠卷的使用条件和有效期，确保促销活动的精准执行。
自动应用：顾客在结算时，系统会自动识别并应用符合条件的优惠卷，简化使用流程，提升用户满意度。
优惠卷追踪：提供优惠卷的使用统计和分析功能，帮助商家了解促销效果和顾客行为。
设计目标
提升支付效率：通过优化结算流程和支付接口，确保顾客能够快速、顺畅地完成支付。
增强促销吸引力：通过灵活的优惠卷管理和使用规则，吸引更多顾客参与促销活动，提升销售业绩。
确保准确性和安全性：保证订单金额和优惠卷应用的准确无误，保护顾客和商家的利益。
开发愿景
  通过优化订单结算和优惠卷使用功能，我们旨在为奶茶店提供一个高效、便捷的支付和促销工具，同时为顾客带来更具吸引力的消费体验。这不仅有助于提升商家的销售业绩，还能增强顾客的忠诚度和满意度。

(1)balance.wxml

<!--pages/order/balance/balance.wxml-->
<view><view class='top-bar'><label class='top-left-label'>取餐时间</label><label class='top-right-label activity-color'>饮品制作中，尽快为你服务</label></view><!-- 订单详情 --><view class='order-info'><view class='order-info-title'>订单详情</view><view class='cart-list-box' wx:for="{{cartList}}" wx:key="unique"><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'><view style='color:#A3A3A3'>x {{item.number}}</view><view>¥ {{item.sum}}.00</view></view></view></view><view class='order-cut' wx:if="{{cutMonney!=0}}"><label class='order-cut-dec'>减</label><label class='order-cut-note'>满20元立减3元</label><label class='order-cut-number activity-color'>-¥ 3.00</label></view><view class='order-sum'><label>总计 </label><label class='order-sum-number activity-color'>¥ {{sumMonney-cutMonney}}</label></view></view>
<!-- 备注 --><view class='note'><label style='font-size:13px;color:#A3A3A3'>备注</label><textarea placeholder='默认常温，常规糖，如有口味要求，请输入备注' class='note-text'></textarea></view>
<!-- 底部操作栏 --><view class="operate-bar"><view class='gouwuche'><view style='padding:5px;display:flex'><i class="iconfont icon-gouwuchefill gouwuche-icon activity-color"><span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span></i><view class='gouwuche-price' style='color:white;font-size:18px'>¥ {{sumMonney-cutMonney}}.00</view></view></view><view class="submit-btn activity-color-bg" bindtap='gopay'><view class="submit-btn-label color-white">去支付</view></view></view></view>

(2)balance.wxss

/* pages/order/balance/balance.wxss */
page{background: #F8F8F8
}
.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:red;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:white;font-size:15px;margin:auto;
}
.activity-color{color:#FF9C35;
}
.submit-btn{height:100%;background:#F7F7F7;width:25%;display:flex;
}.activity-color-bg{background:#FF9C35;
}.cart-list-box{background:#FFFFFF;display:flex;font-size:15px;border-bottom:1px #E3E3E3 solid;
}
.list-info{width:50%;padding:5px 15px;
}
.list-info-size{font-size:12px;color:#B1B1B1;
}
.icon-li-circle{margin-left:15px;font-size:20px
}
.font20{font-size:20px
}
.top-bar{height:30px;font-size:14px;background: white;
}
.top-left-label{float:left;padding:5px;margin-left:10px;
}
.top-right-label{float:right;font-size:13px;padding:5px;
}
.order-info{background: white;margin-top:10px;
}
.order-info-title{font-size:12px;color: #D1D1D1;padding: 12px;border-bottom: 1px #E3E3E3 solid
}
.order-cut{height:30px;padding:5px 15px;border-bottom: 1px #E3E3E3 solid;
}
.order-cut-dec{background:#F07474;font-size:13px;color:white;padding:2px
}
.order-cut-note{margin-left:3px;font-size:14px
}
.order-cut-number{font-size:14px;float:right;
}
.order-sum{height:30px;padding:5px 15px;font-size:14px;
}
.order-sum-number{font-size:14px;float:right;
}
.note{padding:5px 15px;background:white;margin-top:10px
}
.note-text{width:95%;font-size:12px;background:#F2F2F2;padding:10px;height:80px;
}

(1)balance.js

// pages/order/balance/balance.js
Page({/*** 页面的初始数据*/data: {cartList: [],sumMonney: 0,cutMonney: 0,cupNumber:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: '订单详情'})this.setData({cartList: wx.getStorageSync('cartList'),sumMonney: wx.getStorageSync('sumMonney'),cutMonney: wx.getStorageSync('sumMonney')>19?3:0,cupNumber: wx.getStorageSync('cupNumber'),})},gopay:function(){wx.navigateTo({url: '../detail/detail'})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

🎶 二、个人用户页面

  在微信小程序奶茶点餐系统中，个人用户页面是顾客与平台互动的核心入口之一。一个设计良好的用户页面不仅能提升顾客的使用体验，还能帮助商家建立与顾客的长期关系。个人用户页面的设计目标是提供一个清晰、友好、功能齐全的界面，让用户能够轻松管理自己的订单和账户信息。

个人用户页面功能
订单管理：

• 查看历史订单：用户可以方便地查看和管理过去的订单，包括订单状态、详细信息和支付记录。

• 追踪当前订单：实时更新当前订单的状态，让用户能够随时了解其订单的进度。
  账户信息：

• 个人资料管理：用户可以查看和编辑自己的个人信息，如姓名、联系方式和地址，确保信息的准确性。

• 密码和安全设置：提供账户安全设置，包括密码修改、登录保护等，保障用户账户的安全。
  优惠卷和积分：

• 查看优惠卷：用户可以查看和管理自己拥有的优惠卷，包括使用条件和有效期。

• 积分查询：展示用户的积分余额及使用记录，鼓励用户参与积分兑换活动。
  收藏与推荐：

• 收藏商品：用户可以收藏自己喜欢的奶茶或商品，便于快速访问。

• 个性化推荐：基于用户的购买历史和偏好，推荐相关的奶茶和促销活动，提高用户的购物体验。
  客服与反馈：

• 联系客服：提供便捷的联系客服入口，用户可以提出问题或反馈意见，获得及时的支持和帮助。

• 意见反馈：允许用户提交对小程序的建议和意见，以帮助商家不断改进服务。
  设计目标
  1.用户友好：界面设计简洁直观，操作流程流畅，确保用户能够轻松完成各项操作。
  2.信息透明：提供清晰的订单和账户信息，让用户对自己的消费情况一目了然。
  3.功能齐全：集成账户管理、订单处理、优惠卷使用等多项功能，提升用户的整体体验。
  开发愿景
  通过优化个人用户页面，我们旨在为顾客提供一个高效、便捷、个性化的管理平台，使其在使用奶茶点餐小程序时获得愉悦的体验。一个设计优良的个人用户页面不仅能提升顾客的满意度，还能增强用户的忠诚度，帮助商家建立更加稳固的客户关系。

(1)mine.wxml

<!--pages/mine/mine.wxml-->
<view class="top-mode"><view class='userinfo'><image class="userinfo-avatar" src="{{avatarUrl}}"></image><label style="color:white">{{nickName}}</label></view>
</view>
<view class='go-center card-box'><view class='card-info'><view class='down-center' style='height:50%;border-bottom:1px solid #E3E3E3;'><i class="iconfont icon-youhuiquan" style="color:#FF9C35"></i><label style='font-size:15px;margin-left:15px'>我收到的支付返券</label></view><view class='down-center' style='height:50%'> <i class="iconfont icon-shouji" style="color:#B6D9A9"></i><label style='font-size:15px;margin-left:15px'>1380000678</label></view></view>
</view>
<view class="go-center" style='margin-top:80px;font-size:14px;color:blue;' bindtap='bitphone'><label style='border-bottom:1px solid blue'>客服电话：123-456-7890</label>
</view>
<view class='go-center' style='margin-top:10px'><label style='font-size:12px;color:#E2E2E2'>[服务时间 周一至周五 9:00-19:00]</label>
</view>

(2)mine.wxss

/* pages/mine/mine.wxss */
.top-mode{background: #FF9C35;height:400rpx;display: block;
}
.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.userinfo-nickname {color: #aaa;
}.usermotto {margin-top: 200px;
}
.card-info{width: 80%;height:180rpx;box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(255, 156, 53, 10);z-index: 1000;background: white;padding: 10px;
}
.card-box{margin-top:-20px;
}

(3)mine.js

// pages/mine/mine.js
Page({/*** 页面的初始数据*/data: {nickName:"",avatarUrl:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;wx.getUserInfo({success: function (res) {var userInfo = res.userInfothat.setData({nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,})}})},bitphone:function(){wx.makePhoneCall({phoneNumber: '1340000' })}})

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖