bztang-h5/src/views/member/weight_value/legumes/withdrawal_details.vue

<template>
  <div>
    <c-title :hide="false" :text="'结算详情'" tolink="detailed"></c-title>
    <div class="content-box">
      <div class="bg-content"></div>
      <div class="main-content">
        <div class="top-content">
          <div class="left-icon">
            <span class="left-icon-drop"></span>
            <span class="left-icon-drop"></span>
            <span class="left-icon-drop"></span>
          </div>
          <div class="right-text">
            <div class="status">审核中</div>
            <div class="status-desc">您提交的结算正在进行审核</div>
          </div>
        </div>
        <div class="form-content">
          <div class="form-block">
            <div class="form-label">易出文创豆</div>
            <div class="form-value">{{ info.withdrawal_total_num || '' }}</div>
          </div>
          <div class="form-block">
            <div class="form-label">文创豆价格</div>
            <div class="form-value">¥{{ info.current_fee || '' }}</div>
          </div>
          <div class="form-block">
            <div class="form-label">服务费</div>
            <div class="form-value">¥{{ info.commission_amount || '' }}</div>
          </div>
          <div class="form-block">
            <div class="form-label">预计到账金额</div>
            <div class="form-value">¥{{ info.reality_amount || '' }}</div>
          </div>
          <div class="form-block">
            <div class="form-label">到账银行卡</div>
            <div class="form-value">{{ info.use_staff ? info.use_staff.card_num : '' }}</div>
          </div>
          <div class="form-block">
            <div class="form-label">预计到账时间</div>
            <div class="form-value">{{ info.expected_receipt_time || '' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components:{},
  data() {
    return {
      page_params: {},
      info: {},

    };
  },
  mounted() {
    let _this = this;
    _this.page_params = Object.assign(_this.$route.params, _this.$route.query);
    _this.getData();
  },
  methods: {
    // 获取用户持有文创豆信息
    getData() {
      let _this = this;
      $http.get("plugin.cultural-space.api.index.withdrawal-details", { legumes_withdrawal_id: _this.page_params.legumes_withdrawal_id }, "加载中...")
        .then(response => {
          if (response.result === 1) {
            _this.info = response.data || {};
          } else {
            _this.$dialog.alert({message: response.msg}).then(() => {
              _this.$router.push(_this.fun.getUrl('legumes_center_shopping'));
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },



  }
};
</script>
<style lang="scss" scoped>
::v-deep .page-header-title {
  .van-nav-bar__content {
    background: #fecb32 !important;
  }

  .van-button::before {
    background: #fecb32 !important;
  }

  .van-button {
    background: #fecb32 !important;
  }
}
.content-box {
  width: 100%;
  min-height: calc(100vh - 40px);
  position: relative;

  .bg-content {
    width: 100%;
    height: 230px;
    border-radius: 300px / 0 0 30px 30px;
    background: #fecb32;
  }

  .main-content {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    padding: 15px;

    .top-content {
      padding-left: 15px;
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      height: 60px;
      margin: 20px 0 10px 0;

      .left-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid #120d14;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;

        .left-icon-drop {
          background: #120d14;
          width: 4px;
          height: 4px;
          display: inline-block;
          border-radius: 50%;
        }
      }

      .right-text {
        height: 100%;
        padding-left: 10px;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-evenly;
        color: #120d14;

        .status {
          font-size: 18px;
          font-weight: bold;
        }

        .status-desc {
          font-size: 14px;
          font-weight: bold;
        }
      }
    }

    .form-content {
      padding: 15px;
      box-shadow: 0px 2px 5px #eaebe7;
      width: 100%;
      background: #ffffff;
      border-radius: 10px;

      .form-block {
        width: 100%;
        height: 50px;
        font-size: 15px;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        .form-label {
          width: 110px;
          text-align: left;
          color: #6a6a6a;
        }

        .form-value {
          color: #111111;
        }
      }

      .form-block:not(:last-child) {
        border-bottom: 1px solid #e7e7e7;
      }
    }
  }
}
</style>