applet/pages/order/orderblackDetails.vue

<template>
  <view class="container">
    <view class="top-state u-font24 u-00321E">
      <!--申请退货中-->
      <!-- 维权订单操作状态（0申请，1同意，2买家已发货，3商家已收到退货商品,4商家发起退款支付，5已支付退款,6拒绝，7自动关闭,8主动撤消 -->
      <view class="refund-underway obligation" v-if="status == 0">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">请等待商家处理</view>
            <view class="u-flex u-font26"
              >你的申请已经提交，还剩{{
                $mUtil.patTime(last_agree_time)
              }}商家自动同意申请。</view
            >
          </view>
        </view>
      </view>
      <!--商家同意，等待买家发货-->
      <view class="refund-underway obligation" v-if="type == 10 && status == 1">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">请退货并填写物流信息</view>
            <view class="u-flex u-font26"
              >还剩{{
                $mUtil.patTime(last_ship_time)
              }}，如果未发货自动取消售后。</view
            >
          </view>
        </view>
      </view>
      <!--商家同意，等待买家发货-->
      <view class="refund-underway obligation" v-if="type == 5 && status == 1">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">商家已同意</view>
            <view class="u-flex u-font26"
              >还剩{{
                $mUtil.patTime(last_agree_time)
              }}，如果未退款自动完成退款。</view
            >
          </view>
        </view>
      </view>
      <!--商家拒绝-->
      <view class="refund-underway obligation" v-if="status == 6">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">商家拒绝了你的售后申请</view>
            <view
              class="u-flex u-font26"
              style="word-break: break-all"
              v-if="statusRson"
              >原因为：{{ statusRson }}</view
            >
          </view>
        </view>
      </view>
      <!--商家拒绝-->
      <view class="refund-underway obligation" v-if="status == 7">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">自动关闭</view>
            <view class="u-flex u-font26"
              >该维权订单超时未发货，已自动关闭</view
            >
          </view>
        </view>
      </view>
      <!--商家拒绝-->
      <view class="refund-underway obligation" v-if="status == 8">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">自动关闭</view>
            <view class="u-flex u-font26"
              >该维权订单超时未发货，已自动关闭</view
            >
          </view>
        </view>
      </view>
      <!--待商家收货-->
      <view class="refund-underway obligation" v-if="type == 10 && status == 2">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">等待商家确认收货</view>
            <view class="u-flex u-font26"
              >还剩{{
                $mUtil.patTime(last_receipt_time)
              }}，如果商家未确认收货则自动确认收货。</view
            >
          </view>
        </view>
      </view>
      <!--商家同意，待打款-->
      <view class="refund-underway obligation" v-if="type == 10 && status == 3">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">商家已同意申请，待打款</view>
            <view class="u-flex u-font26">预计1-3天内打款成功</view>
          </view>
        </view>
      </view>
      <!--退货完成-->
      <view class="refund-underway obligation" v-if="status == 5">
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">退货/退款完成</view>
            <view class="u-flex u-font26"
              >款项已沿原路返回至您的付款账户。</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="blackinfos u-p30 u-bg-fff u-border-one">
      <view class="u-font32 u-1A1A1A u-bold">退款说明</view>
      <view class="u-flex-center u-mt15">
        <text class="u-font26 u-1A1A1A">·</text>
        <text class="u-font24 u-999"
          >未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物</text
        >
      </view>
      <view class="u-flex-center u-mt15">
        <text class="u-font26 u-1A1A1A">·</text>
        <text class="u-font24 u-999"
          >交易的欠款还在金字中间账户，确保您资金安全</text
        >
      </view>
      <view class="u-flex-center u-mt15">
        <text class="u-font26 u-1A1A1A">·</text>
        <text class="u-font24 u-999"
          >请填写真实退货物流信息，逾期未填写，退货申请将关闭</text
        >
      </view>
    </view>

    <view v-if="type == 10">
      <view
        v-if="
          status == 1 ||
          status == 2 ||
          status == 3 ||
          status == 4 ||
          status == 5
        "
      >
        <ldAddress :value="address" :link="false" :showProvinces="false"></ldAddress>
      </view>
    </view>

    <view class="u-plr30 u-bg-fff u-mt30" v-if="type == 10">
      <view v-if="status == 1">
        <view class="u-flex-center-sb u-border-one">
          <view class="u-font30 u-1A1A1A u-ptb30 u-bold">物流单号</view>
          <input
            class="u-flex1 u-text-right"
            type="text"
            placeholder="填写物流单号"
            @input="inputLog"
            value=""
          />
        </view>
        <picker
          @change="pickerChange"
          :value="typeIndex"
          range-key="companyName"
          :range="logisticsList"
        >
          <view class="u-flex-center-sb">
            <view class="u-font30 u-1A1A1A u-ptb30 u-bold">物流公司</view>
            <view class="u-flex-center">
              <view
                class="u-font30 u-1A1A1A u-ptb30"
                v-if="logisticsList[typeIndex]"
                >{{ logisticsList[typeIndex].companyName }}
              </view>
              <view
                class="u-font30 u-999 u-ptb30"
                v-else
                >请选择物流公司
              </view>
              <view class="iconfont u-font28 u-666">&#xe671;</view>
            </view>
          </view>
        </picker>
      </view>
      <view v-if="status == 2 || status == 3 || status == 4 || status == 5">
        <view class="u-flex-center-sb u-border-one">
          <view class="u-font30 u-1A1A1A u-ptb30 u-bold">物流单号</view>
          <view
            class="u-font30 u-1A1A1A u-ptb30"
            v-if="configInfo.shipRecordVo"
          >
            {{ configInfo.shipRecordVo.logisticCode }}
          </view>
        </view>
        <view class="u-flex-center-sb">
          <view class="u-font30 u-1A1A1A u-ptb30 u-bold">物流公司</view>
          <view
            class="u-font30 u-1A1A1A u-ptb30"
            v-if="configInfo.shipRecordVo"
          >
            {{ configInfo.shipRecordVo.expressName }}
          </view>
        </view>
      </view>
    </view>

    <view class="pabox">
      <view class="u-font30 u-1A1A1A u-border-one h90">退货信息</view>
      <view v-for="items in configInfo.rightsChildOrders || []" :key="items.id">
        <ldGoodsBalck :value="items"></ldGoodsBalck>
      </view>
      <view class="u-font28 u-1A1A1A u-mt30 bg-fff">
        <view class="u-flex-center-sb u-border-one pt-pb25">
          <view>{{ type == 5 ? "退款原因" : "退货原因" }}</view>
          <view class="u-999 u-font3">{{ configInfo.reason }}</view>
        </view>
        <view class="u-flex-center-sb u-border-one pt-pb25">
          <view>退款金额</view>
          <view class="u-999 u-font30">￥{{ configInfo.refundMoney }} </view>
        </view>
        <view
          class="u-flex-center-sb u-border-one pt-pb25"
          v-if="configInfo.refundPoint > 0"
        >
          <view>退款积分</view>
          <view class="u-999 u-font30">{{ configInfo.refundPoint }} </view>
        </view>
        <view
          class="u-flex-center-sb u-border-one pt-pb25"
          v-if="type == 10 || type == 5"
        >
          <view>申请件数 <text class="u-999 u-font24"></text> </view>
          <view class="u-999 u-font30">{{ configInfo.refundNum }} 件</view>
        </view>
        <view class="u-flex-center-sb u-border-one pt-pb25">
          <view>申请时间</view>
          <view class="u-999 u-font30">{{ configInfo.createTime }}</view>
        </view>
        <view class="u-flex-center-sb u-border-one pt-pb25">
          <view>退款编号</view>
          <view class="u-999 u-font30">{{ configInfo.rightsCode }}</view>
        </view>
        <view class="u-flex-column-start pt-pb25">
          <view>退款备注</view>
          <view class="boxTextarea">{{
            configInfo.caption ? configInfo.caption : "无"
          }}</view>
        </view>
        <view class="u-flex-column-start pt-pb25">
          <view>退款凭证</view>
          <view class="imgListOne">
            <view
              class="imgList u-flex-center"
              v-for="(imgsurl, indexs) in configInfo.voucherImages || []"
              :key="indexs"
            >
              <image :src="imgsurl" mode="" class="imgsbox u-mr30"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="bg-fff btn"
      v-if="type == 10 && status == 1"
      @click="sendLogial"
    >
      <button class="u-btn-two u-FFF">确认提交</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { saleRightsOrderInfo_Api } from "@/api/order";
import {
  userBusinessReturnAddressInfo_Api,
  expressCompanyList_Api,
} from "@/api/index";
import {saleRightsOrderShip_Api} from "@/api/order"
import ldGoodsBalck from "@/components/ld-goods/ld-goods-balck.vue";

// 响应式数据
const statusRson = ref("商家拒绝了你的售后申请");
const configInfo = ref({});
const address = ref({});
const loading = ref(true);
const type = ref(0);
const status = ref(0);
const last_agree_time = ref(0);
const last_ship_time = ref(0);
const last_receipt_time = ref(0);
const typeIndex = ref(null);
const logVal = ref("");
const rightsId = ref(null);
const logisticsList = ref([]); //申请类型
const listAll = ref([]);
const eventChannel = ref(null);

onMounted(() => {
  const instance = getCurrentInstance().proxy;
  eventChannel.value = instance.getOpenerEventChannel();
});

const pickerChange = (e) => {
  // console.log(e, 222);
  typeIndex.value = e.detail.value;
};

const inputLog = (e) => {
  logVal.value = e.detail.value;
};

//确认收货
const sendLogial = () => {
  if (logVal.value == "") {
    uni.$uv.toast("请填写物流单号");
    return false;
  }

  if (typeIndex.value == null || typeIndex.value == undefined) {
    uni.$uv.toast("请选择物流公司");
    return false;
  }

  let data = {
    rightsId: rightsId.value,
    expressName: logisticsList.value[typeIndex.value].companyName,
    expressCode: logisticsList.value[typeIndex.value].companyCode,
    logisticCode: logVal.value,
  };

  saleRightsOrderShip_Api(data).then((res) => {
    if (res && res.code == 200) {
      uni.$uv.toast("提交成功");
      setTimeout(() => {
        eventChannel.value.emit("handleReset");
        uni.navigateBack();
      }, 1000);
    }
  });
};

const getDetail = (id) => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  saleRightsOrderInfo_Api(id)
    .then((res) => {
      uni.hideLoading();
      loading.value = false;
      if (res && res.code == 200) {
        configInfo.value = res.data;
        last_agree_time.value = res.data.lastAgreeTime;
        last_ship_time.value = res.data.lastShipTime;
        last_receipt_time.value = res.data.lastReceiptTime;
        type.value = res.data.rightsType;
        status.value = res.data.rightsOperateStatus;
        if (res.data.businessId) {
          shopAddress(res.data.businessId);
        }
        getLogistics();

        res.data.rightsOrderOperateRecords.forEach((e) => {
          if (e.rightsOperateStatus == 6) {
            statusRson.value = e.reason;
          }
        });
      }
    })
    .catch((err) => {
      // uni.hideLoading();
    });
};

//查看地址
const shopAddress = (id) => {
  userBusinessReturnAddressInfo_Api(id).then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      address.value = res.data;
    }
  });
};

const getLogistics = () => {
  expressCompanyList_Api().then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      listAll.value = res.data;
      logisticsList.value = res.data;
      // res.data.forEach((items) => {
      //   logisticsList.value.push({
      //     name: items.company,
      //     code: items.logistics_code,
      //   });
      // });
    }
  });
};

// 页面加载
onLoad((options) => {
  // console.log(options, "options");
  if (options.id) {
    getDetail(options.id);
    rightsId.value = options.id;
  }
});
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.imgListOne {
  display: flex;
  flex-wrap: wrap;
}

.cccfont {
  font-size: 26rpx;
  color: #eee;
}

.imgsbox {
  margin-right: 50rpx;
  width: 176rpx;
  height: 158rpx;
  border-radius: 20rpx;
  overflow: hidden;
  margin-top: 40rpx;
}

.grade-active {
  color: #ff5112;
}

.u-B3B3B3 {
  color: #b3b3b3;
}

.user_remark {
  background-color: #fff;
  padding: 30rpx;
  border-top: 1px solid #eee;
}

.boxTextarea {
  width: 686rpx;
  border: 1px solid #ededed;
  border-radius: 20rpx;
  background-color: #fafafa;
  padding: 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

.pabox {
  background-color: #fff;
  padding: 0 30rpx 140rpx;
  margin-top: 30rpx;

  .h90 {
    height: 90rpx;
    line-height: 90rpx;
  }
}

.upb120 {
  padding-bottom: 140rpx;
}

.bg-fff {
  background-color: #ffffff;
}

.ptb22 {
  padding-top: 22rpx;
  padding-bottom: 22rpx;
}

.pt-pb25 {
  padding-top: 25rpx;
  padding-bottom: 25rpx;
}

.pt28-pb24 {
  padding-top: 28rpx;
  padding-bottom: 24rpx;
}

.iconfont58 {
  font-size: 58rpx;
}

.mt44 {
  margin-top: 44rpx;
}

.ml38 {
  margin-left: 38rpx;
}

.ml82 {
  margin-left: 82rpx;
}

.wt378 {
  width: 378rpx;
}

.wt504 {
  width: 504rpx;
}

.u-br-999 {
  border: 1px solid #999999;
}

.u-br-f00 {
  border: 1px solid #ff0000;
}

.bg-00321e {
  background: #0b844a;
}

.account-paid {
  padding: 44rpx 0rpx;
}

.account-paid image {
  width: 202rpx;
  height: 124rpx;
}

.btn {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  box-sizing: border-box;
  padding: 22rpx 30rpx;
  button {
    background: #fa6138;
  }
}

.cancel-btn {
  margin-left: auto;
}

.cancel-btn,
.pay-btn {
  width: 202rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35px;
  font-size: 28rpx;
  margin-right: 30rpx;
}

.top-state {
  background-color: #f2f5fc;
  color: #fa6138;
  padding: 35rpx 30rpx;

  // 待支付
  .obligation {
    display: flex;
    justify-content: space-between;

    .timeImg {
      display: none;
      width: 70rpx;
      height: 54rpx;
      margin-right: 40rpx;
    }
  }
}

.address {
  background-color: #ffffff;
  padding-top: 72rpx;

  .linkman {
    padding-bottom: 34rpx;
  }

  .remark {
    padding: 35rpx 0rpx 35rpx 50rpx;
  }
}

//弹窗填写物流信息
.logisticsPopup {
  background-color: #ffffff;
  width: 100%;
  border-radius: 20rpx;

  .pd {
    padding: 15rpx 98rpx 68rpx;
  }

  input {
    height: 70rpx;
    line-height: 70rpx;
    border: 1rpx solid #cccccc;
    border-radius: 15rpx;
    padding-left: 8rpx;
    color: #999999;
  }

  .icon {
    margin-top: -65rpx;
  }

  .pl-pr {
    padding-left: 74rpx;
  }

  button {
    margin-top: 66rpx;
    background-color: #01331f;
    width: 345rpx;
  }
}

// 弹窗评价
.popup {
  background-color: #f5f5f5;
  width: 100%;
  border-radius: 18rpx 18rpx 0px 0px;
}

.u-flex-sb {
  display: flex;
  justify-content: space-between;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 18rpx 18rpx 0px 0px;

  .pic {
    width: 155rpx;
    height: 155rpx;
  }
}

textarea {
  width: 100%;
  height: 210rpx;
  opacity: 0.66;
  border: 1rpx solid #e6e6e6;
  border-radius: 8rpx;
  padding-left: 22rpx;
  padding-top: 14rpx;
  box-sizing: border-box;
}

.evaluate-submit {
  margin-top: 58rpx;
  padding-bottom: 25rpx;
}

.evaluate-submit button {
  background-color: #0b844a;
  color: #ffffff;
}

.voucher-box {
  border-top: 1rpx solid #e6e6e6;
  padding-bottom: 20rpx;
}

.imgList {
  width: 200rpx;
  height: 200rpx;
}

.imgList .img {
  width: 200rpx !important;
  height: 200rpx !important;
  border-radius: 10rpx;
}
</style>