merchant-app/pages/components/merchantXc.vue
2024-10-24 11:10:31 +08:00

930 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>