Skip to content

hrs_app_h5 / bill

Go to a project
Commit 551e2ccd by 展昭
Options

Merge branch 'master' of http://gitlab.corp.qinqinxiaobao.com:9880/hrs_app_h5/bill

parents d6b9155d d5db1ddc
Inline Side-by-side
Showing with 248 additions and 147 deletions
.env.development
VUE_APP_OIDC_CONFIG = '{ "authority": "http://106.120.107.150:5000", "client_id": "teamix-team-manager-web-pc", "client_secret": "123456", "redirect_uri": "http://localhost:8080/callback.html", "response_type": "id_token token", "scope": "workapps.client api.workapps.user api.workapps.org api.workapps.open openid","post_logout_redirect_uri":"http://localhost:8080", "silent_redirect_uri": "http://localhost:8080/silent-renew-oidc.html", "automaticSilentRenew": true,"accessTokenExpiringNotificationTime":60,"filterProtocolClaims":true,"loadUserInfo":true }' VUE_APP_OIDC_CONFIG = '{ "authority": "http://106.120.107.150:5000", "client_id": "teamix-team-manager-web-pc", "client_secret": "123456", "redirect_uri": "http://localhost:8080/callback.html", "response_type": "id_token token", "scope": "workapps.client api.workapps.user api.workapps.org api.workapps.open openid","post_logout_redirect_uri":"http://localhost:8080", "silent_redirect_uri": "http://localhost:8080/silent-renew-oidc.html", "automaticSilentRenew": true,"accessTokenExpiringNotificationTime":60,"filterProtocolClaims":true,"loadUserInfo":true }'
VUE_APP_API_BASEURL = 'http://organization.test.hrs100.cn/api/hrs/' VUE_APP_API_BASEURL = 'http://organization.test.hrs100.cn:18080/api/user/'
VUE_APP_PUBLIC_DIR='/' VUE_APP_PUBLIC_DIR='/'
src/api/More/index.js
import { AjaxRequest } from "../index"; import { AjaxRequest } from "../index";
import urls from "./urls"; import urls from "./urls";
import token from "../../store/modules/token"
const usermemberId = token.state.usermemberId;
console.log('userid', usermemberId);
export default { export default {
// get数据 // get数据
async getData(comid, id, name) { async getMoreList() {
const url = `${urls.host}/${comid}/${urls.getData}/departments` const url = urls.getMoreList(usermemberId);
const params = { 'param1': id, 'param2': name }; return AjaxRequest.get(url);
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) { async getMoreSummary() {
const url = `${urls.host}/${comid}/${urls.getCycle}/departments` const url = urls.getMoreSummary(usermemberId);
const params = { 'param1': deptid, 'param2': name }; return AjaxRequest.get(url);
return AjaxRequest.get(url, params);
}, },
}; };
src/api/More/urls.js
var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
export default { export default {
host: "/host", getMoreList (usermemberId) {
getData: '/getdata', let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/moresvc/receipt/list';
getMonth: '/getmonth', url = url.replace('{usermemberId}', usermemberId);
getCycle: '/getcycle' return url;
}; },
\ No newline at end of file getMoreSummary (usermemberId) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/moresvc/summary';
url = url.replace('{usermemberId}', usermemberId);
return url;
}
};
// http://organization.test.hrs100.cn:18080/api/user/bill/account/206484/moresvc/receipt/list
// http://organization.test.hrs100.cn:18080/api/user/bill/account/206484/moresvc/summary
\ No newline at end of file
src/assets/js/MescrollMixins.js 0 → 100644
const MescrollMixins = {
data() {
mescroll: null
},
beforeRouteEnter(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
})
},
beforeRouteLeave(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
next()
}
}
export default MescrollMixins
src/store/index.js
...@@ -5,6 +5,7 @@ import oidcSettings from "../utils/oidcSettings"; ...@@ -5,6 +5,7 @@ import oidcSettings from "../utils/oidcSettings";
import bill from './modules/bill' import bill from './modules/bill'
import token from './modules/token' import token from './modules/token'
import any from './modules/any' import any from './modules/any'
import more from './modules/more'
Vue.use(Vuex) Vue.use(Vuex)
...@@ -13,6 +14,7 @@ export default new Vuex.Store({ ...@@ -13,6 +14,7 @@ export default new Vuex.Store({
bill, bill,
token, token,
any, any,
more,
oidc: vuexOidcCreateStoreModule(oidcSettings) oidc: vuexOidcCreateStoreModule(oidcSettings)
} }
}); });
src/store/modules/more.js 0 → 100644
import types from "../types";
import api from '../../api/More'
let morelist = []
let moreSummary = {}
const state = { moreSummary, morelist }
const getters = {
getMoreList (state) {
const temp = localStorage.getItem('morelist');
if (temp) {
state.morelist = JSON.parse(temp);
}
return state.morelist;
},
getMoreSummary (state) {
//state.summary = localStorage.getItem("bill_summary");
return state.moreSummary;
},
}
const mutations = {
[types.CHANGE_MORE_LIST] (state, morelist) {
state.morelist = morelist;
try {
localStorage.setItem("morelist", JSON.stringify(morelist));
} catch (error) { }
},
[types.CHANGE_MORE_SUMMARY] (state, moreSummary) {
state.moreSummary = moreSummary;
try {
localStorage.setItem("moreSummary", moreSummary);
} catch (error) { }
},
}
const actions = {
loadMoreList ({ commit }) {
return new Promise((resolve, reject) => {
api.getMoreList().then(res => {
if (res && res.status) {
morelist = res.data.list;
commit(types.CHANGE_MORE_LIST, morelist);
resolve(morelist)
} else {
reject(res.message);
}
})
});
},
loadMoreSummary ({ commit }) {
return new Promise((resolve, reject) => {
api.getMoreSummary().then(res => {
if (res && res.status) {
moreSummary = res.data;
commit(types.CHANGE_MORE_SUMMARY, moreSummary);
resolve(moreSummary);
} else {
reject(res.message)
}
})
});
}
}
export default {
state,
getters,
mutations,
actions
}
\ No newline at end of file
src/store/types.js
...@@ -8,6 +8,8 @@ const CHANGE_RECEIPT_LIST = 'CHANGE_RECEIPT_LIST'; ...@@ -8,6 +8,8 @@ const CHANGE_RECEIPT_LIST = 'CHANGE_RECEIPT_LIST';
const CHANGE_RECEIPT_DETAIL = 'CHANGE_RECEIPT_DETAIL'; const CHANGE_RECEIPT_DETAIL = 'CHANGE_RECEIPT_DETAIL';
const CHANGE_CURRENT_PERIOD='CHANGE_CURRENT_PERIOD'; const CHANGE_CURRENT_PERIOD='CHANGE_CURRENT_PERIOD';
const CHANGE_CURRENT_BEGINDATE="CHANGE_CURRENT_BEGINDATE"; const CHANGE_CURRENT_BEGINDATE="CHANGE_CURRENT_BEGINDATE";
const CHANGE_MORE_LIST="CHANGE_MORE_LIST";
const CHANGE_MORE_SUMMARY="CHANGE_MORE_SUMMARY";
export default { export default {
CHANGE_BILL_PERIOD, CHANGE_BILL_PERIOD,
CHANGE_BILL_SUMMARY, CHANGE_BILL_SUMMARY,
...@@ -17,5 +19,7 @@ export default { ...@@ -17,5 +19,7 @@ export default {
CHANGE_RECEIPT_DETAIL, CHANGE_RECEIPT_DETAIL,
CHANGE_CURRENT_PERIOD, CHANGE_CURRENT_PERIOD,
CHANGE_CURRENT_BEGINDATE, CHANGE_CURRENT_BEGINDATE,
CHANGE_MORE_LIST,
CHANGE_MORE_SUMMARY,
} }
src/views/Bill/record.vue
...@@ -3,30 +3,27 @@ ...@@ -3,30 +3,27 @@
<div class="header"> <div class="header">
<HeaderW :title="title" /> <HeaderW :title="title" />
</div> </div>
<div class="container-wrap" id="container-wrap">
<!--公积金扣费--> <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
<div class="list"> <div class="container-wrap" id="container-wrap">
<div class="title"> <div class="list" v-for="(item, index) in dataList" :key="index">
<div class="title_info">公积金扣费</div> <div class="title">
<i>-160.00</i> <div class="title_info">{{ item.feeType }}</div>
<i>{{ item.amount }}</i>
</div>
<p>
<span>{{ item.dateTime }}</span>
</p>
</div> </div>
<p>
<span>11-20 12:20</span>
</p>
</div> </div>
<mescroll-vue </mescroll-vue>
ref="mescroll"
:up="mescrollUp"
@init="mescrollInit"
class="scrollView"
></mescroll-vue>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Icon } from "vant"; import { Icon } from "vant";
import { HeaderW } from "@/components"; import { HeaderW } from "@/components";
import MescrollMixins from "../../assets/js/MescrollMixins.js";
import MescrollVue from "mescroll.js/mescroll.vue"; import MescrollVue from "mescroll.js/mescroll.vue";
import { mapActions } from "vuex"; import { mapActions } from "vuex";
export default { export default {
...@@ -35,58 +32,78 @@ export default { ...@@ -35,58 +32,78 @@ export default {
[Icon.name]: Icon, [Icon.name]: Icon,
MescrollVue MescrollVue
}, },
mixins: [MescrollMixins],
data() { data() {
return { return {
title: "11月资金记录", title: "11月资金记录",
data: {
index: 1,
size: 10,
length: 15,
list: [
{
feeType: "五险扣费",
dateTime: "2020-04-20 09:36:24",
amount: "-703.42"
},
{
feeType: "账单扣费",
dateTime: "2020-04-17 19:35:21",
amount: "-20.00"
}
]
},
mescroll: null, // mescroll实例对象
mescrollUp: { mescrollUp: {
// 上拉加载的配置. callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的.
page: { page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始 num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10 //每页数据条数,默认10 size: 10 // 每页数据的数量
}, },
noMoreSize: 25, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
toTop: { toTop: {
//回到顶部按钮 src: "./static/mescroll/mescroll-totop.png" // 回到顶部按钮的图片路径,支持网络图
src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
}, },
htmlContent:
'<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容
empty: { empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示 // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
warpId: "container-wrap", //父布局的id (1.3.5版本支持传入dom元素) warpId: "dataList", // 父布局的id;
icon: "../../../assets/images/data-empty.png", //图标,默认null,支持网络图 icon: "./static/mescroll/mescroll-empty.png", // 图标,支持网络图
tip: "暂无内容" //提示 tip: "暂无相关数据~" // 提示
}, },
htmlLoading: lazyLoad: {
'<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', use: true // 是否开启懒加载,默认false
htmlNodata: '<p class="upwarp-nodata">-- END --</p>' //无数据的布局 }
}, },
articleList: [] // 列表数据 dataList: []
}; };
}, },
methods: { methods: {
...mapActions(["loadRecord"]), ...mapActions(["loadRecord"]),
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
upCallback(page, mescroll) {
this.loadRecord({ accountId: "2319680", page: page.num, pageSize: "10" }).then(
resdata => {
console.log(JSON.stringify(resdata));
let arr = resdata.list;
// 如果是第一页需手动制空列表
if (page.num === 1) this.dataList = [];
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length);
});
},
err => {
mescroll.endErr();
}
);
// 模拟联网
// this.getListDataFromNet(
// this.pdType,
// page.num,
// page.size,
// arr => {
// // 如果是第一页需手动制空列表
// if (page.num === 1) this.dataList = [];
// // 把请求到的数据添加到列表
// this.dataList = this.dataList.concat(arr);
// // 数据渲染成功后,隐藏下拉刷新的状态
// this.$nextTick(() => {
// mescroll.endSuccess(arr.length);
// });
// },
// () => {
// // 联网异常,隐藏上拉和下拉的加载进度
// mescroll.endErr();
// }
// );
},
onClickLeft() { onClickLeft() {
console.log(1); console.log(1);
}, },
...@@ -125,13 +142,6 @@ export default { ...@@ -125,13 +142,6 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mescroll {
position: fixed;
padding-bottom: 1rem;
top: 2px;
bottom: 0;
height: auto;
}
.container-wrap { .container-wrap {
padding: 0 16px; padding: 0 16px;
.list { .list {
......
src/views/More/detail.vue
...@@ -4,24 +4,14 @@ ...@@ -4,24 +4,14 @@
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" /> <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div> </div>
<div class="container"> <div class="container">
<div class="list"> <div class="list" v-for="(item, index) in list" :key="index">
<div class="title"> <div class="title">
<div class="title_info">{{data.base.service_type}}</div> <div class="title_info">{{ item.orderName }}</div>
<i>{{data.base.base_fee}}</i> <i>{{ item.dueAmount }}</i>
</div> </div>
<p> <p>
<span>截止扣费日期{{data.base.pay_time_date}}</span> <span>截止扣费日期{{ item.dueDate }}</span>
<i>{{data.base.status}}</i> <i>{{ item.statusDesc }}</i>
</p>
</div>
<div class="list">
<div class="title">
<div class="title_info">{{data.service.service_type}}</div>
<i>{{data.service.base_fee}}</i>
</div>
<p>
<span>截止扣费日期{{data.service.pay_time_date}}</span>
<i>{{data.service.status}}</i>
</p> </p>
</div> </div>
</div> </div>
...@@ -30,6 +20,7 @@ ...@@ -30,6 +20,7 @@
<script> <script>
import { NavBar, Icon } from "vant"; import { NavBar, Icon } from "vant";
import { mapGetters } from "vuex";
export default { export default {
components: { components: {
[NavBar.name]: NavBar, [NavBar.name]: NavBar,
...@@ -37,33 +28,24 @@ export default { ...@@ -37,33 +28,24 @@ export default {
}, },
data() { data() {
return { return {
title: "详情", title: "",
data: { list: []
base: {
service_type: "吴医生工商代理工本费",
base_fee: 400.0,
pay_time_date: "2019-12-20",
status: "已扣费"
},
service:{
service_type: "吴医生工商代理服务费",
base_fee: 200.0,
pay_time_date: "2019-12-20",
status: "未扣费"
}
}
}; };
}, },
computed: {
...mapGetters(["getMoreList"])
},
methods: { methods: {
onClickLeft() {
console.log(1);
},
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
const index = parseInt(this.$route.query.index);
const name=this.$route.query.name;
this.title=name;
this.list = this.getMoreList[index].details;
} }
}; };
</script> </script>
......
src/views/More/index.vue
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<div class="header_content"> <div class="header_content">
<div class="fund"> <div class="fund">
<span>账户余额</span> <span>账户余额</span>
<i>{{data.balance}}</i> <i>{{ summary.balance }}</i>
</div> </div>
<div class="paid"> <div class="paid">
<span>待付金额</span> <span>待付金额</span>
<i class="paid_color">{{data.toBePayAmount}}</i> <i class="paid_color">{{ summary.waitPay }}</i>
</div> </div>
</div> </div>
<div class="header_info"> <div class="header_info">
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<img src alt /> <img src alt />
<span>充值</span> <span>充值</span>
</div> </div>
<div class="right" @click="toPage(2)"> <div class="right" @click="toPage()">
<img src alt /> <img src alt />
<span>资金记录</span> <span>资金记录</span>
</div> </div>
...@@ -30,18 +30,18 @@ ...@@ -30,18 +30,18 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="list"> <div class="list" v-for="(item, index) in list" :key="index">
<div class="list_title" @click="toPage(3)"> <div class="list_title" @click="toNextPage(index, item.productName)">
<div class="title">{{data.detail.service_type}}</div> <div class="title">{{ item.productName }}</div>
<van-icon name="arrow" class="arrow_right" /> <van-icon name="arrow" class="arrow_right" />
</div> </div>
<p> <p>
<span>应付金额</span> <span>应付金额</span>
<i>{{data.detail.toPayAmount}}</i> <i>{{ item.totalAmount }}</i>
</p> </p>
<p> <p>
<span>待付金额</span> <span>待付金额</span>
<i>{{data.detail.toBePayAmount}}</i> <i>{{ item.waitPayAmount }}</i>
</p> </p>
</div> </div>
</div> </div>
...@@ -52,9 +52,7 @@ ...@@ -52,9 +52,7 @@
<script> <script>
import { NavBar, Icon } from "vant"; import { NavBar, Icon } from "vant";
import { TabHeader } from "@/components"; import { TabHeader } from "@/components";
import MeScroll from 'mescroll.js' import { mapActions } from "vuex";
import 'mescroll.js/mescroll.min.css'
export default { export default {
components: { components: {
[Icon.name]: Icon, [Icon.name]: Icon,
...@@ -62,41 +60,48 @@ export default { ...@@ -62,41 +60,48 @@ export default {
}, },
data() { data() {
return { return {
title: "人事服务", title: "",
data:{ list: [],
balance:0, summary: {
toBePayAmount:0, accountId: 0,
detail:{ balance: 0,
service_type:"吴医生工商代理", waitPay: 0
toPayAmount:0,
toBePayAmount:0
}
} }
}; };
}, },
methods: { methods: {
onClickLeft() { ...mapActions(["loadMoreList", "loadMoreSummary"]),
console.log(1); toPage() {
this.$router.push({ name: "billrecord" });
}, },
toPage(flag) { toNextPage(index, name) {
if(flag === 2){ this.$router.push({ name: "moredetail", query: { index, name } });
this.$router.push({ name: "morerecord"});
}
if (flag === 3) {
this.$router.push({ name: "moredetail"});
}
}, },
getData() { async getData() {
const res = null; await this.loadMoreSummary().then(
this.data.topay = res.money; data => {
this.summary = data;
},
err => {
console.log(err);
}
);
await this.loadMoreList().then(
data => {
this.list = data;
},
err => {
console.log(err);
}
);
}, },
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
mounted() { async mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
await this.getData();
} }
}; };
</script> </script>
......
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