uni_project/unimall-app/pages/user/task_detail_fh.vue

<template>
	<view class="container">
		<view class="detail-desc">
			<view class="d-header">
				<text>选择车辆</text>
			</view>
			<scroll-view scroll-y  @tap.stop="">
				<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in taskInfo" :key="index">
							<label v-if="item.fhFlag == 0" class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.carNo+" [ "+item.tranNo+" ] "}}(未放货)</view>
								<checkbox class="round" :checked="checkedList.includes(String(item.id))" 
								  :value="item.id"></checkbox>
							</label>
							<label v-else-if="item.fhFlag == 1" class="flex justify-between text-green align-center flex-sub">
								<view class="flex-sub">{{item.carNo+" [ "+item.tranNo+" ] "}}(已放货)</view>
								<checkbox class="round" :checked="checkedList.includes(String(item.id))"
								  :value="item.id"></checkbox>
							</label>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
			<uni-table border stripe emptyText="暂无收款数据" min-width='250px' >
				<uni-tr>
					<uni-th align="center" width="60">收款方式</uni-th>
					<uni-th align="center" width="60">收款金额</uni-th>
					<uni-th align="center" width="70">收款日期</uni-th>
					<uni-th align="center" width="60">收款截图</uni-th>
					<uni-th align="center" width="40">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in collectInfo" >
					<uni-td align="center">{{item.strPaymentMethod}}</uni-td>
					<uni-td align="center">{{item.collectMoney}}</uni-td>
					<uni-td align="center">{{item.strCollectDate}}</uni-td>
					<uni-td align="center">
						<view class="bg-img" v-if="item.collectImg != ''" @tap="ViewImage" :data-url="item.collectImg">
						 <image :src="item.collectImg" mode="aspectFit" style="width: 40px; height: 40px;"></image>
						</view>
					</uni-td>
					<uni-td  align="center">
						<view v-if="!item.id" style="color: #0081FF;" @click="deleteRow(index)">移除</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-table border stripe emptyText="" min-width='250px' >
				<uni-tr>
					<uni-th align="center" width="100">应收：{{shouldCollect}}</uni-th>
					<uni-th align="center" width="100">已收：{{alreadyCollect}}</uni-th>
					<uni-th align="center" width="100">未收：{{shouldCollect-alreadyCollect}}</uni-th>
				</uni-tr>
				<uni-tr>
				</uni-tr>
			</uni-table>
			<u-modal v-model="collectShow"
				ref="collectModal"
				title="收款"
				show-cancel-button="true"
				confirm-text="确定"
				cancel-text="取消"
				@confirm="confirm"
				@cancel="cancel"  >
				<view class="cu-form-group">
					<view class="title">收款方式</view>
					<picker @change="CollectTypeChange" :value="collectTypeIndex" :range="collectType">
						<view class="picker">
							{{collectTypeIndex>-1?collectType[collectTypeIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<view v-if="collectTypeIndex == 0" class="cu-form-group">
					<view class="title">收款编号</view>
					<picker @change="CollectNoChange" :value="collectNoIndex" :range="collectNo">
						<view class="picker">
							{{collectNoIndex>-1?collectNo[collectNoIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">收款金额</view>
					<input placeholder="请填写" name="input" @input="collectMoneyInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">收款日期</view>
					<picker mode = "date" @change="CollectDateChange" :value="collectDate" >
						<view class="picker">
							{{collectDate}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">收款截图</view>
					<view class="bg-img" v-if="collectImg != ''" @tap="ViewImage" :data-url="collectImg">
					 <image :src="collectImg" mode="aspectFit" style="width: 40px; height: 40px;"></image>
					</view>
					<view class="solids" style="width: 20px; height: 20px;" @tap="ChooseImage" v-if="collectImg == ''">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</u-modal>
			<view class="cu-modal" :class="modalName=='workModal'?'show':''" >
				<scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
					<view class="cu-list menu text-center" >
						<!-- <view >{{请选择单号}}</view> -->
						<view class="cu-item" v-for="(item,index) in workList" :key="index" @click="choose(item.workNo)">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.workNo}}</view>
							</label>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="collect">添加收款</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="fanghuo">申请放货</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				taskInfo:[],
				taskInfoTmp:[],
				collectInfo:[],
				collectImg:'',
				grossWeight:'',
				skinWeight:'',
				netWeight:'',
				taskStatus:'',
				userStyle:'',
				modalName:'',
				workList:[],
				taskType:'',
				taskId:'',
				carNo:'',
				checkedList:[],
				collectShow:false,
				collectType: ['预收款', '网银收款', '现金收款'],
				collectTypeIndex: -1,
				collectNoData: [],
				collectNo: [],
				collectNoIndex: -1,
				collectMoney:0,
				collectDate:"请选择",
				workNo:null,
				shouldCollect:0,
				alreadyCollect:0
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow() {
		},
		onLoad(options) {
			const that = this
			this.taskId = options.taskId
			this.taskStatus = options.taskStatus
			this.$api.request('task', 'getFanghuoList', failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				let data = res.data
				if(data.taskInfo){
					that.taskInfoTmp = data.taskInfo
				}
				if(data.collectInfo){
					that.collectInfo = data.collectInfo
				}
				if(data.workInfo){
					that.workList = data.workInfo
				}
				for(var i=0;i<that.collectInfo.length;i++){
					that.alreadyCollect += that.collectInfo[i].collectMoney
				}
				
				that.shouldCollect = data.shouldCollect
				var height = that.workList.length * 100
				var width = 500
				that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
				that.modalName = 'workModal'
				uni.hideLoading()
			})
		},
		
		methods: {
			deleteRow(e){
				 this.collectInfo.splice(e,1)
			},
			choose(workNo){
				this.workNo = workNo
				this.modalName = null
				const list  =  this.taskInfoTmp.filter ( item => item.tranNo == workNo)
				this.taskInfo = list
			},
			collectMoneyInput(e){
				this.collectMoney = e.detail.value
			},
			CollectDateChange(e) {
				this.collectDate = e.detail.value
			},
			CollectTypeChange(e) {
				const that = this
				this.collectTypeIndex = e.detail.value
				if(this.collectTypeIndex == 0){
					this.$api.request('task', 'getCollectList', {
						collectType: 1
					},  failres => {
						that.$api.msg(failres.errmsg)
						uni.hideLoading()
					}).then(res => {
						that.collectNoData = res.data
						for(var i=0;i<that.collectNoData.length;i++){
							that.collectNo.push(that.collectNoData[i].collectNo)
						}
						uni.hideLoading()
					})
				}
			},
			CollectNoChange(e) {
				this.collectNoIndex = e.detail.value
			},
			confirm(){
				if(this.collectTypeIndex == -1){
					this.$api.msg('请选择收款方式');
					this.collectShow = true;
					return;
				}
				if(this.collectTypeIndex == 0 && this.collectNoIndex == -1){
					this.$api.msg('请选择预收款编号');
					this.collectShow = true;
					return;
				}
				if(!this.collectMoney){
					this.$api.msg('请填写收款金额');
					this.collectShow = true;
					return;
				}
				if(!this.collectDate){
					this.$api.msg('请选择收款日期');
					this.collectShow = true;
					return;
				}
				if(!this.collectImg){
					this.$api.msg('请上传收款截图');
					this.collectShow = true;
					return;
				}
				const that = this
				// uni.showLoading()
				var paymentMethod;
				if(this.collectTypeIndex == 0){
					paymentMethod = "预收款"
				}
				else if(this.collectTypeIndex == 1){
					paymentMethod = "网银收款"
				}
				else if(this.collectTypeIndex == 2){
					paymentMethod = "现金收款"
				}
				var collectNo;
				if(this.collectNoIndex == -1){
					collectNo = '';
				}
				else{
					collectNo = this.collectNoData[this.collectNoIndex].collectNo
				}
				var tmp = {
					workNo:this.workNo,
					strPaymentMethod:paymentMethod,
					collectNo:collectNo,
					collectMoney:this.collectMoney,
					strCollectDate:this.collectDate,
					collectImg:this.collectImg
				}
				this.collectInfo.push(tmp)
				this.alreadyCollect += Number(this.collectMoney)
				// that.$api.request('task', 'saveCollectKN', {
				// 	workNo:workNo,
				// 	paymentMethod:paymentMethod,
				// 	collectNo:this.collectNoData[this.collectNoIndex].collectNo,
				// 	collectMoney:this.collectMoney,
				// 	collectDate:this.collectDate,
				// 	collectImg:this.collectImg
				// }, failres => {
				// 	that.$api.msg(failres.errmsg)
				// 	uni.hideLoading()
				// }).then(res => {			
				// 	uni.hideLoading()
				// 	that.$api.msg('收款成功')
				// })
			},
			cancel(){
				this.collectShow = false
			},
			collect(e){
				// if(this.checkedList.length == 0){
				// 	this.$api.msg('请选择收款车辆');
				// 	return;
				// }
				// var workNo;
				// var tmpList=[];
				// for(var i=0;i<this.taskInfo.length;i++){
				// 	for(var j=0;j<this.checkedList.length;j++){
				// 		if(this.taskInfo[i].id == this.checkedList[j]){
				// 			workNo = this.taskInfo[i].tranNo
				// 			tmpList.push(workNo)
				// 		}
				// 	}
				// }
				// for(var i=0;i<tmpList.length;i++){
				// 	var workNo = tmpList[i]
				// 	for(var j=0;j<tmpList.length;j++){
				// 		if(workNo != tmpList[j]){
				// 			this.$api.msg('请选择同一单号车辆');
				// 			return;
				// 		}
				// 	}
				// }
				this.collectShow = true
			},
			CheckboxChange(e){
				if(e.detail.value.length == 0){
					this.checkedList = e.detail.value;
					return;
				}
				var newList = e.detail.value
				var currentTarget;
				if(newList.length < this.checkedList.length){
					for(var j = 0;j<newList.length;j++){
						for(var i=0;i<this.checkedList.length;i++){
							if(newList[j] == this.checkedList[i]){
								this.checkedList.splice(i,1)
							}
						}
					}
					for(var i=0;i<this.taskInfo.length;i++){
						if(this.checkedList[0] == this.taskInfo[i].id){
							currentTarget = this.taskInfo[i]
						}
					} 
					if(currentTarget.fhFlag == 1){
						for(var j=0;j<this.taskInfo.length;j++){
							if(this.taskInfo[j].batch == currentTarget.batch){
								for(var i=0;i<newList.length;i++){
									if(this.taskInfo[j].id == newList[i]){
										newList.splice(i,1)
									}
								}
							}
						}
						
					}
					this.checkedList = newList;
				}
				else{
					for(var j = 0;j<newList.length;j++){
						for(var i=0;i<this.taskInfo.length;i++){
							if(newList[j] == this.taskInfo[i].id){
								currentTarget = this.taskInfo[i]
							}
						}
					}
					if(currentTarget.fhFlag == 1){
						for(var i=0;i<this.taskInfo.length;i++){
							if(this.taskInfo[i].batch == currentTarget.batch){
								this.checkedList.push(String(this.taskInfo[i].id));
							}
						}
					}
					else{
						this.checkedList = newList;
					}
				}
				
				
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if(e.currentTarget.dataset.index == 0){
								this.collectImg = "";
							}
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'collectImg/',
							result => {
								this.collectImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			fanghuo(){
				const that = this
				// if(!that.collectImg){
				// 	this.$api.msg('请上传收款截图');
				// 	return;
				// }
				if(this.shouldCollect < this.alreadyCollect){
					this.$api.msg('已收款不能大于应收款');
					return;
				}
				var taskId = "";
				for(var i=0;i<that.checkedList.length;i++){
					taskId += that.checkedList[i]+"," 
				}
				if(taskId == ""){
					this.$api.msg('请选择放货车辆');
					return;
				}
				var workDetailDTO = {
					workNo:this.workNo,
					list:this.collectInfo
				}
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('task', 'fanghuoApply', {
					taskId: taskId,
					collectImg:!that.collectImg?'':that.collectImg,
					workDetailDTO:JSON.stringify(workDetailDTO)
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {			
					uni.hideLoading()
					that.$api.msg('申请成功')
					setTimeout(()=>{uni.navigateBack()},1000);
				})
			}
		}
	}
</script>

<style lang='scss'>
	.container{
		padding-bottom: 160upx;
	}
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 750upx;
	
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
	
			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
	
			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}
	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
	
		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}
	
		.tit {
			width: 220upx;
		}
	
		.con {
			flex: 1;
			color: $font-color-dark;
	
			.selected-text {
				margin-right: 10upx;
			}
		}
	
		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
	
			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}
	
		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
			text-align: right;
			padding-right: 20upx;
		}
	
		.red {
			color: $uni-color-primary;
		}
	}
	@mixin playcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xsh-start {
		width: 105rpx;
		height: 105rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-size: 29rpx;
		color: #4135EB;
		@include playcenter;
		flex-wrap: wrap;
	}
	.x-modal {
		width: 100%;
		.x-m-title {
			width: 100%;
			height: 90rpx;
			padding: 0 38rpx 0 31rpx;
			box-sizing: border-box;
			font-size: 29rpx;
			color: #333333;
			border-bottom: 1px dashed #999;
			@include playcenter;
			justify-content: space-between;
			.xm-t-clear {
				font-size: 25rpx;
				color: #341DB7;
				@include playcenter;
				>image {
					width: 28rpx;
					height: 28rpx;
					display: block;
					margin-right: 8rpx;
				}
			}
		}
		.x-m-con {
			width: 100%;
			padding: 0 31rpx 18rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
		}
	}
	
</style>