You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
593 lines
16 KiB
593 lines
16 KiB
<template> |
|
<!-- 布局 flex 组件 view --> |
|
<view class="addDiver_body"> |
|
<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="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.paymentCompanyIds[0]? companyAccountData.filter(item=>item.value== postData.paymentCompanyIds[0])[0].label :'请选择企业打款账户'}} |
|
</view> |
|
</uni-list-item> |
|
<uni-list-item @click="isShowFn('companyAccountBank')" 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.paymentCompanyIds[1]? companyAccountBankData.filter(item=>item.value== postData.paymentCompanyIds[1])[0].label :'请选择企业打款银行'}} |
|
</view> |
|
</uni-list-item> |
|
</uni-list> |
|
</view> |
|
<view class="addDiver_card"> |
|
<uni-list :border="false"> |
|
|
|
<uni-list-item @click="isShow.picker=true" 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.companyName?postData.companyName :'请选择油站公司'}} |
|
</view> |
|
</uni-list-item> |
|
<uni-list-item @click="isShowFn('oilCompanyBank')" 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.bankCardName?postData.bankCardName :'请选择油站公司银行'}} |
|
</view> |
|
</uni-list-item> |
|
</uni-list> |
|
</view> |
|
<view class="addDiver_card"> |
|
<uni-list :border="false"> |
|
<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> |
|
</view> |
|
<!-- 卡片 --> |
|
<view class="addDiver_card"> |
|
<view class="summary"> |
|
<view class="list_header" style="margin-bottom: 12px;"> |
|
<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix"> |
|
</image> |
|
交易摘要 |
|
</view> |
|
<uni-easyinput :autoHeight="true" type="textarea" v-model="postData.reverseRemark" placeholder="请输入交易摘要"></uni-easyinput> |
|
</view> |
|
</view> |
|
<view class="addDiver_card"> |
|
<uni-list :border="false"> |
|
<uni-list-item 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 v-if="barIndex==2" class="addDiver_card"> |
|
<uni-list :border="false"> |
|
<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 v-model="postData.operationCode" placeholder="请输入操作码" class="list_right_input" /> |
|
<!-- <text style="color: #007AFF;" v-if="!countdown" @click="getCode">获取操作码</text> |
|
<text v-else > |
|
{{`${postData.operationCode } `}} |
|
<text class="codeTip">{{`${countdown}秒后失效`}}</text> |
|
</text> --> |
|
</view> |
|
</uni-list-item> |
|
</uni-list> |
|
</view> |
|
<view v-if="barIndex==2" class="cue"> |
|
请向财务或技术部门索取操作码。<br /> |
|
注意：操作码时间有限，超过时间，请重新获取 |
|
</view> |
|
<!-- 底部按钮 --> |
|
<view class="list_footer"> |
|
<button @tap="postFn" class="list_butten ">保存</button> |
|
</view> |
|
<!-- 企业打款账户选择器 --> |
|
<u-select v-model="isShow.companyAccount" :list="companyAccountData" @confirm="companyAccountConfirm"> |
|
</u-select> |
|
<!-- 企业打款银行选择器 --> |
|
<u-select v-model="isShow.companyAccountBank" :list="companyAccountBankData" @confirm="companyAccountBankConfirm"></u-select> |
|
<!-- 油站公司选择器 --> |
|
<cpicker ref ='cpicker' @localSeach='localSeach' @chargeChange='chargeChange' v-model="isShow.picker" /> |
|
<u-select v-model="isShow.oilCompanyBank" :list="oilCompanyBankData" @confirm="oilCompanyBankConfirm"> |
|
</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' |
|
export default { |
|
components: { |
|
cpicker |
|
}, |
|
data() { |
|
return { |
|
barIndex:1, |
|
countdown:0, |
|
companyAccountData: [], |
|
companyAccountBankData: [], |
|
oilCompanyData: [], |
|
oilCompanyBankData: [], |
|
isShow: { |
|
picker: false, |
|
companyAccount: false, |
|
companyAccountBank: false, |
|
oilCompanyBank: false |
|
}, |
|
timer:null, |
|
disabled: false, |
|
postData: { |
|
companyName:'', |
|
offlineTransactionProof:'',//凭证 |
|
bankCardName: "", //银行卡账户名 |
|
bankCardNo: "", //银行卡号 |
|
bankDeposit: "", //开户所属银行 |
|
bankName: "", //开户行银行名称 |
|
companyId: "", //公司ID |
|
createSource: "OMS-MINIAPP", |
|
interBankCode: null, //联行号 |
|
operationCode: "", //操作码 |
|
paymentCompanyIds: [], //付款银行信息ID（内部银行信息ID） |
|
reverseRemark: "", //交易摘要 |
|
transactionAmount: "", //交易金额 |
|
// 交易类型 |
|
// RECHARGE：充值 |
|
// RECHARGE_REBETE：充值返利 |
|
// CONSUME_REBATE: 消费返利 |
|
// TURN 圈回(暂无) |
|
transactionType: "RECHARGE" |
|
} |
|
} |
|
}, |
|
created() { |
|
this.init() |
|
}, |
|
onLoad() {}, |
|
onUnload() { |
|
(!this.timer)&&clearInterval(this.timer); |
|
}, |
|
methods: { |
|
seleBarFn(e) { |
|
this.barIndex = e |
|
}, |
|
localSeach(e){ |
|
account.getLikeBySiteComNameNew({companyName:e}).then(res=>{ |
|
this.$refs.cpicker.upDateList(res.data) |
|
}) |
|
console.log('seach') |
|
}, |
|
countdownFn(e){ |
|
this.countdown = e |
|
this.timer = setInterval(()=>{ |
|
if(!this.countdown){ |
|
clearInterval(this.timer); |
|
this.timer = null; |
|
this.operationCode = '' |
|
}else{ |
|
this.countdown-=1 |
|
} |
|
},1000) |
|
}, |
|
getCode(){ |
|
account.getRechargeCode({type:3}).then(res=>{ |
|
(res.code==20000)&&(this.postData.operationCode = res.data.code); |
|
this.countdownFn(60) |
|
}) |
|
}, |
|
isShowFn(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) |
|
}, |
|
oilCompanyBankConfirm(e) { |
|
let a = this.oilCompanyBankData.filter(item => item.value == e[0].value); |
|
(a.length)&&({ |
|
bankCardName:this.postData.bankCardName, |
|
bankCardNo:this.postData.bankCardNo, |
|
bankDeposit:this.postData.bankDeposit, |
|
bankName:this.postData.bankName, |
|
interBankCode:this.postData.interBankCode |
|
}=a[0]); |
|
|
|
console.log(a,'11111') |
|
}, |
|
//企业打款银行回调 |
|
companyAccountBankConfirm(e) { |
|
let a = this.companyAccountBankData.filter(item => item.value == e[0].value); |
|
(a.length)&&(this.postData.paymentCompanyIds.push(a[0].value)) |
|
console.log(this.postData.paymentCompanyIds,this.companyAccountBankData,'companyAccountBankConfirm'); |
|
}, |
|
// 企业打款账户回调 |
|
companyAccountConfirm(e) { |
|
this.companyAccountBankData = []; |
|
this.postData.paymentCompanyIds = []; |
|
let a = this.companyAccountData.filter(item => item.value == e[0].value); |
|
(a.length) && (this.companyAccountBankData = a[0].children)&&this.postData.paymentCompanyIds.push(a[0].value); |
|
console.log(this.postData.paymentCompanyIds,this.companyAccountBankData,'companyAccountConfirm'); |
|
}, |
|
//油站公司选择器回调 |
|
chargeChange(e) { |
|
if (e) { |
|
this.oilCompanyBankData = []; |
|
this.clearFn(this.postData,['bankCardName','bankCardNo','bankDeposit','bankName','interBankCode']); |
|
this.postData.companyId = e['id']; |
|
this.postData.companyName = e['companyName'] |
|
account.getBySiteCompanyId(e.id).then(res => { |
|
(res.code == 20000) && (this.oilCompanyBankData = res.data); |
|
(this.oilCompanyBankData.length) && (this.oilCompanyBankData.forEach(item => { |
|
item['value'] = item.bankCardNo; |
|
item['label'] = item.bankCardName + `(${item.bankCardNo})`; |
|
})); |
|
}) |
|
} |
|
|
|
}, |
|
clearFn(e,w){ |
|
if(e&&w){ |
|
w.forEach(item=>{e[item]=''}) |
|
} |
|
}, |
|
init() { |
|
this.getAccounts() |
|
}, |
|
getAccounts() { |
|
account.getCascaderList().then(res => { |
|
if (res.code == 20000) { |
|
this.companyAccountData = res.data |
|
} |
|
}) |
|
}, |
|
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 = { |
|
paymentCompanyIds: { |
|
tacitly: '', |
|
minLength: 2, |
|
WrongText: '请完善企业打款信息' |
|
}, |
|
companyName:{ |
|
tacitly:'', |
|
WrongText:'请完善油站公司信息' |
|
}, |
|
companyId:{ |
|
tacitly:'', |
|
WrongText:'请完善油站公司信息' |
|
}, |
|
bankCardName:{ |
|
tacitly:'', |
|
WrongText:'请完善油站公司信息' |
|
}, |
|
transactionAmount:{ |
|
tacitly:'', |
|
WrongText:'交易金额不能为空' |
|
}, |
|
|
|
reverseRemark:{ |
|
tacitly:'', |
|
WrongText:'交易摘要不能为空' |
|
}, |
|
operationCode:{ |
|
tacitly:'', |
|
WrongText:'操作码不能为空' |
|
}, |
|
}; |
|
(this.barIndex==1)&&(delete checkPage.operationCode); |
|
check = tool.checkFn(this.postData, [], checkPage) |
|
if (!check.result) { |
|
uni.showToast({ |
|
title: check.WrongText, |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
this.saveFn() |
|
}, |
|
saveFn(){ |
|
let data = JSON.parse(JSON.stringify(this.postData)); |
|
(this.barIndex==1)&&(delete data.operationCode); |
|
account.save(data).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: 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; |
|
} |
|
.codeTip{ |
|
color: #007AFF; |
|
font-size: 20rpx; |
|
} |
|
.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; |
|
} |
|
|
|
.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>
|
|
|