【记账小程序】收入和支出首页展示与数字键功能、编辑后台分类列表接口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; } }}