uniapp-h5/src/pages/ycysp/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">
      <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.order_amount
                }}<text>元</text></view
              >
            </view>
            <view class="flex num">
              <view>充值账号：</view>
              <view>{{ maskPhoneNumber(orderDetail.account) }}</view>
            </view>
            <view class="flex flex-justify-between num">
              <view>数量</view>
              <view>x1</view>
            </view>
          </view>
        </view>
      </view>
      <view class="line"></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.status)
          "
          >支付时间：{{ orderDetail.exchange_time }}</view
        >
        <view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
        <view class="info-item" style="margin-bottom: 24rpx"
          >订单金额：{{ orderDetail.order_amount }}</view
        >
        <!-- <view class="info-item" style="margin-bottom: 24rpx;">优惠金额：{{ orderDetail.order_amount}}</view> -->
        <view
          class="flex flex-justify-between info-item"
          style="margin-bottom: 24rpx"
          v-if="[3, 4, 8].includes(orderDetail.status)"
        >
          <view>充值状态：</view>
          <view :style="{ color: stateColor[orderDetail.status] || '' }">{{
            stateConfig[orderDetail.status]
          }}</view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <view class="btns">
      <view
        class="btn pwd"
        @click="pay(orderDetail)"
        v-if="[1].includes(orderDetail.status)"
        >立即付款</view
      >
      <view
        class="btn pwd"
        v-if="[4].includes(orderDetail.status)"
        @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 { getOrderList, refundOrder } from "@/api/ycysp";
import { getQueryString } from "@/utils/utils";
import { stateConfig, stateColor } from "./config";
import usePay from "./hooks/usePay";
const id = ref("");
const orderNo = ref("");
const orderDetail = reactive({});

// 用onshow 解决h5页面被缓存的问题
onShow(() => {
  const url = window.location.href;
  console.log("url-->", url);
  const order_id = getQueryString("order_id");
  const order_no = getQueryString("order_no");
  const isPayBack = getQueryString("isPayBack");
  console.log(order_id, order_no);
  if (!order_id && !order_no) return;
  id.value = order_id;
  orderNo.value = order_no;
  getDetail();
});

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

const viewPwd = (detailData) => {
  const { voucher_link } = detailData;
  if (voucher_link) {
    console.log(`跳转外部链接-->${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: "退款成功",
      });
    })
    .catch((err) => {
      console.log(err);
    });
};

function maskPhoneNumber(phoneNumber) {
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}

function pay(orderData) {
  const { order_no, notify_url, price, brand, sign, plain_text } = orderData;
  const { payFunc } = usePay();
  payFunc({
    order_no,
    notify_url,
    TranAmt: price,
    MerName: brand,
    sign,
    plain_text,
  });
}

const getDetail = () => {
  const params = {
    id: unref(id),
    order_no: unref(orderNo),
  };
  getOrderList({ params }).then((res) => {
    const { total, list } = res;
    Object.assign(orderDetail, res.list[0]);
  });
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #fafafa;
}
.line {
  width: 662rpx;
  height: 1rpx;
  background-color: #e1e1f0;
  transform: scaleY(0.5);
}

.wrapper {
  width: 702rpx;
  // height: 542rpx;
  min-height: 442rpx;
  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;
        margin-bottom: 10rpx;
      }
    }
  }

  .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: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
    margin-right: 10rpx;
  }

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