公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

273 lines
6.5 KiB

<!--钱包界面-->
<template>
<view class="main">
<view class="back" />
<u-navbar
title="钱包"
:safeAreaInsetTop="true"
:fixed="true"
bgColor="#FFFFFF"
:placeholder="true"
@leftClick="onBackTouched"
/>
<view style="position: relative;top: 30rpx;">
<image class="top_image" src="../../static/images/wallet/bg_4.png">
<text class="title_text" style="left: 45rpx;top: 45rpx;">可用金额()</text>
<text class="title_text" style="left: 45rpx;top: 193rpx;">入账中的金额()</text>
<text class="title_text" style="left: 404rpx;top: 193rpx;">代理商分佣()</text>
<text class="money_text" style="left: 45rpx;top: 91rpx;position: absolute;">{{formatMoney(pageData.availableamount)}}</text>
<view class="more_flex_ruzhang_panel" @click="onTouchShowMore(0)">
<text class="money_text" :key="pageData.recordedamount">{{formatMoney(pageData.recordedamount)}}</text>
<view style="width: 20rpx;" />
<image class="more_image" src="../../static/images/more.png"/>
</view>
<view class="more_flex_fenyong_panel" @click="onTouchShowMore(1)">
<text class="money_text" :key="pageData.agencycommi">{{formatMoney(pageData.agencycommi)}}</text>
<view style="width: 20rpx;" />
<image class="more_image" src="../../static/images/more.png" />
</view>
<button class="tixian_button" lang="zh_CN" type='primary' @click="onTouchShowMore(2)">提现</button>
</image>
</view>
<view class="body">
<view class="calender_box" @click="onShowDateSelect" :key="currentTime.toString()">
<text style="font-weight: bold;left: 20rpx;color: #333333;font-size: 26rpx;">{{year + '年' + month + '月'}}</text>
<view style="width: 20rpx;" />
<u-icon name="arrow-down" size="32rpx"></u-icon>
</view>
<view style="width: 662rpx;height: 0.5rpx;position: relative;left: 20rpx;background-color: #E2E2E2;" />
<u-gap height="10rpx"/>
<u-list
height="900rpx"
preLoadScreen=10
@scrolltolower="onScrollListToBottom"
>
<u-list-item v-for="(item,index) in pageData.amountrecord" :key="index">
<WalletListItem
:record="item"
:index="index"
/>
</u-list-item>
</u-list>
</view>
<min-picker
:startTime="startTime"
:endTime="endTime"
@cancel="onDateSelectCanceled"
@sure="onDateSelectConfirm"
:show="isDateSelectShowing"
heightRpx="500"
:currentTime="currentTime"
showType="1"
></min-picker>
</view>
</template>
<script>
var currentTime = [2022,1,1];
import WalletListItem from "@/components/WalletListItem/WalletListItem.vue";
import WalletMainPage from "./WalletMainPage.js"
var Player = getApp().globalData.Player;
var pageData = new WalletMainPage();
export default {
components:{
WalletListItem
},
onLoad() {
this.getCurrentDateSelectTime();
getApp().globalData.isNeedRefreshWallet = true;
},
/**
* 每次从其他地方返回,要求刷新,不过这个地方需要优化
*/
onShow() {
if(getApp().globalData.isNeedRefreshWallet){
this.pageData.clear();
pageData.getPageData();
pageData.getNextPage(this.year,this.month);
//使用完毕,设置回默认值
getApp().globalData.isNeedRefreshWallet = false;
}
},
destroyed() {
this.pageData = null;
},
data() {
return {
pageData,
isDateSelectShowing : false,
startTime : pageData.recordStartTime,
endTime : 2022,
//当前时间:年
year : '',
//当前时间:月
month : '',
currentTime,
};
},
methods:{
/**
* 点击了导航上的返回按钮
*/
onBackTouched(){
uni.navigateBack({
});
},
///点击了代理商分佣右边的箭头
onTouchShowMore(index){
if(index == 2){
//判断是否实名了,
if(Player.needrealname == 1 || Player.bankcard == ''){
uni.$u.toast("请先进行实名认证");
return;
}
//进入提现页面
uni.navigateTo({
url:'/pages/TiXian/TiXian'
})
return;
}
uni.navigateTo({
url:'/pages/RzAndFyView/RzAndFyView?index='+index,
});
},
///获取当前时间
getCurrentDateSelectTime(){
const time = new Date();
const year = time.getFullYear();
const month = time.getMonth() + 1;
this.month = month;
this.year = year;
var ct = [parseInt(this.year),parseInt(this.month),1];
this.currentTime = ct;
return ct;
},
///现实日期选择器
onShowDateSelect(){
this.isDateSelectShowing = true;
},
onDateSelectConfirm(e){
this.year = e.a;
this.month = e.b;
//关闭选择器
this.isDateSelectShowing = false;
this.pageData.getNextPage(this.year,this.month);
},
///生日选择器取消了选择
onDateSelectCanceled(){
this.isDateSelectShowing = false;
},
formatMoney(num){
return "¥" + this.$utils.formatMoney(num / 100);
},
///滑动列表到达了底部,需要去获取一下
onScrollListToBottom(){
console.log("托到底了!");
this.pageData.getNextPage(this.year,this.month);
},
},
}
</script>
<style lang="scss" scoped>
.top_image{
width: 702rpx;
height: 331rpx;
position: relative;
top: 0;
left: 24rpx;
right: 24rpx;
}
.title_text{
height: 37rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 37rpx;
color: #FFFFFF;
opacity: 1;
position: absolute;
}
.money_text{
height: 50rpx;
font-size: 36rpx;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
.more_image{
width: 24rpx;
height: 24rpx;
}
.more_flex_fenyong_panel{
display: flex;
flex-direction: row;
//flex-wrap: wrap;
//background-color: #0081FF;
position: absolute;
left: 404rpx;
top: 243rpx;
width: 310rpx;
height: 45rpx;
align-items: center;
}
.more_flex_ruzhang_panel{
display: flex;
flex-direction: row;
//flex-wrap: wrap;
//background-color: #0081FF;
position: absolute;
left: 44rpx;
top: 243rpx;
width: 310rpx;
height: 45rpx;
align-items: center;
}
.tixian_button{
width: 130rpx;
height: 50rpx;
background: #FFFFFF;
opacity: 1;
border-radius: 30rpx;
position: absolute;
right: 57rpx;
top: 48rpx;
font-size: 30rpx;
font-weight: 400;
color: #D49B4B;
justify-content: center;
align-items: center;
display: flex;
}
.body{
width: 702rpx;
height: auto;
position: relative;
background-color: #FFFFFF;
border-radius: 20rpx;
left: 24rpx;
top: 60rpx;
}
.calender_box{
width: 702rpx;
height: 100rpx;
position: relative;
display: flex;
flex-direction:row;
align-items: center;
margin-left: 20rpx;
}
</style>