小程序 laravel 实现秒杀

参考博客：

https://blog.csdn.net/m0_56487875/article/details/118603439

小程序登录：

https://www.cnblogs.com/xiaoyantongxue/p/15677256.html

小程序授权登录跳转至秒杀列表页

// pages/seckill/seckill.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        goods: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var token=wx.getStorageSync('token')
        wx.request({
            url: 'http://www.yan.com/api/yk/goods', //仅为示例，并非真实的接口地址
            header: {token},
            method: "POST",
            success: res => {
                console.log(res.data);
                this.setData({
                    goods: res.data.data
                })

            }
        })

    },
      /**
     * 开始抢购按钮
     */
     start(e){
        var id=e.target.dataset.id
        wx.navigateTo({
          url: '/pages/details/details?id='+id,
        })

    },

})

//数据进行渲染：

<!--pages/seckill/seckill.wxml-->
<view>秒杀</view>

<view class="page-section-spacing">
        <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll">
        <block wx:for="{{goods}}" wx:key="goods">
          <view class="scroll-view-content">
            <image src="{{item.goods.goods_image}}" class="scroll-view-image"></image>
            <view class="scroll-view-text">
              {{item.goods.goods_name}}
            </view>
            <view class="scroll-view-name">
               ￥{{item.goods.goods_price}}
            </view>
            <view class="scroll-view-text">
               限量{{item.goods.goods_nums}}
            </view>
            <text bindtap="start" data-id="{{item.id}}">开始抢购</text>
          </view>
        </block>
        </scroll-view>
</view>

wxss

/**index.wxss**/
.weui-search-bar {
    position: relative;
    padding: 8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    background-color: #EFEFF4;
    border-top: 1rpx solid #D7D6DC;
    border-bottom: 1rpx solid #D7D6DC;
  }
  .weui-icon-search_in-box {
    position: absolute;
    left: 10px;
    top: 7px;
  }
  .weui-search-bar__form {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
            flex: auto;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1rpx solid #E6E6EA;
  }
  .weui-search-bar__box {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
  }
  .weui-search-bar__input {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
  }
  .weui-search-bar__cancel-btn {
    margin-left: 10px;
    line-height: 28px;
    color: #09BB07;
    white-space: nowrap;
  }
  .swp{
    height: 500rpx;
  }
  .page-section-spacing{
    margin-top: 60rpx;
  }

  .page-scroll-style{
    height: 1000rpx;
    background: aliceblue;
  }
  .scroll-view-content{
    height: 230rpx;
    margin: auto 10rpx;
    background: white;
    border: 1px solid gray;
  }
  .scroll-view-image{
    width: 200rpx;
    height: 200rpx;
    margin-top: 15rpx;
    margin-left: 20rpx;
    float: left;
  }
  .scroll-view-text{
    width: 400rpx;
    float: left;
    font-weight: 800;
    margin-top: 15rpx;
    margin-left: 20rpx;
  }
  .scroll-view-name{
    float: left;
    font-size: 30rpx;
    color: gray;
    margin-top: 20rpx;
    margin-left: 20rpx;
    color: red;
  }
  .scroll-view_H{
    white-space: nowrap;
  }
  .scroll-view-item{
    height: 300rpx;
  }
  .scroll-view-item_H{
    display: inline-block;
    width: 100%;
    height: 300rpx;
  }

php 后台请求的数据路由：

Route::group(['namespace' => 'YK','middleware'=>'jwt'], function () {
//列表展示
    Route::post('yk/goods','YkController@goods');
//    详情
    Route::post('yk/details','YkController@details');
//    秒杀
    Route::post('yk/checkstock','YkController@checkStock');
//    订单的生成
    Route::post('yk/order','YkController@createOrder');

});

控制器：

<?php

namespace App\Http\Controllers\YK;

use App\Http\Controllers\Controller;
use App\models\Seckill\Goods;
use App\Models\Seckill\SeckillOrder;
use App\Models\Seckill\SeckillTime;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Redis;
use Predis\Client;

class YkController extends Controller
{

    //列表展示
    public function goods()
    {
        $result = SeckillTime::with(['goods'])
            ->get()->toArray();

        //进行把参与秒杀的商品写入到数据库
        foreach ($result as $val) {
            //生成对应商品库存队列
            $goods = "activity_goods_" . $val['goods_id'];
            for ($i = 0; $i < $val['sku_nums']; $i++) {
                Redis::lpush($goods, 1);
            }

            return response()->json(['code' => 200, 'message' => 'success', 'data' => $result]);
        }
    }

//    详情
    public function details(Request $request)
    {
        $id = $request->post('id');
        $res = Goods::where('id', $id)->first();
        if ($res) {
            return response()->json(['code' => 200, 'message' => 'success', 'data' => $res]);
        }
        return response()->json(['code' => 500, 'message' => 'no', 'data' => '']);
    }

//    抢购：
    public function checkStock(Request $request)
    {
//        接受用户id
        $userID=$request->post('userid');
//        商品id
        $goodsID=$request->post('id');
         $goods = "activity_goods_".$goodsID;
        //对应商品抢购成功用户集合 {1,3,4}
        $robSuccessUser = "success_user".$goodsID;
        //进行判断当前用户是否在抢成功的队列里面
        $result = Redis::sismember($robSuccessUser,$userID);
        //如果你在这里面，就抢完了
        if ($result) {
            //如果抢购成功 返回状态码，进行下单
            return response()->json(['code' => 201, 'data' => '', 'msg' => '已经抢购过了']);
        }
        //减库存，把队列里面的数据从左边 头
        $count = Redis::lpop($goods);
        if (!$count) {
            //如果抢购成功 返回状态码，进行下单
            return response()->json(['code' => 202, 'data' => '', 'msg' => '已经抢光了哦']);
        }
        //把当前这个秒杀的uid存储到中奖的队列里set
        $success = Redis::sadd($robSuccessUser, $userID);
        if(!$success){
            //已经在成功队列里了，加回库存,防止的是同个用户并发请求
            Redis::lpush($goods, 1);
            //如果抢购成功 返回状态码，进行下单
            return response()->json(['errorCode' => 203, 'data' => '', 'msg' => '已经抢购过了']);
        }

        //如果抢购成功 返回状态码，进行下单
        return response()->json(['errorCode' => 200, 'data' => '', 'msg' => '秒杀成功']);

    }
订单的生成
    public function createOrder(Request $request)
    {

//接受小程序用户id
        $userID=$request->post('userid');
        //抢购用户id
        //商品id
        $goodsID = $request->post("goods_id");
        //对应商品抢购成功用户集合 {1,3,4}
        $robSuccessUser = "success_user".$goodsID;
        //进行判断当前用户是否在抢成功的队列里面
        $result = Redis::sismember($robSuccessUser,$userID);
        //如果你在这里面，就抢完了
        if (!$result) {
            //如果抢购成功 返回状态码，进行下单
            return response()->json(['code' => 203, 'data' => '', 'msg' => '手慢了！']);
        }

        DB::beginTransaction();
        try{
            //减库存 秒杀的商频库存减去一
            SeckillTime::decrement('sku_nums');
            Goods::decrement('goods_nums');
            //生成订单
            $order_no='YK'.date('YmdHis').sprintf("%'.09d",$goodsID).mt_rand(1000,9999);
//            将订单号和用户id，商品id添加至 订单明细表中
            $data=[];
            $data['user_id']=$userID;
            $data['g_id']=$goodsID;
            $data['order']=$order_no;
            SeckillOrder::insertGetId($data);
            DB::commit();
            //下单成功，跳转支付页面
            return response()->json(['code' => 200, 'data' => $order_no, 'msg' => '下单成功！']);
        }catch (\Exception $e){
            DB::rollBack();
        }

    }

}

小程序抢购，点击抢购进入详情页面：

详情wxjs的代码：

// pages/details/details.js
// 放抖的引入
import tool from "../../utils/tool.js";
Page({
    /**
     * 页面的初始数据
     */
    data: {
   goods_details:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var token=wx.getStorageSync('token')
        var id=options.id
        wx.request({
            url: 'http://www.yan.com/api/yk/details', //仅为示例，并非真实的接口地址
            header: {token},
            data:{
             id:id
            },
            method: "POST",
            success: res => {
                // console.log(res.data.data);
                this.setData({
                    goods_details: res.data.data
                })

            }
        })

    },
//秒杀
          buyGoods(e){
        var token=wx.getStorageSync('token')
         var  id=e.target.dataset.id;
        //  获取用户id
        var userid=wx.getStorageSync('userid');
         wx.request({
            url: 'http://www.yan.com/api/yk/checkstock', //仅为示例，并非真实的接口地址
            header: {token},
            data:{
             id:id,
             userid:userid
            },
            method: "POST",
            success: res => {
                console.log(res.data);
                if(res.data.code==201){
                    wx.switchTab({
                        url: '/pages/order/order?gid='+id,
                      })
                    wx.showToast({
                      title: '已经抢购过了，请支付',
                    })

                }
                if(res.data.code==202){
                    wx.showToast({
                      title: '已经抢光了哦',
                    })

                }
                if(res.data.code==203){
                    wx.showToast({
                      title: '已经抢购过了,请支付',
                    })
                    wx.switchTab({
                        url: '/pages/order/order?gid='+id,
                      })

                }
                if(res.data.code==200){
                    wx.showToast({
                      title: '秒杀成功，请支付',
                    })
                    // 跳转至订单页面
                    wx.switchTab({
                        url: '/pages/order/order?gid='+id,
                      })
                }

            }
        })
        },

})

详情wxml代码：

<!--pages/details/details.wxml-->
<view class="page-section-spacing">
        <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll">
          <view class="scroll-view-content">
            <image src="{{goods_details.goods_image}}" class="scroll-view-image"></image>
            <view class="scroll-view-text">
              {{goods_details.goods_name}}
            </view>
            <view class="scroll-view-name">
               ￥{{goods_details.goods_price}}
            </view>
            <view class="scroll-view-text">
               限量{{goods_details.goods_nums}}
            </view>
            <text bindtap="buyGoods" class="a" data-id="{{goods_details.id}}">开始秒杀</text>
          </view>

        </scroll-view>
</view>

抢购完成进入订单页面：

<button type="primary" bindtap="pay">支付</button>

// pages/order/order.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        goods_id: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 获取商品id用于订单的生成
        var gid = options.gid;
        this.setData({
            goods_id: gid
        })
    },
    // 支付
    pay(e) {
        //    获取用户id
        var userid = wx.getStorageSync('userid');
        var goods_id = this.data.goods_id,
        var token=wx.getStorageSync('token')
        //  将用户id发送至后台用于生成订单
        wx.request({
            url: 'http://www.yan.com/api/yk/order', //仅为示例，并非真实的接口地址
            data: {
                userid: userid,
                goods_id: goods_id
            },
            header: {token},
            method: "POST",
            success(res) {
                if (res.data.code == 203) {
                    wx.showToast({
                        title: '手慢啦',
                    })
                }
                if (res.data.code == 200) {
                    wx.showToast({
                        title: '下单成功',
                    })
                }

            }
        })

    }

})