Skip to content

hrs_app_h5 / bill

Go to a project
Commit b63fa2f9 by 展昭
Options

添加vuex获取数据方法

parent 94adf8e5
Inline Side-by-side
Showing with 537 additions and 30 deletions
package-lock.json
......@@ -2145,6 +2145,49 @@
"@babel/runtime": "^7.0.0"
}
},
"babel-polyfill": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
"requires": {
"babel-runtime": "^6.26.0",
"core-js": "^2.5.0",
"regenerator-runtime": "^0.10.5"
},
"dependencies": {
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
},
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
......
package.json
......@@ -8,6 +8,7 @@
},
"dependencies": {
"axios": "^0.19.2",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.4",
"lib-flexible": "^0.3.2",
"oidc-client": "^1.10.1",
......
src/api/Bill/index.js 0 → 100644
import { AjaxRequest } from "../index";
import urls from "./urls";
export default {
// get数据
async getData(comid, id, name) {
const url = `${urls.host}/${comid}/${urls.getData}/departments`
const params = { 'param1': id, 'param2': name };
return AjaxRequest.get(url, params);
},
async getMonth(comid, deptid, name) {
const url = `${urls.host}/${comid}/${urls.getMonth}/departments`
const params = { 'param1': deptid, 'param2': name };
return AjaxRequest.get(url, params);
},
async getCycle(comid, deptid, name) {
const url = `${urls.host}/${comid}/${urls.getCycle}/departments`
const params = { 'param1': deptid, 'param2': name };
return AjaxRequest.get(url, params);
},
};
src/api/Bill/urls.js 0 → 100644
export default {
host: "/host",
getData: '/getdata',
getMonth: '/getmonth',
getCycle: '/getcycle'
};
\ No newline at end of file
src/api/index.js
import http from "./http";
import Mgr from "../assets/js/SecurityService";
import store from "../../store";
let headers = {
Authorization: ""
}
const instance = http();
const api = {
get(url, params, headers) {
......@@ -43,30 +46,26 @@ const api = {
}
return instance.delete(url, options);
},
patch(url,params,headers){
patch(url, params, headers) {
let options = {};
if (headers) {
options.headers = headers;
}
return instance.patch(url,params,options)
return instance.patch(url, params, options)
}
};
function getUserHeader(){
const mgr = new Mgr();
return mgr.getAcessToken().then(token=>{
return {
Authorization: `Bearer ${token}`
}
})
function defineHeader() {
const token = store.state.oidc.access_token;
headers.Authorization = "Bearer " + token;
return Promise.resolve(headers);
}
export const userApi = {
get:(url, params)=> getUserHeader().then(headers=>api.get(url, params, headers)),
post:(url, params)=> getUserHeader().then(headers=>api.post(url, params, headers)),
put:(url, params)=> getUserHeader().then(headers=>api.put(url, params, headers)),
delete:(url, params)=> getUserHeader().then(headers=>api.delete(url, params, headers))
export const AjaxRequest = {
get: (url, params) => defineHeader().then(headers => api.get(url, params, headers)),
post: (url, params) => defineHeader().then(headers => api.post(url, params, headers)),
put: (url, params) => defineHeader().then(headers => api.put(url, params, headers)),
delete: (url, params) => defineHeader().then(headers => api.delete(url, params, headers))
}
export default api;
src/assets/js/CommonPms.js 0 → 100644
function bin2hex(s) {
var i,
l,
o = "",
n;
s += "";
for (i = 0, l = s.length; i < l; i++) {
n = s.charCodeAt(i).toString(16)
o += n.length < 2 ? "0" + n : n;
}
return o;
}
function getCanvas() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16, -12));
return crc;
}
function getOsInfo() {
var userAgent = navigator.userAgent.toLowerCase();
var name = "Unknown";
var version = "Unknown";
if (userAgent.indexOf("win") > -1) {
name = "Windows";
if (userAgent.indexOf("windows nt 5.0") > -1) {
version = "Windows 2000";
} else if (
userAgent.indexOf("windows nt 5.1") > -1 ||
userAgent.indexOf("windows nt 5.2") > -1
) {
version = "Windows XP";
} else if (userAgent.indexOf("windows nt 6.0") > -1) {
version = "Windows Vista";
} else if (
userAgent.indexOf("windows nt 6.1") > -1 ||
userAgent.indexOf("windows 7") > -1
) {
version = "Windows 7";
} else if (
userAgent.indexOf("windows nt 6.2") > -1 ||
userAgent.indexOf("windows 8") > -1
) {
version = "Windows 8";
} else if (userAgent.indexOf("windows nt 6.3") > -1) {
version = "Windows 8.1";
} else if (
userAgent.indexOf("windows nt 6.2") > -1 ||
userAgent.indexOf("windows nt 10.0") > -1
) {
version = "Windows 10";
} else {
version = "Unknown";
}
} else if (userAgent.indexOf("iphone") > -1) {
name = "Iphone";
} else if (userAgent.indexOf("mac") > -1) {
name = "Mac";
} else if (
userAgent.indexOf("x11") > -1 ||
userAgent.indexOf("unix") > -1 ||
userAgent.indexOf("sunname") > -1 ||
userAgent.indexOf("bsd") > -1
) {
name = "Unix";
} else if (userAgent.indexOf("linux") > -1) {
if (userAgent.indexOf("android") > -1) {
name = "Android"
} else {
name = "Linux";
}
} else {
name = "Unknown";
}
var os = new Object();
os.name = name;
os.version = version;
return os;
//document.write("系统：" + os.name + "版本:" + os.name)
}
function getBrowerInfo() {
var Browser =
Browser ||
(function (window) {
var document = window.document,
navigator = window.navigator,
agent = navigator.userAgent.toLowerCase(),
//IE8+支持.返回浏览器渲染当前文档所用的模式
//IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
//IE10:10(兼容模式7||8||9)
IEMode = document.documentMode,
//chorme
chrome = window.chrome || false,
System = {
//user-agent
agent: agent,
//是否为IE
isIE: /trident/.test(agent),
//Gecko内核
isGecko: agent.indexOf("gecko") > 0 && agent.indexOf("like gecko") < 0,
//webkit内核
isWebkit: agent.indexOf("webkit") > 0,
//是否为标准模式
isStrict: document.compatMode === "CSS1Compat",
//是否支持subtitle
supportSubTitle: function () {
return "track" in document.createElement("track");
},
//是否支持scoped
supportScope: function () {
return "scoped" in document.createElement("style");
},
//获取IE的版本号
ieVersion: function () {
var rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
var ma = window.navigator.userAgent.toLowerCase()
var match = rMsie.exec(ma);
try {
return match[2];
} catch (e) {
// console.log("error");
return IEMode;
}
},
//Opera版本号
operaVersion: function () {
try {
if (window.opera) {
return agent.match(/opera.([\d.]+)/)[1];
} else if (agent.indexOf("opr") > 0) {
return agent.match(/opr\/([\d.]+)/)[1];
}
} catch (e) {
return 0;
}
}
};
try {
//浏览器类型(IE、Opera、Chrome、Safari、Firefox)
System.type = System.isIE
? "IE"
: window.opera || agent.indexOf("opr") > 0
? "Opera"
: agent.indexOf("chrome") > 0
? "Chrome"
: //safari也提供了专门的判定方式
window.openDatabase
? "Safari"
: agent.indexOf("firefox") > 0
? "Firefox"
: "unknow";
//版本号
System.version = (System.type === "IE") ? System.ieVersion() :
(System.type === "Firefox") ? agent.match(/firefox\/([\d.]+)/)[1] :
(System.type === "Chrome") ? agent.match(/chrome\/([\d.]+)/)[1] :
(System.type === "Opera") ? System.operaVersion() :
(System.type === "Safari") ? agent.match(/version\/([\d.]+)/)[1] :
"0";
//浏览器外壳
System.shell = function () {
if (agent.indexOf("edge") > 0) {
System.version = agent.match(/edge\/([\d.]+)/)[1] || System.version;
return "edge浏览器";
}
//遨游浏览器
if (agent.indexOf("maxthon") > 0) {
System.version = agent.match(/maxthon\/([\d.]+)/)[1] || System.version;
return "傲游浏览器";
}
//QQ浏览器
if (agent.indexOf("qqbrowser") > 0) {
System.version = agent.match(/qqbrowser\/([\d.]+)/)[1] || System.version;
return "QQ浏览器";
}
//搜狗浏览器
if (agent.indexOf("se 2.x") > 0) {
return '搜狗浏览器';
}
//Chrome:也可以使用window.chrome && window.chrome.webstore判断
if (chrome && System.type !== "Opera") {
var external = window.external,
clientInfo = window.clientInformation,
//客户端语言:zh-cn,zh.360下面会返回undefined
clientLanguage = clientInfo.languages;
//猎豹浏览器:或者agent.indexOf("lbbrowser")>0
if (external && 'LiebaoGetVersion' in external) {
return '猎豹浏览器';
}
//百度浏览器
if (agent.indexOf("bidubrowser") > 0) {
System.version = agent.match(/bidubrowser\/([\d.]+)/)[1] ||
agent.match(/chrome\/([\d.]+)/)[1];
return "百度浏览器";
}
//360极速浏览器和360安全浏览器
if (System.supportSubTitle() && typeof clientLanguage === "undefined") {
//object.key()返回一个数组.包含可枚举属性和方法名称
var storeKeyLen = Object.keys(chrome.webstore).length,
v8Locale = "v8Locale" in window;
return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器';
}
return "Chrome";
}
return System.type;
};
//浏览器名称(如果是壳浏览器,则返回壳名称)
System.name = System.shell();
//对版本号进行过滤过处理
// System.version = System.versionFilter(System.version);
} catch (e) {
// console.log(e.message);
}
return {
client: System
};
})(window);
if (Browser.client.name == undefined || Browser.client.name == "") {
Browser.client.name = "Unknown";
Browser.client.version = "Unknown";
} else if (Browser.client.version == undefined) {
Browser.client.version = "Unknown";
}
// document.write(Browser.client.name + " " + Browser.client.version);
return Browser;
}
function GetCommonPms() {
const v = "1.0.1";
const did = getCanvas();
const dh = getOsInfo().version;
const BrowerInfo = getBrowerInfo();
const db = BrowerInfo.client.name;
const dv = BrowerInfo.client.version;
const t = new Date().getTime();
const pms = `v=${v}&&did=${did}&&dh=${dh}&&db=${db}&&dv=${dv}&&dm=&&lat=&&lng=&&t=${t}`;
return pms;
}
export {
GetCommonPms
};
src/assets/js/SecurityService.js
......@@ -22,18 +22,37 @@ const mgr = new Oidc.UserManager({
filterProtocolClaims: oidc_config.filterProtocolClaims,
loadUserInfo: oidc_config.loadUserInfo
});
Oidc.Log.logger = console;
Oidc.Log.level = Oidc.Log.INFO;
Oidc.Log.level = Oidc.Log.WARN;
mgr.events.addUserLoaded(function(user) {
console.log('add user loaded',user);
console.log("addUserLoaded");
let comid = localStorage.getItem("companyId");
if (comid != "") {
let pms = {
client_id: oidc_config.client_id,
client_secret: oidc_config.client_secret,
grant_type: "company",
scope: "api.workapps.user api.workapps.org",
comid: comid,
token: user.access_token
};
var commonPms = GetCommonPms();
axios.post(`${oidc_config.authority}/connect/token?${commonPms}`,qs.stringify(pms))
.then(res => {
if (res.status == 200) {
//localStorage.setItem("companyToken",res.data.access_token);
let accessToken = res.data.access_token;
store.dispatch("changeCompanyToken",accessToken);
}
});
}
});
mgr.events.addAccessTokenExpiring(function() {
// console.log("过期前");
// console.log("AccessToken Expiring：", arguments);
//console.log("过期前");
console.log("AccessToken Expiring：", arguments);
});
mgr.events.addAccessTokenExpired(function() {
......@@ -57,7 +76,7 @@ mgr.events.addUserSignedOut(function() {
mgr.signoutRedirect()
.then(function(resp) {
//location.href="/";
location.href="/";
})
.catch(function(err) {
console.log(err);
......@@ -171,8 +190,24 @@ export default class SecurityService {
mgr.signinRedirect(args).catch(function(err) {
console.log(err);
});
//console.log("login args ===============>",args);
// this.tmxAutoLogin(args)
// console.log("_sigin==>", mgr._signin);
// console.log("login args ===============>",args);
}
tmxAutoLogin(args={}){
args = Object.assign({}, args);
args.request_type = "si:r";
let navParams = {
useReplaceToNavigate : args.useReplaceToNavigate
};
return mgr._signinStart(args, mgr._iframeNavigator, navParams).then(()=>{
Log.info("UserManager.signinRedirect: successful");
});
}
signOutPopup(){
return mgr.signoutPopup();
}
......
src/router/index.js
......@@ -4,20 +4,21 @@ import moreRouters from './more-router.js'
import billRouters from './bill-router.js'
import { vuexOidcCreateRouterMiddleware } from 'vuex-oidc'
import store from '../store'
import Mgr from "../assets/js/SecurityService"
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes:[
routes: [
...billRouters,
...moreRouters,
{
path: '/callback.html',
name: "oidcCallback",
component: () => import("@/views/OidcCallback.vue")
},{
}, {
path: "/test",
name: "test",
component: () => import("@/views/test.vue")
......@@ -29,6 +30,58 @@ const router = new VueRouter({
}
})
router.beforeEach(vuexOidcCreateRouterMiddleware(store))
const mgr = new Mgr();
function loginByAuthcode(authCode) {
let loginArgs = { extraQueryParams: { authcode: authCode } };
mgr.signIn(loginArgs);
}
function autoLogin(comid, authcode, next) {
localStorage.setItem("comid", comid);
mgr.getUser().then(user => {
if (user == null) {
loginByAuthcode(authcode);
} else {
let companyId = localStorage.getItem("companyId");
if (comid != companyId) {
//如果已经登录，则先退出
localStorage.setItem("authcode", authcode);
mgr.signOut();
} else {
next();
}
}
})
}
router.beforeEach(vuexOidcCreateRouterMiddleware(store));
router.beforeEach((to, from, next) => {
let authcode = localStorage.getItem("authcode")
if (authcode) {
localStorage.removeItem("authcode");
loginByAuthcode(authcode)
}
else {
authcode = to.query.authcode;
const comid = to.query.comId || to.query.comid;
if (comid && authcode) {
localStorage.setItem("autoCallback", to.path);
autoLogin(comid, authcode, next);
} else {
mgr.getUser().then(user => {
if (user == null) {
mgr.signIn();
} else {
next()
}
});
}
}
});
export default router
src/store/index.js
......@@ -2,11 +2,13 @@ import Vue from 'vue'
import Vuex from 'vuex'
import { vuexOidcCreateStoreModule } from 'vuex-oidc';
import oidcSettings from "../utils/oidcSettings";
import bill from 'modules/bill'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
bill,
oidc: vuexOidcCreateStoreModule(oidcSettings)
}
});
src/store/modules/bill.js 0 → 100644
import types from "../types";
import api from "../../api/Bill"
let month4choose = "";
let cycle = "";
let data = {};
const state = { month4choose, cycle, data };
const getters = {
getMonth4choose(state) {
return state.month4choose;
},
getCycle(state) {
return state.cycle;
},
getData(state) {
return state.data;
}
};
const mutations = {
[types.CHANGE_BILL_DATA](state, data) {
state.data = data;
try {
// localStorage.setItem("bill_data", data);
} catch (error) { }
},
[types.CHANGE_BILL_MONTH](state, month4choose) {
state.month4choose = month4choose;
try {
// localStorage.setItem("bill_month", month4choose);
} catch (error) { }
},
[types.CHANGE_BILL_CYCLE](state, cycle) {
state.cycle = cycle;
try {
// localStorage.setItem("bill_cycle", cycle);
} catch (error) { }
}
};
const actions = {
async loadBillMonth({ commit }, comid, id, name) {
return await api.getMonth(comid, id, name)
.then(res => {
month4choose = res.data.month4choose;
commit(types.CHANGE_BILL_MONTH, month4choose);
});
},
async loadBillCycle({ commit }, comid, id, name) {
return await api.getCycle(comid, id, name)
.then(res => {
cycle = res.data.cycle;
commit(types.CHANGE_BILL_CYCLE, cycle);
});
},
async loadBillData({ commit }, comid, id, name) {
return await api.getData(comid, id, name)
.then(res => {
data = res.data;
commit(types.CHANGE_BILL_DATA, data);
});
}
};
// 最后统一导出
export default {
state,
getters,
actions,
mutations
};
src/store/types.js 0 → 100644
//定义类型常量，默认全部大写义类型常量，默认全部大写
const CHANGE_BILL_DATA='CHANGE_BILL_DATA'
export default{
CHANGE_BILL_DATA
}
src/views/Bill/index.vue
......@@ -158,6 +158,8 @@
import { Icon } from "vant";
import { TabHeader } from "@/components";
import * as utils from "../../utils/common";
import { mapGetters, mapActions } from "vuex";
export default {
components: {
[Icon.name]: Icon,
......@@ -199,10 +201,15 @@ export default {
}
};
},
methods: {
onClickLeft() {
console.log(1);
computed: {
...mapGetters(["getMonth4choose", "getCycle", "getData"])
},
methods: {
...mapActions([
"loadBillMonth",
"loadBillCycle",
"loadBillData"
]),
toPage(flag) {
switch (flag) {
case 1: // 充值
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment