frontend-app/pages/mine_package/mine_order/after-sales/refund-popup.vue

<template>
  <!-- 退货退款模块 -->
  <view class="refund_box">
    <view v-if="status > 0" class="refund_header">
      <salesStatus :topLabel="topLabel" :topTitle="topTitle" :status="status"></salesStatus>
    </view>
    <scroll-view scroll-y class="refund_content">
      <view class="content_card">
        <image :src="product.items[0].mainGraph" class="card_img"></image>
        <view class="card_info">
          <view class="card_box">
            <view class="card_title">
              <view class="title">{{ product.items[0].title }}</view>
              <view class="price">¥{{ product.items[0].goodsAmount }}</view>
            </view>
            <view class="shop_status">规格：{{ product.sumAmount }}</view>
          </view>
          <view class="card_total">
            <text>共{{ product.buyNum }}件</text>
            <text>合计{{ product.sumAmount }}元</text>
          </view>
        </view>
      </view>
      <view class="card_list">
        <view class="list_left">退款原因</view>
        <view> {{ RETURN_REASON_OBJ[product.afterReason] }} </view>
      </view>
      <view class="card_list">
        <view class="list_left">退款金额</view>
        <view>
          ¥{{ product.refundAmount || product.sumAmount }}
          <text style="font-size: 24rpx; color: #999">（退回现金余额)</text>
        </view>
      </view>

      <view class="card_list" v-if="product.status == 8">
        <view class="list_left">未通过原因</view>
        <view>
          {{ product.auditRemark || "--" }}
        </view>
      </view>

      <view v-if="status > 1 && status != 6 && status != 5">
        <view class="card_list">
          <view class="list_left" style="flex:30%;">邮寄地址</view>
          <view>{{ product.address || "--" }}</view>
        </view>
        <view class="card_list">
          <view class="list_left">卖家信息</view>
          <view>{{ (product.name || product.phone) ? `${product.name || ''} ${product.phone || ''}`.trim() : "--" }}
          </view>
        </view>
        <view class="card_list" @click="onSelectExpress">
          <view class="list_left">请选择快递名称</view>
          <view>{{ product.expressName || "请选择快递公司" }}</view>
        </view>
        <view class="card_list">
          <view class="list_left">填快递单号</view>
          <input class="input-express" type="text" :disabled="status != 2" placeholder="请填写快递单号"
            v-model="product.expressNo" />
        </view>
      </view>
    </scroll-view>

    <view v-if="buttonLabel" :class="[
      'bottom_box',
      {
        bottom_box_disabled:
          status == 2 && (!product.expressNo || !product.expressName),
      },
      { bottom_box_quash: status == 1 || status == 3 },
    ]">
      <view class="button operate_but_2" @click="submit">
        {{ buttonLabel }}</view>
    </view>
    <up-toast ref="uToastRef"></up-toast>

    <up-picker :show="expressShow" :columns="[expressList]" keyName="name" valueName="id" itemHeight="34"
      @confirm="onExpressConfirm" @cancel="expressShow = false" @close="expressShow = false"></up-picker>
  </view>
</template>
<script>
import salesStatus from "../components/salesStatus.vue";
import {
  afterSaleApply,
  cancelAfterSale,
  returnGoodsFeedback,
  getExpressCompany,
} from "@/api/order.js";
import { RETURN_REASON } from "@/pages/mine_package/mine_order/emun/index.js";
export default {
  components: { salesStatus },
  props: {
    product: {
      type: Object,
      default: {},
    },
    cancelForm: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      expressList: [],
      expressShow: false,
    };
  },

  created() {
    this.onGetExpressCompany();
  },
  methods: {
    submit() {
      // 未售后 -- 提交申请
      if (this.status == 0) {
        this.onAfterSaleApply();
      }
      //已售后-- 撤销申请
      if (this.status == 1 || this.status == 3) {
        this.onCancelApply();
      }
      if (this.status == 2) {
        if (!this.product.expressNo || !this.product.expressName) {
          this.$refs.uToastRef.show({
            type: "error",
            message: "请填写快递信息",
          });
          return;
        }
        this.onReturnGoods();
      }
      // 售后中--退款失败
      if (this.status == 4) {
        // 重新发起
        this.onClose(true);
      }
      // 售后中--退款成功
      if (this.status == 5) {
        this.onClose();
      }
    },
    // 未售后 -- 售后
    async onAfterSaleApply() {
      const params = {
        reason: this.cancelForm.afterReason,
        type: this.product.afterType, //0-未售后 1-退款不退货， 2-退货退款 3-换货
        id: this.product.id, // 订单id
        itemIds: this.product.items[0]?.id, // 商品id
      };
      console.log("确认取消", params);
      if (!params.reason) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请选择取消原因",
        });
        return;
      }
      const { bizcode } = await afterSaleApply(params);
      if (bizcode === 100) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "申请成功，等商家审核",
        });
        this.onClose();
      }
    },
    // 撤销申请
    async onCancelApply() {
      const params = {
        afterId: this.product.afterId,
      };
      console.log("撤销申请", params);
      const { bizcode } = await cancelAfterSale(params);
      if (bizcode === 100) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "撤销成功",
        });
        this.onClose();
      }
    },
    // 寄回商品
    async onReturnGoods() {
      const params = {
        id: this.product.afterId,
        expressNo: this.product.expressNo,
        expressId: this.product.expressId,
      };
      console.log("寄回商品", params);
      const { bizcode } = await returnGoodsFeedback(params);
      if (bizcode === 100) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "寄回成功",
        });
        this.onClose();
      }
    },
    // 关闭弹窗
    onClose(item = false) {
      this.$emit("close", item);
    },
    // 快递公司
    async onGetExpressCompany() {
      const res = await getExpressCompany();
      console.log("快递公司", res.data);
      this.expressList = res.data;
    },
    // 方法
    onExpressConfirm(item) {
      console.log(item);
      const val = item.value[0];
      this.product.expressName = val.name;
      this.product.expressId = val.id;
      this.expressShow = false;
    },
    onSelectExpress() {
      if (this.status == 2) {
        this.expressShow = true;
      }
    },
  },
  computed: {
    status() {
      console.log(
        "未售后-开始售后---",
        this.product.status,
        this.product.afterType
      );
      // 未售后-开始售后
      if (this.product.status == 9) {
        return 0;
      }
      //  已售后 --提交申请
      if (this.product.status == 0) {
        return 1;
      }
      // 售后中--待买家寄回商品
      if (this.product.status == 1) {
        return 2;
      }
      // 售后中--快递已发，待卖家收货
      if (this.product.status == 2) {
        return 3;
      }
      // 售后中--卖家已收货，退款失败
      if (this.product.status == 6) {
        return 4;
      }
      // 售后中--卖家已收货，退款成功
      if (this.product.status == 7) {
        return 5;
      }
      // 退款
      if (this.product.status == 8) {
        return 6;
      }
    },
    /* 根据订单状态按钮显示不同文案 */
    buttonLabel() {
      if (this.status == 0) {
        return "提交申请";
      } else if (this.status == 1) {
        return "撤销申请";
      } else if (this.status == 2) {
        return "确定退货/退款";
      } else if (this.status == 3) {
        return "撤销申请";
      } else if (this.status == 4) {
        return "重新发起";
      } else if (this.status == 5) {
        return "我知道了";
      } else if (this.status == 8) {
        return "确定退货/退款";
      }
    },
    /* 根据订单状态显示不label */
    topLabel() {
      if (this.status == 1) {
        return "您已成功发起退货/退款申请，请耐心等待审核";
      } else if (this.status == 2) {
        return "请按照以下地址寄回商品";
      } else if (this.status == 3) {
        return "退款/退货处理中";
      } else if (this.status == 4) {
        return "您发起的退货/退款申请，未通过";
      } else if (this.status == 5) {
        return "您发起的退货/退款申请，已处理完成";
      } else if (this.status == 6) {
        return "您发起的退货/退款申请，未通过";
      }
    },
    /* 根据订单状态显示不title */
    topTitle() {
      if (this.status == 1) {
        return "退款/退货审核中";
      } else if (this.status == 2) {
        return "退款申请通过";
      } else if (this.status == 3) {
        return "您已成功发起退货/退款申请，请耐心等待处理";
      } else if (this.status == 4) {
        return "退款申请失败";
      } else if (this.status == 5) {
        return "退款成功";
      } else if (this.status == 6) {
        return "退款申请失败";
      }
    },

    /* 计算地址 */
    address() {
      return `${this.product.provinceName || ""}${this.product.cityName || ""}${this.product.areaName || ""
        }${this.product.address || ""}  ${this.product.name || ""} ${this.product.phone || ""
        }`;
    },
    RETURN_REASON_OBJ() {
      return RETURN_REASON;
    },
  },
};
</script>
<style lang="scss" scoped>
.refund_box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.refund_header {
  flex-shrink: 0;
}

.refund_content {
  width: 100%;
  height: 52vh;
  padding: 0 32rpx 30rpx;
  box-sizing: border-box;

  .content_card {
    display: flex;
    margin-bottom: 48rpx;

    .card_img {
      width: 156rpx;
      height: 156rpx;
      margin-right: 20rpx;
    }

    .card_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: calc(100% - 176rpx);

      .card_box {
        .card_title {
          font-weight: bold;
          font-size: 30rpx;
          width: 100%;
          color: #000000;

          box-sizing: border-box;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          text-align: left;
          font-style: normal;

          .title {
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .price {
            width: 20%;
            text-align: right;
          }
        }

        .shop_status {
          color: #999;
          font-size: 28rpx;
          margin-top: 15rpx;
        }
      }

      .card_total {
        color: #999;
        font-size: 28rpx;
        text-align: right;
      }
    }
  }

  .card_list {
    display: flex;
    justify-content: space-between;
    height: 96rpx;
    align-items: center;
    // line-height: 96rpx;
    font-size: 28rpx;
    border-bottom: 1px solid #eaeaea;

    .list_left {
      color: #666;
    }

    .input-express {
      display: flex;
      align-items: center;
      width: 400rpx;
      height: 100%;
      text-align: end;
      font-size: 28rpx;
    }
  }
}

.bottom_box {
  flex-shrink: 0;
  text-align: center;
  background: #ffffff;
  padding: 16rpx 32rpx calc(28rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .button {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    border-radius: 8rpx;
  }

  &.bottom_box_quash {
    .button {
      background: #ffffff;
      color: #b164fb;
      border: 1rpx solid #b164fb;
    }
  }

  &.bottom_box_disabled {
    .button {
      background: #e8ebf6;
      color: #cbced9;
      border: 1rpx solid #e7ebf6;
    }
  }
}
</style>