612 lines
17 KiB
Vue
612 lines
17 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="添加收款账户" :border-bottom="false" :background="bgc" back-icon-color="#333" title-color='#333'
|
||
title-size='34' height='36' id="navbar"></u-navbar>
|
||
|
||
<view class="container">
|
||
<!-- 实名信息展示 -->
|
||
<view class="section-card real-info-card">
|
||
<view class="section-title">实名信息</view>
|
||
<view class="real-info-content">
|
||
<view class="info-item">
|
||
<text class="info-label">姓名：</text>
|
||
<text class="info-value">{{realName || '--'}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">身份证号：</text>
|
||
<text class="info-value">{{realIdCard || '--'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-tip">
|
||
<u-icon name="info-circle" size="28" color="#909399" style="margin-right: 8rpx;"></u-icon>
|
||
<text class="tip-text">收款账户信息需与实名信息一致，请仔细核对</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账户类型选择 -->
|
||
<!-- <view class="section-card">
|
||
<view class="section-title">选择收款方式</view>
|
||
<view class="type-options">
|
||
<view v-for="(item,index) in zhanghulist" :key="index"
|
||
class="type-option"
|
||
:class="{active: activeType === item.apiType}"
|
||
@click="btnxz(item)">
|
||
<u-icon :name="item.picture" size="44" color="#409EFF"></u-icon>
|
||
<view class="option-text">
|
||
<text class="option-name">{{item.outName}}</text>
|
||
<text class="option-desc">{{item.remark}}</text>
|
||
</view>
|
||
<u-icon v-if="activeType === item.apiType" name="checkmark" size="32" color="#409EFF"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 银行卡绑定表单 -->
|
||
<view class="section-card" v-if="activeType == 'BANK' || activeType == 'PUBLIC_BANK'">
|
||
<view class="section-title">绑定银行卡信息</view>
|
||
<!-- 开户行输入（仅对公银行卡显示） -->
|
||
<view class="form-item" v-if="activeType == 'PUBLIC_BANK'">
|
||
<view class="form-label">开户行名称</view>
|
||
<u-input v-model="bankForm.bankName" placeholder="请输入开户行名称" border="none" class="custom-input" @input="handleInput('bankName', $event)"></u-input>
|
||
</view>
|
||
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">持卡人姓名</view>
|
||
<u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">银行卡号</view>
|
||
<u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number" class="custom-input" @input="handleInput('no', $event)"></u-input>
|
||
</view>
|
||
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">身份证号</view>
|
||
<u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
|
||
<view class="form-item" v-if="activeType != 'PUBLIC_BANK'" style="border-bottom: none;">
|
||
<view class="form-label">手机号</view>
|
||
<u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none" class="custom-input" @input="handleInput('mobile', $event)"></u-input>
|
||
<view class="" style="color: #E6A23C;margin-top: 30rpx;">
|
||
注：该手机号必须是该银行卡预留的手机号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 太米对公钱包绑定表单 -->
|
||
<view class="section-card" v-if="activeType == 'TM_PUBLIC_WALLET'">
|
||
<view class="section-title">绑定银行卡信息</view>
|
||
<view class="form-item">
|
||
<view class="form-label">银行卡号</view>
|
||
<u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number" class="custom-input" @input="handleInput('no', $event)"></u-input>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">开户行名称</view>
|
||
<u-input v-model="bankForm.bankName" placeholder="请输入开户行名称" border="none" class="custom-input" @input="handleInput('bankName', $event)"></u-input>
|
||
</view>
|
||
<view class="form-item" style="border-bottom: none;">
|
||
<view class="form-label">联行号</view>
|
||
<u-input v-model="bankForm.contactLine" placeholder="请输入联行号" border="none" class="custom-input" @input="handleInput('contactLine', $event)"></u-input>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二维码收款设置 -->
|
||
<view class="section-card" v-if="activeType == 'QR_CODE'">
|
||
<view class="section-title">上传收款二维码</view>
|
||
<view class="qrcode-upload">
|
||
<view class="upload-area" @click="chooseImage">
|
||
<u-icon name="plus" size="60" color="#C0C4CC" v-if="!bankForm.no"></u-icon>
|
||
<image :src="bankForm.no" mode="aspectFit" v-else class="qrcode-img"></image>
|
||
<text class="upload-tip" v-if="!bankForm.no">点击上传二维码</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="form-item" style="margin-top: 20rpx;">
|
||
<view class="form-label">收款人姓名</view>
|
||
<u-input v-model="bankForm.name" placeholder="请输入收款人姓名" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">收款人身份证号</view>
|
||
<u-input v-model="bankForm.idCard" placeholder="请输入收款人身份证号" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
<!-- <view class="form-item" style="border-bottom: none;">
|
||
<view class="form-label">收款人手机号</view>
|
||
<u-input v-model="bankForm.mobile" placeholder="请输入收款人手机号" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
</view>
|
||
<!-- 太米收款设置 -->
|
||
<view class="section-card" v-if="activeType == 'TM_WALLET'">
|
||
<view class="section-title">绑定银行卡信息</view>
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">持卡人姓名</view>
|
||
<u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
<view class="form-item">
|
||
<view class="form-label">银行卡号</view>
|
||
<u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number" class="custom-input" @input="handleInput('no', $event)"></u-input>
|
||
</view>
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">身份证号</view>
|
||
<u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none" class="custom-input"></u-input>
|
||
</view> -->
|
||
<view class="form-item" style="border-bottom: none;">
|
||
<view class="form-label">手机号</view>
|
||
<u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none" class="custom-input" @input="handleInput('mobile', $event)"></u-input>
|
||
<view class="" style="color: #E6A23C;margin-top: 30rpx;">
|
||
注：该手机号必须是该银行卡预留的手机号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn">
|
||
<u-button
|
||
type="primary"
|
||
shape="circle"
|
||
@click="submitForm"
|
||
class="custom-button"
|
||
:disabled="!activeType"
|
||
>
|
||
添加
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
activeType: '', // bank/qrcode
|
||
bankForm: {
|
||
channelId:'', // 银行卡类型：BANK-私人银行卡，PUBLIC_BANK-对公银行卡，QR-二维码收款
|
||
name: '',
|
||
idCard: '',
|
||
mobile: '',
|
||
no:'',
|
||
bankName: '', // 开户行名称
|
||
contactLine: '' // 联行号
|
||
},
|
||
token: '', // 添加七牛云token
|
||
upurl: 'https://api.ccttiot.com', // 添加上传域名
|
||
zhanghulist:[],
|
||
activeTypeid:'',
|
||
realName: '', // 实名姓名
|
||
realIdCard: '' // 实名身份证号
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
},
|
||
onLoad(e) {
|
||
this.activeType = e.activeType
|
||
this.activeTypeid = e.id
|
||
// this.getqudao()
|
||
this.getQiniuToken()
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
// 获取用户实名信息
|
||
getUserInfo() {
|
||
this.$u.get("/getInfo").then(res => {
|
||
if (res.code == 200 && res.user) {
|
||
this.realName = res.user.realName || ''
|
||
this.realIdCard = res.user.realIdCard || ''
|
||
}
|
||
})
|
||
},
|
||
// 处理输入，去除空格
|
||
handleInput(field, value) {
|
||
// 去除所有空格（包括粘贴时的空格）
|
||
let inputValue = ''
|
||
if (typeof value === 'string') {
|
||
inputValue = value
|
||
} else if (value && value.detail && typeof value.detail.value === 'string') {
|
||
// uView u-input 组件可能通过 detail.value 传递
|
||
inputValue = value.detail.value
|
||
} else if (value && value.target) {
|
||
// 处理原生事件对象
|
||
inputValue = value.target.value || ''
|
||
} else {
|
||
return
|
||
}
|
||
// 去除所有空格
|
||
const trimmedValue = inputValue.replace(/\s/g, '')
|
||
// 使用 $nextTick 确保更新
|
||
this.$nextTick(() => {
|
||
this.bankForm[field] = trimmedValue
|
||
})
|
||
},
|
||
btnxz(item){
|
||
this.activeType = item.apiType
|
||
this.activeTypeid = item.id
|
||
},
|
||
// 获取渠道列表
|
||
// getqudao(){
|
||
// this.$u.get(`/app/userWithdrawChannel/enabledList?appId=${this.$store.state.appid}`).then(res =>{
|
||
// if(res.code == 200){
|
||
// this.zhanghulist = res.data
|
||
// }
|
||
// })
|
||
// },
|
||
// 获取七牛云token
|
||
getQiniuToken() {
|
||
this.$u.get("/common/qiniuToken").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.data
|
||
}
|
||
})
|
||
},
|
||
// 选择图片
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
this.uploadImage(res.tempFilePaths[0])
|
||
}
|
||
})
|
||
},
|
||
// 上传图片
|
||
uploadImage(filePath) {
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
})
|
||
const math = 'static/' + this.$u.guid(20)
|
||
uni.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
filePath: filePath,
|
||
name: 'file',
|
||
formData: {
|
||
token: this.token,
|
||
key: 'bike/img/' + math
|
||
},
|
||
success: (res) => {
|
||
const response = JSON.parse(res.data)
|
||
if (response.key) {
|
||
this.bankForm.no = this.upurl + '/' + response.key
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
submitForm() {
|
||
this.bankForm.channelId = this.activeTypeid
|
||
if(this.activeType == 'WECHAT'){
|
||
let that = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
that.$u.put(`/bst/account/bindByJsCode?jsCode=${res.code}&channelId=${that.activeTypeid}`).then((resp) => {
|
||
if (resp.code == 200) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '添加成功',
|
||
icon: 'success',
|
||
duration:3000
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}else{
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: resp.msg,
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
return
|
||
}
|
||
// 太米对公钱包验证
|
||
if(this.activeType == 'TM_PUBLIC_WALLET'){
|
||
if(!this.bankForm.no || !this.bankForm.bankName || !this.bankForm.contactLine){
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
return
|
||
}
|
||
}
|
||
uni.showLoading({ title: '添加中...' })
|
||
// 银行卡类型保持用户的选择：BANK 或 PUBLIC_BANK
|
||
let data = {
|
||
...this.bankForm
|
||
}
|
||
this.$u.post(`/bst/account`,data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '添加成功',
|
||
icon: 'success',
|
||
duration:3000
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}else{
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F5F7FA;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
.container {
|
||
padding: 30rpx 24rpx;
|
||
min-height: calc(100vh - 100rpx);
|
||
}
|
||
|
||
/* 通用卡片样式 */
|
||
.section-card {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx 36rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
border: 1rpx solid #F0F2F5;
|
||
}
|
||
|
||
/* 通用标题样式 */
|
||
.section-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 36rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 2rpx solid #F5F7FA;
|
||
position: relative;
|
||
}
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2rpx;
|
||
left: 0;
|
||
width: 60rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, #409EFF 0%, #5CB8FF 100%);
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
/* 账户类型选择 */
|
||
.type-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
.type-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
background: #F7F9FC;
|
||
border-radius: 16rpx;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
.type-option.active {
|
||
background: #EEF5FF;
|
||
border: 1rpx solid #409EFF;
|
||
}
|
||
.type-option:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.option-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 20rpx;
|
||
flex: 1;
|
||
}
|
||
.option-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 400;
|
||
}
|
||
.option-desc {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.form-item {
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 24rpx;
|
||
padding-top: 8rpx;
|
||
border-bottom: 1rpx solid #F0F2F5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.form-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.form-label {
|
||
font-size: 26rpx;
|
||
color: #606266;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
padding-left: 8rpx;
|
||
}
|
||
.form-label::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
width: 4rpx;
|
||
height: 24rpx;
|
||
background: linear-gradient(180deg, #409EFF 0%, #5CB8FF 100%);
|
||
border-radius: 2rpx;
|
||
}
|
||
.custom-input {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
padding: 8rpx 0;
|
||
placeholder {
|
||
color: #C0C4CC;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
/* 二维码上传 */
|
||
.qrcode-upload {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 20rpx 0 40rpx 0;
|
||
}
|
||
.upload-area {
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
background: linear-gradient(135deg, #F7F9FC 0%, #EEF5FF 100%);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
border: 2rpx dashed #D3D4D6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.upload-area:active {
|
||
transform: scale(0.98);
|
||
border-color: #409EFF;
|
||
background: linear-gradient(135deg, #EEF5FF 0%, #E1F0FF 100%);
|
||
}
|
||
.qrcode-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 18rpx;
|
||
object-fit: cover;
|
||
border: 2rpx solid #E4E7ED;
|
||
}
|
||
.upload-tip {
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #909399;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* 提交按钮 */
|
||
.submit-btn {
|
||
margin-top: 50rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.custom-button {
|
||
height: 96rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
background: linear-gradient(135deg, #409EFF 0%, #5CB8FF 100%);
|
||
border-radius: 48rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.25);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.custom-button::after {
|
||
border: none;
|
||
}
|
||
.custom-button:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
|
||
}
|
||
.custom-button:disabled {
|
||
background: linear-gradient(135deg, #C0C4CC 0%, #D3D4D6 100%);
|
||
box-shadow: none;
|
||
transform: none;
|
||
}
|
||
|
||
/* 实名信息卡片样式 */
|
||
.real-info-card {
|
||
background: linear-gradient(135deg, #EEF5FF 0%, #F7F9FC 100%);
|
||
border: 1rpx solid #E1F0FF;
|
||
}
|
||
|
||
.real-info-content {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #606266;
|
||
font-weight: 500;
|
||
min-width: 140rpx;
|
||
}
|
||
|
||
.info-value {
|
||
color: #303133;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
|
||
.info-tip {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 16rpx 20rpx;
|
||
background: #FFF7E6;
|
||
border-radius: 12rpx;
|
||
border-left: 4rpx solid #FFA940;
|
||
align-items: center;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 24rpx;
|
||
color: #8C6A00;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
}
|
||
</style> |