OfficeApp/subpkg/finance/finance.vue

<template>
  <view class="">
    <view class="finance_head">
      <view class="top">
        <view class="left" @click="navTo()">
			<view v-if="user_id==0">
				<u--image :showLoading="true" :src="userInfo.avatar||'../../static/img/public/man.png'" width="44px" height="44px" shape="circle"></u--image>
				<view class="name">{{userInfo.nickname}}</view>
			</view>
			<view v-else>
				<u--image :showLoading="true" :src="userInfo.avatar||'../../static/img/public/man.png'" width="44px" height="44px" shape="circle"></u--image>
				<view class="name">{{userInfo.nickname}}</view>
			</view>
        </view>
        <!-- <view class="right" @click="navTo('/subpkg/topUp/topUp')">
          账户充值
        </view> -->
      </view>
      <view class="center">
        <view class="title">
          <text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons @click="updateEye()" :type="eyeType?'eye-filled':'eye-slash-filled'" color="#fff"></uni-icons>
        </view>
        <view class="price" v-show="eyeType">{{userInfo.user_money||0.00}}元</view>
        <view class="price" v-show="!eyeType">****元</view>
        <view class="bubble">
          <!-- <image src="../../static/img/contract/bubble.png"></image> -->
          <view class="text" v-show="eyeType">可提现金额{{userInfo.user_money||0.00}}元</view>
          <view class="text" v-show="!eyeType">可提现金额****元</view>
        </view>
      </view>
      <view class="bottom" @click="navTo('/subpkg/orderDetail/orderDetail')">
        <view class="item">
          <view>账户余额(元)</view>
          <view class="num" v-show="eyeType">{{userInfo.user_money||0.00}}</view>
          <view class="num" v-show="!eyeType">****</view>
        </view>
        <u-line direction="col" length="40%" color="#999999FF"></u-line>
        <view class="item">
          <view>收益金额(元)</view>
          <view class="num" v-show="eyeType">{{userInfo.income||0.00}}</view>
          <view class="num" v-show="!eyeType">****</view>
        </view>
      </view>
    </view>
    <view class="bill">
      <view style="width: 100%;height: 90rpx;background-color: #fff;"></view>
      <uni-section titleFontSize="32rpx" type="line" title="账单流水"></uni-section>
      <!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
      <view class="type_box">
        <view class="type">
          <view :class="current==0?'active':''" @click="changeBillType(0)">日账单</view>
          <view :class="current==1?'active':''" @click="changeBillType(1)">月账单</view>
        </view>
      </view>
      <!-- 日账单 -->
      <view class="bill_list" v-show="current==0">
        <!-- <view class="card" v-for="(item, index) in billList" :key="index">
          <view class="top">
            <view class="blue">账单详情</view>
            <view>账单日期：{{item.create_time}}</view>
          </view>
          <view class="bottom">
            <view class="left">
              <view>收益金额(元)</view>
              <view class="num">{{item.change_amount}}</view>
            </view>
            <view class="right">
              <view>支出金额:{{item.change_amount_desc<0?item.change_amount:'0.00'}}</view>
              <view>入账金额:{{item.change_amount_desc>0?item.change_amount:'0.00'}}</view>
            </view>
          </view>
        </view> -->
        <view class="item" v-for="(item, index) in billList" :key="item.id">
          <view class="top">
            账单日期: {{current?item.month:item.create_time}}
          </view>
          <view class="bottom">
            <view class="text">
              <view class="t_item" v-if="current==0">
                <view class="t_title">任务名称：</view>
                <view class="tips">{{item.remark}}</view>
              </view>
              <view class="t_item">
                <view class="t_title">金额归属：</view>
                <view class="tips">{{$store.state.app.userInfo.nickname}}</view>
              </view>
              <view class="t_item">
                <view class="t_title">收益来源：</view>
                <view class="tips">
                  <!-- {{current?item.remark:item.type_desc}} -->
                  <text v-if="item.change_type==202" style="color: #46be61;">{{item.type_desc}}</text>
                  <text v-else-if="item.change_type==203" style="color: #ff7c32;">{{item.type_desc}}</text>
                  <text v-else="item.change_type==203">{{item.type_desc}}</text>
                </view>
              </view>
            </view>
            <view class="price">{{current?(item.expenditure==0?'+'+item.income:'-'+item.income):item.change_amount_desc}}</view>
          </view>
        </view>
        
        <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />        
      </view>
      <!-- 月账单 -->
      <view class="bill_list" v-show="current==1">
        <view class="card" v-for="(item, index) in billListMonth" :key="index">
          <view class="top">
            <view class="blue">账单详情</view>
            <view>账单日期：{{item.month}}</view>
          </view>
          <view class="bottom">
            <view class="left">
              <view>收益金额(元)</view>
              <view class="num">{{item.income}}</view>
            </view>
            <view class="right">
              <view>支出金额:{{item.expenditure>0?item.expenditure:'0.00'}}</view>
              <view>入账金额:{{item.income>0?item.income:'0.00'}}</view>
            </view>
          </view>
        </view>
        <u-loadmore status="nomore" nomore-text="仅展示一年数据" />  
      </view>
      
      <!-- <button class="btn" @click="navTo('/subpkg/withdrawDeposit/withdrawDeposit')">提现余额</button> -->
    </view>
  </view>
</template>

<script>
import { accountLogLists, accountLogListsMonth } from "@/api/pay.js"
import { userInfo } from "@/api/oaUser.js"

import { Toast } from '@/libs/uniApi.js'
export default {
  data() {
    return {
	  user_id:0,
      userInfo:{},
	  otherUserInfo:{},
      billTypeList:['日账单','月账单'],
      current: 0,
      billList: [],
      billListMonth: [],
      loadConfig:{
        page: 1,
        limit: 25,
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '没有更多账单了~~',
        status: 'loadmore'
      },
    }
  },
  onLoad(e) {
	  if(e.id>0){
		  this.user_id=e.id
		  
	  }
    this.loadBill()
  },
  onShow() {
    // console.log(this.userInfo);
	if(this.user_id==0){
		this.userInfo = this.$store.state.app.userInfo;
	}else{
		this.OtherUserInfo()
		
	}
  },
  computed:{
    eyeType(){
      return this.$store.state.config.eyeType;
    }
  },
  onBackPress() {
    this.loadBill()
	
  },
  methods: {
    navTo(url) {
      url ?
        uni.navigateTo({
          url: url
        }) : Toast('暂未开放')
    },
	 async OtherUserInfo(){
	  let res = await userInfo({
		id:this.user_id
	  });
	  this.userInfo=res.data
	},
    updateEye(){
      this.$store.commit('SET_EYE_TYPE')
    },
    // 选择日账单月账单
    changeBillType(type){
      this.current = type;
      if(type==1)this.loadBillMonth();
    },
    async loadBill(){
      if(this.loadConfig.status=="nomore")return;
      this.loadConfig.status="loading"
      let res = await accountLogLists({
        type: 'um', //账户余额
        page_no: this.loadConfig.page,
        page_size: this.loadConfig.limit,
		user_id:this.user_id
      });
      this.loadConfig.status="loadmore"
      if(res.data.lists.length<this.loadConfig.limit){
        this.loadConfig.status="nomore"
      }else {
        this.loadConfig.page++;
      }
      this.billList = [...this.billList, ...res.data.lists];
    },
    async loadBillMonth(){
      let res = await accountLogListsMonth();
      let list = [];
      for(let key in res.data){
        list.push(res.data[key])
      }
      this.billListMonth = list;
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
page{
  // background-color: #fff;
}
.finance_head{
  background-color: $theme-oa-color;
  height: 400rpx;
  position: relative;
  // box-shadow: 0 -10px 20px rgba(#fff, 0.9) inset;
  background-image: linear-gradient(to top, rgba(#fff, 1), transparent);
  // box-shadow: -10px -10px 40px rgba(#fff, 0.9);
  background-size: 100% 35%;
  background-repeat: no-repeat;
  background-position: center bottom;
  .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 10rpx 28rpx;
    .left{
      display: flex;
      align-items: center;
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      color: #FFFFFF;
      .name{
        margin: 0 17.5rpx;
      }
      image{
        width: 40rpx;
        height: 40rpx;
      }
    }
    .right{
      font-size: 24.53rpx;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
  .center{
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title{
      font-size: 25rpx;
      font-weight: 400;
      line-height: 39rpx;
    }
    .price{
      font-size: 60rpx;
      font-weight: bold;
      line-height: 39rpx;
      margin-top: 28rpx;
      margin-bottom: 14rpx;
    }
    .bubble{
      padding: 20rpx 28rpx 10rpx 28rpx;
      background-image: url('../../static/img/contract/bubble.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .text{
      }
    }
  }
  .bottom{
    position: absolute;
    bottom: -78rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 694rpx;
    height: 140rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50,116,249,0.1);
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
      text-align: center;
      font-size: 25rpx;
      font-weight: 400;
      color: #666666;
      line-height: 39rpx;
      .num{
        font-size: 39rpx;
        font-weight: 500;
        color: #F02828;
        line-height: 39rpx;
      }
    }
  }
}
.bill{
  // padding: 28rpx;
  // padding-top: 90rpx;
  padding-bottom: 32rpx;
  background-color: #f5f5f5;
  .type_box{
    background-color: #fff;
    padding: 32rpx 0;
    .type{
      height: 53rpx;
      width: 333rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
      view{
        flex: 1;
        color: $theme-oa-color;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid $theme-oa-color;
        &:nth-child(1){
          border-radius: 30rpx 0 0 30rpx;
        }
        &:nth-child(2){
          border-radius: 0 30rpx 30rpx 0;
        }
      }
      .active{
        background-color: $theme-oa-color;
        color: #fff;
      }
    }
  }
  .bill_list{
    // background-color: #f5f5f5;
    padding-bottom: 100rpx;
    padding-top: 28rpx;
    .card{
      padding: 28rpx;
      background-color: #fff;
      margin-bottom: 21rpx;
      .top{
        display: flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 400;
        color: #333333FF;
        line-height: 39rpx;
        .blue{
          width: 137rpx;
          height: 49rpx;
          background: $theme-oa-color;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          font-size: 25rpx;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 39rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;
        }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;
        .left{
          flex: 1;
          text-align: center;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
          .num{
            font-size: 39rpx;
            font-weight: 500;
            color: #F02828;
            line-height: 39rpx;
          }
        }
        .right{
          flex: 1;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
        }
      }
    }
    .item {
        margin: 0 auto;
        margin-bottom: 28rpx;
        width: 694rpx;
        // height: 238rpx;
        background: #FFFFFF;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        opacity: 1;
        padding: 28rpx;

        .top {
          margin-bottom: 28rpx;
          font-size: 25rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;

          &:before {
            display: inline-block;
            content: '账单详情';
            width: 137rpx;
            height: 49rpx;
            line-height: 49rpx;
            text-align: center;
            background: #3274F9;
            border-radius: 26rpx 26rpx 26rpx 26rpx;
            color: #fff;
            margin-right: 28rpx;
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;

          .text {
            font-size: 25rpx;
            font-weight: 400;
            color: #999999;
            line-height: 39rpx;
            .t_item{
              display: flex;
              .t_title{
                margin-bottom: 16rpx;
                flex-shrink: 0 !important;
              }
              .tips{
                font-size: 28rpx;
                font-weight: 400;
                color: #333333;
              }
            }
          }
          .price{
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #F02828;
          }
        }
      }
  }
  
  .btn{
    color: #fff;
    border-radius: 100px;
    text-align: center;
    line-height: 84.21rpx;
    margin: 0 auto;
    margin-top: 84.21rpx;
    width: 693.93rpx;
    height: 84.21rpx;
    background: $theme-oa-color;
    box-shadow: 0px 9px 26px 1px #E9EFF5;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>