wx_oms/oilDistribution/distribute/distribute.vue

<template>
	<view class="oil_body">
		<view class="oil_header">请选择分油类型</view>
		<view class="sele_car">
			<view @tap="seleFn(1)"
				:style=" {zIndex: seleindex!=1?  '1':'',transform:seleindex!=1? 'scale(0.9)':'',backgroundColor: seleindex!=1?'#66AFFF':''} "
				class="car_itme car_itme_left">
				<view v-if="seleindex==1" style="width: 100%;" class="car_body">
					<view class="car_itme_title">
						接收方:个人
					</view>
					<view class="img">
						<view style="width: 79rpx; height: 81rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/cargs.png"></image>
						</view>
						<view style="width: 61rpx; height: 34rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/arrow.png"></image>
						</view>
						<view style="height: 81rpx;width: 73rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/carUser.png"></image>
						</view>
					</view>
					<view class="car_itme_title">企业对个人</view>
				</view>
				<view v-if="seleindex!=1" style="left: 0; position: absolute;" class="hideTip">
					接收方:个人
					<image style="height: 141rpx; width: 100rpx; margin-top: 31rpx;" src="@/static/carsz.png"></image>
				</view>
			</view>
			<view @tap="seleFn(2)"
				:style="{zIndex: seleindex!=2?  '1':'',transform:seleindex!=2? 'scale(0.9)':'',backgroundColor: seleindex!=2?'#66AFFF':''}"
				class="car_itme car_itme_right">
				<view v-if="seleindex==2" style="width: 100%;" class="car_body">
					<view class="car_itme_title">
						接收方:企业
					</view>
					<view class="img">
						<view style="width: 79rpx; height: 81rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/cargs.png"></image>
						</view>
						<view style="width: 61rpx; height: 34rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/arrow.png"></image>
						</view>
						<view style="width: 79rpx; height: 81rpx;">
							<image style="width: 100%;height: 100%;" src="@/static/cargs.png"></image>
						</view>
					</view>
					<view class="car_itme_title">企业对企业</view>
				</view>
				<view v-if="seleindex!=2" style="right: 0; position: absolute;" class="hideTip">
					接收方:企业
					<image style="height: 141rpx; width: 100rpx; margin-top: 31rpx;" src="@/static/carsz.png"></image>
				</view>
			</view>
		</view>

		<view class="sele_Bar">
			<view :style="{transform: barIndex==2?  'translateX( calc(100% - 20rpx)   )' :'' ,background:barIndex==2?  '#EC4645' :'' }"
				class="move_item"></view>
			<view @tap="seleBarFn(1)" :style="{color:barIndex==1? 'white' : ''}" class="sele_Bar_item">分油</view>
			<view @tap="seleBarFn(2)" :style="{color:barIndex==2? 'white' : ''}" class="sele_Bar_item">圈回</view>
		</view>
		<view class="oli_list">
			<view @tap='jump(1)' class="oli_list_item">
				<view class="oli_list_item_body">
					<view class="oli_list_item_body_left">
						<view class="oli_list_item_body_left_img">
							<image style="width: 100%; height: 100%;" src="@/static/fyjt.png"></image>
						</view>
						<view style="font-size: 28rpx;color: #333333;">
							<view v-if="sendData!=null">
								<view>{{sendData.name}}</view>
								<view style="margin-top: 26rpx;color: #999999;">可用余额：¥{{ sendData.balance }}</view>
							</view>
							<view v-if="sendData==null">发起方</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="20" color="#bbbbbb"></uni-icons>
					</view>
				</view>
			</view>
			<view @tap='jump(2)' class="oli_list_item">
				<view class="oli_list_item_body">
					<view class="oli_list_item_body_left">
						<view class="oli_list_item_body_left_img">
							<image style="width: 100%; height: 100%;" src="@/static/jsjt.png"></image>
						</view>
						<view style="font-size: 28rpx;color: #333333;">
							<view style="font-size: 28rpx;color: #333333;">
								<view v-if="receiveData!=null">
									<view>
										{{receiveData.name?receiveData.name?receiveData.name:'未设置':receiveData.userName?receiveData.userName:'未设置'}}
									</view>
									<view style="margin-top: 26rpx;color: #999999;">可用余额：¥{{receiveData.balance }}
									</view>
								</view>
								<view v-if="receiveData==null">接收方</view>
							</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="20" color="#bbbbbb"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="oilInput">
			<text class="oliPrice" style=""> 金额 </text>
			<view
				style="flex: 1; background-color: #F1F1F1; margin-left: 23rpx; height: 74rpx;align-items: center; display: flex; padding: 0 33rpx ;">
				<input @input="inputFn" type="digit" v-model="postData.disAmount" style="flex: 1; margin-left: 47rpx; "
					placeholder="请输入金额" />
				<view
					@tap=' barIndex==2? postData.disAmount = receiveData.balance : postData.disAmount = sendData.balance'
					class="oilInputMax">MAX</view>
			</view>
		</view>
		<button @tap='postFn' :style="{background:barIndex==2?  '#EC4645' :''}"
			class="oliButten">{{barIndex==2?'圈回':'分油'}}</button>

		<popup @confirmFn='confirmFn' @closeFn='closeFn' v-model="iShow.seting">
			<view slot="coment">
				<view class="tiptext"> 是否{{barIndex==2?'圈回':'分油'}}给该司机/企业?</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import oilDistribution from '@/api/oilDistribution'
	import popup from '@/components/customPopup'
	export default {
		components: {
			popup
		},
		data() {
			return {
				postData: {
					disCompanyId: '',
					disTagType: '',
					disType: '',
					customerId: '',
					companyId: '',
					disAmount: ''
				},
				iShow: {
					seting: false
				},
				sendData: null,
				receiveData: null,
				seleindex: 1,
				barIndex: 1,
				transition: {
					zIndex: '1',
					// height: '323rpx',
					// width: '397rpx',
					transform: "scale(0.9)",
					backgroundColor: '#66AFFF'
				}
			}
		},
		onLoad() {
			let that = this
			uni.$on('driverfn', function(e) {
				console.log(e, '司机参数更新')
				that.receiveData = e
				that.postData.customerId = e.id
				that.postData.companyId = ''
				that.postData.disTagType = e.companyCustomerNature == 0 ? 'OUTSIDE' : 'ESELF_SUPPORT'
			})
			uni.$on('company', function(e) {
				console.log(e.type, e)
				that.receiveData = null
				if (e.type == 'send') {
					that.sendData = e
					that.postData.disCompanyId = e.id
				} else if (e.type == 'receive') {
					that.receiveData = e
					that.postData.companyId = e.id
					that.postData.customerId = ''
					that.postData.disTagType = 'SUBCOMPANY'
				}
				console.log(e, '公司参数更新')
			})
		},
		methods: {
			inputFn(e) {
				// this.postData.disAmount = Number(this.postData.disAmount).toFixed(2)
				if (this.postData.disAmount.indexOf('.') != -1) {
					if (this.postData.disAmount.split('.')[1].length > 2) {
						uni.showToast({
							title: '最多保留小数点后两位',
							icon: 'none'
						})
						this.$nextTick(function() {
							this.postData.disAmount = Number(this.postData.disAmount).toFixed(2)
							console.log(this.postData.disAmount)
						})
					}
				}
			},
			confirmFn() {
				if (this.barIndex == 2) {
					if (Number(this.receiveData.balance) == 0) {
						uni.showToast({
							title: '圈回对象账户不能为零',
							icon: "none"
						})
						return
					}
					if (Number(this.postData.disAmount) > Number(this.receiveData.balance)) {
						uni.showToast({
							title: '输入金额不能大于圈回对象总余额',
							icon: "none"
						})
						return
					}
				} else {
					if (Number(this.postData.disAmount) > Number(this.sendData.balance)) {
						uni.showToast({
							title: '输入金额不能大于总余额',
							icon: "none"
						})
						return
					}
					if (Number(this.sendData.balance) == 0) {
						uni.showToast({
							title: '转账方金额不能为零',
							icon: "none"
						})
						return
					}
				}
				if (Number(this.postData.disAmount) == 0) {
					uni.showToast({
						title: '操作金额不能为零',
						icon: "none"
					})
					return
				}
				// if (this.seleindex == 2 && this.sendData.id == this.receiveData) {
				// 	uni.showToast({
				// 		title: '双方账户不能重复',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				let that = this
				this.postData.disType = this.barIndex == 1 ? 1 : -1
				console.log(this.postData)
				oilDistribution.oilDistributions(that.postData).then(res => {
					if (res.code !== 20000) return
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.iShow.seting = false
					setTimeout(() => {
						uni.redirectTo({
							url: '../index/index'
						})
					}, 500)
				});
			},
			closeFn() {
				this.iShow.seting = false
				console.log('取消')
			},
			postFn() {
				if (this.sendData == null || this.receiveData == null) {
					return
				}
				if (this.postData.disAmount == '' || this.postData.disAmount == 0) {
					uni.showToast({
						title: '金额不能为零',
						icon: 'none'
					})
					return
				}
				this.iShow.seting = true
			},
			jump(e) {
				switch (e) {
					case 1:
						// clc 写  clc 注
						//  uni.navigateTo({
						// 	url: '/driverManagement/company/company?jsData=' + JSON.stringify({
						// 		type:'send',
						// 		data:''
						// 	})
						// })
						uni.navigateTo({
							url: '../newSeleCompany/newSeleCompany?jsData=' + JSON.stringify({
								type: 'send',
								data: ''
							})
						})
						break
					case 2:
						// uni.navigateTo({
						// 	url: '../newSeleDirver/newSeleDirver'
						// })
						if (this.sendData == null && this.seleindex == 1) {
							uni.showToast({
								title: '请先选择企业',
								icon: 'none'
							})
							return
						}
						if (this.seleindex == 1) {
							uni.navigateTo({
								url: '../newSeleDirver/newSeleDirver?jsData=' + JSON.stringify(this.sendData),
								fail(e) {
									console.log(e)
								}
							})
							// uni.navigateTo({
							// 	url: '/driverManagement/seleDriver/seleDriver?jsData=' + JSON.stringify(this
							// 		.sendData)
							// })
						} else {
							// console.log(this.sendData,'66666')
							// uni.navigateTo({
							// 	url: '../newSeleCompany/newSeleCompany?jsData=' + JSON.stringify(
							// 	{
							// 		type:'receive',
							// 		id:this.sendData.id
							// 	})
							// })
							uni.navigateTo({
								url: '../newSeleCompany/newSeleCompany?jsData=' + JSON.stringify({
									type: 'receive',
									data: this.sendData
								}),
								fail(e) {
									console.log(e)
								}
							})
						}
						break
				}
			},
			seleBarFn(e) {
				this.barIndex = e
			},
			seleFn(e) {
				this.seleindex = e
				this.postData.disAmount = ''
				this.receiveData = null

			}
		}
	}
</script>

<style>
	.tiptext {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		text-align: center;
		margin: 64rpx 0;
	}

	.oliButten {
		margin-top: 48rpx;
		background: #2866FF;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.oilInputMax {
		background: #BBBBBB;
		border-radius: 21rpx;
		padding: 11rpx 17rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 25rpx;

	}

	.oliPrice {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;

	}

	.oilInput {
		height: 133rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		padding: 0 20rpx;
		align-items: center;
		margin-top: 20rpx;
	}

	.car_itme_title {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.oli_list_item_body_left_img {
		width: 80rpx;
		height: 73rpx;
		margin-right: 33rpx;
	}

	.oli_list_item_body_left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.oli_list_item_body {
		border-bottom: 1px #F0F2FF solid;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		/* padding: 20rpx 0; */

	}

	.oli_list_item {
		flex: 1;
		padding: 0 20rpx;
	}

	.oli_list {
		height: 333rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.img {
		width: 100%;
		height: 81rpx;
		margin-top: 43rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 83rpx;
	}

	.car_body {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.move_item {
		position: absolute;
		left: 10rpx;
		width: 50%;
		height: 60rpx;
		background: #2866FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 0;
		transition: all .3s;
	}

	.sele_Bar_item {

		/* width: 287rpx; */
		flex: 1;
		height: 60rpx;
		/* background: #2866FF; */
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 1;
		transition: color .4s;
	}

	.sele_Bar {
		/* background-color: #18B566; */
		margin: 31rpx 40rpx;
		padding: 10rpx;
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.hideTip {
		/* background-color: #E43D33; */
		width: calc(100% - (882rpx - (100vw - 62rpx)));
		/* width: calc( 100vw  - 62rpx - 441rpx ); */
		height: 100%;
		padding: 29rpx 38rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.car_itme_right {
		right: 0;
		/* 	top:0;
		bottom: 0;
		margin: auto; */
	}

	.car_itme_left {
		left: 0;
		/* 	top:0;
		bottom: 0;
		margin: auto; */
	}

	.car_itme {
		/* opacity: .3; */
		height: 359rpx;
		width: 441rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		/* transition: width .4s,height .4s ,background .4s,z-index 0s ; */
		transition: transform .4s, background .8s;
		z-index: 2;
		background-color: #2866FF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		color: white;
		display: flex;
		justify-content: center;
	}

	.sele_car {
		margin-top: 25rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		height: 359rpx;
	}

	.oil_body {
		padding: 42rpx 31rpx;
	}

	.oil_header {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
</style>