轻食点餐小程序系统 计算机毕业设计 课设 平时作业 微信小程序开发

一、技术介绍

1、基于微信小程序的轻食点餐小程序的管理员后台的技术：

• 前端使用html+css+js+bootstrop组件进行开发
• 后端使用php laravel框架进行开发
• 数据库使用的是myql

2、小程序用户端的技术：

• 微信开发者语言：js+json+wxss+wxml

项目整体采用的是mvc的思想模式进行开发。代码可读性高，便于理解。

二、功能介绍

轻食点餐小程序系统分为两个角色：小程序用户、管理员，系统的总体功能架构图如下所示：

1、小程序用户功能

1.1 小程序导航页面展示

首页：有滚动的店铺banner图片展示、为用户提供的外卖点餐、堂食点餐、打包带走入口、下方提供的是店铺的海报和优惠券的领取人口。

点餐：点餐可以根据用户搜索的关键字进行模糊匹配搜索，左侧根据分类进行切换，右侧展示的是轻食的详细信息。

购物车：用户可以单独选择商品，也可以全选，可以选择购买的商品数量，查看选择的商品的总金额

 1.2 小程序个人中心页面展示

个人中心：用户使用微信授权登录，然后可以在线注册会员，查看下单的记录，配送地址管理，评价记录管理，领取的优惠券记录查看。

 微信授权登录的js逻辑代码如下：

$client = new Client();
$response = $client->get('https://api.weixin.qq.com/sns/jscode2session', [
    'query' => [
        'appid' => 'wxc95026a54be32bb9',  
        'secret' => 'd4a6b5e9c8d620c8d0ce0eb8e0cd11eb',
        'js_code' => $request->input('code'),
        'grant_type' => 'authorization_code'
    ],
    'verify' => false
]);
$content = $response->getBody()->getContents();
// 登录
$info = json_decode($content, true);
$openid = $info['openid'];
$member = Members::query()->where('openid', $openid);
if (!$member->exists()) {
    // avatarUrl, nickname,openid,gender
    $member = $member->create([
        'nickname' => $request->input('nickname'),
        'real_name' => '',
        'phone_number' => '',
        'sex' => $request->input('gender'),
        'pic' => $request->input('avatarUrl'),
        'points' => 0,
        'openid' => $info['openid']
    ]);
} else {
    $member = $member->first();
}

 以上代码需要注册开发者的测试账号，才能授权拿到第三方接口的openid,openid是为了用来标识小程序用户的唯一性。

 1.3 购物车逻辑的实现

购物车没有与后端数据库交互，采用小程序开发技术的本地缓存函数进行数据的存贮，函数wx.setStorageSync('carts', carts)，用户加入购物车之前会提示用户选择商品的规格才能进行加购，功能展示如下：

加入购物车的js核心代码展示如下：

//j将购物车商品添加到缓存

function addCart(product){

  console.log(product);

  //获取购物车信息

  var isHave = false;

  var carts = wx.getStorageSync('carts')?  wx.getStorageSync('carts'): [];

  if(carts) for(var index in carts){

    if(carts[index].id == product.id){

      isHave = true;

    }

  }

  if(!isHave){

    console.log(carts);

    carts.push(product)

    wx.setStorageSync('carts', carts)

  }else{

    wx.showToast({

      title: '购物车已经存在该商品，快去下单吧！',

      icon: 'none'

    })

    return;

  }

 1.4 用户下单逻辑的实现

用户下单的时候填写手机号码，选择配送地址，预约配送时间，选择领取的优惠券，选择支付方式，用餐方式选择，确认无误开始下单。

 下单的逻辑代码如下所示：

$order = Orders::query()->create([
    'order_number' => Str::random(),
    'total_price' => $totalPrice,
    'time' =>$request->input('time'),
    'status' => Orders::STATUS_WAIT_PAY,
    'payment_method' => $request->input('payment_id'),
    'members_id' => $id,
    'phone_number' => $phoneNumber,
    'price' => $price,
    'coupons_id' => $request->input('coupons_id'),
    'type' => $request->input('type'),

]);
foreach ($products as $productInfo) {
    $product = Products::query()->find($productInfo['id']);
    //   商品销量加1
    Products::query()->find($productInfo['id'])->update(['sale_num' => $product->sale_num +1]);
    OrdersProducts::query()->create([
        'orders_id' => $order->id,
        'number' => $productInfo['num'],
        'products_id' => $productInfo['id'],
        'order_number' => $order->order_number,
        'price' => $product->price,
        'size' => $productInfo['size'],

    ]);
    $totalPrice += ($product->price * $productInfo['num']);
}
if ($request->input('coupons_id')){
    $cc = Coupons::query()->find($request->input('coupons_id'));
    $totalPrice -= $cc->price;

    Mycoupons::query()->where(['members_id' => $id, 'coupons_id' => $request->input('coupons_id')])->update(['status' => 2]);
}

 在控制器代码种，写入了订单与订单商品的多对多关联关系，然后再总价的基础上减去用户使用的优惠金额，讲领取的优惠券状态更新成为已使用的状态。

1.5 用户领取优惠券逻辑的实现

管理员发布了优惠券之后，展示在小程序端。用户领取优惠券操作，一个优惠券一个用户智能领取一次，不能进行重复领取。领取了之后会在个人中心进行展示。功能展示如下：

 领取优惠券的核心控制器代码如下：

//查询用户是否领取
$data = Mycoupons::query()->where(['members_id' => $id, 'coupons_id' => $request->input('id')])->get()->toArray();
if (!empty($data)){
    return $this->ok([], '你已经领取了');
}
Mycoupons::query()->create([
    'members_id' => $id,
    'coupons_id' => $request->input('id')
]);
return $this->ok([], '领取成功');

 1、管理员端功能

管理员端的功能是对用户操作的数据记录进行管理，对用户操作的数据来源进行发布。这里展示一部分功能截图：

这里登录界面可以点击登陆框右上角的三个圆圈图标进行背景颜色的切换，用户可以选择自己喜欢的风格颜色进行展示，切换的代码如下：

前端html代码
<ul class="x-login-right">
    <li style="background-color: #8AB79E" color="#8AB79E">
    </li>
    <li style="background-color: #5587B8" color="#5587B8">
    </li>
    <li style="background-color: #115660;" color="#115660">
    </li>
</ul>

js代码实现如下：

<script src="{{asset('lib/layui/layui.js')}}" charset="utf-8"></script>
<script>
    layui.use(['form'],
    function() {
        $ = layui.jquery;
        var form = layui.form(),
        layer = layui.layer;

        $('.x-login-right li').click(function(event) {
            color = $(this).attr('color');
            $('body').css('background-color', color);
        });
    });
</script>

 进入系统主界面之后的功能截图如下：

 商城项目其他链接地址：

1、校园超市小程序 微信小程序开发 

 2、美食菜谱推荐系统 网页开发

3、店内扫码点餐系统  微信小程序开发

 以上就是对项目的整体介绍，感兴趣的伙伴可以私信我。谢谢