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

---

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

👨‍💻 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.userInfo
        that.setData({
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl,
        })
      }
    })
  },
  bitphone:function(){
    wx.makePhoneCall({
      phoneNumber: '1340000' 
    })
  }
 

 
})

运行结果的显示：

---

结束语🥇

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