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"> {{ i18n.MoneyDirection }} </view>
      <view class="radio-list">
        <view class="refund">
          <view class="money"> {{ i18n.refundAmount }} </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"> {{ i18n.refundAccount }} </view>
          <view class="commodity-price" style="color: #222">
            {{ payType }}
          </view>
        </view>
        <u-steps
          direction="column"
          dot
          activeColor="#D8D8D8"
          inactiveColor="#D8D8D8"
        >
          <u-steps-item
            :title="i18n.refundSuccessful"
            :desc="i18n.processingTime"
          >
          </u-steps-item>
          <u-steps-item
            :title="i18n.applicationReview"
            :desc="i18n.acceptedWait"
          >
          </u-steps-item>
          <u-steps-item
            :title="i18n.buyerRefund"
            :desc="i18n.processingWait"
          ></u-steps-item>
        </u-steps>
      </view>
      <button class="btn" @click="$emit('close')">{{ i18n.know }}</button>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    refundDetail: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
    payType() {
      if (this.refundDetail.pay_type == "balance") {
        return "账户余额";
      } else if (this.refundDetail.pay_type == "wxchat") {
        return "微信余额";
      } else {
        return "客服支付，退回原账户";
      }
    },
  },
  methods: {
    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>