我的账户
This commit is contained in:
haomingming
parent
7fb1200528
commit
89848ba321
12
pages.json
12
pages.json
@ -901,6 +901,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "myAccount/billDetail",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "详情",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "myAccount/withdrawal",
|
||||
"style": {
|
||||
@ -1686,7 +1696,7 @@
|
||||
"list": [
|
||||
{
|
||||
"name": "",
|
||||
"path": "pages_app/patientMsg/patientMsg",
|
||||
"path": "/pages_app/myAccount/myAccount",
|
||||
"query": ""
|
||||
}
|
||||
]
|
||||
|
||||
@ -19,26 +19,36 @@
|
||||
</view>
|
||||
<!-- 银行卡列表 -->
|
||||
<view class="card-list">
|
||||
<view class="card-item" v-for="(card, index) in bankCards" :key="card.uuid">
|
||||
<view class="card-logo">
|
||||
<image
|
||||
v-if="getBankLogoImg(card.open_bank)"
|
||||
class="bank-logo-img"
|
||||
:src="getBankLogoImg(card.open_bank)"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view v-else class="logo-bg">
|
||||
<text class="logo-text">{{ getBankLogo(card.open_bank) }}</text>
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item
|
||||
v-for="(card, index) in bankCards"
|
||||
:key="card.uuid"
|
||||
@change="onSwipeChange($event, card)"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<view class="swipe-right">
|
||||
<view class="card-delete-btn" @click.stop="handleDeleteBankCard(card)">删除</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="card-item" :class="{ 'is-swiping': openedSwipeUuid === card.uuid }">
|
||||
<view class="card-logo">
|
||||
<image
|
||||
v-if="getBankLogoImg(card.open_bank)"
|
||||
class="bank-logo-img"
|
||||
:src="getBankLogoImg(card.open_bank)"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view v-else class="logo-bg">
|
||||
<text class="logo-text">{{ getBankLogo(card.open_bank) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-number">尾号{{ card.card_number }}储蓄卡</view>
|
||||
<view class="bank-name">{{ card.open_bank }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-number">尾号{{ card.card_number }}储蓄卡</view>
|
||||
<view class="bank-name">{{ card.open_bank }}</view>
|
||||
</view>
|
||||
<view class="card-delete" @click.stop="handleDeleteBankCard(card)">
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
<empty v-if="bankCards.length === 0" imgWidth="50%" empty-img="/static/empty_bank.png" empty-desc="使用常用卡，支付更快捷"></empty>
|
||||
|
||||
@ -53,12 +63,17 @@ import navTo from '@/utils/navTo';
|
||||
import api from '@/api/api';
|
||||
import empty from "@/components/empty/empty.vue"
|
||||
const bankCards = ref([]);
|
||||
const openedSwipeUuid = ref('');
|
||||
import { onLoad,onBackPress } from '@dcloudio/uni-app';
|
||||
const from = ref('');
|
||||
const returnTo = ref('');
|
||||
onLoad((options) => {
|
||||
if(options.from){
|
||||
from.value = options.from;
|
||||
}
|
||||
if (options.returnTo) {
|
||||
returnTo.value = decodeURIComponent(options.returnTo);
|
||||
}
|
||||
});
|
||||
onBackPress(() => {
|
||||
if(!from.value){
|
||||
@ -85,8 +100,11 @@ const goBack = () => {
|
||||
};
|
||||
|
||||
const addBankCard = () => {
|
||||
const target = returnTo.value
|
||||
? `/pages_app/idcardAuth/idcardAuth?returnTo=${encodeURIComponent(returnTo.value)}`
|
||||
: '/pages_app/idcardAuth/idcardAuth';
|
||||
navTo({
|
||||
url: '/pages_app/idcardAuth/idcardAuth'
|
||||
url: target
|
||||
});
|
||||
};
|
||||
|
||||
@ -146,6 +164,13 @@ const handleDeleteBankCard = (card) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onSwipeChange = (e, card) => {
|
||||
const state = typeof e === 'string'
|
||||
? e
|
||||
: e?.position || e?.show || e?.detail?.position || e?.detail?.show || 'none';
|
||||
openedSwipeUuid.value = state === 'right' ? card.uuid : '';
|
||||
};
|
||||
|
||||
// 获取银行logo文字
|
||||
const getBankLogo = (bankName) => {
|
||||
const bankLogos = {
|
||||
@ -181,7 +206,6 @@ onMounted(() => {
|
||||
|
||||
:deep(.uni-nav-bar-right-text) {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,15 +213,41 @@ onMounted(() => {
|
||||
.card-list {
|
||||
margin-top: calc(var(--status-bar-height) + 44px);
|
||||
padding: 30rpx;
|
||||
|
||||
.swipe-right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding-right: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-delete-btn {
|
||||
min-width: 112rpx;
|
||||
height: 100%;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
background: #E60012;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.is-swiping {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.card-logo {
|
||||
margin-right: 30rpx;
|
||||
@ -242,12 +292,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.card-delete {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #E60012;
|
||||
padding: 8rpx 0 8rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -88,9 +88,11 @@
|
||||
<text class="form-label">银行卡号</text>
|
||||
<view class="input-container">
|
||||
<input
|
||||
class="form-input"
|
||||
class="form-input card-number-input"
|
||||
:class="{ 'is-filled': !!formData.cardNumber }"
|
||||
placeholder="仅限借记卡"
|
||||
v-model="formData.cardNumber"
|
||||
:value="cardNumberDisplay"
|
||||
@input="onCardNumberInput"
|
||||
placeholder-style="color: #cccccc"
|
||||
/>
|
||||
|
||||
@ -103,7 +105,7 @@
|
||||
<text class="form-label">手机号</text>
|
||||
<view class="input-container">
|
||||
<input
|
||||
class="form-input"
|
||||
class="form-input card-number-input"
|
||||
placeholder="银行预留手机号"
|
||||
v-model="formData.mobile"
|
||||
placeholder-style="color: #cccccc"
|
||||
@ -171,6 +173,7 @@ import stepActiveImg from "@/static/add_card_yes.png"
|
||||
import navTo from '@/utils/navTo';
|
||||
import api from '@/api/api';
|
||||
import unidialog from '@/components/dialog/dialog.vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
const cardContent = ref('暂支持以下银行：农业银行、建设银行、光大银行、平安银行、兴业银行、中信银行、邮政储蓄银行、民生银行、中国银行、工商银行、交通银行、浦发银行、广发银行、华夏银行、招商银行、北京银行、上海银行。');
|
||||
const cardTitle = ref('银行卡说明');
|
||||
const cardVisible = ref(false);
|
||||
@ -199,6 +202,13 @@ const smsCode = ref('');
|
||||
const sendingCode = ref(false);
|
||||
const countdown = ref(0);
|
||||
let countdownTimer = null;
|
||||
const returnTo = ref('');
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.returnTo) {
|
||||
returnTo.value = decodeURIComponent(options.returnTo);
|
||||
}
|
||||
});
|
||||
|
||||
const maskedMobile = computed(() => {
|
||||
const m = formData.value.mobile || '';
|
||||
@ -207,6 +217,18 @@ const maskedMobile = computed(() => {
|
||||
}
|
||||
return m || '***********';
|
||||
});
|
||||
|
||||
const formatCardNumber = (value) => {
|
||||
const digits = String(value || '').replace(/\D/g, '').slice(0, 19);
|
||||
return digits.replace(/(\d{4})(?=\d)/g, '$1 ');
|
||||
};
|
||||
|
||||
const cardNumberDisplay = computed(() => formatCardNumber(formData.value.cardNumber));
|
||||
|
||||
const onCardNumberInput = (e) => {
|
||||
const value = e?.detail?.value || '';
|
||||
formData.value.cardNumber = String(value).replace(/\D/g, '').slice(0, 19);
|
||||
};
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
@ -344,9 +366,15 @@ const onConfirmSms = async () => {
|
||||
});
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '银行卡添加成功', icon: 'none' });
|
||||
navTo({
|
||||
url: '/pages_app/idcardAuth/bankCardList'
|
||||
});
|
||||
if (returnTo.value) {
|
||||
uni.redirectTo({
|
||||
url: returnTo.value
|
||||
});
|
||||
} else {
|
||||
navTo({
|
||||
url: '/pages_app/idcardAuth/bankCardList'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '银行卡添加失败', icon: 'none' });
|
||||
}
|
||||
@ -484,42 +512,55 @@ const onCancelSms = () => {
|
||||
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
padding: 0 30rpx 20rpx;
|
||||
height: 92rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
width: 120rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
text-align-last: auto;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: #8B2316;
|
||||
}
|
||||
}
|
||||
.info-icon {
|
||||
flex:1;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
@ -539,20 +580,26 @@ const onCancelSms = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
flex: 1;
|
||||
padding-right: 56rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.form-input {
|
||||
flex: 9;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
line-height: 80rpx;
|
||||
padding: 0;
|
||||
font-size: 28rpx;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
/* 去除边框后无需变更边框颜色 */
|
||||
box-sizing: border-box;
|
||||
|
||||
&.card-number-input.is-filled {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@ -674,6 +721,10 @@ const onCancelSms = () => {
|
||||
background: #eeeeee;
|
||||
color: #8B2316;
|
||||
font-size: 26rpx;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sms-actions {
|
||||
|
||||
135
pages_app/myAccount/billDetail.vue
Normal file
135
pages_app/myAccount/billDetail.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<view class="bill-detail-page">
|
||||
<view class="navbox">
|
||||
<view class="status_bar"></view>
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="详情"
|
||||
@clickLeft="goBack"
|
||||
color="#8B2316"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar>
|
||||
</view>
|
||||
|
||||
<view class="detail-content">
|
||||
<view class="detail-row">
|
||||
<text class="label">交易号：</text>
|
||||
<text class="value">{{ detail.tradeNo || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="label">类型：</text>
|
||||
<text class="value">{{ detail.typeName || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="label">金额：</text>
|
||||
<text class="value amount" :class="amountClass">{{ detail.accountStr || '-' }}元</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="label">患者：</text>
|
||||
<text class="value">{{ detail.userName || '-' }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="label">时间：</text>
|
||||
<text class="value">{{ formatDateTime(detail.createTime) }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="label">备注：</text>
|
||||
<text class="value">{{ detail.remark || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const detail = ref({})
|
||||
const from = ref('')
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.from) {
|
||||
from.value = decodeURIComponent(options.from)
|
||||
}
|
||||
})
|
||||
|
||||
const amountClass = computed(() => {
|
||||
const amount = Number(detail.value?.accountStr || 0)
|
||||
return amount < 0 ? 'negative' : 'positive'
|
||||
})
|
||||
|
||||
const formatDateTime = (value) => {
|
||||
if (!value) return '-'
|
||||
const text = String(value).trim()
|
||||
const date = new Date(text)
|
||||
if (Number.isNaN(date.getTime())) return text
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
const hh = String(date.getHours()).padStart(2, '0')
|
||||
const mm = String(date.getMinutes()).padStart(2, '0')
|
||||
const ss = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
if (from.value === 'billDetails') {
|
||||
uni.navigateBack()
|
||||
return
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages_app/myAccount/billDetails?from=myAccount'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const cache = uni.getStorageSync('billDetailItem')
|
||||
detail.value = cache || {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bill-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
margin-top: calc(var(--status-bar-height) + 44px);
|
||||
background: #ffffff;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
min-height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #efefef;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 38rpx;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 38rpx;
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.amount {
|
||||
&.positive {
|
||||
color: #8B2316;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: #3f3f3f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -35,7 +35,7 @@
|
||||
@scrolltolower="onLoadMore"
|
||||
:lower-threshold="100"
|
||||
>
|
||||
<view class="transaction-item" v-for="(item, index) in orderList" :key="item.id">
|
||||
<view class="transaction-item" v-for="(item, index) in orderList" :key="item.id" @click="goToDetail(item)">
|
||||
<view class="cell business-type">{{ item.typeName }}</view>
|
||||
<view class="cell user">{{ item.userName }}</view>
|
||||
<view class="cell date-amount">
|
||||
@ -65,6 +65,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import api from '@/api/api.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
// 响应式数据
|
||||
const orderList = ref([])
|
||||
@ -74,6 +75,13 @@ const page = ref(1)
|
||||
const total = ref(0)
|
||||
const isFirstPage = ref(true)
|
||||
const isLastPage = ref(false)
|
||||
const from = ref('')
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.from) {
|
||||
from.value = decodeURIComponent(options.from)
|
||||
}
|
||||
})
|
||||
|
||||
const stopRefresh = () => {
|
||||
refreshing.value = false
|
||||
@ -106,13 +114,15 @@ const getOrderList = async (isRefresh = false) => {
|
||||
const safeList = Array.isArray(list) ? list : []
|
||||
const processedList = safeList.map(item => ({
|
||||
id: item.trade_no,
|
||||
tradeNo: item.trade_no,
|
||||
typeName: item.type_name,
|
||||
userName: item.user_name,
|
||||
createTime: item.create_time,
|
||||
accountStr: item.accountstr,
|
||||
payChannel: item.pay_channel,
|
||||
orderType: item.order_type,
|
||||
status: item.status
|
||||
status: item.status,
|
||||
remark: item.remark || item.message || ''
|
||||
}))
|
||||
|
||||
orderList.value.push(...processedList)
|
||||
@ -164,9 +174,23 @@ const formatDate = (dateStr) => {
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
if (from.value === 'myAccount') {
|
||||
uni.redirectTo({
|
||||
url: '/pages_app/myAccount/myAccount?from=billDetails'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const goToDetail = (item) => {
|
||||
uni.setStorageSync('billDetailItem', item || {})
|
||||
const fromPage = encodeURIComponent('billDetails')
|
||||
uni.navigateTo({
|
||||
url: `/pages_app/myAccount/billDetail?from=${fromPage}`
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getOrderList()
|
||||
})
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<view class="action-items">
|
||||
<view class="action-item" @click="handleWithdrawal">
|
||||
<view class="action-icon withdrawal-icon">
|
||||
<text class="icon-text">💰</text>
|
||||
<image class="icon-img" :src="withdrawalsIcon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="action-content">
|
||||
<text class="action-title">提现</text>
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
<view class="action-item" @click="handleBillDetails">
|
||||
<view class="action-icon bill-icon">
|
||||
<text class="icon-text">📋</text>
|
||||
<image class="icon-img" :src="accountIcon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="action-content">
|
||||
<text class="action-title">账单明细</text>
|
||||
@ -71,6 +71,8 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import api from '@/api/api.js'
|
||||
import docUrl from '@/utils/docUrl'
|
||||
import withdrawalsIcon from '@/static/withdrawals.png'
|
||||
import accountIcon from '@/static/account_icon.png'
|
||||
import { onLoad,onBackPress } from '@dcloudio/uni-app';
|
||||
const from = ref('');
|
||||
onLoad((options) => {
|
||||
@ -129,8 +131,9 @@ const handleWithdrawal = () => {
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if(res.confirm){
|
||||
const returnTo = encodeURIComponent('/pages_app/myAccount/myAccount')
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/idcardAuth/bankCardList'
|
||||
url: `/pages_app/idcardAuth/idcardAuth?returnTo=${returnTo}`
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -141,8 +144,9 @@ const handleWithdrawal = () => {
|
||||
}
|
||||
|
||||
const handleBillDetails = () => {
|
||||
const from = encodeURIComponent('myAccount')
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/myAccount/billDetails'
|
||||
url: `/pages_app/myAccount/billDetails?from=${from}`
|
||||
})
|
||||
}
|
||||
|
||||
@ -172,13 +176,13 @@ const getMyAccount = async () => {
|
||||
background: linear-gradient(135deg, #8B2316, #A0522D);
|
||||
// margin: 30rpx;
|
||||
// border-radius: 20rpx;
|
||||
padding: 60rpx 40rpx;
|
||||
padding: 30rpx 40rpx 10rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(139, 35, 22, 0.3);
|
||||
position: relative;
|
||||
|
||||
.profile-section {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.profile-avatar {
|
||||
width: 120rpx;
|
||||
@ -193,18 +197,18 @@ const getMyAccount = async () => {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
font-size: 72rpx;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
// 账户信息详情样式
|
||||
@ -242,7 +246,7 @@ const getMyAccount = async () => {
|
||||
// 操作选项样式
|
||||
.action-items {
|
||||
background-color: #ffffff;
|
||||
margin-top: 30rpx;
|
||||
margin-top: 0rpx;
|
||||
// border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
@ -250,7 +254,7 @@ const getMyAccount = async () => {
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
@ -275,6 +279,11 @@ const getMyAccount = async () => {
|
||||
.icon-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.withdrawal-icon {
|
||||
|
||||
@ -26,20 +26,27 @@
|
||||
<text class="section-title">结算银行卡</text>
|
||||
<text class="withdrawal-rules" @click="showWithdrawalRules">提现规则</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="bank-card-info" @click="selectBankCard" v-if="selectedBankCard">
|
||||
<view class="bank-logo">
|
||||
<text class="bank-icon">{{ selectedBankCard.bankName ? selectedBankCard.bankName.charAt(0) : '工' }}</text>
|
||||
<image
|
||||
v-if="getBankLogoImg(getBankName(selectedBankCard))"
|
||||
class="bank-logo-img"
|
||||
:src="getBankLogoImg(getBankName(selectedBankCard))"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view v-else class="logo-bg">
|
||||
<text class="bank-icon">{{ getBankLogo(getBankName(selectedBankCard)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bank-details">
|
||||
<text class="bank-name">{{ selectedBankCard.bankName || '工商银行' }}</text>
|
||||
<text class="bank-card-number">尾号为{{ selectedBankCard.cardNumber ? selectedBankCard.cardNumber.slice(-4) : '8937' }}储蓄卡</text>
|
||||
<text class="bank-name">{{ getBankName(selectedBankCard) || '工商银行' }}</text>
|
||||
<text class="bank-card-number">尾号为{{ getCardTail(selectedBankCard) }}储蓄卡</text>
|
||||
</view>
|
||||
<text class="arrow-icon">›</text>
|
||||
<uni-icons type="right" size="25" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="no-bank-card" v-else>
|
||||
<text class="no-card-text">请先添加银行卡</text>
|
||||
<text class="arrow-icon">›</text>
|
||||
<uni-icons type="right" size="25" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
</view>
|
||||
@ -164,6 +171,63 @@ const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const bankLogoMap = {
|
||||
'工商银行': '/static/icon_bankcard_gongshang.png',
|
||||
'中国银行': '/static/icon_bankcard_zhongguo.png',
|
||||
'建设银行': '/static/icon_bankcard_jianseyinhang.png',
|
||||
'农业银行': '/static/icon_bankcard_nongyeyinhang.png',
|
||||
'交通银行': '/static/icon_bankcard_jiatong.png',
|
||||
'招商银行': '/static/icon_bankcard_zhaoshangyinhang.png',
|
||||
'民生银行': '/static/icon_bankcard_minshneg.png',
|
||||
'兴业银行': '/static/icon_bankcard_xingye.png',
|
||||
'浦发银行': '/static/icon_bankcard_shanghaipudongfazhanyinhang.png',
|
||||
'光大银行': '/static/icon_bankcard_guangda.png',
|
||||
'华夏银行': '/static/icon_bankcard_huaxiayinhnag.png',
|
||||
'中信银行': '/static/icon_bankcard_zhongxinshiye.png',
|
||||
'平安银行': '/static/icon_bankcard_pingan.png',
|
||||
'广发银行': '/static/icon_bankcard_guangfa.png',
|
||||
'邮储银行': '/static/icon_bankcard_youzheng.png',
|
||||
'上海银行': '/static/icon_bankcard_shanghai.png',
|
||||
'北京银行': '/static/icon_bankcard_beijingyinhang.png'
|
||||
}
|
||||
|
||||
const getBankName = (card) => {
|
||||
if (!card) return ''
|
||||
return card.bankName || card.open_bank || ''
|
||||
}
|
||||
|
||||
const getCardTail = (card) => {
|
||||
if (!card) return '8937'
|
||||
const raw = card.cardNumber || card.card_number || ''
|
||||
return raw ? String(raw).slice(-4) : '8937'
|
||||
}
|
||||
|
||||
const getBankLogoImg = (bankName) => {
|
||||
return bankLogoMap[bankName] || ''
|
||||
}
|
||||
|
||||
const getBankLogo = (bankName) => {
|
||||
const bankLogos = {
|
||||
'工商银行': '工',
|
||||
'中国银行': '中',
|
||||
'建设银行': '建',
|
||||
'农业银行': '农',
|
||||
'交通银行': '交',
|
||||
'招商银行': '招',
|
||||
'民生银行': '民',
|
||||
'兴业银行': '兴',
|
||||
'浦发银行': '浦',
|
||||
'光大银行': '光',
|
||||
'华夏银行': '华',
|
||||
'中信银行': '信',
|
||||
'平安银行': '平',
|
||||
'广发银行': '广',
|
||||
'邮储银行': '邮'
|
||||
}
|
||||
if (!bankName) return '工'
|
||||
return bankLogos[bankName] || bankName.charAt(0)
|
||||
}
|
||||
|
||||
// 获取我的账户信息
|
||||
const getMyAccount = async () => {
|
||||
try {
|
||||
@ -219,8 +283,9 @@ const getBankCardList = async () => {
|
||||
confirmText: '去添加',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
const returnTo = encodeURIComponent('/pages_app/myAccount/withdrawal?from=bankCardList')
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/idcardAuth/bankCardList'
|
||||
url: `/pages_app/idcardAuth/bankCardList?from=withdrawal&returnTo=${returnTo}`
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -243,7 +308,7 @@ const selectBankCard = () => {
|
||||
|
||||
// 这里可以实现银行卡选择逻辑
|
||||
uni.showActionSheet({
|
||||
itemList: bankCardList.value.map(card => `${card.bankName} 尾号${card.cardNumber.slice(-4)}`),
|
||||
itemList: bankCardList.value.map(card => `${getBankName(card)} 尾号${getCardTail(card)}`),
|
||||
success: (res) => {
|
||||
selectedBankCard.value = bankCardList.value[res.tapIndex]
|
||||
}
|
||||
@ -257,8 +322,8 @@ const showWithdrawalRules = () => {
|
||||
const feeAmount = (withdrawalBalanceFee.value / 100).toFixed(2)
|
||||
|
||||
uni.showModal({
|
||||
title: '提现规则',
|
||||
content: `1. 提现金额不得少于${minAmount}元\n2. 单次提现限额为${maxAmount}元\n3. 提现手续费为${feeAmount}元\n4. 工作日24小时内到账`,
|
||||
title: '温馨提示',
|
||||
content: `提交成功后会有工作人员与您联系`,
|
||||
showCancel: false,
|
||||
confirmText: '我知道了'
|
||||
})
|
||||
@ -283,15 +348,7 @@ const confirmWithdrawal = () => {
|
||||
return
|
||||
}
|
||||
|
||||
// 检查单次提现限额
|
||||
const maxAmount = withdrawalBalanceMaxOnce.value / 100
|
||||
if (parseFloat(withdrawalAmount.value) > maxAmount) {
|
||||
uni.showToast({
|
||||
title: `单次提现限额为${maxAmount.toFixed(2)}元`,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// 弹出短信验证码弹框
|
||||
showSmsDialog.value = true
|
||||
@ -410,7 +467,9 @@ const onCancelSms = () => {
|
||||
|
||||
// 主内容区域
|
||||
.main-content {
|
||||
|
||||
padding-top: calc(var(--status-bar-height) + 44px);
|
||||
padding-bottom: 180rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
@ -453,8 +512,8 @@ const onCancelSms = () => {
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #f0f0f0;
|
||||
height: 2rpx;
|
||||
background-color: #bab7b7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -467,17 +526,29 @@ const onCancelSms = () => {
|
||||
.bank-logo {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #8B2316;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.bank-icon {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
|
||||
.bank-logo-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.logo-bg {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #E60012;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #E60012;
|
||||
|
||||
.bank-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -499,7 +570,7 @@ const onCancelSms = () => {
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 32rpx;
|
||||
font-size: 62rpx;
|
||||
color: #cccccc;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -674,6 +745,10 @@ const onCancelSms = () => {
|
||||
color: #8B2316;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:disabled {
|
||||
background: #f5f5f5;
|
||||
|
||||
BIN
static/account_icon.png
Normal file
BIN
static/account_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/withdrawals.png
Normal file
BIN
static/withdrawals.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
x
Reference in New Issue
Block a user