OfficeApp/subpkg/shareCapital/shareCapital.vue

<template>
  <view style="padding-bottom: 160rpx;">
    <view class="price_card">
      <view>账户入股金额</view>
      <view><text class="money">30000.00</text>元</view>
    </view>
    <view class="card">
      <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>{{'2023-03-03'}}</text>
            </view>
          </view>
        </view>
        <view class="right" @click="navToContract('fdsf')">
          <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 2" title="开始" desc="结算">
        </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"
  export default {
    data() {
      return {

      };
    },
    methods: {
      navToContract(contract_no) {
        if (!contract_no) return Toast('暂无合同');
        uni.showLoading({
          title: '加载中'
        });
        download_file({
          applyNo: contract_no
        }).then(res => {
          if (res.code != 1) {
            uni.hideLoading();
            Toast(res.msg)
          }
          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>