uniapp-h5/src/pages/ycnc/orderDetail.vue

<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "订单详情",
    navigationBarBackgroundColor: "#FFF",
  },
}
</route>

<template>
  <view class="w-full h-full flex flex-col flex-items-center page">
    <view class="wrapper" v-if="pageType === 1">
      <view class="pro-info">
        <view class="title">订单详情</view>
        <view class="content flex">
          <image class="pro-img" :src="orderDetail.main_image" />
          <view class="flex flex-1 flex-col">
            <view
              class="flex flex-justify-between name"
              style="margin-bottom: 12rpx"
            >
              <view class="text-over">{{ orderDetail.product_name }}</view>
              <view class="amount"
                ><text>￥</text>{{ orderDetail.price }}<text>元</text></view
              >
            </view>
            <view class="flex flex-justify-between num">
              <view>数量</view>
              <view>x1</view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-info">
        <view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
        <view
          class="info-item"
          v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)"
          >支付时间：{{ orderDetail.exchange_time }}</view
        >
        <view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
        <view class="info-item" style="margin-bottom: 24rpx"
          >订单金额：{{ orderDetail.price }}</view
        >
      </view>
    </view>
    <view class="btns" v-if="pageType === 1">
      <view
        class="btn pwd"
        @click="viewPwd(orderDetail)"
        v-if="[3].includes(orderDetail.state) && orderDetail.voucher_link"
        >查看卡券</view
      >
      <view
        class="btn pwd"
        @click="pay(orderDetail)"
        v-if="[1].includes(orderDetail.state)"
        >立即付款</view
      >
      <view
        class="btn pwd"
        v-if="[4].includes(orderDetail.state)"
        @click="goRefund"
        >申请退款</view
      >
      <view class="btn back" @click="backIndex">返回首页</view>
    </view>
  </view>
</template>

<script setup>
import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { onMounted, reactive, ref, unref } from "vue";
import {
  queryOrderDetail,
  refundOrder,
  queryOrderState,
  login,
} from "../../api/ycnc";
import { getQueryString } from "../../utils/utils";

const id = ref("");
const orderNo = ref("");
const orderDetail = reactive({});
const pageType = ref(0);
let timer = undefined;

// 用onshow 解决h5页面被缓存的问题
onShow(async () => {
  const token = getQueryString("token") || uni.getStorageSync("token");
  uni.setStorageSync("token", token);
  const order_id = getQueryString("order_id");
  const order_no = getQueryString("order_no");
  const isPayBack = getQueryString("isPayBack");
  if (!order_id && !order_no) return;
  id.value = order_id;
  orderNo.value = order_no;
  if (isPayBack) {
    queryEvent();
  } else {
    getDetail();
  }
});

onHide(() => {
  timer && clearInterval(timer);
});

onUnload(() => {
  timer && clearInterval(timer);
});

const backIndex = () => {
  uni.navigateTo({
    url: `/pages/ycnc/index`,
  });
};

const timerEvent = () => {
  timer && clearInterval(timer);
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  timer = setInterval(() => {
    queryEvent();
  }, 2500);
};

const queryEvent = () => {
  uni.hideLoading();
  const params = {
    order_id: unref(id),
    order_no: unref(orderNo),
  };
  queryOrderState({ params }).then((res) => {
    const { state, voucher_link } = res;
    if ([3].includes(state)) {
      if (voucher_link) {
        timer && clearInterval(timer);
        window.location.replace(voucher_link);
      } else {
        timerEvent();
      }
    } else if ([1, 2].includes(state)) {
      timerEvent();
    } else {
      timer && clearInterval(timer);
      getDetail();
    }
  });
};

const viewPwd = (detailData) => {
  const { voucher_link } = detailData;
  if (voucher_link) {
    window.location.href = voucher_link;
  } else {
    console.error(`voucher_link无有效值`);
  }
};

const goRefund = () => {
  const { id } = orderDetail;
  if (!id) {
    uni.showToast({
      icon: "none",
      title: "无有效的订单id",
    });
    return;
  }
  const params = { order_id: id };
  refundOrder({ params })
    .then((res) => {
      uni.showToast({
        icon: "success",
        title: "退款成功",
      });
      getDetail();
    })
    .catch((err) => {
      console.log(err);
    });
};

async function pay(orderData) {
  console.log(orderData);
  const { order_no, notify_url, price, brand, sign, plain_text, id, pay_url } =
    orderData;
  window.location.replace(pay_url);
}

onMounted(() => {
  //   getDetail()
});

const getDetail = () => {
  const params = {
    order_id: unref(id),
    order_no: unref(orderNo),
  };
  pageType.value = 1;
  queryOrderDetail({ params }).then((res) => {
    Object.assign(orderDetail, res);
  });
};
</script>

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

.wrapper {
  width: 702rpx;
  height: 486rpx;
  background: #ffffff;
  border-radius: 24rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
  padding: 32rpx 24rpx;

  .pro-info {
    border-bottom: 1rpx solid #f0e1e1;

    .title {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 28rpx;
    }

    .content {
      margin-bottom: 24rpx;
      font-weight: 400;

      .pro-img {
        display: block;
        width: 90rpx;
        height: 90rpx;
        margin-right: 34rpx;
      }

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

      .name {
        font-size: 24rpx;
        color: #333333;
        font-weight: 700;
      }

      .amount {
        color: #333333;
        font-weight: 400;
        font-size: 24rpx;

        text:nth-child(1) {
          font-size: 20rpx;
        }

        text:nth-child(2) {
          font-size: 22rpx;
        }
      }

      .num {
        font-weight: 400;
        font-size: 24rpx;
        color: #9e9e9e;
      }
    }
  }

  .order-info {
    border-bottom: 1rpx solid #f0e1e1;

    .info-item {
      font-weight: 400;
      font-size: 22rpx;
      color: #6c6c6c;
      margin-top: 24rpx;
    }
  }
}

.btns {
  margin-top: 146rpx;
  display: flex;

  .btn {
    width: 312rpx;
    height: 76rpx;
    border-radius: 38rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pwd {
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    background: #ea0000;
    margin-right: 10rpx;
  }

  .back {
    font-weight: 400;
    font-size: 32rpx;
    color: #b9c8c7;
    border: 2rpx solid #b9c8c7;
  }
}
</style>