299 lines
8.5 KiB
Vue
299 lines
8.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="balance">
|
||
<image class="balanceBack" src="https://card.ysd-bs.com/storage/materials/2021/09/01/balance-back.png" mode="widthFix"></image>
|
||
<view class="balanceCont">
|
||
<view class="balanceCont-name">余额（积分）</view>
|
||
<view class="balanceCont-number">
|
||
<text>￥</text>{{ number }}
|
||
</view>
|
||
</view>
|
||
<navigator hover-class="none" url="/pages/account/myProfit" class="balanceUrl">我的收益<image src="/static/img/balance-icon-row.png" mode="aspectFill"></image></navigator>
|
||
</view>
|
||
|
||
<navigator hover-class="none" url="/pages/account/withdrawal_form" class="label">
|
||
<view class="labelLeft">
|
||
<image class="labelLeft-img" src="/static/img/balance-icon-00.png"></image>
|
||
<view class="labelLeft-name">提现</view>
|
||
</view>
|
||
<image class="labelLeft-arrow" src="/static/icon/rightsArrow.png"></image>
|
||
</navigator>
|
||
|
||
<navigator hover-class="none" :url="'/pages/account/withdrawal_record?status=' + '' + '&idx=0'" class="label">
|
||
<view class="labelLeft">
|
||
<image class="labelLeft-img" src="/static/img/balance-icon-01.png"></image>
|
||
<view class="labelLeft-name">提现记录</view>
|
||
</view>
|
||
<image class="labelLeft-arrow" src="/static/icon/rightsArrow.png"></image>
|
||
</navigator>
|
||
|
||
<!-- 收益订单列表 -->
|
||
<view class="record">
|
||
<view class="integra-cont-title">
|
||
<view class="record-title">收益订单列表</view>
|
||
</view>
|
||
<block v-if="accounts.length > 0">
|
||
<navigator hover-class="none" :url="'/pages/account/myBalance_list?id=' + item.order_id + '&type=' + item.order_type" class="record-list" v-for="(item, index) in accounts" :key="index">
|
||
<view class="accounts-title">{{ item.right }}</view>
|
||
<view class="accounts-user">
|
||
<image class="accounts-user-icon" src="/static/img/accountsIcon_00.png"></image>
|
||
<view class="accounts-user-name"><text>{{ item.user.nickname }}</text>{{ item.user.username }}</view>
|
||
</view>
|
||
<view class="accounts-user">
|
||
<image class="accounts-user-icon" src="/static/img/accountsIcon_01.png"></image>
|
||
<view class="accounts-user-name">{{ item.created_at }}</view>
|
||
</view>
|
||
<view class="accounts-more"><image src="/static/icon/arrow_tips.png"></image></view>
|
||
</navigator>
|
||
<view class="pagesLoding" v-if="lodingStats">
|
||
<block v-if="page.has_more">
|
||
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||
</block>
|
||
<block v-else>
|
||
没有更多了~
|
||
</block>
|
||
</view>
|
||
</block>
|
||
<!-- 暂无内容 -->
|
||
<view class="recommend-hint" v-else>
|
||
<image src="/static/img/null_icon.png"></image>
|
||
<view>抱歉，目前暂无内容~</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { logs, profits } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
number : '', // 账户余额
|
||
accounts : '', // 账户列表
|
||
page: {
|
||
has_more: false
|
||
}, // 下一页
|
||
lodingStats: false // 数据加载完渲染
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 获取余额数量
|
||
logs({
|
||
type : 'balance',
|
||
channel : '',
|
||
page : ''
|
||
}).then(res=>{
|
||
this.number = res.account.balance
|
||
})
|
||
},
|
||
onShow() {
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
methods: {
|
||
// 获取余额数量
|
||
accountInfo(page) {
|
||
profits({
|
||
page : page
|
||
}).then(res=>{
|
||
let newStores = this.accounts,
|
||
newData = []
|
||
if(page == 1 || page == undefined) newStores = []
|
||
newData = newStores.concat(res.data)
|
||
this.accounts = newData
|
||
this.page = res.page
|
||
this.lodingStats = false
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
// 上拉加载
|
||
onReachBottom(){
|
||
this.lodingStats = true
|
||
let pageNumber = this.page.current
|
||
if(this.page.has_more){
|
||
pageNumber++
|
||
this.page = pageNumber
|
||
this.storesInfo('', pageNumber)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
/* 背景 */
|
||
.balance {
|
||
position: relative;
|
||
}
|
||
|
||
.balanceBack {
|
||
width: 100vw;
|
||
display: block;
|
||
}
|
||
|
||
.balanceCont {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
text-align: center;
|
||
padding: 70rpx 0 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.balanceCont-name {
|
||
color: #717171;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.balanceCont-number {
|
||
color: #ffd890;
|
||
font-size: 80rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.balanceCont-number text {
|
||
font-size: 50rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.balanceUrl {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
background-color: #37332d;
|
||
font-size: 28rpx;
|
||
border-radius: 40rpx 0 0 40rpx;
|
||
line-height: 68rpx;
|
||
border: 2rpx solid #887351;
|
||
padding-left: 30rpx;
|
||
color: #ead2a5;
|
||
display: flex;
|
||
}
|
||
|
||
.balanceUrl image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-top: 9rpx;
|
||
}
|
||
|
||
/* 提现 */
|
||
.label {
|
||
background-color: white;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.labelLeft {
|
||
display: flex;
|
||
flex: 1;
|
||
}
|
||
|
||
.labelLeft-img {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin: 23rpx 20rpx;
|
||
}
|
||
|
||
.labelLeft-arrow {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin: 28rpx 0;
|
||
}
|
||
|
||
/* 账变记录 */
|
||
.record-title {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #404040;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
line-height: 60prx;
|
||
margin: 40rpx 0 30rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.record-list {
|
||
background-color: #ffffff;
|
||
margin-bottom: 50rpx;
|
||
padding: 0 30rpx 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
border-top: 2rpx solid #e9e9e9;
|
||
border-bottom: 2rpx solid #e9e9e9;
|
||
position: relative;
|
||
}
|
||
|
||
.accounts-more {
|
||
position: absolute;
|
||
bottom: -20rpx;
|
||
left: calc(50% - 40rpx);
|
||
width: 80rpx;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
z-index: 9;
|
||
background-color: #ffffff;
|
||
border: #e9e9e9 2rpx solid;
|
||
}
|
||
|
||
.accounts-more image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin: 8rpx 26rpx;
|
||
}
|
||
|
||
.accounts-title {
|
||
position: relative;
|
||
padding: 30rpx 0 30rpx 35rpx;
|
||
}
|
||
|
||
.accounts-title::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 6rpx;
|
||
top: 37%;
|
||
width: 8rpx;
|
||
height: 30%;
|
||
background-color: #000000;
|
||
}
|
||
|
||
.accounts-user {
|
||
color: #838383;
|
||
display: flex;
|
||
border-top: 2rpx solid #f5f5f5;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.accounts-user text {
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.accounts-user-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 20rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
|
||
/* 暂无内容 */
|
||
.recommend-hint {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 100rpx 0;
|
||
}
|
||
|
||
.recommend-hint image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
</style>
|