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.
421 lines
9.3 KiB
421 lines
9.3 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ pageState === 'addBank' ? i18n.AddBankInformation : i18n.EditBankInformation }}</navigation>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="content">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="contentH5">
|
|
<!-- #endif -->
|
|
|
|
<u--form class="form" :model="bankInfo" :rules="rules" ref="uForm" errorType="toast">
|
|
<view class="inputBody">
|
|
<view class="title">{{ i18n.FirstName }}</view>
|
|
<view class="input-item">
|
|
<u-form-item class="input-item" prop="acctName" ref="item1">
|
|
<u-input class="input" v-model="bankInfo.acctName" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.enterName">
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="title">{{ i18n.Account }}</view>
|
|
<view class="input-item">
|
|
<u-form-item class="input-item" prop="acctId" ref="item1">
|
|
<u-input class="input" v-model="bankInfo.acctId" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.enterAccount">
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
|
|
<view class="title">{{ i18n.IDcard }}</view>
|
|
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
:maxCount="1">
|
|
|
|
<image class="add" src="/static/home/id.png" mode="aspectFit" v-if="!bankInfo.certImg"></image>
|
|
|
|
<image :src="baseURL+bankInfo.certImg"
|
|
mode="" class="add" v-if="bankInfo.certImg"></image>
|
|
</u-upload>
|
|
<view class="">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="inputBody">
|
|
<view class="title">{{ i18n.BankName }}</view>
|
|
<view class="input-item">
|
|
<u-form-item class="input-item" prop="email" ref="item1">
|
|
<u-input class="input" v-model="bankInfo.bankName" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.enterBankName">
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="title">{{ i18n.BankCode }}</view>
|
|
<view class="input-item">
|
|
<u-form-item class="input-item" prop="bankCode" ref="item1">
|
|
<u-input class="input" v-model="bankInfo.bankCode" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.enterBankCode">
|
|
</u-input>
|
|
</u-form-item>
|
|
</view>
|
|
</view>
|
|
</u--form>
|
|
|
|
<u-button class="button" color="#00E8A2" :throttleTime="500" :disabled="btnIsCanClick" @click="bank">
|
|
{{ i18n.Confirm }}
|
|
</u-button>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/utils/api'
|
|
import constant from '@/utils/constant.js';
|
|
import {
|
|
pathToBase64,
|
|
base64ToPath
|
|
} from 'image-tools'
|
|
export default {
|
|
name: "withdrawalRecord",
|
|
data() {
|
|
return {
|
|
baseURL: '',
|
|
fileList1: [],
|
|
rules: {
|
|
acctName: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$t('withdrawal').enterName,
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
bankName: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$t('withdrawal').enterBankName,
|
|
trigger: ['blur', 'change']
|
|
},
|
|
acctId: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$t('withdrawal').enterAccount,
|
|
trigger: ['blur', 'change']
|
|
},
|
|
bankCode: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$t('withdrawal').enterBankCode,
|
|
trigger: ['blur', 'change']
|
|
},
|
|
},
|
|
bankInfo: {
|
|
bankCode: null,
|
|
bankName: null,
|
|
acctName: null,
|
|
acctId: null,
|
|
},
|
|
pageState: 'addBank', // 页面状态,是添加还是编辑银行卡
|
|
|
|
objData: {},
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("withdrawal");
|
|
},
|
|
btnIsCanClick() {
|
|
if (this.bankInfo.bankCode && this.bankInfo.bankName && this.bankInfo.acctName && this.bankInfo.acctId && this.bankInfo.certImg) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.getBank()
|
|
this.baseURL = constant.BASE_URL
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
|
|
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
uni.showLoading({
|
|
title: this.$t("withdrawal").shang,
|
|
mask: true,
|
|
})
|
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
console.log(event)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
// status: 'uploading',
|
|
// message: '上传中'
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
|
|
uploadFilePromise(url) {
|
|
// #ifdef APP-PLUS
|
|
console.log(url)
|
|
pathToBase64(url)
|
|
.then(path => {
|
|
console.log(path)
|
|
let res=path
|
|
res = res.split(',')[1]
|
|
console.log(res,'res')
|
|
return new Promise((resolve, reject) => {
|
|
api.uploadImg({
|
|
img: res
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
this.bankInfo.certImg=res
|
|
})
|
|
})
|
|
})
|
|
.catch(error => {
|
|
uni.hideLoading()
|
|
console.error(error)
|
|
})
|
|
|
|
// #endif
|
|
// #ifdef H5
|
|
const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
|
|
//blob:http://localhost:8080/b878edea-e649-4f8d-b723-c3f25454141b
|
|
image.src = url;
|
|
image.onload = () => {
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = image.width
|
|
canvas.height = image.height
|
|
const context = canvas.getContext('2d')
|
|
context.drawImage(image, 0, 0, image.width, image.height);
|
|
let imgUrl = canvas.toDataURL() //图片的base64地址
|
|
imgUrl = imgUrl.split(',')[1]
|
|
return new Promise((resolve, reject) => {
|
|
api.uploadImg({
|
|
img: imgUrl
|
|
}).then(res => {
|
|
this.bankInfo.certImg=res
|
|
console.log(res)
|
|
console.log(this.bankInfo.certImg)
|
|
})
|
|
})
|
|
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
|
|
|
|
|
|
getBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
reader.onload = () => resolve(reader.result)
|
|
reader.onerror = (error) => reject(error)
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取银行卡信息
|
|
getBank() {
|
|
api.bankCardInfo().then(res => {
|
|
this.bankInfo = res;
|
|
if (this.bankInfo.id) {
|
|
this.pageState = 'editBank' || 'addBank';
|
|
}
|
|
})
|
|
},
|
|
// 修改或添加银行卡
|
|
bank() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
let bankInfo = {
|
|
bankCode: this.bankInfo.bankCode,
|
|
bankName: this.bankInfo.bankName,
|
|
acctName: this.bankInfo.acctName,
|
|
acctId: this.bankInfo.acctId,
|
|
certImg: this.bankInfo.certImg
|
|
}
|
|
if (this.bankInfo.id) {
|
|
bankInfo.id = this.bankInfo.id
|
|
}
|
|
api.bindBank(bankInfo).then(res => {
|
|
if (this.bankInfo.id) {
|
|
uni.$u.toast(this.$t("me").ModifiedSuccessfully)
|
|
} else {
|
|
uni.$u.toast(this.$t("me").addSuccessfully)
|
|
}
|
|
setTimeout(() => {
|
|
uni.navigateBack({})
|
|
}, 600)
|
|
})
|
|
}).catch(errors => {
|
|
console.log('err')
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/deep/ .uicon-camera-fill{
|
|
display:none !important;
|
|
}
|
|
/deep/ .u-upload{
|
|
position:relative;
|
|
.add{
|
|
width: 620rpx !important;
|
|
height: 360rpx !important;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-upload__wrap__preview__image {
|
|
width: 620rpx !important;
|
|
height: 360rpx !important;
|
|
}
|
|
|
|
/deep/ .u-icon__icon {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
/deep/ .u-upload__button {
|
|
width: 620rpx !important;
|
|
height: 360rpx !important;
|
|
background-color: #323045 !important;
|
|
}
|
|
|
|
/deep/ .u-form-item__body {
|
|
padding: 0 0;
|
|
}
|
|
|
|
.main {
|
|
|
|
.content {
|
|
margin-top: 200rpx;
|
|
padding: 32rpx;
|
|
|
|
.inputBody {
|
|
overflow: hidden;
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #A1A0A8;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.input-item {
|
|
height: 112rpx;
|
|
background: #323045;
|
|
border-radius: 32rpx;
|
|
padding-left: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.input {
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.button {
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
width: 686rpx;
|
|
box-sizing: border-box;
|
|
height: 112rpx;
|
|
background: #00E8A2;
|
|
border-radius: 32rpx;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
|
|
}
|
|
}
|
|
|
|
.contentH5 {
|
|
margin-top: 100rpx;
|
|
padding: 32rpx;
|
|
|
|
.inputBody {
|
|
overflow: hidden;
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #A1A0A8;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.input-item {
|
|
height: 112rpx;
|
|
background: #323045;
|
|
border-radius: 32rpx;
|
|
padding-left: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.input {
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.button {
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
width: 686rpx;
|
|
box-sizing: border-box;
|
|
height: 112rpx;
|
|
background: #00E8A2;
|
|
border-radius: 32rpx;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|
|
|