wx-qhb/pageC/refundDetail/component/moneyDestination.vue

<template>
  <view class="">
    <u-popup
      :show="show"
      @close="$emit('close')"
      round="16rpx"
      @open="open"
      closeable
      closeOnClickOverlay
    >
      <view class="title"> 钱款去向 </view>
      <view class="radio-list">
        <view class="refund">
          <view class="money"> 退款金额 </view>
          <view class="commodity-price" style="color: #f83224">
            <text style="font-size: 20rpx">￥</text>
            <text>{{
              refundDetail.goods[0].refund.actual_refund_price.split(".")[0]
            }}</text
            >.
            <text style="font-size: 20rpx">{{
              refundDetail.goods[0].refund.actual_refund_price.split(".")[1]
            }}</text>
          </view>
        </view>
        <view class="refund">
          <view class="money"> 退款账户 </view>
          <view class="commodity-price" style="color: #222">
            {{ payType }}
          </view>
        </view>
        <u-steps
          direction="column"
          dot
          activeColor="#D8D8D8"
          inactiveColor="#D8D8D8"
        >
          <u-steps-item
            title="退款成功"
            desc="退款已原路退回，到账时间以平台处理时间为准"
          >
          </u-steps-item>
          <u-steps-item
            title="申请受理中"
            desc="您的退款申请团长已受理，请耐心等待"
          >
          </u-steps-item>
          <u-steps-item
            title="买家发起退款"
            desc="系统将会在1-2天提交处理，请耐心等待"
          ></u-steps-item>
        </u-steps>
      </view>
      <button class="btn">我知道了</button>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    refundDetail: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    payType() {
      if (this.refundDetail.pay_type == "balance") {
        return "账户余额";
      } else if (this.refundDetail.pay_type == "wxchat") {
        return "微信余额";
      } else {
        return "客服支付，退回原账户";
      }
    },
  },
  methods: {
    open() {},
    handleChange(name) {
      console.log(this.value);
      this.$emit("close", name);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  font-size: 36rpx;
  color: #222;
  font-weight: 500;
  margin-top: 20rpx;
}

.radio-list {
  padding: 0 28rpx;
  margin-top: 40rpx;
  .refund {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 38rpx;
    .money {
      color: #555;
      font-size: 30rpx;
    }
  }
}

.radio {
  margin-bottom: 48rpx;
}
.btn {
  width: 94%;
  background-color: #fff;
  border: 2rpx solid #979797;
  border-radius: 44rpx;
}
::v-deep .u-steps-item__content {
  margin-bottom: 70rpx;
}
</style>