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.
522 lines
12 KiB
522 lines
12 KiB
<template>
|
|
<view class="page container-with-lines full-height-with-titile">
|
|
<view class="page full-height-with-titile" v-if="!showResult">
|
|
<!-- 主内容区域 -->
|
|
<view class="content" @click="hideKeyboard">
|
|
<!-- 银行卡信息 -->
|
|
<view class="bank-card">
|
|
<view style="" @click="showBankList">
|
|
<uni-section :title="languageData.functions.payWay" type="line" padding>
|
|
<view class="bank-info">
|
|
<view v-if="bankList.length>0" class="bank-detail">
|
|
<text class="bank-name">{{userAccount.bankName}}</text>
|
|
<text class="bank-number">{{userAccount.cardNum2}}</text>
|
|
</view>
|
|
<view v-if="bankList.length<=0">
|
|
<text class="bank-name">{{languageData.account.noCard}}</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999999" v-if="bankList.length>0"/>
|
|
<uni-icons type="plus" size="16" color="#999999" v-if="bankList.length<=0"/>
|
|
</view>
|
|
</uni-section>
|
|
</view>
|
|
<view style="">
|
|
<uni-section :title="languageData.functions.payType" type="line" padding>
|
|
<view style="display: grid; grid-template-columns: repeat(3,1fr); width: 100%;">
|
|
<view v-for="item in utilityType" @click="param.utilityType = item.key" :class="{'active': param.utilityType === item.key}" style="display: flex; flex-direction: column;justify-content: center; border-radius: 8px; align-items: center; padding: 5px 0;">
|
|
<u--image style="height: 40px;" :src="item.img" mode="widthFix" width="40" shape="circle"></u--image>
|
|
<text class="text">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</uni-section>
|
|
</view>
|
|
<view style="">
|
|
<uni-section :title="languageData.functions.famId+'/'+$languageData.overview.phone" type="line" padding>
|
|
<view class="amount-input-area">
|
|
<u-input border="none" type="text" v-model="param.famId" :fontSize="12"
|
|
:placeholder="languageData.functions.famIdPh+'/'+$languageData.overview.phone"/>
|
|
</view>
|
|
</uni-section>
|
|
</view>
|
|
</view>
|
|
<!-- 充值金额 -->
|
|
<view class="withdraw-amount">
|
|
<!-- {{languageData.account.}} -->
|
|
<view class="amount-header">
|
|
<text class="section-title">{{languageData.functions.payAmt}}</text>
|
|
</view>
|
|
<view class="amount-input-area">
|
|
<u-input border="none" type="number" v-model="param.amount"
|
|
:placeholder="languageData.functions.payAmtPh"/>
|
|
<text class="currency">KIP</text>
|
|
</view>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-button">
|
|
<button class="submit-btn" @click="onSubmit">{{languageData.functions.pay}}</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>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { createTopUp } 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 keyboard from "@/components/master-keyboard/master-keyboard.vue";
|
|
import payResult from '@/components/payResult/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
payPopup,
|
|
payResult
|
|
},
|
|
data() {
|
|
return {
|
|
utilityType:[
|
|
{
|
|
key: 'e',
|
|
name: this.$languageData.functions.payTypeEle,
|
|
img: '/static/img/electricity.png'
|
|
},
|
|
{
|
|
key: 'w',
|
|
name: this.$languageData.functions.payTypeWat,
|
|
img:'/static/img/water.png'
|
|
},
|
|
{
|
|
key: 'g',
|
|
name: this.$languageData.functions.payTypeCom,
|
|
img:'/static/img/com.png'
|
|
}
|
|
],
|
|
success:true,
|
|
showResult:false,
|
|
bankList: [],
|
|
userAccount:{},
|
|
tipMessage:"",
|
|
param: {
|
|
utilityType: '',
|
|
famId: '',
|
|
fromId: null,
|
|
fromAccount: null,
|
|
toId: null,
|
|
toAccount: null,
|
|
amount: null
|
|
},
|
|
show: false,
|
|
paramPwd: {
|
|
payPasswd: null
|
|
},
|
|
userId:this.$store.state.user.userId,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getBalance();
|
|
},
|
|
created() {
|
|
this.languageData = this.$languageData;
|
|
},
|
|
methods: {
|
|
// // 监听输入框
|
|
// handleInput(value) {
|
|
// console.log("---------value",value)
|
|
// // 如果输入内容以小数点开头
|
|
// if (value.startsWith(".")) {
|
|
// // 在前面加上 0
|
|
// this.param.amount = "0" + value;
|
|
// } else {
|
|
// // 正常输入，保持原值
|
|
// this.param.amount = value;
|
|
// }
|
|
// },
|
|
closePopup(){
|
|
this.$refs.message.close();
|
|
},
|
|
//获取用户输入的支付密码
|
|
getPassword(data) {
|
|
//验证支付密码
|
|
this.getChangePwd(data.password);
|
|
},
|
|
getChangePwd(pwd) {
|
|
this.paramPwd.payPasswd = pwd;
|
|
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.userId
|
|
}
|
|
getBankList2(params).then(res=>{
|
|
this.bankList = res
|
|
let account = {
|
|
bankName:this.languageData.tmp.zsyh,
|
|
cardNum2:'**************3910'
|
|
}
|
|
this.bankList.unshift(account)
|
|
account = {
|
|
bankName:this.languageData.tmp.gsyh,
|
|
cardNum2:'**************9527'
|
|
}
|
|
this.bankList.unshift(account)
|
|
account = {
|
|
bankName: this.languageData.home.accountBalance,
|
|
cardNum2: this.formatNumber(this.userAccount.availableBalance) +' KIP'
|
|
}
|
|
this.bankList.unshift(account)
|
|
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() {
|
|
// console.log("---this.bankList---",this.bankList)
|
|
if(this.bankList!=null){
|
|
this.$refs.bankListPopup.open();
|
|
}else{
|
|
// 添加银行卡
|
|
}
|
|
},
|
|
closeBankList() {
|
|
this.$refs.bankListPopup.close();
|
|
},
|
|
selectBank(bank) {
|
|
this.userAccount = bank;
|
|
this.param.fromAccount = bank.cardNum
|
|
this.closeBankList();
|
|
},
|
|
hideKeyboard() {
|
|
// uni.hideKeyboard();
|
|
},
|
|
getBalance(){
|
|
getBalance().then(res=>{
|
|
this.userAccount.availableBalance = res.data.accountAmount;
|
|
this.param.fromId = res.data.userId;
|
|
this.param.toId = res.data.userId;
|
|
this.param.toAccount = res.data.accountId;
|
|
this.param.fromAccount = res.data.accountId;
|
|
this.selectBankList();
|
|
}).catch(e=>{
|
|
this.selectBankList();
|
|
})
|
|
},
|
|
cashOut(){
|
|
this.$refs.loading.open();
|
|
createTopUp(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,
|
|
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.utilityType || this.param.utilityType.length === 0){
|
|
uni.showToast({
|
|
title: this.languageData.functions.payTypePh,
|
|
icon: 'none',
|
|
duration:1000
|
|
});
|
|
return;
|
|
}
|
|
if(!this.param.famId || this.param.famId.length === 0){
|
|
uni.showToast({
|
|
title: this.languageData.functions.famIdPh,
|
|
icon: 'none',
|
|
duration:1000
|
|
});
|
|
return;
|
|
}
|
|
if(isNaN(this.param.amount) || this.param.amount <= 0){
|
|
uni.showToast({
|
|
title: this.languageData.account.cannot0,
|
|
icon: 'none',
|
|
duration:1000
|
|
});
|
|
return;
|
|
}
|
|
this.show = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
.active{
|
|
border: 1px solid #FDBF44;
|
|
background-color: rgba(253, 191, 68, .2);
|
|
}
|
|
|
|
|
|
.popup-content2 {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.page {
|
|
padding: 0;
|
|
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;
|
|
}
|
|
|
|
.amount-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.withdraw-all {
|
|
font-size: 14px;
|
|
color: #f4d994;
|
|
}
|
|
|
|
.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: #FDBF44;
|
|
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>
|