414 lines
11 KiB
Vue
414 lines
11 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">
|
||
<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"></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"></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 == '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"></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="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: '' // 开户行名称
|
||
},
|
||
token: '', // 添加七牛云token
|
||
upurl: 'https://api.ccttiot.com', // 添加上传域名
|
||
zhanghulist:[],
|
||
activeTypeid:''
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad(e) {
|
||
this.activeType = e.activeType
|
||
this.activeTypeid = e.id
|
||
this.getqudao()
|
||
this.getQiniuToken()
|
||
},
|
||
methods: {
|
||
btnxz(item){
|
||
this.activeType = item.apiType
|
||
this.activeTypeid = item.id
|
||
},
|
||
// 获取渠道列表
|
||
getqudao(){
|
||
this.$u.get(`/app/withdrawChannel/listSimple?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.showToast({
|
||
title: resp.msg,
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
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.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F5F7FA;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
.container {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
/* 通用卡片样式 */
|
||
.section-card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 36rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
/* 通用标题样式 */
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 账户类型选择 */
|
||
.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: 10rpx;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1rpx solid #F0F2F5;
|
||
}
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.custom-input {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
placeholder {
|
||
color: #C0C4CC;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
/* 二维码上传 */
|
||
.qrcode-upload {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 20rpx 0 40rpx 0;
|
||
}
|
||
.upload-area {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
background: #F7F9FC;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.qrcode-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
object-fit: cover;
|
||
}
|
||
.upload-tip {
|
||
margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 提交按钮 */
|
||
.submit-btn {
|
||
margin-top: 40rpx;
|
||
}
|
||
.custom-button {
|
||
height: 92rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
background: linear-gradient(90deg, #409EFF 0%, #5CB8FF 100%);
|
||
border-radius: 46rpx;
|
||
box-shadow: 0 6rpx 16rpx rgba(64, 158, 255, 0.2);
|
||
}
|
||
.custom-button::after {
|
||
border: none;
|
||
}
|
||
.custom-button:disabled {
|
||
background: #C0C4CC;
|
||
box-shadow: none;
|
||
}
|
||
</style> |