You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
8.0 KiB
Vue
411 lines
8.0 KiB
Vue
<template>
|
|
<view class="personal-center">
|
|
<!-- 背景 -->
|
|
<view class="bg"></view>
|
|
|
|
<!-- 个人中心卡片 -->
|
|
<view class="card user-card">
|
|
<view class="card-top">
|
|
<view class="title">个人中心</view>
|
|
<view class="logout" @click="logout">
|
|
<uni-icons type="redo" size="16 】" color="#666"></uni-icons>
|
|
|
|
<text>退出登录</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="user-header">
|
|
<view class="avatar">
|
|
<text>{{userInfo.first_name_char}}</text>
|
|
</view>
|
|
<view class="user-info">
|
|
<view class="name">{{userInfo.name}}</view>
|
|
<view class="phone">{{userInfo.tel}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 余额信息 -->
|
|
<view class="balance-info">
|
|
<view class="item">
|
|
<view class="label">当前余额</view>
|
|
<view class="value" style="color: #0066CC;">¥{{userInfo.balance}}</view>
|
|
</view>
|
|
<!-- <view class="item">
|
|
<view class="label">当前利息</view>
|
|
<view class="value green">{{userInfo.存款利率}}%</view>
|
|
</view> -->
|
|
<view class="item">
|
|
<view class="label">累计收益</view>
|
|
<view class="value green">{{userInfo.total_interest}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能按钮 -->
|
|
<view class="action-buttons">
|
|
<button class="btn" @click="RechargeClick()">
|
|
<view style="margin-bottom: 10rpx;font-size: 40rpx;">💰</view>
|
|
<view>充值</view>
|
|
</button>
|
|
<button class="btn" @click="WithdrawClick()">
|
|
<view style="margin-bottom: 10rpx;font-size: 40rpx;">💳</view>
|
|
<view>提现</view>
|
|
</button>
|
|
<button class="btn" @click="LoanClick()">
|
|
<view style="margin-bottom: 10rpx;font-size: 40rpx;">💵</view>
|
|
<view>借款</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 交易记录卡片 -->
|
|
<view class="card transaction-card">
|
|
<view class="title">交易记录</view>
|
|
|
|
<!-- 筛选标签 -->
|
|
<view class="tabs">
|
|
<view v-for="(tab, index) in tabs" :key="index">
|
|
<view :class="{ active: activeTab === index }" class="tab" @click="changeTab(index)">
|
|
<view>{{ tab }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 交易记录列表 -->
|
|
<view class="transaction-list" v-if="TransactionList.length>0">
|
|
<view class="transaction-item" v-for="(item,index) in TransactionList" :key="index">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<text>+</text>
|
|
</view>
|
|
<view class="content">
|
|
<view class="type">{{item.type_label}}</view>
|
|
<view class="time">{{item.created_at}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="amount green" :style="{'color':item.color}">{{item.fuhao}}¥{{item.amount}}</view>
|
|
|
|
<uni-tag :inverted="true" :text="item.status_label" size="mini" :type="item.tag_type" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="nodate">暂无记录</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from "vue"
|
|
import {
|
|
MemberGetInfo,TransactionGetList
|
|
} from "@/api"
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app"
|
|
|
|
|
|
let activeTab = ref(0)
|
|
let tabs = ref(['全部', '充值', '收益', '提取', '借款'])
|
|
let userInfo=ref({})
|
|
|
|
const changeTab = (index) => {
|
|
activeTab.value = index;
|
|
TransactionType.value=activeTab.value
|
|
GetTransactionList()
|
|
}
|
|
const logout = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 清除用户信息，跳转登录页
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
uni.reLaunch({
|
|
url: '/pages/login'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
const GetMemberInfo=()=>{
|
|
MemberGetInfo().then(res => {
|
|
if (res.status) {
|
|
userInfo.value=res.data.info
|
|
userInfo.value.H5业务开关=JSON.parse(userInfo.value.H5业务开关)
|
|
}
|
|
})
|
|
}
|
|
let TransactionType=ref(0)
|
|
let TransactionList=ref([])
|
|
const GetTransactionList=()=>{
|
|
TransactionGetList({type:TransactionType.value}).then(res => {
|
|
if (res.status) {
|
|
TransactionList.value=res.data.list
|
|
}
|
|
})
|
|
}
|
|
const RechargeClick=()=>{
|
|
if(userInfo.value.H5业务开关.充值!==1){
|
|
uni.showToast({
|
|
title: '此业务暂未开放',
|
|
icon: 'none'
|
|
});
|
|
return false
|
|
}
|
|
uni.navigateTo({
|
|
url:'/pages/user/recharge'
|
|
})
|
|
}
|
|
const WithdrawClick=()=>{
|
|
if(userInfo.value.H5业务开关.提现!==1){
|
|
uni.showToast({
|
|
title: '此业务暂未开放',
|
|
icon: 'none'
|
|
});
|
|
return false
|
|
}
|
|
uni.navigateTo({
|
|
url:'/pages/user/withdraw?mp='+userInfo.value.balance
|
|
})
|
|
}
|
|
const LoanClick=()=>{
|
|
if(userInfo.value.H5业务开关.借款!==1){
|
|
uni.showToast({
|
|
title: '此业务暂未开放',
|
|
icon: 'none'
|
|
});
|
|
return false
|
|
}
|
|
uni.navigateTo({
|
|
url:'/pages/user/loan?rate='+userInfo.value.借款利率
|
|
})
|
|
}
|
|
onLoad(()=>{
|
|
GetMemberInfo()
|
|
GetTransactionList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.nodate{
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color:#ccc;
|
|
}
|
|
.card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 40rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #1a56db;
|
|
}
|
|
|
|
.logout {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* 基础样式 */
|
|
.personal-center {
|
|
padding: 30rpx;
|
|
background-color: #f0f6ff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #e6f7ff 0%, #f0f6ff 100%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.user-card {
|
|
.user-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
margin-bottom: 40rpx;
|
|
|
|
.avatar {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
background: #0066cc;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.user-info {
|
|
margin-left: 20rpx;
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.phone {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.balance-info {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 50rpx;
|
|
|
|
.item {
|
|
text-align: center;
|
|
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
font-size: 32rpx;
|
|
font-weight: bolder;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.green {
|
|
color: #00c066;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
background: none;
|
|
border: 2rpx solid #0066cc;
|
|
color: #0066cc;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.transaction-card {
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
color: #0066cc;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
padding: 10rpx 28rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
.active {
|
|
color: white;
|
|
background-color: #0066cc;
|
|
}
|
|
}
|
|
|
|
.transaction-list {
|
|
.transaction-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #e6f7ff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
color: #0066cc;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.content {
|
|
|
|
.type {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
|
|
.amount {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status {
|
|
font-size: 24rpx;
|
|
color: #00c066;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |