merchant-app/pages/components/merchantXc.vue

930 lines
26 KiB
Vue
Raw Permalink Normal View History

2024-10-24 11:10:31 +08:00
<template>
<view :style="{marginTop: titleTop + 'px', backgroundColor:'#ffffff', width: '100%', position: 'relative', height: 'calc(100% - ' + titleTop+'px)' }" class="xinchou-container">
<view class="title">薪酬管理</view>
<view class="topView">
<view class="headImg" @click="my()"></view>
</view>
<view class="top-tab">
<view class="tab">
<view class="item-container" @click="tabChange(1)">
<view class="item" >
<view :class="nowTab == 1 ? 'tab-title-focus' : 'tab-title'">
任务薪酬列表
</view>
<view :class="nowTab == 1 ? 'bottom-line-focus' : 'bottom-line'" ></view>
</view>
</view>
<view class="item-container" @click="tabChange(2)">
<view class="item" >
<view :class="nowTab == 2 ? 'tab-title-focus' : 'tab-title'">
资金流水
</view>
<view :class="nowTab == 2 ? 'bottom-line-focus' : 'bottom-line'"></view>
</view>
</view>
</view>
<view class="filter-btn" @click="filterOpen">
筛选
</view>
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" style="z-index: 10000" type="bottom" >
<view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
<view class="filter-line1">
<view class="label">任务名称</view>
<input type="text" v-model="queryParams.taskName"></input>
</view>
<view class="filter-line1">
<view class="label">日期</view>
<view class="example-body">
<uni-datetime-picker type="date" :clear-icon="true" v-model="queryParams.taskDate" @maskClick="maskClick" @change="timeChange($event)"/>
</view>
</view>
<view class="filter-line2">
<view class="reset-btn" @click="reset()">重置</view>
<view class="submit-btn" @click="search">确定</view>
</view>
</view>
</uni-popup>
<!-- <uni-popup style="z-index: 10000" ref="popup" type="bottom" border-radius="10px 10px 0 0">-->
<!-- <view class="selectContext">-->
<!-- <view class="select-item" @click="filter(0)">全部任务</view>-->
<!-- <view class="select-item" @click="filter(1)">进行中的任务</view>-->
<!-- <view class="select-item" @click="filter(2)">已结束的任务</view>-->
<!-- </view>-->
<!-- </uni-popup>-->
<!-- <uni-collapse-item>-->
<!-- <view class="content">-->
<!-- <text class="text">折叠内容主体这是一段比较长内容默认折叠主要内容只显示当前项标题点击标题展开才能看到这段文字再次点击标题折叠内容</text>-->
<!-- </view>-->
<!-- </uni-collapse-item>-->
<scroll-view v-if="nowTab==1" class="xinchou-list"
:scroll-top="scrollTop"
scroll-y="true"
:refresher-enabled="isOpenRefresh"
:refresher-triggered="triggered"
@refresherrefresh="refresh"
@scrolltoupper="upper"
@scroll="scroll"
@scrolltolower="loadMore"
@refresherpulling="onPulling">
<view class="card" @click="goDetails(task)" v-for="(task, index) in taskList" :key="index">
<view class="line1">
<view class="task-name">
{{task.taskName}}
</view>
</view>
<view class="line2">
<view class="date-icon"></view>
<view class="date">用工日期:{{task.taskDate}}</view>
<view class="day-price">
<view class="day-price-icon"></view>
日结单价
</view>
<view class="price">
¥{{task.dayPrice}}
</view>
</view>
<view class="card-container">
<view class="line3">
<view class="num-container">
<view class="num-label">
签到人数
</view>
<view class="num">
{{task.signNum}}
</view>
</view>
<view class="num-container">
<view class="num-label">
应发总额
</view>
<view class="num">
{{task.yfPrice}}
</view>
</view>
<view class="num-container">
<view class="num-label">
实发总额
</view>
<view class="num">
{{task.sfPrice}}
</view>
</view>
<view class="num-container">
<view class="num-label">
待发总额
</view>
<view class="num">
{{task.dfPrice}}
</view>
</view>
</view>
<view class="line4">
<view class="line4-1">
<view class="line4-1-1">
<view class="icon"></view>
<view class="text">发薪笔数 {{task.yfNum}}</view>
<view class="text">实发笔数 {{task.sfNum}}</view>
<view class="text">待发笔数 {{task.dfNum}}</view>
</view>
<view class="line4-1-2">
<view class="icon"></view>
<view class="date-label">发布时间: {{task.createTime}}</view>
</view>
</view>
<view class="button"></view>
</view>
</view>
</view>
<view v-if="showLoading" class="load-more">加载中...</view>
<view v-if="showNoMore" class="no-more">没有更多数据了</view>
</scroll-view>
<scroll-view v-if="nowTab == 2" class="fund-record"
:scroll-top="scrollTop"
scroll-y="true"
:refresher-enabled="isOpenRefresh"
:refresher-triggered="triggered"
@refresherrefresh="refresh"
@scrolltoupper="upper"
@scroll="scroll"
@scrolltolower="loadMore"
@refresherpulling="onPulling">
<view class="fund-item" v-for="(task, index) in taskList">
<view class="fund-item-title">
<view class="task-name"> {{task.taskName}} </view>
<view class="date"> {{task.taskDate}}</view>
<view class="dj">日结单价():<view>{{task.dayPrice}}</view></view>
</view>
<view class="fund-item-tbl">
<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th width="80" align="center">用工姓名</uni-th>
<uni-th width="107" align="center">手机号码</uni-th>
<uni-th width="80" align="center">发薪状态</uni-th>
<!-- <uni-th width="80" align="center">实发金额</uni-th>-->
<uni-th width="80" align="center">应发金额</uni-th>
<uni-th width="162" align="center">身份证号</uni-th>
<uni-th width="200" align="center">备注</uni-th>
</uni-tr>
<uni-tr v-for="(sign, i) in task.listSign" :key="i" v-if="sign.status == 1">
<uni-td width="80" align="center">{{ sign.employeeName }}</uni-td>
<uni-td width="90" align="center">{{ sign.phone }}</uni-td>
<uni-td width="80" align="center"><view class="status"><view :class="'status' + getPayStatus(sign).status"></view></view></uni-td>
<uni-td width="80" align="center">{{ sign.stEmployeeFundRecord == null ? 0 : sign.stEmployeeFundRecord.realPrice }}</uni-td>
<!-- <uni-td width="80" align="center">{{ task.dayPrice }}</uni-td>-->
<uni-td width="162" align="center">{{ sign.idCard }}</uni-td>
<uni-td width="200" align="center">{{ sign.remark == null ? "无" : sign.remark}}</uni-td>
<!-- <uni-td>-->
<!-- <view class="name">{{ item.name }}</view>-->
<!-- </uni-td>-->
<!-- <uni-td align="center">{{ item.address }}</uni-td>-->
<!-- <uni-td>-->
<!-- <view class="uni-group">-->
<!-- <button class="uni-button" size="mini" type="primary">修改</button>-->
<!-- <button class="uni-button" size="mini" type="warn">删除</button>-->
<!-- </view>-->
<!-- </uni-td>-->
</uni-tr>
</uni-table>
</view>
</view>
<view v-if="showLoading" class="load-more">加载中...</view>
<view v-if="showNoMore" class="no-more">没有更多数据了</view>
</scroll-view>
</view>
</template>
<script>
import { getTaskList } from "@/api/task";
export default {
props: {
titleTop: {type: Number},
nowTab1: {type: Number},
statusBarHeight: {type: Number}
},
watch: {
nowTab1(newValue) {
// 处理逻辑
this.nowTab = newValue
}
},
data() {
return {
// titleTop: 0,
// statusBarHeight: 0,
fundRecord: [],
queryParams: {
pageNum: 1,
pageSize: 10,
dateStatus: 0,
taskName: null,
taskDate: null,
},
taskList: [],
nowTab: this.nowTab1,
realName: "",
// 是否显示加载更多的loading
showLoading: false,
// 是否显示无更多数据提示
showNoMore: false,
triggered: false,
isOpenRefresh: true,
containerScrollTop: 0,
}
},
created: function() {
this.getList();
this.realName = this.$store.state.user.nickName
},
methods: {
onPageScroll(e){
this.containerScrollTop = e.scrollTop
if (this.containerScrollTop > 0){
this.isOpenRefresh = false
}else{
this.isOpenRefresh = true
}
},
onReachBottom(e){
if (this.showLoading || this.showNoMore) {
return;
}
// 显示加载更多的loading
this.showLoading = true;
// 请求数据
this.getList();
},
// 刷新函数
refresh() {
// 请求数据
this.triggered = true;
this.queryParams.pageNum = 1;
this.getList();
},
upper(){
// console.log("upper")
},
scroll(e){
// console.log("scroll", e.detail)
},
onPulling(e) {
// console.log("onpulling", e.detail);
if (e.detail.dy < 8) return // 防止上滑页面也触发下拉
this.triggered = true;
},
// 加载更多函数
loadMore() {
// console.log("loadMore")
// 判断是否正在加载更多或已经没有更多数据
if (this.showLoading || this.showNoMore) {
return;
}
// 显示加载更多的loading
this.showLoading = true;
// 请求数据
this.getList();
},
goDetails(item) {
uni.navigateTo({
url: "../fundDetails?id=" + item.id
})
},
getList() {
if (this.showNoMore && this.queryParams.pageNum > 1){
return
}
var that = this;
getTaskList(this.queryParams).then(response => {
if (that.queryParams.pageNum > 1){
that.taskList = that.taskList.concat(response.rows);
}else{
that.taskList = response.rows;
}
that.queryParams.pageNum++;
if (response.rows.length < this.queryParams.pageSize){
that.showNoMore = true;
}else{
that.showNoMore = false;
}
that.showLoading = false;
that.triggered = false;
that.total = response.total;
});
},
filterOpen(){
this.$refs.popup.open('bottom')
},
search(){
this.queryParams.pageNum = 1;
this.getList();
this.$refs.popup.close();
},
reset(){
this.queryParams.pageNum = 1;
this.queryParams.taskName = null;
this.queryParams.taskDate = null;
this.getList();
this.$refs.popup.close();
},
timeChange(e) {
this.queryParams.taskDate = e;
},
tabChange(tab){
this.nowTab = tab;
},
getPayStatus(sign){
if (sign.stEmployeeFundRecord == null || sign.stEmployeeFundRecord.payStatus == 0){
return {"text": "未发放", "status": 0};
}
if (sign.stEmployeeFundRecord.payStatus == 1){
return {"text": "已发放", "status": 1};
}
if (sign.stEmployeeFundRecord.payStatus == 2){
return {"text": "发放失败", "status": 2};
}
return {"text": "未发放", "status": 0};
},
my(){
uni.navigateTo({
url: "../my"
})
}
}
}
</script>
<style lang="scss">
.table-thead {
/*background-color: #FFFAF2 !important;*/
position: sticky;
left: 0;
top: 0;
z-index: 20;
}
.uni-table-th{
background-color: #f3f3f3 ;
}
.uni-table-td{
vertical-align: middle;
}
/deep/ .uni-table-tr {
overflow: visible;
background-color: #fff;
}
//固定表头第一列
/deep/ .uni-table-tr .uni-table-th:first-child, {
position: sticky;
left: 0;
top: 0;
/*background-color: #FFFAF2;*/
z-index: 10;
}
//固定表头第2列需计算第一列宽度我这里是200rpx
/*/deep/ .uni-table-tr .uni-table-th:nth-child(2), {*/
/* position: sticky;*/
/* left: 200rpx;*/
/* top: 0;*/
/* background-color: #FFFAF2;*/
/* z-index: 10;*/
/*}*/
//冻结thead第一列
/deep/ .uni-table-tr .uni-table-td:first-child {
position: sticky;
left: 0;
top: 0;
background-color: #fff;
z-index: 10;
}
//冻结thead第二列需计算第一列宽度
/*/deep/ .uni-table-tr .uni-table-td:nth-child(2) {*/
/* position: sticky;*/
/* left: 200rpx;*/
/* top: 0;*/
/* background-color: #fff;*/
/* z-index: 10;*/
/*}*/
html, body {
background-color: #ffffff;
height: 100%;
}
page{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.load-more, .no-more {
display: grid;
place-content: center;
padding: 10rpx;
color: #999;
height: 80rpx;
}
.title {
font-size: 25rpx;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90rpx;
position: absolute;
z-index: 1;
background-color: #ffffff;
}
.topView{
display: flex;
width: 100%;
padding: 0 10rpx 0 20rpx;
position: relative;
z-index: 2;
background-color: #ffffff;
.headImg{
width: 70rpx;
height: 70rpx;
background-image: url("http://8.155.21.176:9000/yonggong/m-images/wode.png");
background-size: 100% 100%;
}
}
.xinchou-container{
background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 20rpx;
.top-tab{
width: 100%;
height: 80rpx;
margin-top: 20rpx;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding-left: 30rpx;
padding-right: 30rpx;
border-top: #dcdcdc solid 1rpx;
/*margin-bottom: 10rpx;*/
.tab{
width: 90%;
display: flex;
align-items: center;
height: 80rpx;
/*justify-content: center;*/
.item-container{
width: 200rpx;
margin-left: 10rpx;
display: flex;
align-items: center;
justify-content: center;
.item{
width: 190rpx;
display: grid;
place-items: center;
.tab-title-focus{
/*width: 100%;*/
height: 50rpx;
line-height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 550;
font-size: 30rpx;
/*color: #519fef;*/
}
.bottom-line-focus{
height: 10rpx;
border-radius: 10rpx;
width: 90rpx;
/*background-color: #519fef;*/
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/now-page-line.png");
background-size: 100% 100%;
}
.tab-title{
/*width: 100%;*/
height: 50rpx;
line-height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 550;
font-size: 30rpx;
}
.bottom-line{
height: 10rpx;
border-radius: 10rpx;
width: 100%;
}
}
}
}
.filter-btn{
width: 10%;
font-size: 30rpx;
font-weight: 550;
color: #999999;
}
}
}
.xinchou-list{
width: 100%;
padding: 0rpx 15rpx 0rpx 15rpx;
/*background-color: #e3e3e3;*/
height: calc(100% - 170rpx);
.card{
background-image:url('http://8.155.21.176:9000/yonggong/m-images/fxlist/item-bg.png');
background-size: 100% 100%;
width: 100%;
border-radius: 10rpx;
/*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
padding: 40rpx 25rpx 40rpx 25rpx;
margin: 10rpx 0rpx 10rpx 0rpx;
.line1{
width: 100%;
display: flex;
align-items: center;
padding: 0 30rpx 0 30rpx;
/*justify-content: center;*/
.task-name{
font-size: 40rpx;
width: 80%; /* 设置div的宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
color: #ffffff;
font-weight: 550rpx;
}
}
.line2{
width: 100%;
/*height: 100rpx;*/
display: flex;
align-items: flex-end;
margin-top: -10rpx;
padding: 0 30rpx 0 30rpx;
/*justify-content: center;*/
.date-icon{
width: 23rpx;
height: 23rpx;
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/date-icon.png");
background-size: 100% 100%;
margin-bottom: 5rpx;
}
.date{
font-size: 23rpx;
color: #e2e2e2;
font-weight: 100rpx;
margin-left: 8rpx;
border-radius: 10rpx;
width: auto;
display: flex;
align-items: center;
justify-content: center;
}
.day-price{
display: flex;
align-items: center;
height: 23rpx;
.day-price-icon{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/dj-icon.png");
background-size: 100% 100%;
width: 23rpx;
height: 23rpx;
margin-right: 5rpx;
}
margin-left: auto;
font-size: 23rpx;
color: #e2e2e2;
font-weight: 100rpx;
line-height: 23rpx;
}
.price{
margin-left: 10rpx;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-size: 58rpx;
color: #ffffff;
line-height: 50rpx;
}
}
.card-container{
background-color: #ffffff;
border-radius: 30rpx;
margin-top: 15rpx;
padding: 20rpx;
.line3{
height: 130rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #dbdbdb;
padding-bottom: 15rpx;
.num-container{
width: 25%;
display: grid;
place-items: center;
.num-label{
margin-top: 10rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 23rpx;
color: #979696;
}
.num{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 650;
font-size: 40rpx;
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
margin-top: 10rpx;
}
}
}
.line4{
display: flex;
align-items: center;
margin-top: 15rpx;
.line4-1{
.line4-1-1{
width: 100%;
display: flex;
align-items: center;
/*justify-content: center;*/
.icon{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/clock-icon.png");
background-size: 100% 100%;
width: 23rpx;
height: 23rpx;
}
.text{
margin-left: 5rpx;
margin-right: 30rpx;
font-size: 23rpx;
color: #979696;
}
}
.line4-1-2{
width: 100%;
display: flex;
align-items: center;
/*justify-content: center;*/
margin-top: 10rpx;
.icon{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/clock-icon.png");
background-size: 100% 100%;
width: 23rpx;
height: 23rpx;
}
.date-label{
color: #979696;
margin-left: 5rpx;
font-size: 23rpx;
color: #979696;
}
}
}
.button{
/*background-color: #11a9ee;*/
/*color: #ffffff;*/
font-weight: 650;
font-size: 30rpx;
/*border-radius: 10rpx;*/
width: 170rpx;
height: 65rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto; /* 推动元素到右边 */
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fxlist/js-btn.png");
background-size: 100% 100%;
}
}
}
}
}
.fund-record{
height: calc(100% - 170rpx);
width: 100%;
.fund-item{
margin-top: 30rpx;
background-color: #ffffff;
padding: 30rpx 30rpx 30rpx 30rpx;
.fund-item-title{
display: flex;
align-items: flex-end;
color: #454545;
margin-bottom: 20rpx;
.task-name{
font-weight: 550;
font-size: 30rpx;
max-width: 300rpx;
line-height: 30rpx;
white-space: nowrap;
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
}
.date{
margin-left: 10rpx;
color: #979797;
font-size: 23rpx;
}
.dj{
margin-left: auto;
display: flex;
align-items: center;
line-height: 25rpx;
view{
color: #FF0000;
line-height: 25rpx;
}
}
}
}
}
.uni-popup__wrapper{
background-color: #ffffff;
border-radius: 10rpx;
width: 100%;
}
.dialog {
width: 100%;
height: 100%;
padding: 50rpx;
display: grid;
/*place-items: flex-start;*/
border-radius: 10rpx 10rpx 0 0 ;
background-color: #ffffff;
.filter-line1{
width: 80%;
margin-bottom: 40rpx;
display: flex;
justify-content: center;
align-items: center;
.label{
width: 30%;
}
input{
width: 70%;
border: 1px solid #e5e5e5;
height: 55rpx !important;
line-height: 55rpx !important;
box-sizing: border-box;
border-radius: 4px;
}
.uni-date-x{
border: 1px solid #e5e5e5;
}
.uni-date__x-input{
height: 55rpx !important;
line-height: 55rpx !important;
}
.uni-date-x--border{
border: none !important;
}
.example-body{
width: 70%;
height: 50rpx;
}
}
.filter-line2{
display: flex;
justify-content: center;
border-top: 1rpx solid #cecece;
padding-top: 20rpx;
.reset-btn{
font-size: 30rpx;
margin-left: 8rpx;
border-radius: 10rpx;
width: 180rpx;
height: 65rpx;
display: flex;
align-items: center;
justify-content: center;
}
.submit-btn{
background-color: #11a9ee;
color: #ffffff;
font-weight: 650;
font-size: 30rpx;
margin-left: 8rpx;
border-radius: 10rpx;
width: 250rpx;
height: 65rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto; /* 推动元素到右边 */
}
}
}
.status{
width: 100%;
display: grid;
place-content: center;
margin-top: auto;
margin-bottom: auto;
.status0{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fundrecord/wf.png");
background-size: 100% 100%;
width: 100rpx;
height: 35rpx;
}
.status1{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fundrecord/yf.png");
background-size: 100% 100%;
width: 100rpx;
height: 35rpx;
}
.status2{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fundrecord/paystatus-2.png");
background-size: 100% 100%;
width: 100rpx;
height: 35rpx;
}
.status3{
background-image: url("http://8.155.21.176:9000/yonggong/m-images/fundrecord/paystatus-3.png");
background-size: 100% 100%;
width: 100rpx;
height: 35rpx;
}
}
.vue-ref{
padding-bottom: 0px !important;
}
</style>