311 lines
6.5 KiB
Vue
311 lines
6.5 KiB
Vue
<template>
|
|
<view class="my-account-page">
|
|
<!-- 顶部导航栏 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="我的账户"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="180rpx"
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
></uni-nav-bar>
|
|
|
|
<!-- 账户余额区域 -->
|
|
<view class="account-summary">
|
|
<view class="profile-section">
|
|
<image class="profile-avatar" :src="avatar" mode="aspectFill"></image>
|
|
</view>
|
|
<text class="balance-label">账户余额(元)</text>
|
|
<text class="balance-amount">{{ (accountBalance/100).toFixed(2) }}</text>
|
|
|
|
<!-- 账户信息详情 -->
|
|
<view class="account-details">
|
|
<view class="detail-item">
|
|
<text class="detail-label">单次提现限额</text>
|
|
<text class="detail-value">{{ (withdrawalBalanceMaxOnce/100).toFixed(2) }}元</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">提现手续费</text>
|
|
<text class="detail-value">{{ (withdrawalBalanceFee/100).toFixed(2) }}元</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">最低提现金额</text>
|
|
<text class="detail-value">{{ (lessWithdrawalBalance/100).toFixed(2) }}元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作选项 -->
|
|
<view class="action-items">
|
|
<view class="action-item" @click="handleWithdrawal">
|
|
<view class="action-icon withdrawal-icon">
|
|
<text class="icon-text">💰</text>
|
|
</view>
|
|
<view class="action-content">
|
|
<text class="action-title">提现</text>
|
|
<text class="action-subtitle">提现金额不得少于{{ (lessWithdrawalBalance/100).toFixed(2) }}元</text>
|
|
</view>
|
|
<text class="action-arrow">></text>
|
|
</view>
|
|
|
|
<view class="action-item" @click="handleBillDetails">
|
|
<view class="action-icon bill-icon">
|
|
<text class="icon-text">📋</text>
|
|
</view>
|
|
<view class="action-content">
|
|
<text class="action-title">账单明细</text>
|
|
</view>
|
|
<text class="action-arrow">></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部指示器 -->
|
|
<view class="bottom-indicator"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import api from '@/api/api.js'
|
|
import docUrl from '@/utils/docUrl'
|
|
// 响应式数据
|
|
const accountBalance = ref(0)
|
|
const withdrawalBalanceMaxOnce = ref(0)
|
|
const withdrawalBalanceFee = ref(0)
|
|
const lessWithdrawalBalance = ref(0)
|
|
const avatar = ref('')
|
|
|
|
onMounted(() => {
|
|
getMyAccount()
|
|
|
|
let userInfo= uni.getStorageSync('userInfo')
|
|
avatar.value = docUrl+userInfo.photo
|
|
})
|
|
|
|
// 方法
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
const handleWithdrawal = () => {
|
|
if(accountBalance.value < lessWithdrawalBalance.value){
|
|
uni.showToast({
|
|
title: `提现金额不得少于${(lessWithdrawalBalance/100).toFixed(2)}元`,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}else{
|
|
api.bankCardList().then(res => {
|
|
console.log(res)
|
|
if(res.code == 200 && res.data.length > 0){
|
|
uni.navigateTo({
|
|
url: '/pages_app/myAccount/withdrawal'
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先添加银行卡',
|
|
confirmText: '确定',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if(res.confirm){
|
|
uni.navigateTo({
|
|
url: '/pages_app/idcardAuth/bankCardList'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleBillDetails = () => {
|
|
uni.navigateTo({
|
|
url: '/pages_app/myAccount/billDetails'
|
|
})
|
|
}
|
|
|
|
const getMyAccount = async () => {
|
|
const res = await api.getMyAccount({})
|
|
console.log(res)
|
|
if (res && res.code === 200 && res.data) {
|
|
accountBalance.value = res.data.balance
|
|
withdrawalBalanceMaxOnce.value = res.data.withdrawalBalanceMaxOnce
|
|
withdrawalBalanceFee.value = res.data.withdrawalBalanceFee
|
|
lessWithdrawalBalance.value = res.data.lessWithdrawalBalance
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-account-page {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
// 账户余额区域样式
|
|
.account-summary {
|
|
background: linear-gradient(135deg, #8B2316, #A0522D);
|
|
margin: 30rpx;
|
|
border-radius: 20rpx;
|
|
padding: 60rpx 40rpx;
|
|
text-align: center;
|
|
box-shadow: 0 8rpx 24rpx rgba(139, 35, 22, 0.3);
|
|
position: relative;
|
|
|
|
.profile-section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.profile-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.balance-label {
|
|
display: block;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.balance-amount {
|
|
display: block;
|
|
color: #ffffff;
|
|
font-size: 72rpx;
|
|
font-weight: bold;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
letter-spacing: 2rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
// 账户信息详情样式
|
|
.account-details {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-label {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #ffffff;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 操作选项样式
|
|
.action-items {
|
|
background-color: #ffffff;
|
|
margin: 0 30rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.action-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40rpx 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
transition: background-color 0.2s ease;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 30rpx;
|
|
background-color: #f8f8f8;
|
|
|
|
.icon-text {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.withdrawal-icon {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.bill-icon {
|
|
background-color: #fff8e1;
|
|
}
|
|
|
|
.action-content {
|
|
flex: 1;
|
|
|
|
.action-title {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.action-subtitle {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1.4;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.action-arrow {
|
|
font-size: 32rpx;
|
|
color: #ccc;
|
|
font-weight: bold;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部指示器
|
|
.bottom-indicator {
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120rpx;
|
|
height: 6rpx;
|
|
background-color: #e0e0e0;
|
|
border-radius: 3rpx;
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|