<template>
|
<view class="payment-method">
|
<!-- 银行卡列表 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">我的银行卡</text>
|
<text class="add-btn" @tap="addBankCard">添加银行卡</text>
|
</view>
|
<view class="card-list">
|
<view
|
class="bank-card"
|
v-for="(card, index) in bankCards"
|
:key="index"
|
:class="card.type"
|
>
|
<view class="card-info">
|
<image :src="card.logo" mode="aspectFit" class="bank-logo" />
|
<view class="info">
|
<text class="bank-name">{{ card.bankName }}</text>
|
<text class="card-type">{{ card.cardType }}</text>
|
</view>
|
</view>
|
<text class="card-number">**** **** **** {{ card.lastFour }}</text>
|
<view class="card-actions">
|
<text class="default-tag" v-if="card.isDefault">默认</text>
|
<view class="action-btns">
|
<text
|
class="action-btn"
|
v-if="!card.isDefault"
|
@tap="setDefault(card)"
|
>设为默认</text>
|
<text
|
class="action-btn"
|
@tap="unbindCard(card)"
|
>解除绑定</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 其他支付方式 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">其他支付方式</text>
|
</view>
|
<view class="payment-list">
|
<view
|
class="payment-item"
|
v-for="(payment, index) in paymentMethods"
|
:key="index"
|
@tap="togglePayment(payment)"
|
>
|
<view class="payment-info">
|
<image :src="payment.icon" mode="aspectFit" class="payment-icon" />
|
<view class="info">
|
<text class="name">{{ payment.name }}</text>
|
<text class="desc">{{ payment.desc }}</text>
|
</view>
|
</view>
|
<switch
|
:checked="payment.enabled"
|
color="#0f95b0"
|
@change="e => togglePayment(payment, e.detail.value)"
|
/>
|
</view>
|
</view>
|
</view>
|
|
<!-- 温馨提示 -->
|
<view class="notice-card">
|
<view class="section-title">温馨提示</view>
|
<view class="notice-list">
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">为保障资金安全，请使用本人银行卡</text>
|
</view>
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">银行卡信息已进行加密保护</text>
|
</view>
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">如遇支付问题，请联系客服：+853 2837 1333</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 银行卡列表
|
const bankCards = ref([
|
{
|
id: 1,
|
bankName: '中国银行(青岛)',
|
cardType: '储蓄卡',
|
lastFour: '8888',
|
type: 'bocm',
|
logo: '/static/payment/bocm.png',
|
isDefault: true
|
},
|
{
|
id: 2,
|
bankName: '工商银行(青岛)',
|
cardType: '储蓄卡',
|
lastFour: '6666',
|
type: 'icbcm',
|
logo: '/static/payment/icbcm.png',
|
isDefault: false
|
}
|
])
|
|
// 其他支付方式
|
const paymentMethods = ref([
|
{
|
id: 1,
|
name: '支付宝国际版',
|
desc: '支持青岛元/港币/人民币支付',
|
icon: '/static/payment/alipay.png',
|
enabled: true
|
},
|
{
|
id: 2,
|
name: 'MPay青岛钱包',
|
desc: '青岛本地移动支付工具',
|
icon: '/static/payment/mpay.png',
|
enabled: true
|
},
|
{
|
id: 3,
|
name: 'BOC Pay',
|
desc: '中银青岛手机支付',
|
icon: '/static/payment/bocpay.png',
|
enabled: false
|
},
|
{
|
id: 4,
|
name: 'WeChat Pay HK',
|
desc: '支持港币/青岛元支付',
|
icon: '/static/payment/wechat.png',
|
enabled: true
|
}
|
])
|
|
// 添加银行卡
|
const addBankCard = () => {
|
uni.navigateTo({
|
url: '/pages/my/add-bank-card'
|
})
|
}
|
|
// 设为默认卡
|
const setDefault = (card) => {
|
uni.showModal({
|
title: '提示',
|
content: '确定要将该卡设为默认支付卡吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里调用设置默认API
|
bankCards.value.forEach(item => {
|
item.isDefault = item.id === card.id
|
})
|
uni.showToast({
|
title: '设置成功',
|
icon: 'success'
|
})
|
}
|
}
|
})
|
}
|
|
// 解除绑定
|
const unbindCard = (card) => {
|
if (card.isDefault) {
|
uni.showToast({
|
title: '默认卡不能解绑',
|
icon: 'none'
|
})
|
return
|
}
|
|
uni.showModal({
|
title: '提示',
|
content: '确定要解除该银行卡绑定吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里调用解绑API
|
const index = bankCards.value.findIndex(item => item.id === card.id)
|
if (index > -1) {
|
bankCards.value.splice(index, 1)
|
uni.showToast({
|
title: '解绑成功',
|
icon: 'success'
|
})
|
}
|
}
|
}
|
})
|
}
|
|
// 切换支付方式
|
const togglePayment = (payment, value) => {
|
if (typeof value === 'undefined') {
|
value = !payment.enabled
|
}
|
|
// 这里调用开启/关闭API
|
payment.enabled = value
|
uni.showToast({
|
title: value ? '已开启' : '已关闭',
|
icon: 'success'
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.payment-method {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx;
|
|
.section-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.add-btn {
|
font-size: 28rpx;
|
color: $primary-color;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.card-list {
|
.bank-card {
|
background: $primary-gradient;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
color: #fff;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
&.bocm {
|
background: linear-gradient(135deg, #D4237A, #FF6B6B);
|
}
|
|
&.icbcm {
|
background: linear-gradient(135deg, #FF8C00, #FFB74D);
|
}
|
|
.card-info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.bank-logo {
|
width: 60rpx;
|
height: 60rpx;
|
margin-right: 16rpx;
|
}
|
|
.info {
|
.bank-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.card-type {
|
font-size: 24rpx;
|
opacity: 0.9;
|
}
|
}
|
}
|
|
.card-number {
|
font-size: 36rpx;
|
font-family: monospace;
|
letter-spacing: 4rpx;
|
margin-bottom: 30rpx;
|
display: block;
|
}
|
|
.card-actions {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.default-tag {
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
background: rgba(255,255,255,0.2);
|
border-radius: $radius-sm;
|
}
|
|
.action-btns {
|
display: flex;
|
gap: 20rpx;
|
|
.action-btn {
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
background: rgba(255,255,255,0.2);
|
border-radius: $radius-sm;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.payment-list {
|
.payment-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.payment-info {
|
display: flex;
|
align-items: center;
|
|
.payment-icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 30rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.notice-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
|
.section-title {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.notice-list {
|
.notice-item {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 16rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.dot {
|
width: 12rpx;
|
height: 12rpx;
|
background: $primary-color;
|
border-radius: 50%;
|
margin-top: 8rpx;
|
margin-right: 12rpx;
|
flex-shrink: 0;
|
}
|
|
.content {
|
flex: 1;
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
