wx_oms/oilAccount/page/accountRecharge/add.vue

<template>
	<!-- 布局 flex 组件 view -->
	<view class="addDiver_body">
		<view class="sele_Bar">
			<view :style="{transform: barIndex==2?  'translateX(100%)':barIndex==3?  'translateX(200%)' :'' ,background:barIndex==2?  '#EC4645' :barIndex==3?'#13ce66':'' }" 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 @tap="seleBarFn(3)" :style="{color:barIndex==3? 'white' : ''}" class="sele_Bar_item">充返</view>
		</view>
		<!--  卡片  -->
		<view class="addDiver_card">
			<uni-list :border="false">
				<uni-list-item @click="isShowFn('companyAccount')" link>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						油站账户
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{ postData.accountName?postData.accountName: '请选择油站账户' }}
					</view>
				</uni-list-item>
				<uni-list-item @click="isShowFn('companyAccountBank')" link v-show="barIndex!=3">
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						油站公司
					</view>
					<view slot="body" class="list_right list_nosele textOverflow">
						{{postData.companyName?postData.companyName:'选择账户后自动带出'}}
					</view>
				</uni-list-item>
				<view v-if="barIndex==1&&postData.siteChannelAccountId" style="padding: 0 16rpx;">
					<view class="flex_jw">
						<view>账户余额</view>
					<view>{{postData.balance?postData.balance:''}}</view>
					</view>
					<view class="flex_jw">
						<view>待审核充值金额</view>
					<view>{{postData.theRemainingAmount?postData.theRemainingAmount:''}}</view>
					</view>
				</view>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						交易金额
					</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input type="digit" @input="inputFn('transactionAmount')" v-model="postData.transactionAmount"
							placeholder="请输入交易金额" class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-list-item v-show="barIndex==3">
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
						</image>
						交易摘要
					</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input type="digit" v-model="postData.reverseRemark"
							placeholder="请输入交易摘要" class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-datetime-picker @change='pickerClick' type="daterange" 
					rangeSeparator="至" v-model="rebateTimeSlot">
					<uni-list-item v-show="barIndex==3" link>
						<view class="list_header" slot="header">
							<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix">
							</image>
							返利时间段
						</view>
						<view style="" slot="body" class="list_right">
							<view slot="body" :style="{color:postData.rebateStartTime?'#333333':' '}"
								class="list_right list_nosele">
								{{postData.rebateStartTime?postData.rebateStartTime+','+postData.rebateEndTime:'请选择返利时间段'}}
							</view>
						</view>
					</uni-list-item>
				</uni-datetime-picker>
				<uni-list-item  v-show="barIndex==3" link>
					<view class="list_header" slot="header">线下交易凭证</view>
					<view @click="clickfn" slot="body" :style="{color:postData.offlineTransactionProof?'#333333':''}"
						class="list_right list_nosele">
						{{postData.offlineTransactionProof?'已上传':'请上传'}}
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 底部按钮 -->
		<view class="list_footer">
			<button :style="{background:barIndex==2?  '#EC4645':barIndex==3? '#13ce66':'' }" @tap="postFn"
				class="list_butten ">{{barIndex==1?'确认调拨':barIndex==2?'确认回拨':'确认充返'}} {{postData.transactionAmount||''}}</button>
		</view>
		<!-- 企业打款账户选择器 -->
		<cpicker ref ='cpicker'  @localSeach='localSeach' @chargeChange='companyAccountConfirm' v-model="isShow.companyAccount" />
		<!-- <u-select v-model="isShow.companyAccount" :list="companyAccountData" @confirm="companyAccountConfirm"> 
		</u-select>
		</u-select>-->
	</view>
</template>

<script>
	import tool from '@/utils/tool'
	import account from '@/api/oilAccount'
	import md5 from 'js-md5'
	import cpicker from '../../components/picker.vue'
	import utils from '@/utils/encode'
	export default {
		components: {
			cpicker
		},
		data() {
			return {
				barIndex: 1,
				companyAccountData: [],
				companyAccountBankData: [],
				oilCompanyData: [],
				oilCompanyBankData: [],
				isShow: {
					picker: false,
					companyAccount: false,
					companyAccountBank: false,
					oilCompanyBank: false
				},
				disabled: false,
				rebateTimeSlot:[],
				imageValue:[],
				postData: {
					accountName:'',
					companyName:'',
					receivingCompanyId: "",//收款公司id
					reverseRemark: "", //交易说明
					siteChannelAccountId: "" ,//渠道账户id
					transactionAmount: "" ,//交易金额
					transactionState: "0" ,//交易状态
					transactionType: "", //交易类型
					createSource: "OMS-MINIAPP",
					balance:'',
					totalRechargeAmount:'',
					rebateStartTime:'',
					rebateEndTime:'',
					offlineTransactionProof:''
				}
			}
		},
		created() {
			this.init()
		},
		onLoad() {},
		methods: {
			localSeach(e){
				let a = this.companyAccountData.filter(item=>item.label.indexOf(e)!==-1);
				if(a.length){
					this.$refs.cpicker.upDateList(a)
				}
			},
			siteChannelAccountIdFn(e){
				// console.log(this.companyAccountData.filter(item=>item.siteChannelAccountId==e),'---')
			},
			seleBarFn(e) {
				this.barIndex = e
				if(this.barIndex!=3){
					this.postData.reverseRemark = ''
					this.postData.rebateStartTime = ''
					this.postData.rebateEndTime = ''
					this.postData.offlineTransactionProof = ''
				}
			},
			pickerClick(time) {
				this.postData.rebateStartTime = time[0]
				this.postData.rebateEndTime = time[1]
			},
			isShowFn(e) {
				this.isShow[e] = !this.isShow[e]
				// switch (e) {
				// 	case 'companyAccount':
				// 		this.isShow[e] = !this.isShow[e]
				// 		break
				// 	case 'companyAccountBank':
				// 		if (this.postData.paymentCompanyIds.length !== 0) {
				// 			this.isShow[e] = !this.isShow[e]
				// 		} else {
				// 			uni.showToast({
				// 				title: '请先选择企业打款账户',
				// 				icon: 'none'
				// 			})
				// 			return
				// 		}
				// 		break
				// 	case 'oilCompanyBank':
				// 		if (this.postData.companyName && this.postData.companyId) {
				// 			this.isShow[e] = !this.isShow[e]
				// 		} else {
				// 			uni.showToast({
				// 				title: '请先选择企业打款账户',
				// 				icon: 'none'
				// 			})
				// 			return
				// 		}
				// 		break
				// }
			},
			//图片上传方法
			clickfn(e) {
				if (typeof e !== "object") {
					this.postData.offlineTransactionProof = e;
					uni.showToast({
						title: '上传成功'
					})
					return
				}
				tool.chooseImage(this.clickfn)
			},
			companyAccountConfirm(e) {
				this.clearFn(this.postData,['accountName','siteChannelAccountId','receivingCompanyId','companyName','theRemainingAmount','totalRechargeAmount'])
				let a = this.companyAccountData.filter(item=>item.id==e.id);
				if(a.length&&a.length==1){
					this.postData.totalRechargeAmount = a[0].totalRechargeAmount;
					account.getBySiteCompanyId(a[0].siteCompanyInfoId).then(res=>{
						if(res.data.length){
							this.postData['receivingCompanyId'] = res.data[0]['siteCompanyId'];
							this.postData['accountName'] = e.label;
							this.postData['siteChannelAccountId'] = a[0]['value'];
							account.getLikeBySiteComNameLimitNew({id:a[0].siteCompanyInfoId}).then(res=>{
								this.postData.companyName = res.data[0]['companyName'];
								this.postData.balance = res.data[0]['balance']
								this.postData.theRemainingAmount = res.data[0]['theRemainingAmount']
							})
						}else{
							uni.showToast({
								title:'未绑定油站公司',
								icon:'none'
							})
						}
					});
				}else{
					uni.showToast({
						title:'数据错误',
						icon:'none'
					})
				}
				
				// account.getBySiteCompanyId
			},
			clearFn(e, w) {
				if (e && w) {
					w.forEach(item => {
						e[item] = ''
					})
				}
			},
			init() {
				this.getAccounts()
			},
			getAccounts() {
				account.getChannelAccountMapsNew().then(res => {
					if (res.code == 20000) {
						this.companyAccountData = res.data;
						this.companyAccountData.forEach(item => {
							item['label'] = item.value;
							item.value = item.id
						})
					}
				})
			},
			confirm(e) {
				console.log('confirm', e)
			},
			inputFn(e) {
				console.log(e)
				if (this.postData[e].indexOf('.') != -1) {
					if (this.postData[e].split('.')[1].length > 2) {
						uni.showToast({
							title: '最多保留小数点后两位',
							icon: 'none'
						})
						this.$nextTick(function() {
							this.postData[e] = Number(this.postData[e]).toFixed(2)
						})
					}
				}
			},
			postFn() {
				let that = this
				let olicheck = null
				let check = null
				let checkPage = {}
				if(this.barIndex==3){
					checkPage = {
						siteChannelAccountId: {
							tacitly: '',
							WrongText: '请完善油站账户信息'
						},
						transactionAmount: {
							tacitly: '',
							WrongText: '交易金额不能为空'
						},
						reverseRemark: {
							tacitly: '',
							WrongText: '交易摘要不能为空'
						},
						rebateStartTime: {
							tacitly: '',
							WrongText: '返利时间不能为空'
						},
					}
				}else{
					checkPage = {
						receivingCompanyId: {
							tacitly: '',
							WrongText: '请完善油站公司信息'
						},
						siteChannelAccountId: {
							tacitly: '',
							WrongText: '请完善油站账户信息'
						},
						transactionAmount: {
							tacitly: '',
							WrongText: '交易金额不能为空'
						},
					}
				}
				check = tool.checkFn(this.postData, [], checkPage)
				if (!check.result) {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
					return
				}
				
			
				if(this.barIndex==3){
					this.saveFn()
				}else if(this.barIndex==1){
					if(Number(this.postData.transactionAmount)>Number(this.postData.balance)){
						uni.showModal({
							title: '提示',
							content: '余额不足，是否依然提交?',
							success: function (res) {
								if (res.confirm) {
									that.saveFn()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						this.saveFn()
					}
				}else{
					if(Number(this.postData.transactionAmount)>Number(this.postData.totalRechargeAmount)){
						uni.showModal({
							title: '提示',
							content: '余额不足，是否依然提交?',
							success: function (res) {
								if (res.confirm) {
									that.saveFn()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						this.saveFn()
					}
				}
			},
			saveFn() {
				this.postData['transactionType'] = this.barIndex==1?'DISPATCH': this.barIndex==3?'RECHARGE_REBETE':'CALLBACK'
				account.saveNew(this.postData).then(res => {
					(res.code == 20000) && uni.showToast({
						title: '操作成功',
						icon: 'none'
					}) && (setTimeout(() => {
						uni.navigateBack()
					}, 500))
				})
			},
			open() {
				this.show = !this.show
			},
			change() {
				this.aboutEnterprise.shareCompanyQuota = this.switchOpen ? 1 : 0
				console.log(this.switchOpen)
			},
			radioChange(e) {
				console.log(e)
			},
		}
	}
</script>
<style scoped>
	.move_item {
		position: absolute;
		left: 10rpx;
		width: 33%;
		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;
	}

	.textOverflow {
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	>>>.uni-easyinput__content {
		border-radius: 15px !important;
		margin-top: 15rpx;
	}
</style>
<style lang="scss">
	.cue {
		color: #666666;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.summary {
		padding: 12px 0;
	}

	.clear {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		display: flex;
		align-items: center;
	}

	.yuan {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.popup_body {
		padding: 20rpx;
	}

	.list_right_input {
		font-size: 28rpx;
	}

	.list_footer {
		padding-bottom: 57rpx;
		margin-top: 57rpx;
	}

	.list_butten {
		// height: 100rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 36pxr;
	}

	.fg {
		.uni-list-item__container {
			padding-bottom: 0px !important;
		}
	}

	.list_nosele {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.uni-icon-wrapper {
		padding: 0px !important;
	}

	.uni-list-item__container {
		padding: 12px 0 !important;
	}

	.tiao {
		width: 8rpx;
		height: 34rpx;
		background: #2866FF;
	}

	.card_title_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 10rpx;
	}

	.card_title {
		display: flex;
		border-bottom: 1px solid #F0F0F0;
		align-items: center;
		padding-bottom: 17rpx;
		height: 86rpx;
	}

	.list_header {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 16px;
		position: relative;
		height: fit-content;
	}

	.list_right_input {
		width: 100%;
		color: #333333;
		text-align: end !important;
		font-size: 28rpx;
		text-align: right !important;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.list_right {
		flex: 1;
		// display: flex;
		// justify-content: flex-end;
		text-align: end;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 20rpx;
	}
	.flex_jw{
		display: flex;
		justify-content:space-between;
	}

	.addDiver_body {
		padding: 0 40rpx;
	}

	.addDiver_card {

		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 20rpx;
		margin-top: 38rpx;
		overflow: hidden;
		/* padding-top: 19rpx; */
		padding: 0rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}
</style>