564 lines
13 KiB
Vue
564 lines
13 KiB
Vue
<template>
|
||
<view class="page" :style="themeColor">
|
||
<view class="flex align-stretch benben-position-layout flex myMoney_flex_0"
|
||
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||
<view class='flex align-center justify-between flex-sub myMoney_fd0_0'>
|
||
<view class='flex align-center myMoney_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
|
||
data-url="1">
|
||
<text class='fu-iconfont2 myMoney_fd0_0_c0_c0'></text>
|
||
</view>
|
||
<view class='flex align-center'>
|
||
<text class='myMoney_fd0_0_c1_c0'>我的钱包</text>
|
||
</view>
|
||
<view class='flex align-center justify-end myMoney_fd0_0_c2'
|
||
data-type="navigateTo" :data-url="`/pages/md/bindBankCard/bindBankCard`">
|
||
<!-- <text class='myMoney_fd0_0_c2_c0'>绑定账户</text> -->
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
|
||
|
||
<view class="flex flex-direction align-stretch benben-flex-layout myMoney_flex_1">
|
||
<view class='flex align-center justify-between myMoney_fd1_0'>
|
||
<view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/`">
|
||
<view class='flex flex-wrap align-center'>
|
||
<text class='myMoney_fd1_0_c0_c0_c0'>¥ </text>
|
||
<text class='myMoney_fd1_0_c0_c0_c1'>{{details.user_money}}</text>
|
||
</view>
|
||
<text class='myMoney_fd1_0_c0_c1'>今日收益</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center myMoney_fd1_0_c1'>
|
||
</view>
|
||
<view class='flex align-center'>
|
||
<view class='flex flex-direction align-center'>
|
||
<view class='flex flex-wrap align-center'>
|
||
<text class='myMoney_fd1_0_c2_c0_c0_c0'>¥ </text>
|
||
<text class='myMoney_fd1_0_c2_c0_c0_c1'>{{details.freeze_money}}</text>
|
||
</view>
|
||
<text class='myMoney_fd1_0_c2_c0_c1' @tap.stop="handleJumpDiy"
|
||
data-type="navigateTo" :data-url="`/pages/md/withdrawalDetail/daijiesuan`">已结算金额</text>
|
||
</view>
|
||
<image class='self-end myMoney_fd1_0_c2_c1' :src='STATIC_URL+"111.png"'
|
||
@tap.stop="popupShow1661322664747=true"></image>
|
||
</view>
|
||
</view>
|
||
<view class='flex flex-wrap align-center justify-between myMoney_fd1_1'>
|
||
<view class='flex flex-wrap align-center myMoney_fd1_1_c0'>
|
||
<text class='myMoney_fd1_1_c0_c0'>本月收入：</text>
|
||
<text class='myMoney_fd1_1_c0_c1'>¥</text>
|
||
<text class='myMoney_fd1_1_c0_c2'>{{details.month_money}}</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center myMoney_fd1_1_c1'>
|
||
<text class='myMoney_fd1_1_c1_c0'>累计收入</text>
|
||
<text class='myMoney_fd1_1_c1_c1'>¥</text>
|
||
<text class='myMoney_fd1_1_c1_c2'>{{details.total_money}}</text>
|
||
</view>
|
||
</view>
|
||
<view class='flex flex-wrap align-center justify-center myMoney_fd1_2'>
|
||
<!-- <button class='myMoney_fd1_2_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/pages/md/Withdrawals/Withdrawals`">提现</button> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="flex align-center justify-between benben-flex-layout myMoney_flex_2">
|
||
<text class='myMoney_fd2_0'>近30天记录</text>
|
||
<text class='myMoney_fd2_1' @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/pages/md/balanceDetail/balanceDetail`">查看全部</text>
|
||
</view>
|
||
|
||
|
||
<!---flex布局flex布局开始-->
|
||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myMoney_flex_3" v-if="list.length > 0">
|
||
<view class='flex flex-direction flex-wrap align-stretch myMoney_fd3_0'>
|
||
<view class='flex flex-wrap align-center justify-between myMoney_fd3_0_c0' v-for="(item, index) in list" :key="index">
|
||
<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
|
||
<text class='myMoney_fd3_0_c0_c0_c0'>{{ item.remark || '' }}</text>
|
||
<text class='myMoney_fd3_0_c0_c0_c1'>{{ item.create_time || '' }}</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center myMoney_fd3_0_c0_c1' v-if="item.after_money > item.before_money">
|
||
<text class='myMoney_fd3_0_c0_c1_c1'>+{{ item.change_money || 0 }}</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center myMoney_fd3_0_c1_c1' v-else>
|
||
<text class='myMoney_fd3_0_c1_c1_c1'>-{{ item.change_money || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 空布局 start-->
|
||
<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
|
||
<!-- 空布局 end-->
|
||
<!---flex布局flex布局结束-->
|
||
<benben-popup v-model="popupShow1661322664747" :mask="true" mode='center'>
|
||
<!---提现规则弹窗flex布局开始-->
|
||
<view class="flex flex-direction align-stretch benben-flex-layout myMoney_flex_4">
|
||
<view class='flex flex-direction align-stretch myMoney_fd4_0'>
|
||
<view class='flex align-center justify-center myMoney_fd4_0_c0'>
|
||
<text class='myMoney_fd4_0_c0_c0'>待结算规则</text>
|
||
</view>
|
||
<scroll-view scroll-y="" style="max-height: 600rpx;">
|
||
<view class='flex flex-wrap align-center'>
|
||
<view class='myMoney_fd4_0_c1_c0' v-html="freeze_money_txt"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class='flex align-center justify-center myMoney_fd4_1'>
|
||
<image class='myMoney_fd4_1_c0' :src='STATIC_URL+"112.png"'
|
||
@tap.stop="popupShow1661322664747=false"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!---提现规则弹窗flex布局结束-->
|
||
|
||
</benben-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
|
||
|
||
data() {
|
||
return {
|
||
"popupShow1661322664747": false,
|
||
details: '', //信息
|
||
list: [],
|
||
isInit: false,
|
||
page: 1,
|
||
size: 30,
|
||
freeze_money_txt:"",
|
||
showPopup:false
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return this.$store.getters.themeColor
|
||
},
|
||
|
||
},
|
||
watch: {},
|
||
onShow() {
|
||
this.getMoney();
|
||
this.getMoneyList();
|
||
this.getmyMoneyText()
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getMoney();
|
||
this.getMoneyList();
|
||
},
|
||
methods: {
|
||
getmyMoneyText(){
|
||
this.$api.post(global.apiUrls.Get636c78ae2216b,{
|
||
aid:21
|
||
}).then(res => {
|
||
if(res.data.code==1){
|
||
this.freeze_money_txt=res.data.data.body
|
||
}
|
||
}).catch(err => {
|
||
uni.stopPullDownRefresh();
|
||
console.log(err);
|
||
});
|
||
},
|
||
// 金额明细
|
||
getMoneyList() {
|
||
this.$api
|
||
.post(global.apiUrls.getMoneyDetail, {
|
||
change_type: 1,
|
||
page: this.page,
|
||
list_rows: this.size
|
||
})
|
||
.then(res => {
|
||
this.isInit = true;
|
||
console.log('消费明细', res);
|
||
if (res.data.code == 1) {
|
||
this.list = res.data.data.data;
|
||
}
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
.catch(err => {
|
||
uni.stopPullDownRefresh();
|
||
console.log(err);
|
||
});
|
||
},
|
||
getMoney() {
|
||
let _this = this;
|
||
_this.$api.get(global.apiUrls.getMyCashMoney, {}).then(res => {
|
||
if (res.data.code == 1) {
|
||
_this.details = res.data.data;
|
||
}
|
||
uni.stopPullDownRefresh();
|
||
}).catch(err => {
|
||
uni.stopPullDownRefresh();
|
||
console.log(err, 'get_my_money');
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
min-height: calc(100vh - var(--window-bottom));
|
||
background: url(/static/images/8.png) no-repeat, #F8F8F8;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.myMoney_flex_0 {
|
||
background: url(/static/images/8.png) no-repeat;
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
top: 0rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.myMoney_fd0_0_c2_c0 {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
.myMoney_fd0_0_c2 {
|
||
width: 180rpx;
|
||
}
|
||
|
||
.myMoney_fd0_0_c1_c0 {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.myMoney_fd0_0_c0_c0 {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.myMoney_fd0_0_c0 {
|
||
width: 180rpx;
|
||
}
|
||
|
||
.myMoney_fd0_0 {
|
||
padding: 0rpx 32rpx 0rpx 32rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.myMoney_flex_1 {
|
||
background: #FFFFFF;
|
||
margin: 51rpx 32rpx 0rpx 32rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
padding: 42rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_2_c0 {
|
||
background: rgba(255, 147, 0, 1);
|
||
border-radius: 80rpx 80rpx 80rpx 80rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
width: 239rpx;
|
||
height: 66rpx;
|
||
line-height: 66rpx;
|
||
}
|
||
|
||
.myMoney_fd1_2 {
|
||
margin: 40rpx 0rpx 031rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c1_c2 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c1_c1 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c1_c0 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c1 {
|
||
// margin: 0rpx 0rpx 0rpx 83rpx;
|
||
line-height: 33rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.myMoney_fd1_1_c0_c2 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c0_c1 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c0_c0 {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.myMoney_fd1_1_c0 {
|
||
// margin: 0rpx 83rpx 0rpx 0rpx;
|
||
line-height: 33rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.myMoney_fd1_1 {
|
||
margin: 40rpx 0rpx 0rpx 0rpx;
|
||
padding: 15rpx 55rpx 0rpx 55rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0_c2_c1 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0_c2_c0_c1 {
|
||
line-height: 25rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0_c2_c0_c0_c1 {
|
||
line-height: 57rpx;
|
||
font-size: 48rpx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.myMoney_fd1_0_c2_c0_c0_c0 {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 6rpx 4rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0_c1 {
|
||
background: rgba(238, 238, 238, 1);
|
||
width: 1rpx;
|
||
height: 84rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.myMoney_fd1_0_c0_c1 {
|
||
line-height: 25rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0_c0_c0_c1 {
|
||
line-height: 57rpx;
|
||
font-size: 48rpx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.myMoney_fd1_0_c0_c0_c0 {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 6rpx 4rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd1_0 {
|
||
padding: 0rpx 88rpx 0rpx 72rpx;
|
||
}
|
||
|
||
.myMoney_flex_2 {
|
||
background: rgba(248, 248, 248, 1);
|
||
background-size: 100% auto !important;
|
||
padding: 12rpx 30rpx 12rpx 34rpx;
|
||
margin: 32rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd2_1 {
|
||
line-height: 53rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.myMoney_fd2_0 {
|
||
line-height: 32rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.myMoney_flex_3 {
|
||
background: transparent;
|
||
background-size: 100% auto !important;
|
||
padding: 20rpx 32rpx 0rpx 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1_c1_c1 {
|
||
padding: 0rpx 5rpx 0rpx 0rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: rgba(102, 102, 102, 1);
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1_c1_c0 {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: rgba(102, 102, 102, 1);
|
||
margin: 0rpx 5rpx 0rpx 0rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1_c1 {
|
||
color: rgba(250, 32, 51, 1);
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1_c0_c1 {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1_c0_c0 {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
padding: 0rpx 24rpx 0rpx 0rpx;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.myMoney_fd3_0_c1 {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 32rpx 0rpx 32rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0_c1_c1 {
|
||
padding: 0rpx 5rpx 0rpx 0rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: rgba(237, 64, 64, 1);
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0_c1_c0 {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: rgba(237, 64, 64, 1);
|
||
margin: 0rpx 5rpx 0rpx 0rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0_c1 {
|
||
color: rgba(250, 32, 51, 1);
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0_c0_c1 {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0_c0_c0 {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
padding: 0rpx 24rpx 0rpx 0rpx;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.myMoney_fd3_0_c0 {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 32rpx 0rpx 32rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd3_0 {
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
background-size: 100% auto !important;
|
||
padding: 0rpx 24rpx 0rpx 24rpx;
|
||
}
|
||
|
||
.myMoney_flex_4 {
|
||
width: 540rpx;
|
||
}
|
||
|
||
.myMoney_fd4_1_c0 {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd4_1 {
|
||
margin: 40rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd4_0_c1_c0 {
|
||
line-height: 48rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.myMoney_fd4_0_c0_c0 {
|
||
line-height: 45rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.myMoney_fd4_0_c0 {
|
||
margin: 0rpx 0rpx 16rpx 0rpx;
|
||
}
|
||
|
||
.myMoney_fd4_0 {
|
||
background: #FFFFFF;
|
||
background-size: 100% auto !important;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding: 32rpx 32rpx 32rpx 32rpx;
|
||
}
|
||
</style>
|