微信小程序开发初试实例结算小助手

本着自己参加过学校组织的微信小程序云开发培训，就抱着尝试的心理去参加今年的高校微信小程序开发大赛，基本上应该算是去当炮灰ㄟ( ▔, ▔ )ㄏ。自己一个人组队，做了个结算小助手，就是使用手机实现类似超市中扫码枪的功能，扫描商品条形码或者二维码进行结算。

小程序码

大家可以扫一扫试一试，好像有个缺陷是那个没有让用户要先授权再进入，但是功能基本上都实现成功，一些细节处理不是很好，见谅。

界面展示：

创作背景

手机已经融入我们的生活，生活中越来越多的问题都能通过手机来解决。由于自己家里是开百货店的，商品结算只能通过计算器或者口算进行结算，如果购买扫码枪又需要显示屏等配置，会消耗一定的费用。自己想到了设计一个小程序实现类似超市中扫码枪的功能，即通过连续扫描商品的条形码或者二维码进行结算，这样既能省下购买扫码枪等配置的费用，又能实现结算的功能。

小程序功能

结算小助手主要有五个功能，分别为扫描商品结算、导入商品信息、查询商品信息、修改商品信息、收入历史记录。其中扫描商品结算、导入商品信息、收入历史记录为主要功能，查询商品信息、修改商品信息为辅助功能。

小程序实现

结算小助手实现主要步骤：

1. 通过导入商品信息的功能，将所拥有的商品条形码/二维码、商品名称和商品价格存入到云数据库；
2. 通过扫描商品结算的功能，连续扫描客户购买的商品的条形码，然后点击查看详细账单，检测扫描商品是否有遗漏或者重复等问题，如果出现问题，可以通过数量旁边的“+”、“-”进行修改。如果无误，即可点击结算。（个人想法是点击结算后能够弹出自己（即店长）的收款码，让客户进行扫码付款，付款成功后将账单详细信息存入云数据库。但是还未实现前半部分内容，只是实现点击结算按钮将账单的内容存入云数据库。）
3. 通过收入历史记录的功能，可以查看某时间收入总额，点击相应的部分，可以查看完整的账单信息。
4. 通过查询商品信息和修改商品信息的功能，实现对商品信息的查找和修改，即这两个功能为辅助功能。

小程序开发方案(想看源代码，直接看这一项)

只把一些关键代码给贴上来了，需要代码交流的可以联系或者评论区评论。
开发模式：小程序
后端服务：小程序·云开发（主要用到了云数据库来存储货物信息。）
主要功能实现：
1.扫描条形码区
a. 扫描动画效果：
通过onShow页面显示调用，通过js定义move函数实现一根线的上下移动，从而达到扫描的效果。

  onShow(){
    this.move()
  },

  move(){
    var that = this;
    // 控制向上还是向下移动
      let m = true
      setInterval(function () {
        if (m) {
          animation.translateY(235).step({ duration: 3000 })
          m = !m;
        } else {
          animation.translateY(0).step({ duration: 3000 })
          m = !m;
        }
        that.setData({
          animation: animation.export()
        })
      }.bind(this), 3000)
  },

b. 连续扫描获取条形码的数据：
通过定义camera组件自定义扫码功能（bindscancode=‘takecode’），js定义takecode函数，通过setTimeout实现连续扫描。

  takeCode(e) {
    if (this.data.scanFunctionIsUseAble){
      this.setData({
        scanFunctionIsUseAble: false,
        code:e.detail.result,
      })
      var fileCode = e.detail.result;
      setTimeout(()=>{this.setData({scanFunctionIsUseAble:true,})},2000)
    }
  },

c. 扫码条形码区前端：

<camera class='scan-camera' mode="scanCode" binderror="error" bindscancode='takeCode'>
      <cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
      <cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
      <cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
      <cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>  
      <cover-view class='scan-animation' animation="{{animation}}"></cover-view>
</camera>

2.数据在云数据库操作：
在app.js完成相关参数填写，使得该小程序云开发调用到自己需要的云环境资源。
云开发数据库有两个集合，一个wares存放商品的信息；一个sum存放历史收入总额、账单详细信息等。两个权限设置都是仅创建者可读写。

其中涉及集合的功能有：
a. 通过button组件bindtap绑定addData事件，将扫描商品的条形码、输入的商品名称、价格信息存入wares集合。

  addData:function(){
    db.collection("wares").add({
      data: {
        w_name:this.data.name,
        w_price:this.data.price,
        w_code:this.data.code,
      },
    }).then(res => {
      wx.showToast({
        title: '保存成功',
        icon: 'success',
        duration: 1000
      })
    }).catch(res => {
      wx.showToast({
        title: '保存失败!',
        icon: 'none',
        duration: 1000
      })
    })}

b. 通过button组件bindtap绑定getinfo事件，将输入商品名称与wares集合进行比较，如果相同则提取出条形码/二维码、商品名称、商品价格。

  getinfo:function(e){
    db.collection("wares").where({
      w_name:e.detail.value
    }).get().then(res=>{
      wx.showToast({
        title: '商品信息如下',
        icon: 'loading',
        duration: 1000
      })
      this.setData({
        code:res.data[0].w_code,
        name:res.data[0].w_name,
        price:res.data[0].w_price,
      });
    }).catch(res => {
      wx.showToast({
        title: '无该商品!',
        icon: 'none',
        duration: 1000
      })
    })
  },

c. 通过button组件bindtap绑定correctData事件，将原来商品的信息根据修改后的商品条形码/二维码信息、商品名称、商品价格进行更新。

  correctData:function(){
    //如果未修改则复原原来的名字
    if(this.data.name=="")
    this.setData({name:this.data.old_name})
    //如果未修改则复原原来的价格
    if(this.data.price=="")
    this.setData({price:this.data.old_price})
    db.collection("wares").where({
      w_name:this.data.old_name
    }).update({
      data:{
        w_code:this.data.code,
        w_name:this.data.name,
        w_price:this.data.price
      }
    }).then(res => {
      console.log(this.data.name)
      wx.showToast({
        title: '修改成功',
        icon: 'success',
        duration: 1000
      })
    }).catch(res => {
      wx.showToast({
        title: '修改失败',
        icon: 'none',
        duration: 1000
      })
    })
  },

d. 通过button组件bindtap绑定sumup事件，将结算账单中全部商品名称、价格、数量、小计以及总计、日期信息存入sum集合：

  sumup:function(){
    db.collection("sum").add({
      data: {
        namelist:this.data.namelist,
        pricelist:this.data.pricelist,
        numlist:this.data.nlist,
        subsumlist:this.data.subsumlist,
        sum:this.data.sum,
        time:this.data.time,
      },
    }).then(res => {
      wx.showToast({
        title: '结算成功',
        icon: 'success',
        duration: 1000
      })
    }).catch(res => {
      wx.showToast({
        title: '结算失败!',
        icon: 'none',
        duration: 1000
      })
    })
  },

e. 通过bindtap绑定lookUp事件，根据日期对在sum集合进行匹对，将该日期结算账单中商品名称、价格、数量、小计以及总计、日期信息提取出来：

  db.collection("sum").where({
      time:this.data.time
    }).get().then(res=>{
      this.setData({
        namelist:res.data[0].namelist,
        pricelist:res.data[0].pricelist,
        numlist:res.data[0].numlist,
        subsumlist:res.data[0].subsumlist,
        sum:res.data[0].sum,
      });
    }).catch(res => {
      wx.showToast({
        title: '账单不存在!',
        icon: 'none',
        duration: 1000
      })
    })

3.各个页面的前端：
主要由index（主页面）、calculateData（扫描结算页面）、bill(详细账单页面)、addData（导入商品信息页面）、findData（查找商品信息页面）、correctData（修改商品信息页面）、history（收入历史记录页面）、bill2（收入历史中详细账单）组成，其中内容基本上就由组件和wxss形成良好的界面、js做后端数据处理。