yiliangyiyun-app/pageA/freightTransport/record/sendrecord.vue

<template>
	<view class="center">
		<view class="transaction">
			<view style='padding-top:10px;' class="c-row">
				<view class="title">业务编号</view>
				<view class="con-list">
					<input v-model='purchaseOrder.businessNumber' disabled name="text"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">货名</view>
				<view class="con-list">
					<input v-model='purchaseOrder.goodsName' disabled name="text"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">收货方</view>
				<view class="con-list">
					<input v-model='purchaseOrder.consignee' disabled name="text"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">货物单价（元/吨）</view>
				<view class="con-list">
					<input v-model='purchaseOrder.goodsPrice' disabled name="text"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">运费单价（元/吨）</view>
				<view class="con-list">
					<input v-model='purchaseOrder.freightUnitPrice' disabled name="text"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">累计收发</view>
				<view class="con-list cumulative-style">
					<!-- <input v-model='purchaseOrder.transactionsNumber' disabled name="text"></input> -->
					<view>
						<text>{{ radTotal.receipt}}</text>
						<text class='type send'>发</text>
					</view>
					<view>
						<text>{{ radTotal.delivery}}</text>
						<text class='type send'>收</text>
					</view>
				</view>

			</view>
			<view class="c-row">
				<view class="title">收货地址</view>
				<view class="con-list">
					<input v-model='purchaseOrder.receivingAddress' disabled name="text"></input>
				</view>
			</view>
		</view>

		<view class="transaction" v-for="(item,index) in purchaseOrder.freightReceivingDispatchingCars">
			<view style='padding-top:10px;' class="c-row b-b justify-between">
				<view class="title">{{item.carNo}}</view>
				<view style='align-items: center;' class="flex">
					<text style='color:#878C9C;'>{{item.dispatchingDate}}</text>
					<text class='type send' v-if="item.statusFlag==1">发</text>
					<text class='type send' v-if="item.statusFlag==2">收</text>
				</view>
			</view>
			<view class="c-row  justify-between">
				<view style='flex:1;' class="title-black">净重</view>
				<view style='align-items: center;flex:2;' class="flex">
					<view style='flex:1;text-align:right;'>
						<text>{{item.reciveNetWeight}}</text>
						<text class='type send'>发</text>
						<view class='weightnotes' @click="viewPoundList(0)">查看磅单</view>
						<u-modal v-model="isShowFViewPoundList" title="磅单(发)" show-cancel-button=true>
							<view v-if="item.collectionScreenshot==''||item.collectionScreenshot==null" class="noimg">
								暂未上传磅单</view>
							<img :src="item.collectionScreenshot" alt="" class="img">
						</u-modal>
					</view>
					<view style='flex:1;text-align:right;'>
						<text>{{item.dispatchNetWeight}}</text>
						<text class='type send'>收</text>
						<view class='weightnotes' @click="viewPoundList(1)">查看磅单</view>
						<u-modal v-model="isShowSViewPoundList" title="磅单(收)" show-cancel-button=true>
							<view v-if="item.reciveCollectionScreenshot==''||item.reciveCollectionScreenshot==null"
								class="noimg">暂未上传磅单</view>
							<img :src="item.reciveCollectionScreenshot" alt="" class="img">
						</u-modal>
					</view>

				</view>
			</view>
			<view class="c-row">
				<view class="title-black">应付贷款</view>
				<view class="con-list">
					¥{{item.goodsIngPayable}}
				</view>
			</view>
			<view class="c-row">
				<view class="title">已付贷款</view>
				<view style='color:#22C572;' class="con-list">
					¥{{item.goodsEdPayable}}
				</view>
			</view>
			<view class="c-row">
				<view class="title">贷款扣款</view>
				<view class="con-list">
					¥{{item.goodsDeductionAmount}}
				</view>
			</view>
			<view class="c-row">
				<view class="title-black">应付运费</view>
				<view class="con-list">
					{{item.freightIngPayable}}
				</view>
			</view>
			<view class="c-row">
				<view class="title">已付运费</view>
				<view style='color:#22C572;' class="con-list">
					¥{{item.freightEdPayable}}
				</view>
			</view>
			<view class="c-row">
				<view class="title">运费扣款</view>
				<view class="con-list">
					¥{{item.freightDeductionAmount}}
				</view>
			</view>
			<view class="c-row flex justify-end">
				<view class='deductfreight' @click="freightDeduction(item)">扣运费</view>
				<view class="freightAlert-model">
					<u-modal v-model="freightAlert" cancel-color="#AFB3BF" confirm-color="#22C572" :show-title="false"
						show-cancel-button=true @confirm="confirmFreight(0,item)">
						<view class="freightAlert-warp">
							<view class="freightAlert-row">
								<view class="title">扣运费</view>
								<u-icon name="close" class="close" size="20" @click="closeModel"></u-icon>
							</view>
							<view class="freightAlert-row2 row">
								<view>运输损耗</view>
								<view>{{item.reciveNetWeight-item.dispatchNetWeight}}</view>
							</view>
							<view class="freightAlert-row3 row">
								扣款金额
							</view>
							<view class="freightAlert-row4">
								<u-input v-model="freightDeductionAmount" :type="type" :border="border"
									placeholder="请输入扣款金额" class="uview-border" @input="inputWatch" />
								<view class="text">
									元
								</view>
							</view>
							<view class="red-tip" v-show="isShowFreightTip">
								扣款金额输入错误/扣款金额不能为空
							</view>
						</view>
					</u-modal>
				</view>
				<view class='payfreight' @click="payDeduction()">付运费</view>
				<view class="freightAlert-model">
					<u-modal v-model="payAlert" cancel-color="#AFB3BF" confirm-color="#22C572" :show-title="false"
						show-cancel-button=true @confirm="confirmFreight(1,item)">
						<view class="freightAlert-warp payAlert">
							<view class="freightAlert-row">
								<view class="title">付运费</view>
								<u-icon name="close" class="close" size="20" @click="closeModel"></u-icon>
							</view>
							<view class="freightAlert-row3 row">
								应付
							</view>
							<view class="freightAlert-row4">
								<u-input v-model="item.freightIngPayable" :type="type" :border="border"
									placeholder="请输入付款金额" class="uview-border" @input="paidInputWatch" />
								<view class="text">
									元
								</view>
							</view>
							<view class="red-tip paid-tip" v-show="isShowPaidTip">
								应付金额不能为空/应付运费不能小于已付运费
							</view>
							<view class="paid">
								<view class="">
									已付
								</view>
								<view>
									{{item.freightEdPayable}}元
								</view>
							</view>
							<view class="unpaid">
								<view class="">
									未付
								</view>
								<view>
									{{item.freightIngPayable-item.freightEdPayable}}元
								</view>
							</view>
							<view class="freightAlert-row3 row">
								付款金额
							</view>
							<view class="freightAlert-row4">
								<u-input v-model="item.money" :type="type" :border="border" placeholder="请输入扣款金额"
									class="uview-border" @input="payInputWatch($event,item)" />
								<view class="text">
									元
								</view>
							</view>
							<view class="red-tip pay-tip" v-show="isShowPayTip">
								付款金额输入错误/付款金额不能超过未付金额/付款金额不能为空
							</view>
						</view>
					</u-modal>
				</view>
			</view>
		</view>
		<view class='footer'>
			<button class="btn" @click="commit()">添加发车信息</button>
		</view>


	</view>
</template>

<script>
	import {
		getDetail
	} from "./index";
	export default {
		name: "business",
		data() {
			return {
				isShowFViewPoundList: false,
				isShowSViewPoundList: false,
				purchaseOrder: {},
				freightDeductionAmount: 0,
				money: 0,
				carInfo: [],
				radTotal: {
					delivery: 0,
					receipt: 0
				},
				type: 'text',
				border: false,
				payValue: '',
				copePayValue: '',
				paidValue: '',
				freightAlert: false,
				payAlert: false,
				isShowFreightTip: false,
				isShowPaidTip: false,
				isShowPayTip: false,
				id: ""
			}
		},
		onShow() {

		},
		onLoad(options) {
			debugger
			getDetail(options.id, this)
			this.id = options.id
		},
		onPageScroll(e) {

		},
		//下拉刷新
		onPullDownRefresh() {},
		onReachBottom() { //上拉触底函数
		},
		computed: {

		},
		methods: {
			commit() {
				uni.navigateTo({
					url: '/pageA/freightTransport/contract_detail?id=' + this.purchaseOrder.batch
				})
			},
			// 查看磅单
			viewPoundList(type) {
				if (type == 0) {
					this.isShowFViewPoundList = true
				} else {
					this.isShowSViewPoundList = true
				}
			},
			confirmFreight(flag, val) {
				debugger
				if (flag == 1) {
					val.money = parseInt(val.money);
				} else {
					val.freightDeductionAmount = parseInt(this.freightDeductionAmount);
				}
				val.freightIngPayable = parseInt(val.freightIngPayable);
				val.flag = flag
				this.$api.doRequest('post', 'freightReceivingDispatching/api/paymentAndDeductionfreight', val).then(
					res => {
						debugger
						if (res.data.code == 200) {
							location.reload()
						}

					}).catch(res => {

				})
			},
			inputWatch(e) {
				debugger
				let _val = this.checkVal(e, "freight");
				if (_val) {
					this.isShowFreightTip = true
				} else {
					this.isShowFreightTip = false
				}
			},
			paidInputWatch(e) {
				let _val = this.checkVal(e, "paid");
				if (_val) {
					this.isShowPaidTip = true
				} else {
					this.isShowPaidTip = false
				}
			},
			payInputWatch(e, item) {
				let _val = this.checkVal(e, "pay", item);
				if (_val) {
					this.isShowPayTip = true
				} else {
					this.isShowPayTip = false
				}
			},
			// 扣运费
			freightDeduction(item) {
				debugger
				this.freightAlert = true;
				item.freightDeductionAmount = ""
				console.log("扣运费")
			},
			// 付运费
			payDeduction() {
				console.log("付运费")
				this.payAlert = true
			},

			//判断输入值
			checkVal(e, state, item) {
				debugger
				debugger
				console.log(e)
				let _val;
				let _val1 = this.utils.isEmpty(e)
				let _val2 = this.utils.isTwoPoint(e)
				let _val3 = !this.utils.isNumber(e)
				_val = _val1 || _val2 || _val3
				switch (state) {
					//扣运费
					case "freight":

						break
						// 应付
					case "paid":

						break
						// 付款金额
					case "pay":
						if (parseInt(e) > item.freightIngPayable - item.freightEdPayable) {
							_val = true
						}
						break
				}
				return _val

			},
			closeModel() {
				this.freightAlert = false;
				this.payAlert = false;
			}

		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		background: #F5F6FA;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 10rpx 30rpx;
		position: relative;

		.title {
			color: #9698A2;
		}

		.title-black {
			color: #333;
		}
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 12px;
	}

	.transaction {
		background-color: #FFFFFF;
		margin: 10px;
		padding-bottom: 10px;
		border-radius: 20px;

		.type {
			display: inline-block;
			font-size: 10px;
			padding: 1px 3px;
			border-radius: 50%;
			width: 19px;
			height: 19px;
			line-height: 19px;
		}

		.type.send {
			color: #22C572;
			background: #E9F8F0;
		}

		.type.put {
			color: #22C572;
			background: #E9F8F0;
		}

		.weightnotes {
			display: inline-block;
			border: 1px solid #CDCDCD;
			padding: 5px;
			font-size: 10px;
			margin-left: 3px;
		}

		.deductfreight,
		.payfreight {
			width: 75px;
			height: 33px;
			line-height: 33px;
			font-size: 14px;
			background: #fff;
			border: 1px solid #CDCDCD;
			border-radius: 30px;
			text-align: center;
			margin: 0 10px;
		}

		.payfreight {
			margin-right: 0;
		}
	}

	.line {
		display: inline-block;
		padding: 5px;
		position: relative;
		font-size: 17px;
	}

	.line.active {
		font-size: 19px;
		font-weight: 900;
	}

	.line.active:after {
		content: '';
		display: block;
		position: absolute;
		width: 38px;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		border-bottom: 1px solid #22C572;
	}

	.cu-tag.badge {
		right: 26rpx;
	}

	.cu-item {
		height: 80rpx;
		display: inline-block;
		line-height: 80rpx;
	}

	.search-form {
		background: #F5F6F9;
		padding-left: 20rpx;
	}

	.title-tip {
		color: #E63113;
		text-align: right;
	}

	.tag1 {
		background: #F5F6F9;
		padding: 5px;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 3px;
		margin: 3px;
	}

	.tag {
		background: #F5F6F9;
		padding: 7px 12px;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 15px;
		margin: 3px;
	}

	.tag-bule {
		background: #EBEEFA;
		color: #5C76DF;
	}

	.tag-green {
		background: #C6F7BC;
		color: #065112;
	}

	.tag-yellow {
		background: #F9F2EA;
		color: #BE9C69;
	}

	.tag-red {
		background: #FEECE6;
		color: #FE6430;
	}

	.text-white {
		color: #fff;
	}

	.text-white text {
		position: relative;
		z-index: 2;
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}

	.center {
		margin-bottom: 100px;
	}

	.guess-section {
		padding-bottom: 100upx;
		display: flex;
		flex-wrap: wrap;
		padding: 30upx;
		background: #fff;
		margin: 10px;
		border-radius: 6px;

		.type {
			border-radius: 10px;
			padding: 5px;
			wdith: 22px;
			height: 22px;
			line-height: 14px;
			font-size: 12px;
		}

		.type.send {
			background: #22C572;
			color: #fff;
		}

		.type.put {
			background: #FD714F;
			color: #fff;
		}

		.businessnumber {
			font-size: 16px;
			font-weight: 600;
		}

		.consigner {
			font-size: 12px;
		}

		.time {
			color: #878C9C;
		}

		.goods {
			font-size: 12px;
		}

		.goodsstatus {
			background: #F9F9FA;
			color: #9698A2;
			padding: 10px 0;
			padding-left: 47px;
			margin: 10px 0;
		}

		.del {
			width: 60px;
			height: 33px;
			line-height: 33px;
			font-size: 14px;
			background: #fff;
			border: 1px solid #CDCDCD;
			border-radius: 30px;
			text-align: center;
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	.introduce-section .title {
		font-size: 17px;
		font-weight: bold;
		height: 40px;
		line-height: 40px;
		flex: 2.5;
		border-bottom: 1px solid #EEEEEE;
	}

	.introduce-section .address {
		color: #878C9C;
		font-size: 12px;
		padding: 10px 0 10px;
	}

	.introduce-section .price {
		padding: 10px 0 10px;
		color: #FD714F;
		font-size: 19px;
		font-weight: 700;
	}

	.introduce-section .guess-item {
		border-radius: 10px;
		background: #fff;
		padding: 0upx 30upx 20upx;
		margin: 8px;
		border-bottom: 1px solid #ccc;
	}

	/* 销售信息 */
	.introduce-section {
		.title-tip {
			flex: 1;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			font-size: 26upx;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			view {
				flex: 1;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20px 0;
	}

	.btn {
		width: 90%;
		background: #22C572;
		color: #fff;
		border-radius: 30px;
	}

	.btn:after {
		border: none;
	}

	.freightAlert-warp {
		padding: 0 60rpx 80rpx 60rpx;
		font-size: 26rpx;
		/* height: 400rpx; */
	}

	.row {
		margin: 26rpx 0;
	}

	.uview-border {
		border-bottom: 1px solid #E8E9ED;
	}

	.freightAlert-model {
		.freightAlert-row {
			display: flex;
			justify-content: center;
			position: relative;

			.close {
				position: absolute;
				right: 20rpx;
				top: 0;
				bottom: 0;
				margin: auto;

			}

			.title {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				line-height: 48px;
			}
		}

		.red-tip {
			color: red;
			margin-top: 20rpx;
		}

		.freightAlert-row2,
		.freightAlert-row4 {
			display: flex;
			justify-content: space-between;

			.text {
				display: flex;
				align-items: center;
			}
		}
	}

	.payAlert {
		/* height: 800rpx; */
	}

	.unpaid,
	.paid {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.cumulative-style {
		justify-content: flex-end;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.noimg {
		margin-top: 20rpx;
		text-align: center;
	}

	.img {
		margin-top: 20rpx;
	}
</style>