mrr.sj.front/pages/wallet/bindaccount.vue

115 lines
2.5 KiB
Vue

<template>
<view class="bind-page">
<!-- 顶部导航栏 -->
<custom-navbar
title="绑定账户"
:show-back="true"
backgroundColor="#fff"
></custom-navbar>
<!-- 账户列表 -->
<view class="account-list">
<!-- 微信账户 -->
<view class="account-item" @click="bindWechat">
<view class="account-info">
<image src="/static/images/wechat.png" mode="aspectFit" class="account-icon"></image>
<text class="account-name">微信</text>
</view>
<image src="/static/images/arrow_right.png" mode="aspectFit" class="arrow-icon"></image>
</view>
<!-- 支付宝账户 -->
<view class="account-item" @click="bindAlipay">
<view class="account-info">
<image src="/static/images/alipay.png" mode="aspectFit" class="account-icon"></image>
<text class="account-name">支付宝</text>
</view>
<image src="/static/images/arrow_right.png" mode="aspectFit" class="arrow-icon"></image>
</view>
<!-- 银行卡账户 -->
<!-- <view class="account-item" @click="bindBankCard">
<view class="account-info">
<image src="/static/images/bankcard.png" mode="aspectFit" class="account-icon"></image>
<text class="account-name">银行卡</text>
</view>
<image src="/static/images/arrow_right.png" mode="aspectFit" class="arrow-icon"></image>
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
hasSelectedAccount: false
}
},
methods: {
// 绑定微信
bindWechat() {
uni.navigateTo({
url: '/pages/wallet/bindway?way=微信'
})
},
// 绑定支付宝
bindAlipay() {
uni.navigateTo({
url: '/pages/wallet/bindway?way=支付宝'
})
},
// 绑定银行卡
bindBankCard() {
uni.navigateTo({
url: '/pages/wallet/bind-bankcard'
})
}
}
}
</script>
<style>
.account-list {
background-color: #FFFFFF;
padding: 0 32rpx;
}
.account-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.account-item:last-child {
border-bottom: none;
}
.account-info {
display: flex;
align-items: center;
}
.account-icon {
width: 64rpx;
height: 64rpx;
margin-right: 16rpx;
}
.account-name {
font-size: 24rpx;
color: #333333;
font-weight: 500;
}
.arrow-icon {
width: 32rpx;
height: 32rpx;
}
</style>