14 changed files with 607 additions and 18 deletions
@ -0,0 +1,395 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.conFirmInfo }}</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" v-if="bankInfo.auditStatus">{{ i18n.infoStatus }}</view> |
|||
<view class="" style="margin-bottom: 20rpx;" v-if="bankInfo.auditStatus"> |
|||
{{bankInfo.auditStatus=='apply'?i18n.apply:bankInfo.auditStatus=='agree'?i18n.agree:i18n.reject}} |
|||
</view> |
|||
|
|||
<view class="title">{{ i18n.FirstName }}</view> |
|||
<view class="input-item"> |
|||
<u-form-item class="input-item" prop="name" ref="item1"> |
|||
<u-input class="input" v-model="bankInfo.name" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.enterName"> |
|||
</u-input> |
|||
</u-form-item> |
|||
</view> |
|||
<view class="title">{{ i18n.idNumber }}</view> |
|||
<view class="input-item"> |
|||
<u-form-item class="input-item" prop="certId" ref="item1"> |
|||
<u-input class="input" v-model="bankInfo.certId" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.enterIdNumber"> |
|||
</u-input> |
|||
</u-form-item> |
|||
</view> |
|||
|
|||
<view class="title" v-if="bankInfo.auditStatus!='agree'">{{ i18n.IDcard }}</view> |
|||
|
|||
<u-upload v-if="bankInfo.auditStatus!='agree'" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple |
|||
:maxCount="1"> |
|||
|
|||
<image class="add" src="/static/home/id.png" mode="aspectFit" v-if="!bankInfo.certFrontImgPath"></image> |
|||
|
|||
<image :src="baseURL+bankInfo.certFrontImgPath" |
|||
mode="" class="add" v-if="bankInfo.certFrontImgPath"></image> |
|||
</u-upload> |
|||
|
|||
|
|||
<view class="title" style="margin-top: 20rpx;" v-if="bankInfo.auditStatus=='reject'">{{ i18n.infoStatus }}</view> |
|||
<view class="" style="word-break: break-all;" v-if="bankInfo.auditStatus=='reject'"> |
|||
{{bankInfo.auditReason}} |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
</u--form> |
|||
|
|||
<u-button class="button" color="#00E8A2" :throttleTime="500" :disabled="btnIsCanClick" @click="bank" v-if="!hideButton"> |
|||
{{ 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 { |
|||
hideButton:false, |
|||
baseURL: '', |
|||
fileList1: [], |
|||
rules: { |
|||
name: { |
|||
type: 'string', |
|||
required: true, |
|||
message: this.$t('withdrawal').enterName, |
|||
trigger: ['blur', 'change'], |
|||
}, |
|||
certId: { |
|||
type: 'string', |
|||
required: true, |
|||
message: this.$t('withdrawal').enterIdNumber, |
|||
trigger: ['blur', 'change'] |
|||
}, |
|||
|
|||
}, |
|||
bankInfo: { |
|||
name: null, |
|||
certId: null, |
|||
certFrontImgPath:null |
|||
}, |
|||
pageState: 'addBank', // 页面状态,是添加还是编辑银行卡 |
|||
|
|||
objData: {}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("withdrawal"); |
|||
}, |
|||
btnIsCanClick() { |
|||
if (this.bankInfo.name && this.bankInfo.certId && this.bankInfo.certFrontImgPath) { |
|||
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.certFrontImgPath=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.certFrontImgPath=res |
|||
console.log(res) |
|||
console.log(this.bankInfo.certFrontImgPath) |
|||
}) |
|||
}) |
|||
|
|||
} |
|||
// #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.certificationInfo().then(res => { |
|||
this.bankInfo = res; |
|||
this.bankInfo.certFrontImgPath=res.certFrontImg |
|||
if(this.bankInfo.auditStatus=='agree'||this.bankInfo.auditStatus=='apply'){ |
|||
this.hideButton=true |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getInfo(){ |
|||
api.certificationInfo().then(res => { |
|||
this.bankInfo=res |
|||
}) |
|||
}, |
|||
// 修改或添加实名信息 |
|||
bank() { |
|||
|
|||
this.$refs.uForm.validate().then(res => { |
|||
let bankInfo = { |
|||
name: this.bankInfo.name, |
|||
certId: this.bankInfo.certId, |
|||
certFrontImgPath: this.bankInfo.certFrontImgPath |
|||
} |
|||
api.certification(bankInfo).then(res => { |
|||
uni.$u.toast(this.$t("me").addSuccessfully) |
|||
this.getInfo() |
|||
|
|||
}) |
|||
}).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> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<view class="nav-head-H5" @tap="back()"> |
|||
<image src="../../static/public/back.png" mode="aspectFit" class="back"></image> |
|||
</view> |
|||
<web-view :src="urls"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
name: "rechargeRecord", |
|||
data() { |
|||
return { |
|||
urls: '', |
|||
webviewStyles: { |
|||
progress: { |
|||
|
|||
color: '#FF3333' |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("recharge"); |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
onLoad(res) { |
|||
this.urls = res.url |
|||
}, |
|||
onShow() {}, |
|||
methods: { |
|||
back() { |
|||
uni.redirectTo({ |
|||
url:'/pages/recharge/recharge' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.item { |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
width: 234rpx; |
|||
line-height: 60rpx; |
|||
} |
|||
|
|||
.nav-head-H5 { |
|||
position: fixed; |
|||
// top: 700rpx; |
|||
top: 32%; |
|||
height: 56rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
font-size: 38rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 10%; |
|||
background-color: #4DA2FF; |
|||
z-index: 99999; |
|||
border-bottom: 2px solid #4DA2FF; |
|||
|
|||
&.tp { |
|||
background-color: transparent; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.nav-head { |
|||
position: fixed; |
|||
top: 0rpx; |
|||
height: 112rpx; |
|||
// background-color: #fafafa; |
|||
// background-color: #fff; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
// padding: 40rpx 16rpx; |
|||
padding-top: 88rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
background-color: #15141F; |
|||
z-index: 9999; |
|||
border-bottom: 4rpx solid #323045; |
|||
|
|||
&.tp { |
|||
background-color: transparent; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.back { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
.content { |
|||
// margin-top: 150rpx; |
|||
// padding-bottom: 120rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue