512 lines
13 KiB
Vue
512 lines
13 KiB
Vue
<template>
|
|
|
|
<!-- pages/index/index.wxml -->
|
|
<view class="fund-details">
|
|
|
|
|
|
<scroll-view class="fd-list"
|
|
:scroll-top="scrollTop"
|
|
scroll-y="true"
|
|
:refresher-enabled="isOpenRefresh"
|
|
:refresher-triggered="triggered"
|
|
@refresherrefresh="refresh"
|
|
@scrolltoupper="upper"
|
|
@scroll="scroll"
|
|
@scrolltolower="loadMore"
|
|
@refresherpulling="onPulling">
|
|
|
|
<!-- <checkbox-group class="check-box-group" @change="checkbox">-->
|
|
<view class="fund-card" v-for="(sign, index) in listSign" >
|
|
<checkbox v-if="getPayStatus(sign).status == 0" class="checkbox" :value="sign.id" :checked="sign.c"></checkbox>
|
|
<view class="fc-line1">
|
|
<view class="fc-head">
|
|
{{sign.employeeName.charAt(0)}}
|
|
</view>
|
|
<view class="fc-line1-right">
|
|
<view class="fc-line1-right-line1">
|
|
<view class="em-name">
|
|
{{sign.employeeName}}
|
|
</view>
|
|
<view :class="'pay-status' + getPayStatus(sign).status" class="pay-status">
|
|
{{getPayStatus(sign).text}}
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="fc-line1-right-line2">
|
|
<view>手机号： {{sign.phone}}</view>
|
|
<view>身份证： {{sign.idCard}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="fc-line1-right-2">
|
|
<view class="amount" :class="'amount-'+getPayStatus(sign).status">{{ sign.stEmployeeFundRecord == null ? 0 : sign.stEmployeeFundRecord.realPrice }}</view>
|
|
<view class="label">应发金额</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="fc-line2">
|
|
<view class="fc-line2-1"></view>
|
|
|
|
<view class="fc-line2-2">
|
|
|
|
<view class="fc-line2-2-1">
|
|
<view class="date">
|
|
任务日期：{{task.taskDate}}
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="fc-line2-2-1">
|
|
<view>
|
|
日结单价：¥{{task.dayPrice}}
|
|
</view>
|
|
<!-- <view>-->
|
|
<!-- 应发金额：¥{{task.dayPrice}}-->
|
|
<!-- </view>-->
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fc-line2-3">
|
|
<view class="fx-btn" :class="getPayStatus(sign).status == 0 ? 'btn-status1': 'btn-status2'" @click="faxin(sign)"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="fc-line3">
|
|
{{sign.remark == null ? "无" : sign.remark}}
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<!-- </checkbox-group>-->
|
|
<!-- <view v-if="showLoading" class="load-more">加载中...</view>-->
|
|
<view v-if="showNoMore" class="no-more">没有更多数据了</view>
|
|
</scroll-view>
|
|
|
|
|
|
|
|
<view class="fd-bottom">
|
|
<view class="all-select" @click="allSelect">全选</view>
|
|
<view class="all-pay" @click="allPay">批量发薪</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getFxDetails, fx } from "@/api/task";
|
|
// import { getCodeImg } from '@/api/login'
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
id: null,
|
|
},
|
|
task: {
|
|
},
|
|
listSign:[],
|
|
signInfo: {},
|
|
items: [{"id":1, "checked": false}, {"id":2, "checked": false}, {"id":3, "checked": false}],
|
|
checked: false,
|
|
// 是否显示加载更多的loading
|
|
showLoading: false,
|
|
// 是否显示无更多数据提示
|
|
showNoMore: true,
|
|
triggered: false,
|
|
isOpenRefresh: true,
|
|
containerScrollTop: 0,
|
|
|
|
};
|
|
},
|
|
onLoad: function(options) {
|
|
this.queryParams.id = options.id;
|
|
this.getInfo();
|
|
},
|
|
|
|
methods: {
|
|
|
|
getInfo() {
|
|
var that = this;
|
|
getFxDetails(this.queryParams).then(response => {
|
|
that.task = response.data;
|
|
that.listSign = that.task.listSign;
|
|
// that.listSign = that.listSign.concat(that.task.listSign);
|
|
that.triggered = false;
|
|
});
|
|
},
|
|
allSelect() {
|
|
let checked = !this.checked
|
|
for (let i = 0; i < this.listSign.length; i++) {
|
|
if (this.getPayStatus(this.listSign[i]).status == 1) {
|
|
continue;
|
|
}
|
|
this.listSign[i].c = checked;
|
|
// this.listSign[i].employeeName = this.listSign[i].employeeName + " ";
|
|
}
|
|
this.checked = checked;
|
|
},
|
|
allPay() {
|
|
let arr = [];
|
|
for (let i = 0; i < this.listSign.length; i++) {
|
|
if (this.getPayStatus(this.listSign[i]).status == 1) {
|
|
continue;
|
|
}
|
|
if (this.listSign[i].c){
|
|
console.log("掉起支付" + this.listSign[i].employeeName)
|
|
}
|
|
arr.push(this.listSign[i].employeeId)
|
|
}
|
|
|
|
fx({"taskId": this.task.id, "employeeIds": arr}).then(response => {
|
|
console.log(response)
|
|
});
|
|
|
|
},
|
|
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};
|
|
},
|
|
checkbox(e) {
|
|
console.log(e.detail.value); // 输出选中的值
|
|
},
|
|
faxin(sign) {
|
|
if(this.getPayStatus(sign).status == 1){
|
|
return
|
|
}
|
|
|
|
|
|
fx({"taskId": this.task.id, "employeeIds":[sign.employeeId]}).then(response => {
|
|
console.log(response)
|
|
});
|
|
|
|
//掉起支付
|
|
// wx.requestMerchantTransfer({
|
|
// mchId: '1684628563',
|
|
// appId: 'wx7bc7df6eb945a84f',
|
|
// package: 'pages/pay',
|
|
// success (res) {
|
|
// console.log("suc", res)
|
|
// },
|
|
// fail (res) {
|
|
// console.log("err", res)
|
|
// }
|
|
// })
|
|
console.log("掉起支付" + sign.employeeName)
|
|
},
|
|
|
|
|
|
onPageScroll(e){
|
|
this.containerScrollTop = e.scrollTop
|
|
if (this.containerScrollTop > 0){
|
|
this.isOpenRefresh = false
|
|
}else{
|
|
this.isOpenRefresh = true
|
|
}
|
|
},
|
|
onReachBottom(e){
|
|
console.log("onReachBottom", e)
|
|
// 显示加载更多的loading
|
|
this.showNoMore = true;
|
|
// 请求数据
|
|
// this.getInfo();
|
|
},
|
|
// 刷新函数
|
|
refresh() {
|
|
// 请求数据
|
|
this.triggered = true;
|
|
this.queryParams.pageNum = 1;
|
|
this.getInfo();
|
|
},
|
|
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.getInfo();
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
html, body {
|
|
background-color: #ffffff;
|
|
height: 100%;
|
|
width: 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: 100rpx;
|
|
}
|
|
.fund-details{
|
|
padding: 1rpx 18rpx 0rpx 18rpx;
|
|
background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.fd-list{
|
|
width: 100%;
|
|
height: calc(100% - 100rpx);
|
|
display: flex;
|
|
justify-content: center;
|
|
.fund-card{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 98%;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #ffffff;
|
|
padding: 30rpx;
|
|
border-radius: 22rpx;
|
|
position: relative;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
|
|
.checkbox{
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
transform: scale(0.7);
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
.fc-line1{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 150rpx;
|
|
border-bottom: 1rpx solid #dbdbdb;
|
|
.fc-head{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
font-weight: 650;
|
|
font-size: 43rpx;
|
|
color: #ffffff;
|
|
border-radius: 60rpx;
|
|
background-color: #4ac5f6;
|
|
}
|
|
.fc-line1-right{
|
|
width: 50%;
|
|
margin-left: 20rpx;
|
|
.fc-line1-right-line1{
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
.em-name{
|
|
font-size: 38rpx;
|
|
font-weight: 650;
|
|
}
|
|
.pay-status{
|
|
margin-left: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 120rpx;
|
|
height: 38rpx;
|
|
/*font-weight: 650;*/
|
|
font-size: 22rpx;
|
|
border-radius: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
.pay-status0{
|
|
color: #1a73ce;
|
|
background-color: #e2e9f6;
|
|
}
|
|
.pay-status1{
|
|
color: #212121;
|
|
background-color: #d7d7d7;
|
|
}
|
|
.pay-status2{
|
|
color: #d90101;
|
|
background-color: #c2a4a4;
|
|
}
|
|
|
|
|
|
}
|
|
.fc-line1-right-line2{
|
|
display: grid;
|
|
color: #787878;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
view{
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.fc-line1-right-2{
|
|
width: 150rpx;
|
|
.amount{
|
|
font-size: 50rpx;
|
|
text-align: right;
|
|
}
|
|
.amount-0{
|
|
color: #fa6161;
|
|
}
|
|
.label{
|
|
font-size: 20rpx;
|
|
color: #787878;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
.fc-line2{
|
|
margin-top: 15rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 70rpx;
|
|
.fc-line2-1{
|
|
width: 10rpx;
|
|
height: 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/leftLine.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.fc-line2-2{
|
|
width: 60%;
|
|
.fc-line2-2-1{
|
|
width: 100%;
|
|
margin-bottom: 15rpx;
|
|
margin-left: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #3e3e3e;
|
|
font-size: 22rpx;
|
|
view{
|
|
width: 50%;
|
|
}
|
|
.date{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.fc-line2-2-1:last-child {
|
|
margin-bottom: 0rpx;
|
|
}
|
|
}
|
|
.fc-line2-3{
|
|
margin-left: auto; /* 推动元素到右边 */
|
|
.fx-btn{
|
|
margin-left: 8rpx;
|
|
width: 170rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.btn-status1{
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/fxBtn.png");
|
|
}
|
|
.btn-status2{
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/faxin/fx2.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
.fc-line3{
|
|
color: #908f8f;
|
|
background-color: #efefef;
|
|
margin: 20rpx 0 20rpx 0;
|
|
padding: 20rpx 40rpx 20rpx 40rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
/*<view class="fd-bottom">*/
|
|
/*<view class="all-select">全选</view>*/
|
|
/*<view class="all-pay">批量发薪</view>*/
|
|
/*</view>*/
|
|
.fd-bottom{
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
/*bottom: env(safe-area-inset-bottom);*/
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: 0rpx 70rpx 0rpx 70rpx;
|
|
.all-select{
|
|
width: 50%;
|
|
color: #107ff6;
|
|
font-weight: 650;
|
|
font-size: 30rpx;
|
|
margin-left: 8rpx;
|
|
border-radius: 10rpx;
|
|
width: 200rpx;
|
|
height: 65rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1rpx solid #107ff6;
|
|
}
|
|
.all-pay{
|
|
width: 50%;
|
|
background-color: #107ff6;
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
font-size: 30rpx;
|
|
margin-left: 8rpx;
|
|
border-radius: 10rpx;
|
|
width: 200rpx;
|
|
height: 65rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: auto; /* 推动元素到右边 */
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|