美文网首页微信小程序开发apifm-wxapi微信小程序
小程序实现用户申请发票、查看申请的发票记录功能

小程序实现用户申请发票、查看申请的发票记录功能

作者: fe1e31171ab2 | 来源:发表于2019-08-07 15:12 被阅读5次

前言

本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台,获得专属域名》

本案例,需要用户登录后才能操作,也就是说需要 token 授权,请先了解:

《微信小程序登录获取openid及三方token》

功能介绍

  1. 满足用户需要开发票的需求,减少人工干预的沟通;
  2. 用户直接提交开票申请(抬头、税号、金额、发票内容、快递地址等等);
  3. 财务人员在后台可查看到发票申请,及时进行处理;

启用 “发票管理” 模块

登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理

找到 “发票管理” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “发票管理” ;

发票管理

小程序界面:

申请发票demo
<button type="primary" bindtap="goRegist"> 注册 / 登录 </button>
<button type="warn" bindtap="invoiceList"> 我的申请开发票记录 </button>
<button type="warn" bindtap="invoiceApply"> 申请开发票 </button>
<button type="warn" bindtap="invoiceDetail"> 申请记录详情 </button>

小程序代码:

const WXAPI = require('apifm-wxapi')
WXAPI.init('gooking')

Page({
  data: {

  },
  onLoad: function (options) {

  },
  onShow: function () {

  },
  goRegist() {
    wx.navigateTo({
      url: '/pages/auth/index'
    })
  },
  invoiceList() {
    const loginToken = wx.getStorageSync('loginToken')
    if (!loginToken) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
    WXAPI.invoiceList({
      token: loginToken.token
    }).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '读取成功',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  invoiceApply() {
    const loginToken = wx.getStorageSync('loginToken')
    if (!loginToken) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
    WXAPI.invoiceApply({
      token: loginToken.token,
      comName: '公司抬头',
      tfn: '税号',
      amount: 100, // 开票金额
      consumption: '服务费',
      remark: '测试'
    }).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '申请成功',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  invoiceDetail() {
    const invoiceId = 22 // 记录中的记录ID
    const loginToken = wx.getStorageSync('loginToken')
    if (!loginToken) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
    WXAPI.invoiceDetail(loginToken.token, invoiceId).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '读取成功',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
})

WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台,其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);

完成!

申请发票记录列表分页、更多筛选条件、申请发票时候提交更多的参数以及扩展属性使用,你可以查看下述接口文档:

《api接口文档》

无需后端编程,只要你有好的 idea ,就能快速实现!

期待你的进步!
感谢!

相关文章

  • 小程序实现用户申请发票、查看申请的发票记录功能

    前言 本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: 《...

  • 会计工作之税务局办理发票业务⑵

    发票业务图示: ㈠申请发票: ⑴资料准备:填写三个表(税务行政许可申请表、发票供票资格认定/变更申请表、最高开票限...

  • 已抵扣发票退回

    客户要将已经抵扣的发票退回我司,需要客户在开票系统中开出该发票的红字发票信息申请表给到我司,我司根据盖红字发票申请...

  • 区块链电子发票

    应用场景: 在线支付--->申请开票--->开具发票--->提交发票报销 Tecent电子发票流程: 在线支付完成...

  • 计算机应用实践之--重写Java对象HashCode

    我们系统有一个场景,根据我们业务自己定义的商家拆分规则,将用户提交的发票申请拆分成多个发票(运费、订单实收),重写...

  • 发票申请注意事项

    申请发票注意事项 1专票还是发票? 2以什么的名义 3发票信息 1)公司名称 2)发票内容 3)税号 4)银行以及...

  • 发票增量需要的手续

    因生产经营需要,发票数量不够,当月申请的份数已开完还不够,则需要向税务机关大厅申请——发票增量。 徐州市各区税务区...

  • 6-通讯录

    实现通讯录功能,必须要经过下面这些步骤: 用户A搜索用户B A向B发送好友申请 B查看自己的好友申请列表 B同意A...

  • 微信小程序下载发票

    需求:1.发票是pdf的,不是图片,要能下载后找到。2.发票要有预览功能,遇到的问题:发票不是图片,用户不知道发票...

  • 凤凰城一手房办证所需材料

    一、已交过契税的 1/维修基金发票办证联 2/契税发票办证联 3/购房发票办证联 4/不动产登记申请书 5/商品房...

网友评论

    本文标题:小程序实现用户申请发票、查看申请的发票记录功能

    本文链接:https://www.haomeiwen.com/subject/stwodctx.html