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.
511 lines
12 KiB
511 lines
12 KiB
<template>
|
|
<view class="page full-height-with-titile">
|
|
<view class="page container-with-lines full-height-with-titile" v-if="!showResult">
|
|
<!-- 主内容区域 -->
|
|
<view class="content" @click="hideKeyboard">
|
|
<!-- 收款账户 -->
|
|
<view class="bank-card">
|
|
<view class="amount-header">
|
|
<text class="section-title">{{languageData.account.reciAcc}}</text>
|
|
</view>
|
|
<view style="border-bottom: 1px solid #eee; height: 2.75em;">
|
|
<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.toName" class="amount-input"
|
|
:placeholder="languageData.account.reciCardOwnerPh" />
|
|
</view>
|
|
<view style="border-bottom: 1px solid #eee; height: 2.75em; margin-top: 10px;">
|
|
<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.toAccount" class="amount-input"
|
|
:placeholder="languageData.account.reciCardPh" />
|
|
</view>
|
|
<u-button v-show="false" style="width: 30%; margin-top: 20px;" size="small" type="primary" text="确定"></u-button>
|
|
</view>
|
|
<!-- 提现金额 -->
|
|
<view class="withdraw-amount">
|
|
<text class="section-title"
|
|
style="border-bottom: 1px solid #EEEEEE">{{languageData.account.transferBankCard}}</text>
|
|
<view class="bank-info" style="border-bottom: 1px solid #EEEEEE; padding-bottom: 9px;" @click="showBankList">
|
|
<view class="bank-detail">
|
|
<text class="bank-name">{{userAccount.bankName}}</text>
|
|
<text class="bank-number">{{userAccount.cardNum2}}</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999999" />
|
|
</view>
|
|
<view class="amount-input-area">
|
|
<u-input border="none" type="number" v-model="param.amount" class="amount-input"
|
|
:placeholder="languageData.account.PleaseEnterTheAmount" />
|
|
<text class="currency">KIP</text>
|
|
</view>
|
|
<view class="amount-footer">
|
|
<text
|
|
class="available-amount">{{languageData.account.availableBalance}}：{{formatNumber(availableBalance)}}</text>
|
|
<text class="withdraw-all" @click="withdrawAll">{{languageData.account.allDeposit}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 收款账户 -->
|
|
<view class="bank-card">
|
|
<view class="amount-header">
|
|
<text class="section-title">{{languageData.account.fundUsage}}</text>
|
|
</view>
|
|
<view style="border-bottom: 1px solid #eee; height: 2.75em;">
|
|
<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.fundUsage" class="amount-input"
|
|
:placeholder="languageData.account.fundUsagePh" />
|
|
</view>
|
|
<u-button v-show="false" style="width: 30%; margin-top: 20px;" size="small" type="primary" text="确定"></u-button>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-button">
|
|
<button class="submit-btn" @click="onSubmit">{{languageData.account.immediatelyTrans}}</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 银行卡列表弹出层 -->
|
|
<uni-popup ref="bankListPopup" type="bottom">
|
|
<view class="popup-content">
|
|
<view class="popup-header">
|
|
<text class="popup-title">{{languageData.account.selectBankCard}}</text>
|
|
<uni-icons @click="closeBankList" type="close" size="20" color="#666666" />
|
|
</view>
|
|
<view class="bank-list">
|
|
<view v-for="(bank, index) in bankList" :key="index" class="bank-item"
|
|
@click="selectBank(bank)">
|
|
<text class="bank-item-name">{{bank.bankName}}</text>
|
|
<text class="bank-item-number">{{bank.cardNum2}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<payPopup ref="clearPwd" :show.sync="show" @getPassword="getPassword"></payPopup>
|
|
<!-- 弹出层 -->
|
|
<uni-popup ref="message" type="center">
|
|
<view class="popup-content2">
|
|
<text>{{ tipMessage }}</text>
|
|
<button type="primary" style="margin-top: 20rpx;"
|
|
@click="closePopup">{{languageData.overview.close}}</button>
|
|
</view>
|
|
</uni-popup>
|
|
<loading ref="loading" :custom="false" :shadeClick="false" type="1" />
|
|
</view>
|
|
<payResult :show="showResult" :success="success" :number="param.amount"></payResult>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
createCashOut
|
|
} from '@/api/home/qrcode.js'
|
|
import {
|
|
getBalance
|
|
} from '@/api/account/userAccount.js'
|
|
import {
|
|
getBankList2
|
|
} from '@/api/bank/index.js'
|
|
import payPopup from '@/components/keyboard/payPopup.vue'
|
|
import {
|
|
checkPwd
|
|
} from '@/api/mine/payPwd.js'
|
|
import payResult from '@/components/payResult/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
payPopup,
|
|
payResult
|
|
},
|
|
data() {
|
|
return {
|
|
success: true,
|
|
showResult: false,
|
|
bankList: [],
|
|
userAccount: {},
|
|
param: {
|
|
fromId: null,
|
|
fromAccount: null,
|
|
toId: null,
|
|
toAccount: '',
|
|
amount: null,
|
|
accountId: null,
|
|
fundUsage:'',
|
|
toName: '',
|
|
},
|
|
show: false,
|
|
paramPwd: {
|
|
payPasswd: null
|
|
},
|
|
availableBalance: 0,
|
|
tipMessage: ""
|
|
}
|
|
},
|
|
created() {
|
|
this.languageData = this.$languageData;
|
|
},
|
|
onLoad() {
|
|
this.getBalance();
|
|
},
|
|
methods: {
|
|
closePopup() {
|
|
this.$refs.message.close();
|
|
},
|
|
//获取用户输入的支付密码
|
|
getPassword(data) {
|
|
//验证支付密码
|
|
this.getChangePwd(data.password);
|
|
},
|
|
getChangePwd(pwd) {
|
|
this.paramPwd.payPasswd = pwd;
|
|
//TODO
|
|
// this.show = false;
|
|
// this.cashOut();
|
|
// return
|
|
checkPwd(this.paramPwd).then(res => {
|
|
if (res.data != null) {
|
|
//支付
|
|
this.show = false;
|
|
this.cashOut();
|
|
} else {
|
|
//密码错误
|
|
this.$nextTick(() => {
|
|
this.$refs.clearPwd.errorPwd();
|
|
})
|
|
}
|
|
})
|
|
},
|
|
selectBankList() {
|
|
let params = {
|
|
userId: this.param.fromId
|
|
}
|
|
getBankList2(params).then(res => {
|
|
this.bankList = res
|
|
let account = {
|
|
bankName:this.languageData.tmp.zsyh,
|
|
cardNum2:'**************3910'
|
|
}
|
|
this.bankList.unshift(account)
|
|
let account1 = {
|
|
bankName:this.languageData.tmp.gsyh,
|
|
cardNum2:'**************9527'
|
|
}
|
|
this.bankList.unshift(account1)
|
|
this.userAccount.bankName = res[0].bankName
|
|
this.userAccount.cardNum2 = res[0].cardNum2
|
|
}).catch(e => {
|
|
let account = {
|
|
bankName: this.languageData.wallet.balance,
|
|
cardNum2: this.param.fromAccount
|
|
}
|
|
this.bankList = account
|
|
})
|
|
},
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
showBankList() {
|
|
this.$refs.bankListPopup.open();
|
|
},
|
|
closeBankList() {
|
|
this.$refs.bankListPopup.close();
|
|
},
|
|
selectBank(bank) {
|
|
this.userAccount = bank;
|
|
this.param.toAccount = bank.cardNum
|
|
this.closeBankList();
|
|
},
|
|
showKeyboard() {
|
|
// 数字键盘会自动显示
|
|
},
|
|
hideKeyboard() {
|
|
// uni.hideKeyboard();
|
|
},
|
|
withdrawAll() {
|
|
this.param.amount = this.formatNumber(this.availableBalance);
|
|
},
|
|
getBalance() {
|
|
getBalance().then(res => {
|
|
this.availableBalance = res.data.accountAmount;
|
|
this.param.fromId = res.data.userId;
|
|
this.param.accountId = res.data.accountId;
|
|
this.param.fromAccount = res.data.accountId;
|
|
this.param.toId = res.data.userId;
|
|
this.selectBankList();
|
|
})
|
|
},
|
|
cashOut() {
|
|
this.$refs.loading.open();
|
|
createCashOut(JSON.stringify(this.param)).then(res => {
|
|
if (res.data.status == '2') {
|
|
setTimeout(() => {
|
|
this.$refs.loading.close();
|
|
uni.showToast({
|
|
title: this.languageData.submitSuccess,
|
|
icon: 'success',
|
|
duration: 1000
|
|
});
|
|
let obj = {
|
|
number: this.param.amount,
|
|
type: 'W',
|
|
success: true
|
|
}
|
|
this.param.amount = null
|
|
uni.navigateTo({
|
|
url: `/components/payResult/indexNew?data=${encodeURIComponent(JSON.stringify(obj))}`
|
|
})
|
|
// this.showResult = true
|
|
// setTimeout(()=>{
|
|
// this.$tab.navigateTo('/pages/mine/wallet/index')
|
|
// },1000)
|
|
}, 1000)
|
|
} else if (res.data.status == '0') {
|
|
setTimeout(() => {
|
|
this.$refs.loading.close();
|
|
this.$refs.message.open();
|
|
this.paramPwd.payPasswd = ''
|
|
this.$refs.clearPwd.clearPwd();
|
|
this.tipMessage = res.data.remark
|
|
}, 1000)
|
|
}
|
|
}).catch(e => {
|
|
setTimeout(() => {
|
|
this.$refs.loading.close();
|
|
this.$refs.clearPwd.clearPwd();
|
|
uni.showToast({
|
|
title: this.languageData.sysError,
|
|
icon: 'error',
|
|
duration: 1000
|
|
});
|
|
}, 1000)
|
|
})
|
|
},
|
|
onSubmit() {
|
|
if (this.param.toName == '') {
|
|
uni.showToast({
|
|
title: this.languageData.account.reciCardOwnerPh,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.param.toAccount == '') {
|
|
uni.showToast({
|
|
title: this.languageData.account.reciCardPh,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (this.param.amount == '' || this.param.amount == null) {
|
|
uni.showToast({
|
|
title: this.languageData.account.cannot0,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (this.param.fundUsage == '') {
|
|
uni.showToast({
|
|
title: this.languageData.account.fundUsagePh,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (this.availableBalance+'' < this.param.amount+'') {
|
|
uni.showToast({
|
|
title: this.languageData.account.insufficientBalance,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.show = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.popup-content2 {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-bar {
|
|
height: 88rpx;
|
|
background-color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.nav-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.bank-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-bottom: 14rpx;
|
|
padding-bottom: 14rpx;
|
|
display: block;
|
|
}
|
|
|
|
.bank-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.bank-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bank-name {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.bank-number {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
|
|
.withdraw-amount {
|
|
background-color: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.amount-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.withdraw-all {
|
|
font-size: 14px;
|
|
color: #2C54D0;
|
|
}
|
|
|
|
.amount-input-area {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
margin-top: 10rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.u-input ::v-deep .uni-input-input {
|
|
font-size: 58rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.currency {
|
|
font-size: 30px;
|
|
color: #333333;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.amount-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.available-amount {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
}
|
|
|
|
.bottom-button {
|
|
padding: 50rpx 0;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #FDBE44;
|
|
color: #000;
|
|
font-size: 16px;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
background-color: #FFFFFF;
|
|
border-top-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bank-list {
|
|
max-height: 600rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bank-item {
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.bank-item-name {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 8rpx;
|
|
display: block;
|
|
}
|
|
|
|
.bank-item-number {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
</style>
|