球鞋衣物洗护小程序系统 计算机毕业设计 课设 平时作业 微信小程序开发

1、技术介绍

1、基于微信小程序的球鞋衣物洗护小程序的管理员后台的技术：

前端使用html+css+js+bootstrop组件进行开发

后端使用php laravel框架进行开发

数据库使用的是myql

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

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

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

2、功能介绍

球鞋衣物洗护小程序系统分为两个角色：小程序用户、管理员，系统的总体功能架构图如下所示：

2.1、小程序用户功能

2.1.1 小程序导航页面展示

首页：有滚动的店铺banner图片展示、一站式诊断客服咨询、店铺的联系电话和详情入口、洗护服务分类展示、精选案例展示。

分类：分类可以根据用户搜索的关键字进行模糊匹配搜索，展示店铺发布的通知信息，左侧根据分类进行切换，右侧展示的是服务的详细信息。

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

2.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是为了用来标识小程序用户的唯一性。

2.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;

  }

2.1.4 用户下单逻辑的实现

用户下单的时候填写留言信息，显示用户编辑的默认地址，选择取货方式，选择支付方式，支付方式选择钱包，如果钱包金额不足，不允许用户下单，默认的运费金额为6，确认无误开始下单。

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

$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]);

}

 在控制器代码中，写入了订单与订单商品的多对多关联关系，订单的初始状态为待洗护的状态或者待支付的状态。

2.1.5 用户编辑收货地址逻辑的实现

用户在进行微信授权登录之后，可进行收货地址添加与编辑，可以设置默认的收货地址，设置了，在下单界面就可以展示默认的地址，收货地址对的所在区域可以使用腾讯地图插件进行当前位置的定位。功能展示如下：

 收货地址定位的js逻辑代码如下：

getLocaltion(){

    var that = this;

    wx.getLocation({

      isHighAccuracy: true,

      success(res) {

        let {latitude,longitude} = res

        // 调用腾讯地图api获取当前位置

        qqmapsdk.reverseGeocoder({

          location: {

            latitude: latitude,

            longitude: longitude

          },

          success: function (res) {

           console.log(res.result)

          },

          fail: function (res) {

            console.log(res);

          },

          complete: function (res) {

            console.log(res);

            var area = res.result.address;

            var addressInfo = that.data.addressInfo;

            addressInfo.area = area;

            that.setData({

              addressInfo: addressInfo

            })

          }

        });

      }

    })

  }, 

2.2、管理员端功能

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

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

商城项目其他链接地址：

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

2、轻食点餐小程序 微信小程序开发

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

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