OfficeApp/subpkg/finance/finance.vue

<template>
  <view class="">
    <view class="finance_head">
      <view class="top">
        <view class="left">
          <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>
          <image src="../../static/img/contract/setting.png"></image>
        </view>
        <view class="right" @click="naviTo('/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">
        <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">
      <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="card" v-for="item in 3" :key="item">
        <view class="top">
          <view class="blue">账单详情</view>
          <view>账单日期：2023-06-15  18:00</view>
        </view>
        <view class="bottom">
          <view class="left">
            <view>收益金额(元)</view>
            <view class="num">0.00</view>
          </view>
          <view class="right">
            <view>支出金额:0.00</view>
            <view>入账金额:0.00</view>
          </view>
        </view>
      </view>
      
      <button class="btn">提现余额</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo:{},
      billTypeList:['日账单','月账单'],
      current: 0,
    }
  },
  onLoad() {
    // console.log(this.userInfo);
    this.userInfo = this.$store.state.app.userInfo;
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#3175f9'
    })
  },
  onShow() {},
  computed:{
    eyeType(){
      return this.$store.state.config.eyeType;
    }
  },
  methods: {
    naviTo(url) {
      url ?
        uni.navigateTo({
          url: url
        }) : Toast('暂未开放')
    },
    updateEye(){
      this.$store.commit('SET_EYE_TYPE')
    },
    changeBillType(type){
      this.current = type;
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
page{
  background-color: #fff;
}
.finance_head{
  background-color: #3274F9FF;
  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;
  margin-top: 90rpx;
  padding-bottom: 32rpx;
  background-color: #f5f5f5;
  .type_box{
    background-color: #fff;
    padding: 32rpx 0;
    .type{
      border-radius: 30rpx;
      height: 52.5rpx;
      width: 333rpx;
      border: 1px solid #3274f9;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
      view{
        flex: 1;
        color: #3274f9;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active{
        background-color: #3274f9;
        color: #fff;
      }
    }
  }
  .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: #3274F9;
        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;
      }
    }
  }
  .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: #3274F9;
    box-shadow: 0px 9px 26px 1px #E9EFF5;
  }
}
</style>