小程序 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: '下单成功',

                    })

                }

            }

        })

    }

})

巴特西

小程序 laravel 实现秒杀

最新文章

热门文章