594 lines
16 KiB
Vue
594 lines
16 KiB
Vue
<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>
|