571 lines
14 KiB
Vue
571 lines
14 KiB
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>
|