前端——》搭建后台管理系统的小程序版本

目录

效果预览

登录

微信登录

账号密码登录

主页

主页之搜索

主页之详情

主页之导出

主页之渠道量统计

渠道及通道管理

通道编辑

渠道编辑

订单管理

订单管理之订单编辑

订单管理之区域限量

订单管理之区域配置城市选择

代码预览

代码结构预览

要点讲解

登录

此小程序的登录有两种方式，分别是微信授权登录和账号密码登录。账号密码登录比较简单，就不多说。
由于该小程序不向大众开放，只允许内部员工使用，所以并非所有微信号授权以后都可以登录，手机号与账号密码在同一张数据库表，有且仅有在电脑端后台注册过的手机号才允许微信授权登录。
手机号授权登录操作流程：

1. 点击页面上的微信登录按钮，微信自动弹出官方授权个人信息的弹窗
2. 点击允许后 弹出我们自定义的授权手机号弹窗，点击授权，弹出官方授权手机号的弹窗
3. 再次点击允许后我们就获取到了手机号，此时将手机号传到后台去匹配用户名密码，直接在后台完成后续登录步骤

手机号授权登录的逻辑流程：

1. 用手机号登录的逻辑是用手机号去后台匹配账户名和密码，匹配上后以账户名和密码直接在后台登录。当然前提是怎么获取到手机号，大概分为三步，如下
2. 获取sessionKey：参数appid，secretkey，grantType，和code。前三个参数都是固定的，可以在微信小程序后台查到，最后一个code就是wx.login返回的。页面点击微信登录弹出授权个人信息窗后点击允许授权，之后我们调用微信的wx.login({})方法，该方法会返回openid和code，opneid暂时用不到，先不管他。我们在自己的服务器上需要写一个接口来通过这个code换取sessionKey，当然直接在js以code为参数请求官方的接口也可以获取到sessionKey。随后将sessionKey返回给前端。
3. 解密得到手机号：参数：encryptedData，iv，sessionKey。页面上必须要有一个获取手机号的按钮，用户点击后弹出官方的授权按钮，点击允许授权后就会获得加密的手机号字符串encryptedData，这个encryptedData字符串必须要iv和sessionKey才能解密。这个解密的过程可以再js中完成，也可以在java服务器端完成。解密完成后就获取到手机号了。sessionKey我们已经获取到了，怎么获取encryptedData和iv呢，只需要一个button 按钮就好了，open-type=“getPhoneNumber” bindgetphonenumber="getPhoneNumber"这两个属性是官方固定的，不允许修改：

<button class="cu-btn line-green text-green" style="margin-left:10px" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确定</button>

  getPhoneNumber: function (e) {
   
    var that = this;
    var data = {
   
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
      sessionKey: that.data.session_key,
    }
    console.log(data);
    if (e.detail.errMsg == "getPhoneNumber:ok") {
   
      //  做解密的操作，可以直接js解密，也可以请求自己的后台服务器解密
    }
  },

要点总结：
先授权个人信息获取到code，再根据code获取到sessionKey，根据sessionKey解密字符串得到手机号。授权个人信息和手机号只能通过官方按钮得到返回值，没有接口进行授权。
页面上至少有两个按钮，一个是授权个人信息，一个是授权手机号，先授权个人信息，再授权手机号。点击授权个人信息后弹出官方授权个人信息弹窗，允许后再点击授权手机号按钮，随后会弹出官方授权个人手机号弹窗，点击允许后就可以获取到加密串和iv了，随后就解密

侧边栏条件筛选

此处用到了一个侧边栏插件side，这个插件找不到出处了，侵删。
js：

// components/side/index.js
var touchDot = 0; //触摸时的原点
var time = 0; //  时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = ''; // 记录/清理 时间记录
var nth = 0; // 设置活动菜单的index
var nthMax = 5; //活动菜单的最大个数
var tmpFlag = true; // 判断左右华东超出菜单最大值时不再执行滑动事件
Component({
   
    properties: {
   
        //是否有遮罩
        mask: {
   
            type: Boolean,
            value: true
        },
        //是否全屏
        fullScreen: {
   
            type: Boolean,
            value: false,
        },
        //类型 左侧 右侧
        type: {
   
            type: String,
            value:</