81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<script setup>
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reactive } from 'vue'
|
|
import CardInput from '../../components/card-input.vue'
|
|
|
|
const stateData = reactive({
|
|
title: '',
|
|
state: '0'
|
|
})
|
|
|
|
const formData = reactive({
|
|
// 银行卡名称
|
|
name: '',
|
|
// 开户行名称
|
|
khName: '',
|
|
// 银行卡号
|
|
cardNum: '',
|
|
// 微信/支付宝号
|
|
codeName: '',
|
|
// 图片链接
|
|
img: ''
|
|
})
|
|
|
|
const onAdd = () => {
|
|
console.log(formData)
|
|
const data = {
|
|
bankName: formData.name,
|
|
cardNumber: formData.cardNum,
|
|
bankName: formData.khName
|
|
}
|
|
}
|
|
|
|
onLoad(e => {
|
|
const titltData = {
|
|
0: '添加银行卡',
|
|
101: '添加支付宝账户',
|
|
102: '添加微信账户'
|
|
}[e.key]
|
|
stateData.title = titltData
|
|
stateData.state = e.key
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<nav-bar isTopBg isPlaceholder :title="stateData.title">
|
|
<template #right>
|
|
<text class="public-navbar__right-btn" @click="onAdd">添加</text>
|
|
</template>
|
|
</nav-bar>
|
|
|
|
<view
|
|
v-if="!['101', '102'].includes(stateData.state)"
|
|
class="card-details"
|
|
>
|
|
<CardInput v-model="formData.name" title="银行名称"></CardInput>
|
|
<CardInput v-model="formData.khName" title="开户行"></CardInput>
|
|
<CardInput v-model="formData.cardNum" title="银行卡号"></CardInput>
|
|
</view>
|
|
|
|
<view v-else class="card-details">
|
|
<CardInput
|
|
v-model="formData.codeName"
|
|
:title="`${
|
|
stateData.state === '101' ? '支付宝账号' : '微信账号'
|
|
}`"
|
|
></CardInput>
|
|
<CardInput :is-input="false" title="收款码">
|
|
<cb-file-picker v-model="formData.img"></cb-file-picker>
|
|
</CardInput>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../styles/index.scss';
|
|
.card-details {
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
</style>
|