366 lines
9.7 KiB
Vue
366 lines
9.7 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="添加收款账户" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='36' id="navbar"></u-navbar>
|
||
|
||
<view class="container">
|
||
<!-- 账户类型选择 -->
|
||
<view class="account-type">
|
||
<view class="type-title">选择收款方式</view>
|
||
<view class="type-options">
|
||
<view
|
||
class="type-option"
|
||
:class="{active: activeType === 'bank'}"
|
||
@click="activeType = 'bank'">
|
||
<u-icon name="account-fill" size="40" color="#4C97E7"></u-icon>
|
||
<text>银行卡</text>
|
||
</view>
|
||
<view
|
||
class="type-option"
|
||
:class="{active: activeType === 'qrcode'}"
|
||
@click="activeType = 'qrcode'">
|
||
<u-icon name="scan" size="40" color="#4C97E7"></u-icon>
|
||
<text>收款二维码</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 银行卡绑定表单 -->
|
||
<view class="form-container" v-if="activeType === 'bank'">
|
||
<view class="form-title">绑定银行卡信息</view>
|
||
|
||
<!-- 银行卡类型选择 -->
|
||
<view class="form-item">
|
||
<view class="item-label">银行卡类型</view>
|
||
<view class="bank-type-options">
|
||
<view
|
||
class="bank-type-option"
|
||
:class="{active: bankForm.type === 'BANK'}"
|
||
@click="bankForm.type = 'BANK'">
|
||
<text>个人银行卡</text>
|
||
</view>
|
||
<view
|
||
class="bank-type-option"
|
||
:class="{active: bankForm.type === 'PUBLIC_BANK'}"
|
||
@click="bankForm.type = 'PUBLIC_BANK'">
|
||
<text>对公银行卡</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开户行输入（仅对公银行卡显示） -->
|
||
<view class="form-item" v-if="bankForm.type === 'PUBLIC_BANK'">
|
||
<view class="item-label">开户行</view>
|
||
<u-input v-model="bankForm.bankName" placeholder="请输入开户行名称" border="none"></u-input>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="item-label">持卡人</view>
|
||
<u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none"></u-input>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="item-label">银行卡号</view>
|
||
<u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number"></u-input>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="item-label">身份证号</view>
|
||
<u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none"></u-input>
|
||
</view>
|
||
|
||
<view class="form-item" style="border: none;margin-bottom: 0;padding-bottom: 0;">
|
||
<view class="item-label">手机号</view>
|
||
<u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none"></u-input>
|
||
</view>
|
||
</view>
|
||
<!-- 二维码收款设置 -->
|
||
<view class="qrcode-container" v-if="activeType === 'qrcode'">
|
||
<view class="qrcode-title">上传收款二维码</view>
|
||
<view class="qrcode-upload">
|
||
<view class="upload-area" @click="chooseImage">
|
||
<u-icon name="plus" size="60" color="#CCCCCC" v-if="!bankForm.no"></u-icon>
|
||
<image :src="bankForm.no" mode="aspectFit" v-else></image>
|
||
<text class="upload-tip" v-if="!bankForm.no">点击上传二维码</text>
|
||
</view>
|
||
</view>
|
||
<view class="qrcode-form">
|
||
<view class="form-item">
|
||
<view class="item-label">收款人姓名</view>
|
||
<u-input v-model="bankForm.name" placeholder="请输入收款人姓名" border="none"></u-input>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="item-label">收款人身份证号</view>
|
||
<u-input v-model="bankForm.idCard" placeholder="请输入收款人身份证号" border="none"></u-input>
|
||
</view>
|
||
<view class="form-item" style="border: none;margin-bottom: 0;padding-bottom: 0;">
|
||
<view class="item-label">收款人手机号</view>
|
||
<u-input v-model="bankForm.mobile" placeholder="请输入收款人手机号" border="none"></u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn">
|
||
<u-button
|
||
type="primary"
|
||
shape="circle"
|
||
@click="submitForm">
|
||
添加
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
activeType: 'bank', // bank/qrcode
|
||
bankForm: {
|
||
type:'BANK', // 银行卡类型：BANK-私人银行卡，PUBLIC_BANK-对公银行卡，QR-二维码收款
|
||
name: '',
|
||
idCard: '',
|
||
mobile: '',
|
||
no:'',
|
||
bankName: '' // 开户行名称
|
||
},
|
||
token: '', // 添加七牛云token
|
||
upurl: 'https://api.ccttiot.com', // 添加上传域名
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getQiniuToken()
|
||
},
|
||
methods: {
|
||
// 获取七牛云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
|
||
console.log(this.bankForm.no);
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
submitForm() {
|
||
uni.showLoading({ title: '添加中...' })
|
||
if(this.activeType == 'qrcode'){
|
||
this.bankForm.type = 'QR'
|
||
}
|
||
// 银行卡类型保持用户的选择：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'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F7F8FA;
|
||
}
|
||
.container {
|
||
padding: 30rpx;
|
||
}
|
||
.account-type {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
.type-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262B37;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.type-options {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.type-option {
|
||
width: 48%;
|
||
height: 180rpx;
|
||
background: #F7F8FA;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
&.active {
|
||
background: #E6F0FF;
|
||
border: 1rpx solid #4C97E7;
|
||
text {
|
||
color: #4C97E7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.form-container, .qrcode-container {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
.form-title, .qrcode-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262B37;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
.item-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.bank-type-options {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
.bank-type-option {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background: #F7F8FA;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
border: 2rpx solid transparent;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
&.active {
|
||
background: #E6F0FF;
|
||
border-color: #4C97E7;
|
||
text {
|
||
color: #4C97E7;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.qrcode-upload {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 40rpx 0;
|
||
.upload-area {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
background: #F7F8FA;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
}
|
||
.upload-tip {
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.submit-btn {
|
||
margin-top: 60rpx;
|
||
.u-button {
|
||
height: 90rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
</style> |