Web_QiCaiYao/pages/order/processRefunds.vue

<template>
  <div class="processRefunds">
    <!-- 判断退款状态 -->
    <div>
      <div class="processRefunds_txt" v-if="stepActive == 1">
        <p class="t1">
          {{refundData.refund_status_name}}
          <span>
            <!-- <span>&nbsp;&nbsp;</span>还剩下1天23时21分 -->
          </span>
        </p>
        <p class="t2">卖家同意或超时未处理，将自动退款</p>
      </div>
      <div class="processRefunds_txt" v-if="stepActive == 2 && !iSfailed">
        <p class="t3">
          退款失败
          <span>
            <span>&nbsp;&nbsp;</span>
            {{refundData.refund_status_name
            }}
          </span>
        </p>
        <p class="t2">
          拒绝原因：
          <span>{{refundData.refund_refuse_reason}}</span>
        </p>
      </div>
      <div class="processRefunds_txt" v-if="stepActive == 2 && iSfailed">
        <p class="t1">
          商家已同意
          <span>
            <!-- <span>&nbsp;&nbsp;</span>还剩下1天23时21分 -->
          </span>
        </p>
        <p class="t2">
          <!-- 卖家已同意退款，请按下方地址尽快完成退货 -->
          <span></span>
        </p>
      </div>
      <div class="processRefunds_txt" v-if="stepActive == 3 && !iSrefund">
        <p class="t1">退款中</p>
        <p class="t2">退款正在处理中</p>
      </div>
      <div class="processRefunds_txt" v-if="stepActive == 3 && iSrefund">
        <!-- <p class="t1">{{refundData.refund_status_name}}</p> -->
        <p class="t1">退款成功</p>
        <p class="t4">
          退款总金额：
<!--          <span>¥{{refundData.real_goods_money}}</span>-->
          <span>¥{{orderGoodsData.refund_status == 3 ? orderGoodsData.refund_real_money : orderGoodsData.refund_apply_money}}</span>
        </p>
      </div>
      <!-- 商品信息 -->
      <div class="commodityBox">
        <img :src="imgUrl+refundData.sku_image" alt />
        <div class="commoditytxt">
          <p>{{refundData.goods_name}}</p>
          <p>
            <!-- <span>商品编号：a0001</span> -->
            <span>&nbsp;&nbsp;</span>
            <!-- <span>规格：10g/袋</span> -->
          </p>
          <!-- <p>产地：北京</p> -->
          <p style="color: #ff2828">￥{{refundData.real_goods_money}}</p>
        </div>
      </div>
      <!-- 商品退款退货运单信息 -->
      <div class="refoundOrder">
        <h4>退款信息</h4>
        <div class="refoundOrder_item">
          <div>退款编号</div>
          <div>{{refundData.refund_no}}</div>
        </div>
        <div class="refoundOrder_item">
          <div>申请时间</div>
          <div>{{ $dayjs(refundData.refund_action_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>

        <!--退款状态=3维权结束 && refund_real_money实际退款金额 >0 时展示-->
        <div class="refoundOrder_item" v-if="refundData.refund_status == 3 && refundData.refund_real_money>0">
          <div>退款金额</div>
          <div>¥{{refundData.refund_real_money}}</div>
        </div>

        <!--退款申请金额>0时展示-->
        <div class="refoundOrder_item" v-else-if="refundData.refund_apply_money > 0">
          <div>退款金额</div>
          <div>¥{{refundData.refund_apply_money}}</div>
        </div>

        <div class="refoundOrder_item">
          <div>退款原因</div>
          <div>{{orderGoodsData.refund_remark}}</div>
        </div>
        <!-- <div class="refoundOrder_item_img" >
          <div>上传图片</div>
          <div>
            <img src alt />
            <img src alt />
            <img src alt />
            <img src alt />
          </div>
        </div>-->

        <div class="refoundOrder_item_address" v-if="stepActive == 2 && iSfailed">
          <h4>退货地址</h4>
          <div class="txt">
            <div>罗爱拉 13456987568</div>
            <div>福建省厦门市集美区李冰大道500号</div>
          </div>
        </div>

        <div class="refoundOrder_item_logistics" v-if="stepActive == 3 && !iSrefund">
          <h4>物流信息</h4>
          <div class="txt">
            <div>
              物流公司：
              <span>顺丰公司</span>
            </div>
            <div>
              物流单号：
              <span>2837447782721</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Setting from "~/setting";
export default {
  props: ["stepActive", "iSfailed", "iSrefund", "orderData",'orderGoodsData'],
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      order_goods_ids: [],
      refundData: {}
    };
  },
  watch: {
    stepActive(n, o) {}
  },
  created() {
    this.order_goods_ids = this.orderData.order_goods.map(item => {
      return item.order_goods_id;
    });
    this.getRefundData();
    //console.log('qq5',this.orderGoodsData)
    console.log(this.stepActive, this.iSfailed, this.iSrefund);
  },
  methods: {
    getRefundData() {
      // 多个退款数据查询
      // if (this.orderData.order_goods.length > 1) {
      let obj = {
        //order_goods_id: this.order_goods_ids.toString()
        order_goods_id: this.orderGoodsData.order_goods_id.toString()
      };
      this.$axios
        .post(`/orderrefund/detail`, obj)
        .then(res => {
          this.refundData = res.data;
          console.log(res.data);
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.processRefunds {
  .processRefunds_txt {
    .t1,
    .t2,
    .t3 {
      height: 25px;
      line-height: 25px;
      margin-bottom: 10px;
    }
    .t1 {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;

      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ff2828;
      }
    }
    .t2 {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
    }
    .t3 {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;
      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
    .t4 {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      span {
        color: #ff2828;
      }
    }
  }
  .commodityBox {
    margin-top: 30px;
    display: flex;
    img {
      width: 80px;
      height: 80px;
    }
    .commoditytxt {
      p {
        line-height: 30px;
        text-align: left;
        margin-left: 10px;
        font-size: 12px;
      }

      p:first-child {
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
  .refoundOrder {
    h4 {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #160000;
      line-height: 22px;
    }
    .refoundOrder_item {
      display: flex;
      margin-top: 15px;
      div:first-child {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #585858;
        line-height: 20px;
        margin-right: 60px;
      }
      div:last-child {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 20px;
        display: flex;
      }
    }
    .refoundOrder_item_img {
      display: flex;
      div:first-child {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #585858;
        line-height: 20px;
        margin-right: 60px;
      }
      div:last-child {
        height: 60px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 20px;
        display: flex;
        margin-top: 15px;
        img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
      }
    }
    .refoundOrder_item_address {
      padding: 20px 0;
      display: flex;
      h4 {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #585858;
        line-height: 22px;
        margin-right: 60px;
      }
      .txt {
        div:first-child {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #222222;
          line-height: 22px;
          margin-bottom: 10px;
        }
        div:last-child {
          color: #999999;
          font-size: 14px;
        }
      }
    }
    .refoundOrder_item_logistics {
      padding: 20px 0;
      display: flex;
      h4 {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #585858;
        line-height: 22px;
        margin-right: 60px;
      }
      .txt {
        div {
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 22px;
          margin-bottom: 10px;
          span {
            color: #222;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>