305 lines
7.9 KiB
Vue
305 lines
7.9 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>
|
|
<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:'',
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
no:''
|
|
},
|
|
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 == 'bank'){
|
|
this.bankForm.type = 'BANK'
|
|
}else{
|
|
this.bankForm.type = 'QR'
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
.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> |