18 changed files with 655 additions and 65 deletions
@ -0,0 +1,397 @@ |
|||||
|
<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" v-if="bankInfo.auditStatus=='reject'">{{ i18n.Reasonforrejection }}</view> |
||||
|
<view class="" style="word-break: break-all;margin-bottom: 20rpx;" v-if="bankInfo.auditStatus=='reject'"> |
||||
|
{{bankInfo.auditReason}} |
||||
|
</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> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</u--form> |
||||
|
|
||||
|
<u-button class="button" color="#00E8A2" :throttleTime="500" @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) { |
||||
|
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 |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 修改或添加实名信息 |
||||
|
bank() { |
||||
|
if(!this.bankInfo.certFrontImgPath){ |
||||
|
uni.$u.toast(this.$t("withdrawal").enterIdCard) |
||||
|
return; |
||||
|
} |
||||
|
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.getBank() |
||||
|
|
||||
|
}) |
||||
|
}).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