【记账小程序】收入和支出首页展示与数字键功能、编辑后端分类列表接口API与记账成功提示

【记账小程序】收入和支出首页展示与数字键功能、编辑后台分类列表接口API并请求渲染小程序记账分类

pages/index/index.wxml

<!--index.wxml--><view class="wrapper-bg">  <view class="income-wrap">    <view class="income-header">      <!-- 支出和收入切换 -->      <view class="layout-row layout-align-start-start income-tab">        <view class="{{currentData == 1 ? 'outlay' : ''}}" data-current="1" bindtap="changeTab">支出          <text  data-current="0"  class="tab-active"></text>        </view>        <view class="{{currentData == 2 ? 'income-nav' : ''}}" data-current="2" bindtap="changeTab">          收入          <text data-current="1"  class="tab-active"></text>        </view>      </view>      <!-- 金额输入框 -->      <view class="int layout-row layout-align-start-start">        <text style="{{currentData == 2 ? 'color:#cda337' : ''}}">￥</text><input value="{{input_v}}" disabled></input>      </view>    </view>    <scroll-view scroll-y='ture' class="income-center text-center">     <!-- 支出分类列表 -->      <view class="layout-row layout-align-start-start layout-wrap" hidden="{{currentData != 1}}">        <view class="in-icon" wx:for="{{zhichu}}" wx:key="index" bindtap="select_cat" data-id="{{item.id}}" data-key="{{index}}">          <image src="{{item.select_img}}"></image>          <text>{{item.name}}</text>        </view>      </view>      <!-- 收入分类列表 -->      <view class="layout-row layout-align-start-start layout-wrap" hidden="{{currentData != 2}}">        <view class="in-icon" wx:for="{{shouru}}" wx:key="index" >          <image src="{{item.select_img}}"></image>          <text>{{item.name}}</text>        </view>      </view>    </scroll-view>    <!-- 备注和日期 -->    <view class="income-footer layout-row layout-align-space-between-center">      <a class="color-blue" href="#">添加备注</a>      <picker mode="date" class="income-time" bindchange="edit_date">{{date}} <text>星期四</text></picker>    </view>  </view>  <!-- 数字键 -->  <view class="calculator layout-row layout-align-start-start">    <view class="calculator-left layout-row layout-align-start-center layout-wrap text-center">      <view class="calculator-key" bindtap="input_num" data-num="1">1</view>      <view class="calculator-key" bindtap="input_num" data-num="2">2</view>      <view class="calculator-key" bindtap="input_num" data-num="3">3</view>      <view class="calculator-key" bindtap="input_num" data-num="4">4</view>      <view class="calculator-key" bindtap="input_num" data-num="5">5</view>      <view class="calculator-key" bindtap="input_num" data-num="6">6</view>      <view class="calculator-key" bindtap="input_num" data-num="7">7</view>      <view class="calculator-key" bindtap="input_num" data-num="8">8</view>      <view class="calculator-key" bindtap="input_num" data-num="9">9</view>      <view class="calculator-key calculator-in" bindtap="input_num" data-num="0">0</view>      <view class="calculator-key" bindtap="input_num" data-num=".">.</view>    </view>    <view class="calculator-right">      <view class="calculator-delete" style="text-align:center;" bindtap="input_del">        <image style="width:40rpx;height:40rpx;margin-top:20rpx;" src="/img/del.png"></image>      </view>      <view class="calculator-enter" bindtap="submit">确定</view>    </view>  </view></view>

pages/index/index.js

var zhichu_select = 0;var zhuchu_id = 0;  // 要传给接口的idvar shouru_select = 0;Page({  data: {    currentData: 1, // 状态：1支出 2收入    input_v : '',    zhichu : [],    shouru : [],    date : ''  },  onLoad: function (options) {    wx.request({      url : 'http://jz.easys.ltd/index.php/api/Jizhang/cat_list',      data :{},      method:'POST',      success:(e)=>{        var zhichu = e.data.data.zhichu;        // 循环支出列表        for(var i=0;i<zhichu.length;i++){          if(i == 0){            // 如果是第一项，将id赋值给当前的id            zhuchu_id = zhichu[i].id; // 第一次获取接口时，默认也第一个分类的id，就是要传的id，是选中的分类id            // 将选中图标复制给变量select_img，我们在渲染列表的时候就用select_img默认第一项是选中的图片            zhichu[i].select_img = zhichu[i].img_s;          }else{            // 否则则赋值未选中的图片            zhichu[i].select_img = zhichu[i].img;          }        }        // 收入列表同上        var shouru = e.data.data.shouru;        for(var i=0;i<shouru.length;i++){          if(i==0){            shouru[i].select_img = shouru[i].img_s;          }else{            shouru[i].select_img = shouru[i].img;          }        }        this.setData({          zhichu : zhichu,          shouru : shouru,          date : e.data.data.date        })      }    })  },  changeTab: function( e ) {    this.setData({      currentData:e.currentTarget.dataset.current    })  },  bindChange: function( e ) {      this.setData( { currentTab: e.detail.current });  },  select_cat(e){    console.log(e.currentTarget.dataset.key);    // 选中的key    var key = e.currentTarget.dataset.key;    // 判断当前选中如果不是自己才执行    if(key != zhichu_select){    // 修改当前选中的key的img为选中图片      this.data.zhichu[key].select_img = this.data.zhichu[key].img_s;      // key === zhichu_select 将上一次选中的修改为未选中图片      this.data.zhichu[zhichu_select].select_img = this.data.zhichu[zhichu_select].img;      // 将这次的key赋值      zhichu_select = key;      // 同步数据      this.setData({        zhichu : this.data.zhichu      })      // 将当前选中的id赋值给      zhuchu_id = e.currentTarget.dataset.id;    }  },  // 执行日期的选中方法  edit_date(e){    console.log(e.detail.value);    this.setData({      date : e.detail.value    })  },  input_num(e){    // 获取点击的数字按钮的自定义属性dataset    var input_v = e.target.dataset.num;    // 判断当前点击的是否为小数点    if(input_v == '.'){      // 如果小数点已经存在则累加一个空值      if(this.data.input_v.indexOf(".") != -1  ){        input_v = '';      }      // 如果还没有输入内容则不能输入小数点      if(!this.data.input_v){        input_v = '';      }      // 判断点击的是否是0    }else if(input_v == 0){      // 如果值已经是0则不在添加0，否则则添加0      if(this.data.input_v == '0'){        input_v = '';      }else{        input_v = 0;      }    }    if(this.data.input_v>=100000){      wx.showToast({        title: '请输入小于10万的值',        icon: 'error'      });      input_v = '';    }    this.setData({      // 将当前输入的值和原始值合并      input_v : this.data.input_v.concat(input_v)    })  },  input_del(e){    var input_v = this.data.input_v;    // 删除最后一个字符    input_v = input_v.substr(0, input_v.length - 1);      this.setData({      input_v : input_v    })  },  submit(){    // 请求添加记账明细    wx.request({      url : 'https://jz.easys.ltd/index.php/api/Jizhang/add_jizhang',      data : {        input_v : this.data.input_v, //金额        type : this.data.currentData, // 类型        uid : 1, // 用户ID        cid : zhuchu_id, // 分类ID        date : this.data.date, // 日期        remarks : '' // 备注      },      method : 'POST',      success:(e)=>{        // 如果返回的code不为1，表示添加失败        if(e.data.code != 0){          wx.showToast({            title: e.data.msg,            icon: 'error',            duration: 2000          })          return false;        }else{          // 记账成功提示          wx.showToast({            title: e.data.msg,            icon: 'success',            duration: 2000          });          // 清空输入框内容          this.setData({            input_v: ''          })        }      }    })  }})

后台接口文件 app\api\controller\Jizhang.php

<?phpnamespace app\api\controller;use app\api\controller\Base;use think\facade\Db;use think\facade\Request;class Jizhang extends Base{    public function cat_list(){        $zhichu = Db::table('oyk_cat')->where('status',1)->where('type',1)->select()->each(function($res){            $res['img'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img'];            $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];            return $res;        });        $shouru = Db::table('oyk_cat')->where('status',1)->where('type',2)->select()->each(function($res){            $res['img'] = 'https://'.$_SERVER['SERVER_NAME']. $res['img'];            $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];            return $res;        });        $date = date('Y年m月d日',time());        $arr = [            'zhichu' => $zhichu,            'shouru' => $shouru,            'date' => $date        ];        $this->returnCode(0,$arr);    }    public function add_jizhang(){        $input_v = Request::post('input_v');        if(empty($input_v)){            $this->returnCode(1,'请输入数字');        }        $uid = Request::post('uid');        $cid = Request::post('cid',1);        $date = Request::post('date');        $type = Request::post('type',1);        $remarks = Request::post('remarks','');        $insert = Db::table('oyk_jz')->insert([            'uid' => $uid,            'cid' => $cid,            'date' => $date,            'type' => $type,            'money' => $input_v,            'add_time' => time(),            'remarks' => $remarks,        ]);        if(empty($insert)){            $this->returnCode(1,'记录失败');        }        $this->returnCode(0,'成功');    }}

app\api\controller\Base.php

<?php/** *    后台管理系统-管理员 */namespace app\api\controller;use app\AppApi;use think\facade\Db;use app\bews\model\BewAdminConfig;class Base{    public $adminId = null;    public $config = [];    public $uid = [];    public function __construct(){        date_default_timezone_set('PRC');        # 获取配置        $BewAdminConfig = new BewAdminConfig();        $this->config = $BewAdminConfig->getAll();    }    /**     * 返回json对象     */    protected function returnCode($code,$data=[],$count=10){        header('Content-type:application/json');        if($code == 0){            $arr = array(                'code'=>$code,                'msg'=>'成功',                'count'=> $count,                'data' => $data            );        }else if($code >= 1 && $code <= 100){            $arr = array(                'code'    =>    $code,                'msg'    =>    $data            );        }else{            $appapi = new AppApi();            $arr = array(                'code'=>$code,                'msg'=>$appapi::errorTip($code)            );        }        echo json_encode($arr);        if($code != 0){            exit;        }    }}