524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template>
|
||
<view class="ithui-content">
|
||
<!-- #ifndef H5 -->
|
||
<view class="h5title">我的余额</view>
|
||
<!-- #endif -->
|
||
<view class="ithui-view">
|
||
<view class="view-info">
|
||
<view class="userinfo">
|
||
<view class="flex">
|
||
<cloud-image v-if="userInfo.avatar_file" borderRadius="50%" class="userinfo-headimg"
|
||
:src="userInfo.avatar_file.url"></cloud-image>
|
||
<image v-else
|
||
src="https://qnycdn.mymoyu.top/static/avatar.jpg"
|
||
class="userinfo-headimg borde-radius"></image>
|
||
<view class="flex-one">
|
||
<view class="flex-one-text">用户名：{{ userInfo.nickname }}</view>
|
||
<view class="flex-one-text">uid: ({{ userInfo._id }})</view>
|
||
<view class="flex-one-text">手机号：{{ userInfo.mobile }}</view>
|
||
</view>
|
||
<view class="arrow arrow-one" @click="showModal = true"><span>名词解释</span></view>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="showModal" title="名词解释" confirmText="我已知晓" @confirm="showModal = false"
|
||
confirmColor="#ff1e0f">
|
||
<view class="slot-content">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
</u-modal>
|
||
<view class="box">
|
||
<view class="tx">
|
||
<view class="tx-grid">
|
||
<view class="tx-grid-text">
|
||
<view class="title">可提现余额</view>
|
||
<view class="money">
|
||
<text>{{ userInfo.available }}</text>
|
||
<text class="money-b">元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tx-grid" @click="navTo('../withdraw/withdraw')"><span
|
||
class="tx-grid-comm-sign">立即提现</span></view>
|
||
</view>
|
||
<view class="palace palace-one">
|
||
<view class="palace-grid">
|
||
<view class="palace-grid-text">
|
||
<view class="palace-grid-text-data">
|
||
<text>{{ userInfo.available || 0 }}</text>
|
||
<text class="palace-grid-text-data-b">元</text>
|
||
</view>
|
||
<view class="palace-grid-text-name">剩余提现额度</view>
|
||
</view>
|
||
</view>
|
||
<view class="palace-grid">
|
||
<view class="palace-grid-text">
|
||
<view class="palace-grid-text-data">
|
||
<text>{{ userInfo.total_recharge || 0 }}</text>
|
||
<text class="palace-grid-text-data-b">元</text>
|
||
</view>
|
||
<view class="palace-grid-text-name">累计收益</view>
|
||
</view>
|
||
</view>
|
||
<view class="palace-grid">
|
||
<view class="palace-grid-text">
|
||
<view class="palace-grid-text-data">
|
||
<text>{{ userInfo.total_withdraw }}</text>
|
||
<text class="palace-grid-text-data-b">元</text>
|
||
</view>
|
||
<view class="palace-grid-text-name">累计提现</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top">
|
||
<u-subsection :list="tabs" fontSize="16" activeColor="#ff8440" :current="tabIndex"
|
||
@change="changeTab"></u-subsection>
|
||
<u-empty v-if="list.length === 0" style="margin-top: 40rpx;" mode="order" text="没有记录" iconSize="140"
|
||
textSize="32">
|
||
</u-empty>
|
||
</view>
|
||
<view class="list-view">
|
||
<view class="list-item" v-for="(item, index) in list" :key="index" hover-class="hover"
|
||
:hover-stay-time="150">
|
||
<view class="content-box">
|
||
<view class="des-box">
|
||
<view class="tit">
|
||
{{ item.name }}
|
||
</view>
|
||
<view v-if="tabIndex == 3" class="source"
|
||
:style="{ color: item.status == 1 ? '#4caf50' : item.status == 2 ? '#00b7ff' : '#ff1e0f' }">
|
||
提现{{ item.status == 1 ? '成功' : item.status == 2 ? '处理中' : '失败' }}
|
||
</view>
|
||
<view class="time">{{ item.create_time }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="money" :class="{ less: is_withdraw }">
|
||
{{ is_withdraw ? '-' : '+' }}{{ tabIndex == 3 ? item.real_money : item.money }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip">仅显示近一年内的收支记录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, computed, onMounted, onPullDownRefresh } from 'vue'
|
||
import { store } from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
||
import uSubsection from "../../uni_modules/uview-ui/components/u-subsection/u-subsection.vue"
|
||
import uModal from "../../uni_modules/uview-ui/components/u-modal/u-modal.vue"
|
||
|
||
export default {
|
||
components: {
|
||
uSubsection,
|
||
uModal
|
||
},
|
||
setup() {
|
||
const is_withdraw = ref(false)
|
||
const list = ref([])
|
||
const userData = ref({})
|
||
const showModal = ref(false)
|
||
const date = ref('incomeMonth')
|
||
const tabIndex = ref(0)
|
||
const tabs = ref(['本月收入', '今日收入', '昨日收入', '提现记录'])
|
||
|
||
const content = ref(`<p><em style="font-style:normal;color:#ff1e0f">可提现余额：</em>当前可以提现的金额</p>
|
||
<p><em style="font-style:normal;color:#ff1e0f">即将到账：</em>交易中的金额，交易成功后可提现</p>
|
||
<p><em style="font-style:normal;color:#ff1e0f">累计到账：</em>累计交易成功的金额</p>
|
||
<p><em style="font-style:normal;color:#ff1e0f">累计提现：</em>累计提现成功的金额</p>
|
||
<p><em style="font-style:normal;color:#ff1e0f">*注：所有金额币种均为人民币，单位为元，符号￥</em></p>
|
||
`)
|
||
|
||
const userInfo = computed(() => store.userInfo)
|
||
|
||
const realNameStatus = computed(() => {
|
||
if (!userInfo.value.realNameAuth) return 0
|
||
return userInfo.value.realNameAuth.authStatus
|
||
})
|
||
|
||
onMounted(() => {
|
||
uni.showLoading({ title: '加载中' })
|
||
initData()
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 500)
|
||
})
|
||
|
||
onPullDownRefresh(() => {
|
||
uni.showLoading({ title: '加载中' })
|
||
showModal.value = false
|
||
initData()
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 500)
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
}, 500)
|
||
})
|
||
|
||
async function initData() {
|
||
tabIndex.value = 0
|
||
}
|
||
|
||
async function getFundList() {
|
||
// list.value = await this.$api.mock(date.value)
|
||
}
|
||
|
||
function changeTab(index) {
|
||
tabIndex.value = index
|
||
list.value = []
|
||
if (tabIndex.value === 0) {
|
||
date.value = 'incomeMonth'
|
||
is_withdraw.value = false
|
||
} else if (tabIndex.value === 1) {
|
||
date.value = 'incomeToday'
|
||
is_withdraw.value = false
|
||
} else if (tabIndex.value === 2) {
|
||
date.value = 'incomeYesterday'
|
||
is_withdraw.value = false
|
||
} else if (tabIndex.value === 3) {
|
||
date.value = 'incomeList'
|
||
is_withdraw.value = true
|
||
}
|
||
uni.showLoading({ title: '加载中' })
|
||
getFundList()
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 500)
|
||
}
|
||
|
||
function navTo(url) {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
return {
|
||
is_withdraw,
|
||
list,
|
||
userData,
|
||
showModal,
|
||
date,
|
||
tabIndex,
|
||
tabs,
|
||
content,
|
||
userInfo,
|
||
realNameStatus,
|
||
initData,
|
||
getFundList,
|
||
changeTab,
|
||
navTo
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../uni_modules/uview-ui/theme.scss';
|
||
@import '../../uni_modules/uview-ui/index.scss';
|
||
|
||
::v-deep .u-modal__content {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 50rpx;
|
||
position: relative;
|
||
|
||
&-one {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
|
||
&-text {
|
||
margin: 10rpx 0;
|
||
color: #f5f5f5;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ithui {
|
||
&-content {
|
||
.h5title {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
text-align: center;
|
||
line-height: 200rpx;
|
||
color: white;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
background: linear-gradient(to right, #ff8440, #ff1e0f);
|
||
}
|
||
|
||
.list-view {
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-item {
|
||
width: 100%;
|
||
padding: 30rpx 28rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #eaeef1;
|
||
}
|
||
|
||
.item-last::after {
|
||
left: 0 !important;
|
||
}
|
||
|
||
.content-box {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.des-box {
|
||
min-height: 80rpx;
|
||
padding-left: 28rpx;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 32rpx;
|
||
max-width: 420rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.source {
|
||
margin: 12rpx 0;
|
||
}
|
||
|
||
.time {
|
||
color: #888;
|
||
}
|
||
|
||
.money {
|
||
font-size: 38rpx;
|
||
font-weight: 500;
|
||
color: #ff1e0f;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.less {
|
||
color: #4caf50 !important;
|
||
}
|
||
|
||
.tip {
|
||
margin-top: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
}
|
||
|
||
}
|
||
|
||
&-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.view-info {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
padding-bottom: 116rpx;
|
||
|
||
.userinfo {
|
||
background: linear-gradient(to right, #ff8440, #ff1e0f);
|
||
background-color: #ff8440;
|
||
padding-bottom: 100rpx;
|
||
|
||
.userinfo-headimg {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
overflow: hidden;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.borde-radius {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.arrow {
|
||
position: relative;
|
||
padding-right: 30rpx;
|
||
|
||
span {
|
||
font-size: 28rpx;
|
||
color: white;
|
||
}
|
||
|
||
&:after {
|
||
content: ' ';
|
||
display: inline-block;
|
||
height: 12rpx;
|
||
width: 12rpx;
|
||
border-width: 4rpx 4rpx 0 0;
|
||
border-color: #848484;
|
||
border-style: solid;
|
||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||
position: relative;
|
||
top: -4rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-top: -8rpx;
|
||
right: 4rpx;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
|
||
.arrow-one:after {
|
||
border-color: white;
|
||
margin-top: -6rpx;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 94%;
|
||
background: white;
|
||
border-radius: 10rpx;
|
||
margin: -120rpx auto 20rpx;
|
||
box-shadow: 0 6rpx 20rpx #e7e7e7;
|
||
|
||
.tx {
|
||
padding-top: 26rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-content: center;
|
||
|
||
&-grid {
|
||
box-sizing: border-box;
|
||
|
||
&:first-child {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
&-comm-sign {
|
||
display: block;
|
||
border-radius: 40rpx 0 0 40rpx;
|
||
font-size: 26rpx;
|
||
padding: 16rpx 44rpx;
|
||
background: linear-gradient(to right, #fef082, #ffc551);
|
||
background-color: #fef082;
|
||
color: #cf4400;
|
||
}
|
||
|
||
&-text {
|
||
display: block;
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
color: #ff6423;
|
||
}
|
||
|
||
.money {
|
||
font-size: 60rpx;
|
||
color: #ff6423;
|
||
letter-spacing: 2rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
&-b {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.palace {
|
||
padding-bottom: 20rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
&-grid {
|
||
flex: 1;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
&:not(:last-child) {
|
||
&:after {
|
||
width: 1rpx;
|
||
height: 80rpx;
|
||
background: #fddece;
|
||
content: ' ';
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
&-text {
|
||
display: block;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
|
||
&-name {
|
||
font-size: 26rpx;
|
||
font-weight: normal;
|
||
color: #ff8a4a;
|
||
}
|
||
|
||
&-data {
|
||
font-size: 32rpx;
|
||
color: #ff8a4a;
|
||
letter-spacing: 2rpx;
|
||
margin-bottom: 5rpx;
|
||
|
||
&-b {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|