登录，ip控制，订单统计接口获取列表

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.1",
+    "js-cookie": "^2.2.1",
     "moment": "^2.27.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6"

src/api/index.js

@@ -1,20 +1,19 @@
 import axios from 'axios';
 import Vue from 'vue';
 import context from '../main';
-
-let loading;
+// let loading;
 
 // axios.defaults.timeout = 3000000;
 // let loadinginstace;
 
 axios.interceptors.request.use(
     config => {
-        config.headers = {
-            "Content-Type": "application/json"
-        }
+        // config.headers = {
+        //     "Content-Type": "application/json"
+        // }
         return config;
     }, error => {
-        loading.close();
+        // loading.close();
         if (error) {
             context.$alert('网络错误,请稍后再试！','提示',{
                 confirmButtonText: '确定'
@@ -26,52 +25,53 @@ axios.interceptors.request.use(
 
 axios.interceptors.response.use(
     res => {
-        loading.close();
-        if (res.data.code == 0) {
+        // loading.close();
+        if (res.data.code == 200) {
             return res.data;
         }
-        else {
-            context.$alert(res.data.msg,'提示',{
-                confirmButtonText: '确定'
-            }).then(()=>{
-                if(res.data.code == '1005') {
-                    context.$router.replace({path:'/login'});
-                }
-            });
-        }
+        // else {
+        //     context.$alert(res.data.msg,'提示',{
+        //         confirmButtonText: '确定'
+        //     }).then(()=>{
+        //         if(res.data.code == '1005') {
+        //             context.$router.replace({path:'/login'});
+        //         }
+        //     });
+        // }
     },
     err => {
-        loading.close();
-        if (err.message.includes('timeout')) {
-            err.message = '请求超时';
-            context.$router.replace({path:'/login'});
-        }
-        else 
-		{
-            if (err && err.response) {
-                switch (err.response.status) {
-                    case 400: err.message = '请求错误(400)'; break;
-                    case 401: err.message = '未授权，请重新登录(401)'; break;
-                    case 403: err.message = '拒绝访问(403)'; break;
-                    case 404: err.message = '请求出错(404)'; break;
-                    case 408: err.message = '请求超时(408)'; break;
-                    case 500: err.message = '服务器错误(500)'; break;
-                    case 501: err.message = '服务未实现(501)'; break;
-                    case 502: err.message = '网络错误(502)'; break;
-                    case 503: err.message = '服务不可用(503)'; break;
-                    case 504: err.message = '网络超时(504)'; break;
-                    case 505: err.message = 'HTTP版本不受支持(505)'; break;
-                    default: err.message = `连接出错(${err.response.status})!`;
-                }
-                context.$router.replace({path:'/login'});
-            } else {
-                err.message = '连接服务器失败!'
-                context.$router.replace({path:'/login'});
-            }
-        }
-        context.$alert(err.message,'提示',{
-            confirmButtonText: '确定'
-        });
+        console.dir('err', err);
+        // loading.close();
+        // if (err.message.includes('timeout')) {
+        //     err.message = '请求超时';
+        //     context.$router.replace({path:'/login'});
+        // }
+        // else 
+		// {
+        //     if (err && err.response) {
+        //         switch (err.response.status) {
+        //             case 400: err.message = '请求错误(400)'; break;
+        //             case 401: err.message = '未授权，请重新登录(401)'; break;
+        //             case 403: err.message = '拒绝访问(403)'; break;
+        //             case 404: err.message = '请求出错(404)'; break;
+        //             case 408: err.message = '请求超时(408)'; break;
+        //             case 500: err.message = '服务器错误(500)'; break;
+        //             case 501: err.message = '服务未实现(501)'; break;
+        //             case 502: err.message = '网络错误(502)'; break;
+        //             case 503: err.message = '服务不可用(503)'; break;
+        //             case 504: err.message = '网络超时(504)'; break;
+        //             case 505: err.message = 'HTTP版本不受支持(505)'; break;
+        //             default: err.message = `连接出错(${err.response.status})!`;
+        //         }
+        //         context.$router.replace({path:'/login'});
+        //     } else {
+        //         err.message = '连接服务器失败!'
+        //         context.$router.replace({path:'/login'});
+        //     }
+        // }
+        // context.$alert(err.message,'提示',{
+        //     confirmButtonText: '确定'
+        // });
         return Promise.reject(err);
     });
 
@@ -80,22 +80,12 @@ Vue.prototype.$axios = axios;
 axios.defaults.headers.get['Pragma'] = 'no-cache';
 axios.defaults.headers.get['Cache-Control'] = 'no-cache, no-store'; 
 	
-let requestLoading = (url, method, params, showLoading = true) => {
-    if (showLoading) {
-        loading = context.$loading({
-            lock: true,
-            text: '加载中...',
-            spinner: 'el-icon-loading',
-            background: 'rgba(0, 0, 0, 0.2)'
-          });
-    }
-
-	
+let requestLoading = (url, method, params) => {
     return axios({
         method: method,
         url: url,
-        withCredentials: true,
         params,
+        withCredentials: true,
         data: params,
         timeout: 120000
     })
@@ -109,7 +99,8 @@ let requestLoading = (url, method, params, showLoading = true) => {
 // const StanleyLocal = process.env.NODE_ENV == 'production' ? 'http://39.97.239.116:8080' : '/api';
 
 // const Prefix = StanleyLocal;
-const Prefix = 'http://192.168.1.195:8080/';
+// const Prefix = 'http://192.168.1.195:8080/';
+const Prefix = 'http://192.168.1.195/mobile/index.php?';
 
 
 //测试请求
@@ -119,8 +110,8 @@ export const testRequest = () => {
 
 //登录
 export const login = (params) => {
-    console.log(`${Prefix}/login`)
-    return requestLoading(`${Prefix}/login`, 'get', params)
+    console.log(`${Prefix}act=merchant_login&op=login`)
+    return requestLoading(`${Prefix}act=merchant_login&op=login&client_type=ajax`, 'post', params)
 }
 
 //登出
@@ -128,6 +119,15 @@ export const loginOut = () => {
     return requestLoading(`${Prefix}/LoginOut`, 'get', {})
 }
 
+// 获取ip列表
+export const getIpList = () => {
+    return requestLoading(`${Prefix}act=merchant_info&op=ipwhitelist&client_type=ajax`, 'post')
+}
+
+// 获取订单统计列表
+export const getOrderList = () => {
+    return requestLoading(`${Prefix}act=merchant_order&op=list&client_type=ajax&page=1`, 'post')
+}
 // 余额列表
 // export const balanceList = (params) => {
 //     return requestLoading(`${Prefix}/balanceList`, 'get', params)
@@ -199,7 +199,7 @@ export const loginOut = () => {
 //     return requestLoading(`${Prefix}/AddBox`, 'post', params)
 // }
 
-// //管理员列表
+//管理员列表
 // export const userList = (params) => {
 //     return requestLoading(`${Prefix}/UserList`, 'post', params)
 // }

src/pages/index.vue

@@ -1,8 +1,8 @@
 <template>
 <el-container>
-    <el-header>
+    <el-header style="background-color:#545c64">
         <el-row type="flex" style="height:100%;" justify="space-between" align="middle">
-            <div>椰子后台管理系统</div>
+            <div style="color:#fff">椰子后台管理系统</div>
             <div>
                 <el-dropdown @command="onUserEdit">
                     <span class="el-dropdown-link">
@@ -17,7 +17,8 @@
             </div>
         </el-row>
     </el-header>
-    <el-container style="height: 100%; border: 1px solid #eee">
+    <!-- border: 1px solid #ccc -->
+    <el-container style="height: 100%; ">
         <el-aside width="250px">
             <el-menu router class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="curPath">
                 <!-- <el-menu-item index="order" route="order">
@@ -42,7 +43,7 @@
                 </el-menu-item> -->
                 <el-menu-item index="balance" route="balance">
                     <i class="el-icon-s-order"></i>
-                    <span slot="title">余额充值</span>
+                    <span slot="title">充值</span>
                 </el-menu-item>
                 <el-menu-item index="order" route="order">
                     <i class="el-icon-document"></i>

src/pages/login.vue

@@ -3,7 +3,7 @@
     <el-row type="flex" style="width:100%;height:100%;" justify="center" align="middle">
       <el-card style="width:400px;height:300px;" shadow="always">
         <div slot="header" class="clearfix">
-          <span>欢迎使用智能快递柜</span>
+          <span>欢迎使用椰子后台管理系统</span>
         </div>
         <el-row type="flex" justify="center">
           <div class="login_container">
@@ -36,7 +36,7 @@
 </template>
 <script>
 import LoginBg from "@/assets/login.jpg";
-// import { login } from "@/api";
+import { login } from "@/api";
 export default {
   data() {
     return {
@@ -59,27 +59,21 @@ export default {
     onLogin(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          // login({
-          //   username: this.ruleForm.name,
-          //   password: this.ruleForm.pwd,
-          // }).then((res) => {
-          //   if (res && res.msg == "ok") {
-          //     this.$message({
-          //       message: "登录成功",
-          //       type: "success",
-          //       center: true,
-          //       duration: 1000,
-          //       onClose: () => {
-          //         this.$router.replace({ path: "/" });
-          //       },
-          //     });
-          //   }
-          // });
-          
-          // 验证成功，登录
-          this.$router.replace({ path: "/" });
-        } else {
-          return false;
+          login({
+            name: this.ruleForm.name,
+            password: this.ruleForm.pwd,
+          }).then(res => {
+            console.log('登录', res);
+            if (res && res.code === 200) {
+              this.$message({
+                message: "登录成功",
+                type: "success",
+                center: true,
+                duration: 1000
+              });
+              this.$router.replace({ path: "/" });
+            }
+          });
         }
       });
     },

src/pages/subPages/order.vue

@@ -0,0 +1,129 @@
+<template>
+<el-container direction="vertical">
+    <el-header height="40px">
+        <el-date-picker
+            v-model="dataRange"
+            :clearable="false"
+            value-format="yyyy-MM-dd&nbspHH:mm:ss"
+            type="datetimerange"
+            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-select v-model="RechargeType" placeholder="--充值类型--" style="margin-left: 10px">
+            <el-option
+                v-for="item in moneyType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+            </el-option>
+        </el-select>
+        <el-button style="margin-left:10px;" type="primary">查询</el-button>
+    </el-header>
+
+    <!-- 订单总数 -->
+    <!-- <el-alert
+        :title="'订单总数 : ' + oderCount +'笔 成功订单数 : ' + successCount + '笔 成功率 : '+ SuccessRate + '订单总金额 : '+ countMoney +'元 成功订单总金额 : '+successMoney +' 元 商户扣款 :'+deduction + '元'"
+        type="info"
+        show-icon
+        style="margin-top:20px"
+        :closable="false">
+    </el-alert> -->
+   
+    <el-table :data="tableData" border style="width: 100%; margin-top:20px">
+        <el-table-column align="center" type="index" width="50" label="序号" />
+        <el-table-column align="center" prop="card_no" label="卡号"></el-table-column>
+        <el-table-column align="center" prop="mch_amount" label="充值金额"></el-table-column>
+        <!-- TODO -->
+        <el-table-column align="center" prop="admin_id" label="充值类型"></el-table-column>
+        <el-table-column align="center" prop="order_time" label="充值时间"></el-table-column>
+        <el-table-column align="center" prop="notify_time" label="成功时间"></el-table-column>
+        <el-table-column align="center" prop="content" label="状态"></el-table-column>
+        <el-table-column align="center" prop="ch_trade_no" label="批次号"></el-table-column>
+        <el-table-column align="center" prop="order_sn" label="平台单号"></el-table-column>
+        <!-- TODO -->
+        <el-table-column align="center" prop="mch_order" label="客户单号"></el-table-column>
+    </el-table>
+    <el-row style="margin-top:10px;" type="flex" justify="end">
+        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="onPageChange"></el-pagination>
+    </el-row>
+</el-container>
+</template>
+
+<script>
+import {
+    // actionLogList
+    getOrderList
+} from "@/api";
+import { moneyType } from '@/utils/constants'
+export default {
+    name: 'order',
+    data() {
+        return {
+            tableData: [],
+            pageSize: 10,
+            pageNumber: 1,
+            total: 0,
+            // 筛选时间 start_time end_time
+            dataRange: [],
+            // 订单总数
+            // oderCount: 0,
+            // 成功订单数
+            // successCount: 0,
+            // 成功率
+            // SuccessRate: 0,
+            // 订单总金额
+            // countMoney: 0,
+            // 成功订单总金额
+            // successMoney: 0,
+            // 商户扣款
+            // deduction: 0,
+            // 充值类型 常量
+            moneyType,
+            // 充值
+            RechargeType: ''
+
+        };
+    },
+    created () {
+        // this.getActionLogList();
+        this.getOrderList()
+    },
+    methods: {
+        // 获取订单列表
+        async getOrderList () {
+            const res = await getOrderList()
+            console.log('订单列表', res);
+            this.tableData = res.datas
+        },
+        // getActionLogList() {
+        //     const _self = this;
+        //     actionLogList({
+        //         pageSize: _self.pageSize,
+        //         pageNumber: _self.pageNumber,
+        //     }).then((res) => {
+        //         console.log(res);
+        //         if (res && res.msg == "ok") {
+        //             _self.total = res.data.total;
+        //             _self.tableData = [...res.data.rows];
+        //         }
+        //     });
+        // },
+        // 分页
+        onPageChange(page) {
+            if (page == this.pageNumber) {
+                return;
+            } else {
+                this.pageNumber = page;
+                setTimeout(() => {
+                    // this.getActionLogList();
+                    this.getOrderList()
+                }, 0);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.el-header {
+    padding: 0;
+}
+</style>

src/pages/subPages/view.vue

@@ -1,111 +1,127 @@
 <template>
 <el-container direction="vertical">
-    <div style="margin:10px 0;">
+    <!-- <div style="margin:10px 0;">
         <el-input placeholder="ip" style="width:182px;margin-right:10px" v-model="ip"></el-input>
-        <el-button type="primary">搜索</el-button>
-        <el-button type="success">新增</el-button>
-    </div>
+        <el-button type="primary" @click="onSearch">搜索</el-button>
+        <el-button type="success" @click="addIp">新增</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="IP"></el-table-column>
-        <el-table-column align="center" prop="alias" label="状态">
+        <el-table-column align="center" prop="ip" label="IP"></el-table-column>
+        <!-- <el-table-column align="center" prop="alias" label="状态">
             <el-tag type="info" disabled>禁用</el-tag>
             <el-tag type="success">已启用</el-tag>
-        </el-table-column>
-        <el-table-column align="center" prop="box_number" label="操作">
-            <el-tag type="danger">删除</el-tag>
+        </el-table-column> -->
+        <el-table-column align="center" label="操作">
+            <template slot-scope="scope">
+                <el-tag type="danger" @click="del(scope.row.ip)">删除</el-tag>
+            </template>
         </el-table-column>
     </el-table>
-    <el-row style="margin-top:10px;" type="flex" justify="end">
+    <!-- <el-row style="margin-top:10px;" type="flex" justify="end">
         <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="onPageChange" :current-page="pageNumber"></el-pagination>
-    </el-row>
+    </el-row> -->
 </el-container>
 </template>
 
 <script>
+// getIpList获取Ip列表
 import {
-    boxActionList,
-    cabinetList,
-    boxList
+    getIpList
 } from "@/api";
 export default {
     data() {
         return {
             pageSize: 10,
             pageNumber: 1,
-            cabinetValue: "",
-            cabinetOptions: [],
-            boxOptions: [],
-            boxValue: "",
-            tableData: [],
+            // cabinetValue: "",
+            // cabinetOptions: [],
+            // boxOptions: [],
+            // boxValue: "",
+            tableData: [
+                {ip: 123},
+                {ip: 456},
+                {ip: 789},
+                {ip: 123},
+            ],
             total: 0,
             // ip
             ip: null
         };
     },
     created() {
-        // this.getCabinetList();
+        this.getIpList();
     },
     computed: {
-        disSearch() {
-            return this.boxValue != "" && this.cabinetValue == "";
-        },
+        // disSearch() {
+        //     return this.boxValue != "" && this.cabinetValue == "";
+        // },
     },
     methods: {
-        onChangeCabinet(value) {
-            if (value) {
-                this.getBoxList();
-            }
-            console.log(value);
-        },
-        getCabinetList() {
-            cabinetList().then((res) => {
-                console.log(res);
-                if (res && res.msg == "ok") {
-                    this.cabinetOptions = res.data.rows;
-                }
-            });
-        },
-        getBoxList() {
-            boxList({
-                cabinet_number: this.cabinetValue
-            }).then((res) => {
-                if (res && res.msg == "ok") {
-                    this.boxOptions = res.data.rows;
-                }
-            });
-        },
-        getBoxActionList() {
-            let box = this.boxValue ? this.boxValue : 0;
-            boxActionList({
-                cabinet_number: this.cabinetValue,
-                box_number: box,
-                pageSize: this.pageSize,
-                pageNumber: this.pageNumber,
-            }).then((res) => {
-                console.log(res);
-                if (res && res.msg == "ok") {
-                    this.total = res.data.total;
-                    this.tableData = res.data.rows;
-                }
-            });
-        },
-        onPageChange(page) {
-            if (page == this.pageNumber) {
-                return;
-            } else {
-                this.pageNumber = page;
-                setTimeout(() => {
-                    this.getBoxActionList();
-                }, 0);
-            }
+        // onChangeCabinet(value) {
+        //     if (value) {
+        //         // this.getBoxList();
+        //     }
+        //     console.log(value);
+        // },
+        // 获取Ip列表
+        async getIpList() {
+            const res = await getIpList()
+            console.log('获取ip列表', res);
+            this.tableData = res.datas
+
         },
-        onSearch() {
-            this.pageNumber = 1;
-            setTimeout(() => {
-                this.getBoxActionList();
-            }, 0);
+        // 删除
+        del(ip) {
+            // 调用删除接口
+            console.log(ip);
+            // 获取列表
+            this.getIpList()
         },
+        // 分页
+        // onPageChange(page) {
+        //     if (page == this.pageNumber) {
+        //         return;
+        //     } else {
+        //         this.pageNumber = page;
+        //         setTimeout(() => {
+        //             // this.getIpList();
+        //         }, 0);
+        //     }
+        // },
+        // 搜索
+        // onSearch() {
+        //     this.pageNumber = 1;
+        //     setTimeout(() => {
+        //         this.getIpList();
+        //     }, 0);
+        // },
+        // 新增
+        // addIp() {},
+        // getBoxList() {
+        //     boxList({
+        //         cabinet_number: this.cabinetValue
+        //     }).then((res) => {
+        //         if (res && res.msg == "ok") {
+        //             this.boxOptions = res.data.rows;
+        //         }
+        //     });
+        // },
+        // getBoxActionList() {
+        //     let box = this.boxValue ? this.boxValue : 0;
+        //     boxActionList({
+        //         cabinet_number: this.cabinetValue,
+        //         box_number: box,
+        //         pageSize: this.pageSize,
+        //         pageNumber: this.pageNumber,
+        //     }).then((res) => {
+        //         console.log(res);
+        //         if (res && res.msg == "ok") {
+        //             this.total = res.data.total;
+        //             this.tableData = res.data.rows;
+        //         }
+        //     });
+        // }
     },
 };
 </script>

src/utils/constants.js

@@ -10,4 +10,10 @@ export const balanceType = [
   {value: 1, label: '审核通过'},
   {value: 2, label: '审核失败'},
   {value: 3, label: '等待确认'},
+]
+
+// 充值类型
+export const moneyType = [
+  {value: 0, label: '加油卡'},
+  {value: 1, label: '手机卡'}
 ]

src/utils/token.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+// 自定义唯一的key
+const TokenKey = 'hrsaas-ihrm-token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

vue.config.js

@@ -1,7 +1,7 @@
 // const targetUrl = 'https://apizng.eavic.com';
 // const targetUrl = 'http://39.97.239.116:8080';
 // const targetUrl = 'http://192.168.1.200:8080';
-const targetUrl = 'http://192.168.1.195:8080/'
+const targetUrl = 'http://192.168.1.195/'
 
 // const targetUrl = 'http://10.64.81.2:8080';
 
@@ -17,13 +17,15 @@ module.exports = {
             // 在 dist/index.html 的输出
             filename: 'index.html',
             // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
-            title: '航空工业集团快递智能柜管理程序'
+            // title: '航空工业集团快递智能柜管理程序'
+            title: '椰子后台管理系统程序'
         },
     },
     devServer: {
         open: true,
         // host: 'localhost',
-        port: 8080,
+        host: '192.168.1.128',
+        port: 3333,
         https: false,
         //以上的ip和端口是我们本机的;下面为需要跨域的
         proxy: {//配置跨域