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.
594 lines
16 KiB
594 lines
16 KiB
2 years ago
|
<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>
|