微信小程序完整项目实战(前端+后端)

基于微信小程序的在线商城点单系统

前言：闲来无事，想以后自己开一个小超市或者小吃店，能够支持线上下单，既方便客户也方便自己。系统采用Java语言作为后端实现与小程序的交互，给用来学习或者想自己开个小店的朋友当个参考。

一、项目介绍

小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。
管理端主要有人员管理、权限管理、商品管理、订单管理等模块。

二、相关技术

html+css+js：微信小程序界面。
SpringBoot框架+Java程序语言：小程序及后台管理系统API的实现。
Layui前端框架：web后台管理界面样式及数据渲染框架。
MySQL数据库：数据支持。

三、小程序效果图

四、后台管理效果图

五、代码块

<view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
  <view class="headerBox">
    <view class="leftAddress">
      <image class="leftAddressIcon" src="{{imgUrl}}/upload/20220608/addressIcon.png" lazy-load="true">image>
      <view class="leftAddressText little">橘猫餐厅view>
      <image class="rightJtIcon" src="{{imgUrl}}/upload/20220608/jtBottom.png" lazy-load="true">image>
    view>
    <view class="appletsTitle">view>
  view>
view>

<view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;">view>

<view style="background: url({{imgUrl}}/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
  <view class="bannerBottom">view>
view>

<view class="containerBox" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
  <scroll-view class="menu-left" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
    <view wx:for="{{menuList}}" class="little {{menuIndex==index?'menu-item-check':'menu-item'}}  {{item.prevClass}} {{item.nextClass}}" 
    bindtap="clickMenu" data-index="{{index}}">{{item.title}}view>
    <view class="bottomHeightBox">view>
  scroll-view>
  <scroll-view class="menu-right" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
    <view class="menuTitleBox">
      <text>热门推荐text>
    view>
    <view class="productContainer">
      <view class="productItem" wx:for="{{20}}" bindtap="goDetail">
        <view class="productImage" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">view>
        <view class="productName little">超级无敌好吃美味烤鸭view>
        <view class="productPriceBox">
          <view class="salePrice">
            <text style="font-size:22rpx;">￥text>
            <text>58.88text>
            <text style="font-weight:400;">/gtext>
          view>
          <view class="oldPrice middleLine">￥98view>
        view>
      view>
    view>
    <view class="bottomHeightBox">view>
  scroll-view>
view>

<image class="scanIcon" src="{{imgUrl}}{{scanUrl}}" lazy-load="true" bindtap="scanTableCode">image>

<view class="product-banner">
  <swiper class="product-banner" bindchange='onSlideChange' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
    interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{productBanner}}" wx:key="id">
      <swiper-item>
        <view>
          <image src="{{item}}" class="product-banner" alt="" lazy-load="true" />
        view>
      swiper-item>
    block>
  swiper>
view>

<view wx:if="{{productActiviType==0}}" class="activeBox"
  style="background: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">
  <view class="kill-leftBox">
    <view class="product-priceBox">
      <view style="height:35rpx;line-height: 35rpx;">
        <text class="symbol-kill">￥text>
        <text class="price-kill">58.8text>
        <text class="throuth-kill">￥98text>
      view>
      <view class="num-kill displayBox">限量200份view>
    view>
    <view class="justNum-kill">
      <text>已售198份text><text
        class="just-rightText">每人限购1份text>
    view>
  view>
  <view class="kill-rightBox">
    <view class="just-text">距秒杀结束仅剩view>
    <view class="kill-timeBox">
      <view class="clockBox margin-one displayBox">{{hour}}view>
      <view class="littleClock">:view>
      <view class="clockBox displayBox">{{min}}view>
      <view class="littleClock">:view>
      <view class="clockBox displayBox">{{second}}view>
    view>
  view>
view>

<view class="productName-box littleTwo">
  超级无敌好吃美味烤鸭
view>

<view class="productDesc-box littleTwo">
  色泽红艳，肉质细嫩，味道醇厚，肥而不腻
view>

<view class="productShare-money" bindtap="shareProduct">
  <view class="left-Share">
    <text>该商品分享可得奖励￥10text>
  view>
  <view class="right-Share">
    <image src="{{imgUrl}}/upload/20220608/share.png" lazy-load="true">image>
    <text>立即分享text>
  view>
view>




<view class="services-box">
  <view class="services-left">服务view>
  <view class="services-right">新鲜品质 配送到家 售后无忧view>
view>


<view class="product-reply" >
  <view class="reply-title">
    <view class="leftReolyCount">
      评价(2824)
    view>
    <view class="middleSeeMore">
      <view>查看全部评价view>
    view>
    <image class="grayRight" src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true">image>
  view>
  <view class="replyUserInfo">

    <image  class="replyUserHead" src="{{imgUrl}}/upload/20220608/jocker.jpg" lazy-load="true">image>
    <view class="rightUserName">
      <view class="userName little">橘猫大侠view>
      <view class="starBox">
        <image src="{{imgUrl}}/upload/20220608/star5.png" class="starImg">
        image>
      view>
    view>
  view>
  <view class="replyContet littleTwo">
    味道好，配送快，值得信赖！
  view>
view> 


<image class="proImgDetail" src="{{imgUrl}}/upload/20220608/prodetailImg.png" lazy-load="true">image>

<view style="height:56rpx;">view>

<view class="productDetailTable" wx:if="{{spuList.length>0}}">

  <view wx:if="{{!isShowDetail}}">
    <view class="productTableTr">
      <view class="leftTr">
        <view class="little leftTrText">{{spuList[0].name}}view>
      view>
      <view class="rightTr little">{{spuList[0].content}}view>
    view>
  view>

  <view wx:if="{{isShowDetail}}" class="productTableTr" wx:for="{{spuList}}">
    <view class="leftTr">
      <view class="little leftTrText">{{item.name}}view>
    view>
    <view class="rightTr little">{{item.content}}view>
  view>

view>

<view class="DetailArrow displayBox" wx:if="{{spuList.length>0}}">
  <image wx:if="{{!isShowDetail}}" bindtap="clickArrow" class="arrowImg"
    src="{{imgUrl}}/upload/20220608/nextJt.png" lazy-load="true">image>
  <text wx:if="{{!isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">展开text>

  <image wx:if="{{isShowDetail}}" bindtap="clickArrow" class="arrowImg"
    src="{{imgUrl}}/upload/20220608/topJt.png" lazy-load="true">image>
  <text wx:if="{{isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">收起text>
view>
<view style="height:56rpx;">view>
<image src="{{imgUrl}}/upload/20220608/explain.png" class="explain">image>

<view class="maybeLike">
  <image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng">image>

  
  <view class="indexProductList">
    <view class="productItemBottom" wx:for="{{4}}">
      <view style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;" class="productImgBottom">view>
      <view class="bottom-productName little">北京烤鸭view>
      <view class="iconBox little">
        干净又卫生
      view>
      <view class="buyBox-bottom">
        <view class="leftPrice-bottom">
          <text class="priceFh">￥text>
          <text class="bottom-price">58text>
          <text class="bottom-oldPrice">￥98text>
        view>
        <view class="rightAdd-bottom"  data-index="{{index}}" >
          <image class="rightAdd-bottom" src="{{imgUrl}}/upload/20220608/addcart.png" lazy-load="true">
          image>
        view>
      view>
    view>
  view>
view>
<view style="height:162rpx;">view>
<view class="footer">
  <view class="leftFooter">
    <view bindtap="GoHome">
      <view style="background: url({{imgUrl}}/upload/20220608/6-1.png);background-size: 100% 100%;"
        class="footImg">view>
      <view class="footText">首页view>
    view>
    <view bindtap="GoShopping">
      <view style="background: url({{imgUrl}}/upload/20220608/6-5.png);background-size: 100% 100%;"
        class="footImg2">view>
      <view class="footText2">购物车view>
    view>
  view>
  <view class="rightFooter">
    <view class="displayShow" >
      <view class="addCart-btn displayBox" catchtap="btnAddCart_footer">加入购物车view>
      <view class="purchase-btn displayBox" bindtap="rightNowBuy">立即购买view>
    view>
  view>
view>

<view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
  <view class="headerBox">
    <view class="leftAddress">
    view>
    <view class="appletsTitle">购物车view>
  view>
view>

<view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;">view>

<view class="go-product">
  <view class="product-num">
    <view class="left-productNum">共有5件商品view>
    <view class="right-delProduct" bindtap="deleteProduct">
      <text>删除text>
    view>
  view>
  <view wx:for="{{2}}" wx:for-index="idx" wx:for-item="item">
    <view class="discount">
      <view class="left-discount little">热门推荐view>
      <view class="discount-jt">
        <image src="{{imgUrl}}/upload/20220608/cartJt.png" lazy-load="true">image>
      view>
    view>
    <view wx:for="2" wx:for-index="indexProduct" wx:for-item="ProItem">
      <view class="list">
        <view class="product-item  height{{indexProduct}}">
          <movable-area>
            <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productIndex="{{indexProduct}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange">
              <view class="productItem_new ">
                <view class="checkedIconBox">
                  <view class="cart-con-item-icon">
                    <icon wx:if="{{ProItem.selected}}" type="success" color="#FFBD20" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
                    <icon wx:else type="circle" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
                  view>
                view>
                <view class="rightProductInfo">
                  <image src="{{imgUrl}}/upload/20220608/ky.jpg" class="cart-productImg">image>
                  <view class="productInfoBox">
                    <view class="cart-productName littleTwo">超级无敌好吃美味烤鸭view>
                    <view class="cart-productSku little">500gview>
                    <view class="cart-productPrice">
                      <text class="priceSymbol">￥text>
                      <text class="cart-price">58.8text>
                      <text class="cart-oldPrice">￥98text>
                    view>
                  view>
                  <view class="cart-rightNumBox">
                    <view class="cart-con-item-num">
                      <text class="cart-con-item-num-left" catchtap="bindMinus" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">-text>
                      <input type="cart-con-item-num-mid" bindinput="bindIptCartNum" data-index='{{indexProduct}}' value="1" disabled="{{true}}" />
                      <text class="cart-con-item-num-right" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" catchtap="bindPlus">+text>
                    view>
                  view>
                view>
              view>
            movable-view>
          movable-area>
          <view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">删除view>
        view>
      view>
    view>
  view>
view>
<view class="cant-product">
  <view class="cantTitle displayBox">因配送范围，库存原因等导致失效的商品view>
  <view class="productItem_new height{{index}}" wx:for="{{2}}">
    <view class="cantProductLeft displayBox">
      失效
    view>
    <view class="rightProductInfo">
      <view class="cart-productImg" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">
        <image src="{{imgUrl}}/upload/20220608/yyyy.png" class="cart-productImg" lazy-load="true">image>
      view>
      <view class="productInfoBox">
        <view class="cart-productNameYY littleTwo">曾经好吃的烤鸭view>
        <view class="cart-productYyy little">抱歉，该商品已售罄或下架view>
        <view class="cart-productPrice">
          <text class="priceSymbolYY">￥text>
          <text class="cart-priceYY">0text>
        view>
      view>
      <view class="cart-rightNumBox">
      view>
    view>
  view>
  <view class="clearBox">
    <view class="clear displayBox" bindtap="clearProduct">清空失效宝贝view>
    <view class="switchAddress displayBox" bindtap="switchAdd">切换地址view>
  view>
view>
<view class="maybeLike" wx:if="{{recommendProduct.length>0}}">
  <image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng">image>

  <view class="indexProductList">
    <view class="productItemBottom" wx:for="{{recommendProduct}}">
      <view style="background: url({{item.productPic}});background-size: 100% 100%;" class="productImgBottom">view>
      <view class="bottom-productName little">{{item.productName}}view>
      <view class="iconBox little">
        {{item.remark}}
      view>
      <view class="buyBox-bottom">
        <view class="leftPrice-bottom">
          <text class="priceFh">￥text>
          <text class="bottom-price">{{item.price}}text>
          <text class="bottom-oldPrice">￥{{item.proSalePrice}}text>
        view>
        <view class="rightAdd-bottom" catchtap="btnAddCart" data-index="{{index}}" data-goodsid="{{item.productId}}">
          <image class="rightAdd-bottom" src="{{imgUrl}}/Areas/dfapi/Content/images/addcart.png" lazy-load="true">
          image>
        view>
      view>
    view>
  view>
view>
<view class="seeDetailPriceBox" wx:if="{{isShowDetailPrice}}" catchtap="btnHideDetail">
  <view class="shareb2">
    <view class="shareb2-con">
      <viwe class="detailTitle displayBox">优惠明细viwe>
      <view class="orderAllPrice">
        <view class="leftTitle">
          <text>商品总额text>
        view>
        <view class="rightTitle">
          <text>￥{{totalPrice}}text>
        view>
      view>
      <view class="orderAllPrice">
        <view class="leftTitle">
          <text>运费text>
        view>
        <view class="rightTitle">
          <text>+￥{{freight}}text>
        view>
      view>
      <view class="orderAllPrice">
        <view class="leftTitle">
          <text>优惠券text>
        view>
        <view class="rightTitle">
          <text style="color:#FF4C0E;">-￥{{couponAmount}}text>
        view>
      view>
      <view class="orderAllPrice">
        <view class="leftTitle">
          <text>折扣text>
        view>
        <view class="rightTitle">
          <text style="color:#FF4C0E;">-￥{{discountMoney}}text>
        view>
      view>
      <view class="orderAllPriceFinal">
        <view class="leftTitle">
          <text>合计text>
        view>
        <view class="rightTitle">
          <text>￥{{amountPayable}}text>
        view>
      view>
    view>
  view>
view>

<view class="cart-foter">
  <view class="allChecked">
    <image wx:if="{{!isCheckAll}}" src="{{imgUrl}}/upload/20220608/uncheck.png" bindtap="selectAll" lazy-load="true" class="checkImg">image>
    <image wx:else src="{{imgUrl}}/upload/20220608/checked.png" lazy-load="true" bindtap="selectAll" class="checkImg">image>
    <view class="allCheckText">全选view>
  view>

  <view class="middlePrice">

    <view class="priceBox">
      <text class="hjTitle">合计:text>
      <text class="symbol">￥text>
      <text class="priceAll">￥198text>
    view>

    <view class="coupon">
      <text>优惠:text>
      <text>￥text>
      <text>{{finalCou}}text>
      <text class="seeDetail">查看明细text>

      <image wx:if="{{isShowDetailPrice}}" src="{{imgUrl}}/upload/20220608/orangeOn.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice">image>

      <image wx:else src="{{imgUrl}}/upload/20220608/orangeBo.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice">image>
    view>

  view>

  <view class="right-btnJs">
    <view class="addOrder displayBox" bindtap="goBuy">结算view>
  view>


view>

<view class="bottomHeightBox">view>

<view class="center-Top">
  <view class="center-TopBack">
    <view class="userInfo-box">
      <view class="leftInfo">
        <view class="cnter-user">
          <image  src="{{imgUrl}}/upload/20220608/noUser.png" class="cnter-user" lazy-load="true">
          image>
        view>
        <view class="userNameBox">
          <view class="uNameText">
            
            
            <view >
              <text>摔跤猫子text>
              
                <button  class="kefu-btn" style="width:100%">button>
            view>
          view>
          <view class="shop">
            <text>用户text>
          view>
        view>
      view>
    view>

<view class="myOrder-menu">
  <view class="order-title">
    <view class="leftTitle">我的订单view>
    <view class="rightSeeMore" bindtap="goToOrder" data-id="0">
      <image src="{{imgUrl}}/upload/20220608/black-jt.png" lazy-load="true">image>
      <text style="float:right;padding-right:10rpx;">查看更多text>
    view>
  view>
  <view class="orderMenu-img">
    <view class="ordermenu-detail" bindtap="goToOrder" data-id="1">
      <image src="{{imgUrl}}/upload/20220608/dfk.png" lazy-load="true">image>
      <view class="num-mark" wx:if="{{toBePaid>0}}">{{toBePaid}}view>
      <view class="order-text-staus">待付款view>
    view>
    <view class="ordermenu-detail" bindtap="goToOrder" data-id="2">
      <image src="{{imgUrl}}/upload/20220608/dfh.png" lazy-load="true">image>
      <view class="num-mark" wx:if="{{toBeDelivered>0}}">{{toBeDelivered}}view>
      <view class="order-text-staus">待发货view>
    view>
    <view class="ordermenu-detail" bindtap="goToOrder" data-id="3">
      <image src="{{imgUrl}}/upload/20220608/dsh.png" lazy-load="true">image>
      <view class="num-mark" wx:if="{{toBeReceived>0}}">{{toBeReceived}}view>
      <view class="order-text-staus">待收货view>
    view>
    <view class="ordermenu-detail" bindtap="goReplyList">
      <image src="{{imgUrl}}/upload/20220608/dpj.png" lazy-load="true">image>
      <view class="num-mark" wx:if="{{toBeReply>0}}">{{toBeReply}}view>
      <view class="order-text-staus">评价view>
    view>
    <view class="ordermenu-detail" bindtap="afterSale">
      <image src="{{imgUrl}}/upload/20220608/dtk.png" lazy-load="true">image>
      <view class="num-mark" wx:if="{{cancel>0}}">{{cancel}}view>
      <view class="order-text-staus">售后/退款view>
    view>
  view>
view>
  view>
view>

<view class="tool-box">
  <view class="often-tool-title">常用工具view>
  <view class="tool-menu-one" >
    <view class="tool-menu-detail" bindtap="GotomyEarnings">
      <view style="background: url({{imgUrl}}/upload/20220608/profit.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">我的收益view>
    view>
    <view class="tool-menu-detail" bindtap="GotoMyTeam">
      <view style="background: url({{imgUrl}}/upload/20220608/myteam.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">我的团队view>
    view>
    <view class="tool-menu-detail" bindtap="goCouponList">
      <view style="background: url({{imgUrl}}/upload/20220608/myCou.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">我的优惠券view>
    view>
    <view class="tool-menu-detail" bindtap="goAddressList">
      <view style="background: url({{imgUrl}}/upload/20220608/myAdd.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">收货地址view>
    view>
  view>
  <view class="tool-menu-two">
    <view class="tool-menu-detail" style="position: relative;">
      <view style="background: url({{imgUrl}}/upload/20220608/customService.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">联系客服view>
      <button class="kefu-btn" open-type="contact" style="width:100%">button>
    view>
    <view class="tool-menu-detail" bindtap="setUp">
      <view style="background: url({{imgUrl}}/upload/20220608/set.png);background-size: 100% 100%;"
        class="toolImgBack">view>
      <view class="tool-title">设置view>
    view>
  view>
view>