OfficeApp/subpkg/shareCapital/shareCapital.vue

<template>
  <view style="padding-bottom: 160rpx;">
    <view class="price_card">
      <view>账户入股金额</view>
      <view><text class="money">{{shareholder.shareholder_money}}</text>元</view>
    </view>
    <view class="card" v-if="shareholder.is_contract">
      <view class="contract">
        <view class="left">
          <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
          <view class="text">
            <view class="name">《入股合同》</view>
            <view>
              <text>{{shareholder.contract_time}}</text>
            </view>
          </view>
        </view>
        <view class="right" @click="navToContract(shareholder.contract_url)">
          <uni-icons type="paperclip" color="#3274F9"></uni-icons>
          <view>查看</view>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="c_title">账单记录</view>
      <u-line></u-line>
      <u-steps style="padding: 28rpx;" :current="-1" direction="column" activeColor="#0122c7" dot
        inactiveColor="#0122c7">
        <u-steps-item v-for="(item, index) in list" :key="index" :title="item.update_time" :desc="item.remark">
        </u-steps-item>
      </u-steps>
    </view>
    <!-- <view class="card">
      <view class="c_title">账单记录</view>
      <u-line></u-line>
      <view class="c_body" v-for="i in 3" :key="i">
        <image class="icon" src="/static/icons/share.png"></image>
        <view class="body_text">
          <view class="b_title">入股金额充值</view>
          <view class="b_text">
            <view class="b_text_left">
              <view>充值账户：</view>
              <image class="b_avatar" src="../../static/img/public/man.png"></image>
              <view>张三三</view>
            </view>
            <view class="b_text_right">+1000.00</view>
          </view>
          <view class="b_time">完成时间：2023-06-15 18:00</view>
        </view>
      </view>
    </view> -->
    <view class="button">
      <view class="retreat" @click="retreat">退股</view>
      <view class="hand" @click="hand">上交</view>
    </view>
  </view>
</template>

<script>
  import { Toast } from '../../libs/uniApi';
  import {
    download_file
  } from "@/api/junziqian.js"
  import {
    companyAccountLog,
    companyShareholderInfo
  } from "@/api/shareholder.js"
  export default {
    data() {
      return {
        shareholder: {
          contract_url: "",
          is_contract: 0,
          shareholder_money: "0.00",
          contract_time: ""
        },
        list: [],
        loadConfig: {
        	page: 1,
        	limit: 25,
        	lastpage: '',
        	loadingText: '努力加载中',
        	loadmoreText: '轻轻上拉',
        	nomoreText: '我也是有底线的~~',
        	status: 'loadmore'
        },
      };
    },
    onLoad() {
      this.initInfo();
      this.loadList();
    },
    methods: {
      async initInfo() {
        let res = await companyShareholderInfo();
        this.shareholder = res.data;
      },
      async loadList(){
        if (this.loadConfig.status == "nomore") return;
        this.loadConfig.status = "loading";
        let res = await companyAccountLog({
        	page: this.loadConfig.page,
        	limit: this.loadConfig.limit
        })
        this.loadConfig.status = "loadmore"
        if (res.data.list.length < this.loadConfig.limit) {
        	this.loadConfig.status = "nomore"
        } else {
        	this.loadConfig.page++;
        }
        for (var i = 0; i < 20; i++) {
          this.list = [...this.list, ...res.data.list];
        }
      },
      navToContract(contract_no) {
        if (!contract_no) return Toast('暂无合同');
        download_file({
          applyNo: contract_no
        }).then(res => {
          if (res.code != 1) {
            uni.hideLoading();
            Toast(res.msg)
          }
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
            url: `/subpkg/pdfView/pdfView?url=${res.data.url}`,
            fail() {
              uni.hideLoading();
            }
          })
        })
      },
      retreat() {
        Toast('开发中')
      },
      hand() {
        Toast('开发中')
      }
    }
  }
</script>

<style lang="scss">
  .price_card {
    width: 694rpx;
    height: 180rpx;
    padding: 10rpx 0;
    background: #0022C7;
    margin: 28rpx;
    border-radius: 21rpx;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    .money {
      font-size: 70rpx;
    }
  }

  .card {
    margin: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 14rpx;

    .c_title {
      color: #0022C7;
      font-size: 32rpx;
      font-weight: 500;
      padding: 28rpx;
    }

    .c_body {
      margin: 28rpx;
      padding-bottom: 28rpx;
      display: flex;
      border-bottom: 1px solid #F3F4F8;

      &:last-child {
        border-bottom: none;
      }

      .icon {
        width: 77rpx;
        height: 77rpx;
        flex-shrink: 0;
        margin-right: 12rpx;
      }

      .body_text {
        flex: 1;
        font-size: 25rpx;

        .b_title {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
        }

        .b_text {
          display: flex;
          justify-content: space-between;
          padding: 16rpx 0;
          font-size: 28rpx;

          .b_avatar {
            width: 52rpx;
            height: 52rpx;
            margin-right: 8rpx;
          }

          &_left {
            display: flex;
            align-items: center;
          }

          &_right {
            color: #F02828;
            display: flex;
            align-items: center;
            font-size: 35rpx;
          }
        }

        .b_time {
          color: #666666;
        }
      }
    }

  }

  .button {
    position: fixed;
    bottom: 0;
    left: 0;
    // z-index: 9999999;
    z-index: 1;
    width: 100%;
    border-radius: 0;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    background-color: $theme-oa-color;
    display: flex;

    .retreat {
      color: $theme-oa-color;
      background-color: #fff;
    }

    .hand,
    .retreat {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }
  }

  .contract {
    display: flex;
    justify-content: space-between;
    padding: 28rpx;

    .left {
      display: flex;

      .contract_img {
        width: 102rpx;
        height: 102rpx;
        background: #f5f5f5;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        margin-right: 21rpx;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.8);
          line-height: 35rpx;
        }

        .nickname {
          margin-right: 35rpx;
        }

        text {
          height: 39rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
          line-height: 35rpx;
        }
      }
    }

    .right {
      font-size: 28rpx;
      font-weight: 500;
      color: $theme-oa-color;
      line-height: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 35rpx;
        height: 39rpx;
        background-color: $theme-oa-color;
        opacity: 1;
        margin-right: 10rpx;
      }
    }
  }
</style>