设计-1
设计-2
银行卡详情页
1)添加银行卡
<template>
<view class="layout bgcl" :style="'height:' + scrollHeight+'px'">
<view class="header cl99 mlr30">
<text>请绑定本人的银行卡，并核对卡号是否一致</text>
</view>
<view class="card-input">
<view class="card-input-tiem flex mlr30">
<view class="cl33 u-margin-right-30">持卡人</view><input type="text" disabled v-model="userInfo.name"></input>
<image src="../../../static/images/q_logo@2x.png" mode="" @click="questionClick"></image>
</view>
<view class="card-input-tiem flex mlr30">
<view class="cl33 u-margin-right-65">卡号</view><input type="number" bindinput="cardNoChange" v-model="cardNo"
placeholder="请输入银行卡号" placeholder-style="color:#ccc;" />
<view class="scan flex flex-column-center" @click="clickScan">
<u-icon name="scan" color="#007AFF" size="36"></u-icon>
<text class="cl33 u-margin-top-10">识别卡号</text>
</view>
</view>
</view>
<view class="submit mlr30 u-margin-top-60">
<u-button type="primary" @click="addBankCards">确定</u-button>
</view>
</view>
</template>
<script>
import Https from '../../../api/http.js'
export default {
data() {
return {
userInfo: {},
cardNo: '',
bankName: '',
scrollHeight:''
}
},
onShow() {
this.userInfo = this.$store.state.userInfo
// console.log(this.userInfo)
},
created() {
this.scrollHeight = uni.getSystemInfoSync().windowHeight
},
methods: {
cardNoChange(e) {
this.cardNo = e.detail.value.replace(/(\d{4})(?=\d)/g, "$1 ");
console.log(this.cardNo)
},
questionClick() {
uni.showModal({
title: '持卡人说明',
content: '为了保证账户资金安全，只能绑定认证用户本人的银行卡',
confirmText: '知道了',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
},
clickScan() {
uni.showModal({
content: '识别卡号功能开发中，敬请期待！',
confirmText: '知道了',
showCancel: false,
})
},
async addBankCards() {
let res = await Https.bookInfo({
card_no: this.cardNo
})
if (res.flag == 1 && res.data.validated == 1) {
this.bankName = res.data.name
uni.navigateTo({
url: 'confirmAdd/index?cardName=' + this.bankName + '&cardNo=' + this.cardNo,
})
} else {
uni.showModal({
confirmText: '确定',
content: res.data.msg,
showCancel: false,
});
}
},
}
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/base.css";
@import "../../../assets/css/common.scss";
.layout {
.header {
height: 100upx;
line-height: 100upx;
font-size: $theme-f28;
}
.card-input {
background-color: $theme-words-color;
.card-input-tiem {
height: 100upx;
align-items: center;
font-size: $theme-f34;
image {
position: absolute;
width: 35upx;
height: 35upx;
right: 66upx;
}
.scan {
position: absolute;
right: 30upx;
text {
font-size: $theme-f26;
}
}
}
}
}
</style>
2）确认添加
<template>
<view class="layout">
<view class="header flex flex-column-center">
<text class="confirm-title cl33">确认银行卡信息</text>
<text class="tip">请核对卡号信息，确认无误</text>
</view>
<view class="card-input">
<view class="card-input-tiem flex mlr30">
<view class="cl33 u-margin-right-30">持卡人</view>
<input type="text" disabled v-model="userInfo.name"></input>
</view>
<view class="card-input-tiem flex mlr30">
<view class="cl33 u-margin-right-65">卡号</view>
<view class="">{{cardNo}}</view>
<!-- <input type="text" value="" placeholder="请输入银行卡号" placeholder-style="color:#ccc;" />
<view class="scan flex flex-column-center">
<u-icon name="scan" color="#007AFF" size="36"></u-icon>
<text class="cl33 u-margin-top-10">识别卡号</text>
</view> -->
</view>
<view class="card-input-tiem flex mlr30">
<view class="cl33 u-margin-right-65">银行</view>
<view class="">{{cardName}}</view>
</view>
</view>
<view class="submit mlr30 u-margin-top-60">
<u-button type="primary" @click="confirmAddCards">确定添加</u-button>
</view>
<view class="tip-info tip u-margin-top-20">
<text>信息加密中，仅用于银行验证</text>
</view>
</view>
</template>
<script>
import Https from '../../../../api/http.js'
export default {
data() {
return {
cardName: '',
cardNo: '',
userInfo: {}
}
},
onShow() {
this.userInfo = this.$store.state.userInfo
},
onLoad(options) {
this.cardName = options.cardName
this.cardNo = options.cardNo
},
methods: {
// 确定添加
async confirmAddCards() {
let res = await Https.addBankCard({
bank_number: this.cardNo,
bank_name:this.cardName,
name: this.userInfo.name
})
console.log(res)
if (res.flag == 1) {
uni.navigateTo({
url: '../successAdd/index'
})
} else {
uni.showModal({
confirmText: '确定',
content: res.data.msg,
showCancel: false,
})
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../assets/css/base.css";
@import "../../../../assets/css/common.scss";
.layout {
.header {
height: 240upx;
justify-content: center;
.confirm-title {
font-size: $theme-f52;
}
}
.card-input {
background-color: $theme-words-color;
.card-input-tiem {
height: 100upx;
align-items: center;
font-size: $theme-f34;
image {
position: absolute;
width: 35upx;
height: 35upx;
right: 66upx;
}
.scan {
position: absolute;
right: 30upx;
text {
font-size: $theme-f26;
}
}
}
}
.tip-info {
text-align: center;
}
}
</style>
3）添加成功
<template>
<view class="layout">
<view class="success flex flex-column-center">
<image src="../../../../static/images/group-success@2x.png" mode=""></image>
<text class="cl33 u-margin-top-50">添加成功</text>
<u-button class="success-btn" type="primary" @click="toBankCards">完成</u-button>
</view>
</view>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
toBankCards(){
// uni.navigateTo({
// url:'../../bankCards/index'
// })
uni.navigateBack({
delta:3
})
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../assets/css/base.css";
@import "../../../../assets/css/common.scss";
.layout {
.success {
image {
width: 450upx;
height: 280upx;
margin-top: 100upx;
}
text {
font-size: $theme-f36;
}
.success-btn {
margin-top: 475upx;
width: 92%;
}
}
}
</style>
4）银行卡
<template>
<view class="container">
<view class="bank-cards flex flex-space-between">
<text class="cards-title">银行卡</text>
<text class="cards-num">共{{bankList.length}}张</text>
</view>
<u-button class="add-cards" type="primary" plain @click="toAddCards">+ 添加银行卡</u-button>
<!-- 银行卡卡片 -->
<view class="cards-list">
<!-- 银行卡1 -->
<view class="card-detail-1 flex cards-list-style container" v-for="(item,index) in bankList" :style="{'margin-bottom': item.style}"
:key="item.my_bank_id" @click="checkBank(index)">
<view class="bank-logo">
<image src="../../../static/images/bank_logo@3x.png" mode=""></image>
</view>
<view class="bank-name flex">
<text>{{item.bank_name}}</text>
<text class="card-cate">{{item.type}}</text>
<view class="card-code">
<text class="omit">****</text>
<text class="omit">****</text>
<text class="omit">****</text>
<text>{{item.bank_number.substr(item.bank_number.length-4, item.bank_number.length)}}</text>
</view>
</view>
<view class="change-card" @click="deleteBankCard(item,index)">
<text>删除银行卡</text>
<u-modal v-model="showModal" :content="content" :show-title="false" show-cancel-button :title="title" @confirm="confirm"></u-modal>
</view>
</view>
</view>
<!-- 常见问题 -->
<view class="question">
<u-icon name="kefu-ermai" color="#007AFF"></u-icon>
<text>绑定银行卡常见问题</text>
<button open-type="contact">客服</button>
</view>
</view>
</template>
<script>
import Https from '../../../api/http.js'
export default {
data() {
return {
isMove: false,
bankList: [],
cardNo: '',
showModal: false,
title: '确认删除银行卡',
content: '确认删除吗',
}
},
onLoad() {
this.getmyBankList()
},
methods: {
toAddCards() {
uni.navigateTo({
url: '../addCards/index'
})
},
async getmyBankList(item, index) {
let res = await Https.myBankList()
let getBankTypes = []
res.data.list.forEach(item => {
getBankTypes.push(Https.bookInfo({
card_no: item.bank_number
}).then(result => {
item.type = result.data.card_type
}))
})
let result = Promise.all(getBankTypes).then(() => {
this.bankList = res.data.list
})
},
deleteBankCard(item, index) {
uni.showModal({
title: '确认删除银行卡',
content: '确认删除吗？',
success: res => {
if (res.confirm) {
Https.deleteBankCard({
my_bank_id: item.my_bank_id,
selected: index
}).then(res1 => {
if (res1.flag == 1) {
uni.showToast({
icon: 'none',
title: '删除银行卡成功',
duration: 2000
})
this.getmyBankList()
} else {
uni.showModal({
confirmText: '确定',
content: res1.data.msg,
showCancel: false,
})
}
})
}
}
});
},
// 点击银行卡查看银行卡卡片信息
checkBank(index) {
console.log(index)
this.isMove = !this.isMove
this.bankList[index].style = '150upx'
console.log(this.bankList[index].style)
}
}
}
</script>
<style lang="scss">
@import "../../../assets/css/common.scss";
@import "../../../assets/css/common.scss";
.container {
.add-cards {}
.bank-cards {
height: 120upx;
align-items: center;
.cards-title {
font-size: 52upx;
font-weight: 600;
color: $theme-title-color;
line-height: 73upx;
}
.cards-num {
font-weight: 400;
color: $theme-text-color;
font-size: 32upx;
line-height: 45upx;
}
}
.cards-list {
margin-top: 150upx;
.cards-list-style {
height: 260upx;
border-radius: 8upx;
position: relative;
color: $theme-words-color;
}
.card-detail-1 {
box-shadow: 2px -8px 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(225deg, rgba(34, 225, 255, 1) 0%, rgba(29, 143, 225, 1) 48%, rgba(98, 94, 177, 1) 100%);
margin-top: -115upx;
&.get-move {
animation: bankMove 1s;
}
}
.bank-logo {
width: 80upx;
height: 80upx;
background: $theme-words-color;
margin: 60upx 16upx 0 0;
border-radius: 50%;
image {
border-radius: 50%;
width: 66upx;
height: 66upx;
margin: 7upx;
}
}
.bank-name {
flex-direction: column;
margin-top: 62upx;
>text {
font-size: 32upx;
margin-bottom: 15upx;
line-height: 33upx;
}
.card-cate {
font-size: 24upx;
}
.card-code {
margin-top: 20rpx;
font-size: $theme-f44;
.omit {
margin-right: 30rpx;
}
}
}
.change-card {
width: 134upx;
height: 40upx;
position: absolute;
right: 40upx;
top: 75upx;
background: rgba(255, 255, 255, 0.3);
border-radius: 28upx;
text-align: center;
line-height: 34upx;
text {
font-size: 20upx;
}
}
}
.question {
width: 670upx;
height: 100upx;
box-shadow: 0upx 10upx 20upx 0upx rgba(0, 0, 0, 0.05);
border-radius: 10upx;
border: 1upx solid $theme-border-color;
display: flex;
align-items: center;
margin-top: 38upx;
u-icon {
margin: 0 20upx 0 30upx;
}
text {
font-size: 28upx;
color: $theme-code-tip-color;
line-height: 40upx;
}
button {
width: 100%;
position: absolute;
opacity: 0;
}
}
}
// 点击银行卡动画
// @keyframes bankMove {
// 0% {
// margin-bottom: 0;
// }
// 100% {
// margin-bottom: 150upx;
// }
// }
</style>
