xinyi/chuangte_bike_newxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ffd482bed1
chuangte_bike_newxcx/page_user/shoukuan/addsk.vue

366 lines
9.7 KiB
Vue
Raw Normal View History

新版电动车
2025-04-10 08:57:21 +08:00
<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>
小鹿
2025-08-30 17:38:15 +08:00
<!-- 银行卡类型选择 -->
<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>
新版电动车
2025-04-10 08:57:21 +08:00
<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>
小鹿
2025-08-30 17:38:15 +08:00
新版电动车
2025-04-10 08:57:21 +08:00
<view class="form-item">
<view class="item-label">身份证号</view>
<u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none"></u-input>
</view>
小鹿
2025-08-30 17:38:15 +08:00
新版电动车
2025-04-10 08:57:21 +08:00
<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: {
小鹿
2025-08-30 17:38:15 +08:00
type:'BANK', // 银行卡类型：BANK-私人银行卡，PUBLIC_BANK-对公银行卡，QR-二维码收款
新版电动车
2025-04-10 08:57:21 +08:00
name: '',
idCard: '',
mobile: '',
小鹿
2025-08-30 17:38:15 +08:00
no:'',
bankName: '' // 开户行名称
新版电动车
2025-04-10 08:57:21 +08:00
},
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: '添加中...' })
小鹿
2025-08-30 17:38:15 +08:00
if(this.activeType == 'qrcode'){
新版电动车
2025-04-10 08:57:21 +08:00
this.bankForm.type = 'QR'
}
小鹿
2025-08-30 17:38:15 +08:00
// 银行卡类型保持用户的选择：BANK 或 PUBLIC_BANK
新版电动车
2025-04-10 08:57:21 +08:00
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;
}
小鹿
2025-08-30 17:38:15 +08:00
.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);
}
}
}
新版电动车
2025-04-10 08:57:21 +08:00
}
.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>
Reference in New Issue Copy Permalink