zhywpt-sp/subpackage/orders/order-confirm-receipt.vue

<!-- 订单详情-确认收货 -->
<template>
  <view class="card-box">
    <view class="as-layout-horizontal as-gravity-center-start title">
      <image :src="`${$imgUrl}order/icon-star-green.png`" class="icon"></image>
      <text class="txt-title">{{ state.orderInfo.productName }}</text>
    </view>
    <view style="border-bottom: 1px solid #dcdcdc" />

    <!-- 订单信息 -->
    <view class="order-box">
      <view class="order-item" v-for="(item, index) in state.list" :key="index">
        <order-info-item
          :label="item.label"
          :value="item.value"
        ></order-info-item>
      </view>
    </view>
  </view>

  <view class="hint">请核对实收货物与上述货物编号是否一致！</view>
  <view class="btn">
    <submit-button
      title="确认收货"
      @submit="$util.confirm('是否确认收到货？', confirmReceipt, '收货确认')"
    ></submit-button>
  </view>
</template>

<script setup lang="ts">
import orderInfoItem from "./components/order-info-item";
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { request } from "@/utils/network/request.js";
import { msg, confirm, getOrderStatusName } from "@/utils/utils";
import { orderDetail, receiveOrder } from "@/utils/network/api";
import { getItem, StorageKeys } from "@/utils/storage";
import { stringToJson } from "@/utils/network/encryption";

const state = reactive({
  //订单信息
  orderInfo: {} as any,
  //显示订单信息
  list: [
    {
      label: "订单编号：",
      value: "",
    },
    {
      label: "订单车牌：",
      value: "",
    },
    {
      label: "订单状态：",
      value: "",
    },
    {
      label: "发货卡号：",
      value: "",
    },
    {
      label: "发货签号：",
      value: "",
    },
  ],
});

//确认收货
const confirmReceipt = (e) => {
  const options = {
    type: 2,
    data: {
      id: state.orderInfo.id,
      source: "WECHAT",
      opId: getItem(StorageKeys.OpenId),
    },
    method: "POST",
    showLoading: true,
  };
  request(receiveOrder, options).then((res) => {
    confirm(
      "您已完成订单收货",
      () => {
        uni.$emit("refreshOrder");
        uni.navigateBack();
      },
      "收货完成",
      false
    );
  });
};

//获取订单详情
const getOrderDetails = (id) => {
  const options = {
    type: 2,
    data: { id: id },
    method: "POST",
    showLoading: true,
  };
  request(orderDetail, options).then((res) => {
    state.orderInfo = stringToJson(res.bizContent);

    state.list[0].value = state.orderInfo.orderId;
    state.list[1].value = state.orderInfo.vehiclePlate;
    state.list[2].value = getOrderStatusName(state.orderInfo.orderStep);
    state.list[3].value = state.orderInfo.cardId ?state.orderInfo.cardId: "";
    state.list[4].value = state.orderInfo.obuId ?state.orderInfo.obuId: "";
  });
};

onLoad((options) => {
  getOrderDetails(options.id);
});
</script>

<style>
page {
  background-color: #eef7f7;
}
</style>
<style lang="scss" scoped>
.card-box {
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0px 0px 6rpx 2rpx rgba(223, 223, 223, 0.3);
  margin: 30rpx;
  padding: 20rpx 0;
  .title {
    padding: 0 20rpx 20rpx;
  }
  .icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 10rpx;
  }
  .txt-title {
    font-size: 30rpx;
    color: #333333;
  }
  .order-box {
    padding: 0px 30rpx 10rpx;
    .order-item {
      padding: 28rpx 0px 0px;
    }
  }
}

.hint {
  font-size: 28rpx;
  color: #ff8000;
  margin-top: 60rpx;
  text-align: center;
}

.btn {
  margin: 500rpx 40rpx 50rpx;
}
</style>