<template>
  <view class="rech-details">
    <view class="rech-layer">
      <view class="rech-amount">
         <text class="c" v-if="objNew.third_party_sn">充值金额</text>
        <text class="c"  v-else-if="objNew.transaction_sn">消费金额</text>
        <view class="rech-add">
        <text v-if="objNew.third_party_sn" class="m">+</text>
         <text v-else-if="objNew.transaction_sn" class="m">-</text>
         <text class="m">{{objNew.amount}}</text>
        </view>
      </view>
      <view class="rech-bill">
        <view class="rech-row">
          <text class="c">交易描述</text>
          <text class="m">{{objNew.description}}</text>
        </view>
        <view v-if="!objNew.third_party_sn" class="rech-row">
          <text class="c">订单id</text>
          <text class="m">{{objNew.id}}</text>
        </view>
        <view v-if="!objNew.third_party_sn" class="rech-row">
          <text class="c">业务类型</text>
          <text class="m">{{objNew.related_business_type}}</text>
        </view>
        <view class="rech-row">
          <text class="c">交易流水号</text>
          <text class="m">{{objNew.business_sn}}</text>

        </view>
          <view v-if="objNew.third_party_sn " class="rech-row">
          <text class="c">第三方流水号</text>
          <text class="m">{{objNew.third_party_sn}}</text>
        </view>
          <view v-if="objNew.third_party_sn " class="rech-row">
          <text class="c">充值方式</text>
          <text v-if="objNew.payment_method == 1" class="m">微信</text>
          <text v-else class="m">支付宝</text>
        </view>
         <view class="rech-row">
          <text class="c">交易时间</text>
          <text class="m">{{objNew.created_at}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      objNew:{}
    };
  },
  onLoad(options){
    this.objNew=JSON.parse(options.obj)


  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.rech-details {
  margin: 28rpx auto;
  width: 700rpx;
  height: 1234rpx;
  border-radius: 24rpx;
  background: #ffffff;
  .rech-layer {
    padding-top: 80rpx;
    .rech-amount {
      margin: 0 auto;
      width: 206rpx;
      height: 120rpx;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      gap: 24rpx;
      z-index: 0;
      .c {
        font-family: PingFangSC;
        font-size: 32rpx;
        font-weight: normal;
        line-height: 48rpx;
        display: flex;
        align-items: center;
        letter-spacing: normal;
        color: #333333;
      }
      .rech-add{
        display: flex;
        align-items: center;
      }
      .m {
        font-family: PingFangSC;
        font-size: 48rpx;
        font-weight: 500;
        line-height: 48rpx;
        display: flex;
        align-items: center;
        letter-spacing: normal;
        color: #272426;
      }
    }
    .rech-bill {
      height: 460rpx;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // align-items: center;
      padding: 60rpx 24rpx;
      gap: 40rpx;
      z-index: 1;
      .rech-row {
        display: flex;
        justify-content: space-between;
        .c {
          display: block;
          width: 180rpx;
          font-family: PingFangSC;
          font-size: 30rpx;
          font-weight: normal;
          line-height: 30rpx;
          letter-spacing: normal;
          color: #9b939a;
        }
        .m {
          font-family: PingFangSC;
          font-size: 30rpx;
          font-weight: 500;
          line-height: 30rpx;
          text-align: right;
          letter-spacing: normal;
          color: #272427;
        }
      }
    }
  }
}
</style>