applet/pages/order/onlineOrder/details.vue

<template>
  <view class="app-container">
    <view class="head u-flex-center" v-if="pageType == '1'">
      <image class="logo" v-if="info.image" :src="info.image" alt="" />
      <view class="name">{{ info.businessName }}</view>
    </view>
    <view class="line" v-if="pageType == '2'" style="height: 1rpx"></view>
    <view class="list">
      <view class="list-title u-flex-center">
        <view class="list-title-line"></view>
        <text class="list-title-text">订单信息</text>
      </view>
      <view class="list-item u-flex-center-sb" v-if="pageType == '2'">
        <text class="lable">订单状态：</text>
        <view class="value">
          <text v-if="info.orderStatus == 0" style="color: #ff0000"
            >待付款</text
          >
          <text v-else-if="info.orderStatus == 10">已付款</text>
          <text v-else-if="info.orderStatus == 70">退款中</text>
          <text v-else-if="info.orderStatus == 80">已退款</text>
          <text v-else-if="info.orderStatus == 100">已取消</text>
          <text v-else>--</text>
        </view>
      </view>
      <view class="list-item u-flex-center-sb" v-if="pageType != '2'">
        <text class="lable">金额：</text>
        <text class="num" v-if="info.payAmount != null"
          >￥{{ info.payAmount || 0 }}</text
        >
        <text class="value" v-else>--</text>
      </view>
      <view class="list-item u-flex-center-sb" v-if="pageType == '2'">
        <text class="lable">订单金额（元）：</text>
        <text class="num" v-if="info.orderAmount != null"
          >￥{{ info.orderAmount || 0 }}</text
        >
        <text class="value" v-else>--</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">用户手机号：</text>
        <text class="value">{{ info.userMobile || "--" }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">支付方式：</text>
        <view class="value">
          <text v-if="info.payType == 0">微信</text>
          <text v-else-if="info.payType == 1">支付宝</text>
          <text v-else-if="info.payType == 10">微信</text>
          <text v-else-if="info.payType == 11">支付宝</text>
          <text v-else>--</text>
        </view>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">下单时间：</text>
        <text class="value">{{ info.createTime || "--" }}</text>
      </view>
      <view class="list-item u-flex-center-sb" v-if="info.orderStatus == 0">
        <text class="lable">待付款：</text>
        <!-- <text class="value">26:12</text> -->
        <view class="value">
          <uv-count-down
            :time="handleTime(info.expireTime)"
            format="mm:ss"
          ></uv-count-down>
        </view>
      </view>
      <view class="list-item u-flex-center-sb" v-else>
        <text class="lable">付款时间：</text>
        <text class="value">{{ info.payTime || "--" }}</text>
      </view>
    </view>

    <view class="list" v-if="info.subsidyQueueVo">
      <view class="list-title u-flex-center">
        <view class="list-title-line"></view>
        <text class="list-title-text">补贴信息</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">最多补贴金额（元）：</text>
        <text class="value">{{
          info.subsidyQueueVo.shouldSubsidyAmount || "--"
        }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">已补贴金额（元）：</text>
        <text class="value">{{
          info.subsidyQueueVo.actualSubsidyAmount || "--"
        }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">已补贴积分：</text>
        <text class="value">{{
          info.subsidyQueueVo.subsidyPoints || "--"
        }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">排队时间 ：</text>
        <text class="value">{{ info.subsidyQueueVo.queueTime || "--" }}</text>
      </view>
    </view>

    <view
      class="list"
      v-if="
        (info.orderStatus == 70 || info.orderStatus == 80) &&
        info.onlineRefundOrderVo
      "
    >
      <view class="list-title u-flex-center">
        <view class="list-title-line"></view>
        <text class="list-title-text">退款信息</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">退款状态：</text>
        <text class="value" v-if="info.onlineRefundOrderVo.refundStatus == 0"
          >未退款</text
        >
        <text
          class="value"
          v-else-if="info.onlineRefundOrderVo.refundStatus == 5"
          >退款中</text
        >
        <text
          class="value"
          v-else-if="info.onlineRefundOrderVo.refundStatus == 10"
          >已退款</text
        >
      </view>
      <view class="list-item u-flex-center-sb" v-if="pageType == '2'">
        <text class="lable">退款申请时间：</text>
        <text class="value">{{
          info.onlineRefundOrderVo.refundApplyTime || "--"
        }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">应退金额：</text>
        <text class="value">{{ info.onlineRefundOrderVo.payAmount || 0 }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">退款金额（元）：</text>
        <text class="value">{{
          info.onlineRefundOrderVo.refundAmount || 0
        }}</text>
      </view>
      <view class="list-item u-flex-center-sb">
        <text class="lable">退款完成时间 ：</text>
        <text class="value">{{
          info.onlineRefundOrderVo.refundCompleteTime || "--"
        }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { onlineorderInfo_Api } from "@/api/order.js";
import { getBusinessInfoId_Api } from "@/api/shop.js";

const pageType = ref("1"); // 1：用户查看在线订单页面，2：商户查看在线订单页面

const info = ref({});

const getInfo = (id) => {
  uni.showLoading({
    title: "加载中...",
  });
  onlineorderInfo_Api(id)
    .then((res) => {
      uni.hideLoading();
      if (res.code == 200) {
        info.value = res.data || {};
        if (pageType.value == "1") {
          getBusinessInfoId_Api(res.data.businessId).then((res) => {
            if (res.code == 200) {
              info.value.image = res.data.image || {};
            }
          });
        }
      }
    })
    .catch((err) => {
      console.log(err);
      // uni.hideLoading();
    });
};

const handleTime = (time = "") => {
  if (!time) return 0;
  let endTime = new Date(time).getTime();
  let startTime = new Date().getTime();
  let num = endTime - startTime;
  return num > 0 ? num : 0;
};

onLoad((options) => {
  if (options.pageType) pageType.value = options.pageType;
  if (options.id) getInfo(options.id);
});
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  padding-bottom: 30rpx;
  box-sizing: border-box;
  background-color: #f7f7f7;
  .head {
    background-color: #ffffff;
    padding: 32rpx 54rpx;
    box-sizing: border-box;
    .logo {
      width: 90rpx;
      height: 90rpx;
      border-radius: 10rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
    .name {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: 700;
    }
  }
  .list {
    margin-top: 20rpx;
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 16rpx 30rpx 36rpx 30rpx;
    .list-title {
      .list-title-line {
        width: 8rpx;
        height: 32rpx;
        background: #eb5153;
        border-radius: 4rpx;
        margin-right: 15rpx;
      }
      .list-title-text {
        font-size: 30rpx;
        color: #1a1a1a;
        font-weight: 700;
      }
    }
    .list-item {
      font-size: 28rpx;
      padding-top: 20rpx;
      .value {
        color: #808080;
      }
      .num {
        color: #da4f4f;
      }
    }
  }
}
</style>