充值获取查询重置分页

src/api/index.js

@@ -195,6 +195,15 @@ export const updateVoucher = (voucher) => {
         timeout: 120000,
     })
 }
+
+// 获取充值列表
+export const getVoucherList = () => {
+    return requestLoading(`${Prefix}act=merchant_recharge&op=index&client_type=ajax`, 'post')
+}
+// 查询充值列表
+export const queryVoucherList = (page, start_time, end_time) => {
+    return requestLoading(`${Prefix}act=merchant_recharge&op=index&client_type=ajax&curpage=${page}&start_time=${start_time}&end_time=${end_time}`, 'get')
+}
 // 余额列表
 // export const balanceList = (params) => {
 //     return requestLoading(`${Prefix}/balanceList`, 'get', params)

src/pages/subPages/balance.vue

@@ -2,7 +2,7 @@
 <el-container direction="vertical">
     <!-- <el-header height="40px" style="border-bottom: 1px solid #eee">余额充值</el-header> -->
     <div style="margin:20px 0;">
-        <el-date-picker v-model="dataRange" :clearable="false" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker v-model="dataRange" :clearable="false" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
         <!-- <el-input placeholder="请输入订单ID" v-model="searchValue" style="width:200px;margin-left:10px;margin-right:10px;" />
         <el-select v-model="balanceStatus" placeholder="--请选择状态--">
             <el-option
@@ -14,22 +14,22 @@
         </el-select> -->
         <el-button style="margin-left:10px;" type="primary" @click="onSearch">查询</el-button>
         <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
-        <el-button style="margin-left:10px;" type="warning" @click="uploadDialogVisible = true">上传</el-button>
+        <el-button style="margin-left:10px;" type="warning" @click="uploadDialogVisible = true">新建</el-button>
     </div>
 
     <el-table :data="tableData" border style="width: 100%;">
         <el-table-column align="center" type="index" width="50" label="序号" />
         <!-- <el-table-column align="center" prop="id" label="订单id"></el-table-column> -->
         <!-- <el-table-column align="center" prop="type" label="类型"></el-table-column> -->
-        <el-table-column align="center" prop="money" label="金额/元"></el-table-column>
+        <el-table-column align="center" prop="amount" label="金额/元"></el-table-column>
         <!-- <el-table-column align="center" prop="status" label="状态"></el-table-column> -->
         <!-- <el-table-column align="center" prop="apply_name" label="申请姓名"></el-table-column> -->
         <!-- <el-table-column align="center" prop="order_status" label="账号"></el-table-column> -->
         <!-- <el-table-column align="center" prop="bank_name" label="银行名称"></el-table-column> -->
         <!-- <el-table-column align="center" prop="recharge_type" label="充值方式"></el-table-column> -->
         <!-- <el-table-column align="center" prop="payment_type" label="支付方式"></el-table-column> -->
-        <el-table-column align="center" prop="payment_type" label="充值时间"></el-table-column>
-        <el-table-column align="center" prop="recharge_code" label="充值凭证">
+        <el-table-column align="center" prop="add_time" label="充值时间"></el-table-column>
+        <el-table-column align="center" label="充值凭证">
             <el-button type="success" size="small" @click="seeDialogVisible = true">查看</el-button>
             <!-- <el-button size="small" type="primary" @click="uploadDialogVisible = true">上传</el-button> -->
             <!-- <el-upload
@@ -61,7 +61,7 @@
 
     <!-- 上传弹层 -->
     <el-dialog title="上传凭证" :visible.sync="uploadDialogVisible" class="updata">
-        <el-form :model="formData" label-width="120px">
+        <!-- <el-form :model="formData" label-width="120px">
             <el-form-item label="充值金额： ">
                 <el-input v-model="formData.amount" style="width:300px"></el-input>
             </el-form-item>
@@ -71,7 +71,7 @@
             <el-form-item label="银行名称： ">
                 <el-input v-model="formData.bank_name" style="width:300px"></el-input>
             </el-form-item>
-            <el-form-item label="充值凭证： ">
+            <el-form-item label="充值凭证： "> -->
                 <!-- <el-upload
                     class="avatar-uploader"
                     action="http://192.168.1.195/mobile/index.php?act=merchant_recharge&op=voucherupload&client_type=ajax"
@@ -82,25 +82,50 @@
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload> -->
                 <!-- <input type="file" res="fileInput" name="fileContent" @change="inputChange"> -->
-               <input type="file" ref="fileId" @change="getFile">
+               <!-- <input type="file" ref="fileId" @change="getFile">
             </el-form-item>
-        </el-form>
-        <!-- <form action="/test/" method="POST" enctype="multipart/form-data">
-            <p>名称：<input type="text" name="user"></p>
-            <p>文件：<input type="file" name="testfile"></p>
-            <p><input type="submit" value="提交"></p>
-        </form> -->
+        </el-form> -->
+        <!-- <form id="loginForm">
+            <div>
+                <label for="amount">充值金额</label>
+                <input type="text" name="amount" id="amount">
+            </div>
+            <div>
+                <label for="bank_username">公司名称</label>
+                <input type="text" name="bank_username" id="bank_username">
+            </div>
+            <div>
+                <label for="bank_username">账号</label>
+                <input type="text" name="bank_username" id="bank_username">
+            </div>
+            <div>
+                <label for="bank_name">开户行</label>
+                <input type="text" name="bank_name" id="bank_name">
+            </div>
+            <div>
+                <label for="voucher">充值凭证</label>
+                <input type="file" name="voucher" id="myfile">
+            </div>
+        </form>-->
+        <!-- <div class="selectfile">选择文件</div>
+        <input type="file" ref="file" @change="selectFile" /> -->
+        <input type="file" @change="getFileExpr($event)">
+        <el-form id="uploadForm" method="post" enctype="multipart/form-data"></el-form>
         <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+            <el-button type="primary" @click="onSubmit">确 定</el-button>
         </span>
     </el-dialog>
 </el-container>
 </template>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <script>
+// getVoucherList-获取充值列表 updateVoucher-上传凭证 queryVoucherList-查询充值
 import {
-    balanceList
+    // balanceList,
+    getVoucherList,
+    updateVoucher,
+    queryVoucherList
 } from "@/api";
 import { balanceType } from '@/utils/constants'
 export default {
@@ -116,6 +141,8 @@ export default {
             total: 0,
             searchValue: "",
             dataRange: [],
+            startTime: '',
+            endTime: '',
             // 余额-常量
             balanceType,
             // 余额状态
@@ -131,7 +158,7 @@ export default {
             'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
             ],
             // 上传弹层
-            uploadDialogVisible: true,
+            uploadDialogVisible: false,
             imageUrl: '',
             // 上传数据
             formData: {
@@ -143,56 +170,68 @@ export default {
                 bank_name: '',
                 // 充值凭证
                 voucher: ''
-            }
+            },
+            files: '',
+            selectFileobj: '',
+            imgCode: '',
+            fileImg: ''
         };
     },
     mounted() {
         // this.getOrderList();
     },
+    created () {
+        this.getVoucherList()
+    },
     methods: {
-        //  handleRemove() {
-        //     // console.log('点击文件列表中已上传的钩子', file, fileList);
-        //     console.log('点击文件列表中已上传的钩子');
-        // },
-        // handlePreview(file) {
-        //     console.log('移除文件', file);
+        // getOrderList() {
+        //     const _self = this;
+        //     balanceList({
+        //         pageSize: _self.pageSize,
+        //         pageNumber: _self.pageNumber,
+        //         order_sn: _self.searchValue,
+        //         start_time: _self.dataRange && _self.dataRange.length == 2 ? _self.dataRange[0] : '',
+        //         end_time: _self.dataRange && _self.dataRange.length == 2 ? _self.dataRange[1] : ''
+        //     }).then((res) => {
+        //         if (res && res.msg == "ok") {
+        //             _self.total = res.data.total;
+        //             _self.tableData = [...res.data.rows];
+        //         }
+        //     });
         // },
-        getOrderList() {
-            const _self = this;
-            balanceList({
-                pageSize: _self.pageSize,
-                pageNumber: _self.pageNumber,
-                order_sn: _self.searchValue,
-                start_time: _self.dataRange && _self.dataRange.length == 2 ? _self.dataRange[0] : '',
-                end_time: _self.dataRange && _self.dataRange.length == 2 ? _self.dataRange[1] : ''
-            }).then((res) => {
-                if (res && res.msg == "ok") {
-                    _self.total = res.data.total;
-                    _self.tableData = [...res.data.rows];
-                }
-            });
+        // 获取充值列表
+        async getVoucherList() {
+            const res = await getVoucherList()
+            console.log('充值', res);
+            this.tableData = res.datas.data
         },
-        onPageChange(page) {
+        // 分页
+        async onPageChange(page) {
             if (page == this.pageNumber) {
                 return;
             } else {
                 this.pageNumber = page;
-                setTimeout(() => {
-                    this.getOrderList();
-                }, 0);
+                this.startTime = this.dataRange[0]/1000 || ''
+                this.endTime = this.dataRange[1]/1000 || ''
+                const res = await queryVoucherList(this.pageNumber,this.startTime, this.endTime)
+                console.log('查询动账', res);
+                this.tableData = res.datas.data
             }
         },
         // 搜索
-        onSearch() {
-            this.pageNumber = 1;
-            this.getOrderList();
+        async onSearch() {
+            this.startTime = this.dataRange[0]/1000 || ''
+            this.endTime = this.dataRange[1]/1000 || ''
+            const res = await queryVoucherList(this.pageNumber,this.startTime, this.endTime)
+            console.log('查询动账', res);
+            this.tableData = res.datas.data
+            this.total = res.datas.total * this.pageSize
         },
         // 重置
         onReset() {
-            this.searchValue = "";
             this.pageNumber = 1;
             this.dataRange = [];
-            this.getOrderList();
+            this.getVoucherList();
         },
         // 	文件上传成功时的钩子
         handleAvatarSuccess(res, file) {
@@ -204,26 +243,124 @@ export default {
         beforeAvatarUpload(file) {
             console.log('file', file);
         },
-        // input改变
-        getFile(){
-            //获取file内容
-            let files = this.$refs.fileId.files[0];
-            this.xlsxFile = files;
-            console.log('files', files);
-            this.importRow()
+        // 确定文件上传
+        // onSubmit() {
+            // var xhr = new XMLHttpRequest();
+            // xhr.open('post','http://192.168.1.195/mobile/index.php?act=merchant_recharge&op=voucherupload&client_type=ajax');
+
+            // //获取选中文件
+            // // file标签dom元素的files属性表示获取所有文件
+            // //是一个伪数组
+            // var files = document.getElementById('loginForm').files;
+            // console.log('files', files);
+
+            // //把文件添加到FormData中(avatar有后台决定)
+            // var fd = new FormData();
+            // fd.append('avatar',files[0]);
+            // console.log('fd', fd);
+
+            // xhr.send(fd);
+            // console.log('fd1', fd);
+            // xhr.onreadystatechange = function(res) {
+            //     if(xhr.readyState === 4 && xhr.status === 200) {
+            //         var res = xhr.responseText;
+            //         console.log(res);
+
+            //         var myimg = document.getElementById('myimg');
+            //         //把JOSN转化成对象
+            //         res = JSON.parse(res);
+            //         myimg.setAttribute('src','http://www.liulongbin.top:3006'+res.url);
+            //     }
+            // }
+            // debugger
+            // var xhr = new XMLHttpRequest();
+            // xhr.open('post','http://192.168.1.195/mobile/index.php?act=merchant_recharge&op=voucherupload&client_type=ajax');
+
+            // //获取选中文件
+            // // file标签dom元素的files属性表示获取所有文件
+            // //是一个伪数组
+            // var files = document.getElementById('file').files;
+            // console.log('voucher', files);
+
+            // //把文件添加到FormData中(avatar有后台决定)
+            // var fd = new FormData();
+            // fd.append('voucher',files[0]);
+            // console.log('fd', fd);
+
+            // xhr.send(fd);
+            // console.log('fd1', fd);
+            // xhr.onreadystatechange = function(res) {
+            //     console.log('res', res);
+            //     if(xhr.readyState === 4 && xhr.status === 200) {
+            //         var res = xhr.responseText;
+            //         console.log(res);
+
+            //         var myimg = document.getElementById('myimg');
+            //         //把JOSN转化成对象
+            //         res = JSON.parse(res);
+            //         // myimg.setAttribute('src','http://www.liulongbin.top:3006'+res.url);
+            //     }
+            // }
+        // }
+        selectFile(e) {
+            console.log(this.$refs['file'].files[0])
+            if (this.$refs['file'].files[0]) {
+                // this.filename = this.$refs['file'].files[0].name
+                this.selectFileobj = this.$refs['file'].files[0]
+                // var reader = new FileReader()
+                // reader.readAsDataURL(this.selectFileobj)
+                // reader.onload = async function (e) {
+                //     console.log('e', e);
+                //     var imgCode = e.target.result
+                //     console.log('imCode', imgCode);
+                //     const res = await updateVoucher(imgCode)
+                //     console.log('res', res);
+                // }
+
+            } else {
+                this.Toleadform.filename = ''
+            }
         },
-        importRow() {
-            let that = this;
-            if (that.xlsxFile == "") {
-                that.$message.error('请先添加文件');
-                return;
+        //onchange 方法 拿到文件名称和文件
+        getFileExpr(event){
+            console.log('e', event);
+            if (event.target.files[0]) {
+                // this.fileName = event.target.files[0].name;
+                this.fileImg = event.target.files[0];
+                console.log('file', event.target.files[0]);
             }
-            // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
-            //创建一个FormData对象，然后通过append() 方法向对象中添加键值对
-            let formData = new window.FormData(); 
-            formData.append("file", that.xlsxFile);
-            console.log('that.xlsxFile', that.xlsxFile);
-            console.log('formData', formData.get(file));
+        },
+        // 上传按钮
+        async onSubmit() {
+            // if (this.selectFileobj) {
+            //     // let fd = new FormData()
+            //     // fd.append('voucher', this.selectFileobj)
+            //     // // fd.append('userId', this.userInfo.userId)         
+            //     // const res = await updateVoucher(fd)     // 调用接口实现文件上传
+            //     // console.log('res', res);
+
+
+            //     var reader = new FileReader()
+            //     reader.readAsDataURL(this.selectFileobj)
+            //     reader.onload = async function (e) {
+            //         console.log('e', e);
+            //         console.log('imCode1', e.target.result);
+            //         // console.log('imCode', imgCode);
+            //         // const res = await updateVoucher({voucher: e.target.result})
+            //         const res = await updateVoucher(e.target.result)
+            //         console.log('res', res);
+            //     }
+            // } else {
+            //     this.$message.warning('请选择要上传的文件')
+            // }
+
+            //关于formdata使用方式请自行搜索
+            // let uploadForm = document.getElementById("uploadForm");
+            // console.log('uploadForm',uploadForm);
+            let fd = new FormData(document.getElementById("uploadForm")); 
+            fd.append('voucher', this.fileImg);
+            const res = await updateVoucher(fd)     // 调用接口实现文件上传
+            console.log('res', res);
         }
     },
 }

src/pages/subPages/view.vue

@@ -20,6 +20,9 @@
         <el-form-item label="商户名称：">
             {{merchantsName}}
         </el-form-item>
+        <el-form-item label="余额预警：">
+            {{alarm_amount}}
+        </el-form-item>
         <el-form-item label="密钥设置：">
             <el-input v-model="securityKey" autocomplete="off" style="width: 300px;margin-right:10px"></el-input>
             <el-button type="primary" size="small" @click="updateKey">确定</el-button>
@@ -62,10 +65,6 @@ export default {
         return {
             pageSize: 10,
             pageNumber: 1,
-            // cabinetValue: "",
-            // cabinetOptions: [],
-            // boxOptions: [],
-            // boxValue: "",
             ipList: [],
             total: 0,
             // ip
@@ -88,6 +87,8 @@ export default {
             merchantsCode: '',
             // 商户名称
             merchantsName: '',
+            // 余额预警
+            alarm_amount: '',
             // 密钥
             securityKey: ''
         };
@@ -180,6 +181,7 @@ export default {
             this.merchantsCode = res.datas.mchid
             this.merchantsName = res.datas.name
             this.ipList = res.datas.ips
+            this.alarm_amount = res.datas.alarm_amount
         },
         // 设置密钥
         async updateKey() {