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


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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐


奶茶点餐小程序


文章目录


⭐前言⭐

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

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

项目背景

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

开发目标

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

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


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


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

订单结算功能

便捷支付:集成微信支付,确保订单支付过程快速、安全,支持多种支付方式,提升用户体验。

订单确认:提供详细的订单确认页面,让顾客在支付前核对商品信息、总金额及配送地址,确保准确无误。

电子发票:支持电子发票的开具和管理,为顾客提供便捷的税务服务,同时简化商家的财务管理。

优惠卷使用

优惠卷管理:商家可以创建和管理各种优惠卷,包括满减、折扣等类型,灵活应对不同的促销需求。

优惠卷使用规则:设定优惠卷的使用条件和有效期,确保促销活动的精准执行。

自动应用:顾客在结算时,系统会自动识别并应用符合条件的优惠卷,简化使用流程,提升用户满意度。

优惠卷追踪:提供优惠卷的使用统计和分析功能,帮助商家了解促销效果和顾客行为。

设计目标

提升支付效率:通过优化结算流程和支付接口,确保顾客能够快速、顺畅地完成支付。

增强促销吸引力:通过灵活的优惠卷管理和使用规则,吸引更多顾客参与促销活动,提升销售业绩。

确保准确性和安全性:保证订单金额和优惠卷应用的准确无误,保护顾客和商家的利益。

开发愿景

通过优化订单结算和优惠卷使用功能,我们旨在为奶茶店提供一个高效、便捷的支付和促销工具,同时为顾客带来更具吸引力的消费体验。这不仅有助于提升商家的销售业绩,还能增强顾客的忠诚度和满意度。

(1)balance.wxml

javascript 复制代码
<!--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

javascript 复制代码
/* 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

javascript 复制代码
// 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

javascript 复制代码
<!--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

javascript 复制代码
/* 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

javascript 复制代码
// 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' 
    })
  }
 

 
})

运行结果的显示:


结束语🥇

以上就是微信小程序之列表渲染

持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序

你们的支持就是曼亿点创作的动力💖💖💖

相关推荐
丁总学Java41 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165023 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac13 小时前
微信小程序的组件
微信小程序
stormjun14 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck14 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong16 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序