mrr.sj.front/pages/wallet/components/cashPop.vue

<template>
  <view>
    <uni-popup ref="popup" @change="popChange">
      <view class="pop-cards">
        <view class="pop-cards-title" style="padding-bottom: 30rpx;">提现明细</view>
        <scroll-view style="height: 70vh" scroll-y>
          <view class="pop-card" style="padding-top: 0;">
            <view class="pop-card-title" style="font-size: 32rpx;">提现记录</view>
          </view>
          <view class="pop-card pop-border-bottom">
            <view class="pop-card-title">提现流水号</view>
            <view class="pop-card-text1">{{ cashObj.cash_outbizno }}</view>
          </view>
          <view class="pop-card pop-border-bottom">
            <view class="pop-card-title">提现金额</view>
            <view class="pop-card-text1">{{ formatPriceNumber(cashObj.cash_money) }}</view>
          </view>
          <view class="pop-card pop-border-bottom">
            <view class="pop-card-title">提现申请时间</view>
            <view class="pop-card-text1">{{ cashObj.cash_add_time }}</view>
          </view>
          <view class="pop-card pop-border-bottom">
            <view class="pop-card-title">状态</view>
            <view
              class="pop-card-text1"
              :class="{
                popRed: cashObj.cash_state >= 4 || cashObj.cash_state < 1,
              }"
              >{{ getTabName(cashObj.cash_state) }}</view
            >
          </view>
          <view
            class="pop-card pop-border-bottom"
            v-if="cashObj.cash_back_text"
          >
            <view class="pop-card-title">驳回原因</view>
            <view class="pop-card-text1 popRed">{{
              cashObj.cash_back_text
            }}</view>
          </view>

          <view class="pop-card" style="padding-top: 60rpx">
            <view class="pop-card-title" style="font-size: 32rpx;">提现账号</view>
          </view>
          <view v-if="cashObj.cash_kind == 3">
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">银行卡号</view>
              <view class="pop-card-text1">{{ cashObj.cash_identity }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">所属银行</view>
              <view class="pop-card-text1">{{ cashObj.cash_bank }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">姓名</view>
              <view class="pop-card-text1">{{ cashObj.cash_name }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">手机号</view>
              <view class="pop-card-text1">{{ cashObj.cash_phone }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">开户行</view>
              <view class="pop-card-text1">{{ cashObj.cash_bank_name }}</view>
            </view>
          </view>
          <view v-if="cashObj.cash_kind == 1">
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">支付宝账号</view>
              <view class="pop-card-text1">{{ cashObj.cash_identity }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">姓名</view>
              <view class="pop-card-text1">{{ cashObj.cash_name }}</view>
            </view>
            <view class="pop-card pop-border-bottom">
              <view class="pop-card-title">手机号</view>
              <view class="pop-card-text1">{{ cashObj.cash_phone }}</view>
            </view>
          </view>
          <view class="pop-btn" @click="close">关闭</view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.$refs.popup.open("bottom");
          });
        }
      },
    },
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    cashObj: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    popChange(e) {
      this.$emit("input", e.show);
    },
    // 根据提现状态返回对应文字
    getTabName(id) {
      if (id == 1 || id == 2) {
        return "审核中";
      } else if (id == 3) {
        return "已打款";
      } else {
        return "已驳回";
      }
    },
    close() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="less" scoped>
.pop-cards {
  padding: 40rpx;
  background: linear-gradient(180deg, #fedcdf 0, #ffffff 120rpx);
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .pop-cards-title {
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    text-align: center;
    font-style: normal;
  }
  .pop-card {
    padding-top: 30rpx;
    padding-bottom: 26rpx;
    display: flex;
    align-items: center;
    .pop-card-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 45rpx;
      text-align: left;
      font-style: normal;
      width: 202rpx;
    }
    .pop-card-text1 {
		word-break: break-all;
		flex: 1;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }
    .popRed {
      color: #e8101e;
    }
  }
  .pop-btn {
    margin-top: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 672rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
    border-radius: 48rpx;
    font-weight: 500;
    font-size: 34rpx;
    color: #ffffff;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
  }
  .pop-border-bottom {
    border-bottom: 2rpx solid #FAF8F8;
  }
}
</style>