<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> 