wxapp_shuibei/pages/webview/WxPay.vue

<template>
  <view class="pay-container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-wrap flex-center">
      <uni-load-more type="loading" color="#f8c008"></uni-load-more>
      <text class="loading-text">正在初始化支付...</text>
    </view>

    <!-- 订单信息 & 支付区域 -->
    <view v-else-if="orderInfo" class="pay-content">
      <view class="order-card">
        <view class="order-item price-highlight">
          <text class="label">支付金额：</text>
          <view class="value price">
            <text class="currency">¥</text>
            <text class="amount-text">{{ orderInfo.amount }}</text>
            <text class="unit">元</text>
          </view>
        </view>

        <view class="order-item" v-if="orderInfo.description">
          <text class="label">订单描述：</text>
          <text class="value">{{ orderInfo.description }}</text>
        </view>

        <view class="order-item" v-if="orderInfo.orderNo">
          <text class="label">订单号：</text>
          <text class="value">{{ orderInfo.orderNo }}</text>
        </view>
      </view>

      <!-- 支付按钮 -->
      <view class="pay-btn-wrap flex-center" @click="handlePay">
        <button class="pay-btn" :disabled="paying">
          <text v-if="!paying" class="btn-text">立即支付</text>
          <text v-else class="btn-text">支付中...</text>
        </button>
      </view>
    </view>

    <!-- 异常提示 -->
    <view v-else class="error-wrap flex-center">
      <text class="error-text">{{ errorMsg }}</text>
      <button class="back-btn" @click="goBackToWebview">返回上一页</button>
    </view>

    <!-- 微信支付组件-->
    <WechatPayment ref="wechatPaymentRef" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/app";
import { getUserOpenId } from "@/api/user";
import { Calc } from "@/utils/util";
import { goldPrincipalCompleteOrder } from "@/api/payment";
import { recyclePreOrderSuccessAPI } from "@/api/functions";
import WechatPayment from "@/components/payment/WechatPayment.vue";

// 状态管理
const appStore = useAppStore();
const wechatPaymentRef = ref(null);

// 页面核心数据
const loading = ref(true);
const paying = ref(false);
const amount = ref(0);
const orderNo = ref(0);
const description = ref("");
const returnUrl = ref("");
const orderPrefix = ref("");
const orderInfo = ref(null);
const errorMsg = ref("");

onLoad(async (options) => {
  try {
    amount.value = Number(options.amount) || 0.01;
    description.value = decodeURIComponent(options.description || "");
    orderPrefix.value = options.orderPrefix || "H5";
    orderNo.value = options.orderNo || "";
    returnUrl.value = options.returnUrl || "";

    if (isNaN(amount.value) || amount.value <= 0) {
      throw new Error("支付金额异常（需大于0分）");
    }
    if (!description.value && !orderNo.value) {
      throw new Error("订单描述或订单号其中一项不能为空");
    }
    if (!returnUrl.value) {
      throw new Error("支付完成返回地址不能为空");
    }

    orderInfo.value = {
      amount: Calc.div(amount.value, 100).truncate().valueOf(),
      description: description.value,
      orderNo: orderNo.value,
    };
    loading.value = false;
  } catch (err) {
    loading.value = false;
    errorMsg.value = err.message || "页面参数异常";
    console.error("页面初始化失败：", err);
  }
});

const handlePay = async () => {
  if (paying.value) return;
  if (!appStore.isLogin) {
    uni.showToast({ title: "请先登录", icon: "none" });
    return;
  }

  const userOpenId = appStore.$userInfo?.openId;
  if (!userOpenId) {
    uni.showToast({ title: "用户信息异常，请重新登录", icon: "none" });
    return;
  }

  paying.value = true;
  try {
    wechatPaymentRef.value.createUniPay({
      amount: amount.value,
      description: description.value,
      openId: userOpenId,
      orderPrefix: orderPrefix.value,
      orderNo: orderNo.value,

      onUniPayCreate: async (payRes) => {
        console.log("支付订单创建成功：", payRes);
      },

      onUniPaySuccess: async (payStatusRes) => {
        console.log("支付成功：", payStatusRes);
        await processOrderBizChange(payStatusRes);
        paying.value = false;
        uni.showToast({
          title: "您已支付成功，将返回订单列表",
          icon: "success",
        });
        setTimeout(() => {
          goBackToWebview();
        }, 1300);
      },

      onUniPayCancel: () => {
        paying.value = false;
        uni.showToast({ title: "你已取消支付", icon: "none" });
      },

      onUniPayFail: (err) => {
        paying.value = false;
        const errMsg = err || "支付失败，请重试";
        uni.showToast({ title: errMsg, icon: "none" });
        console.error("支付失败：", err);
      },
    });
  } catch (err) {
    paying.value = false;
    uni.showToast({ title: "支付接口调用失败", icon: "none" });
    console.error("支付调用异常：", err);
  }
};

const processOrderBizChange = async (payStatusRes) => {
  try {
    switch (payStatusRes.orderType) {
      case "recyle":
        await recyclePreOrderSuccessAPI({
          orderNo: payStatusRes.outTradeNo,
          payType: "routine",
        });
        break;
      case "tl":
        await goldPrincipalCompleteOrder({
          orderNo: payStatusRes.outTradeNo,
        });
        break;
      case "svip":
        break;
    }
  } catch (error) {
    uni.showToast({ title: error || "业务订单状态更改失败", icon: "none" });
    console.error("业务订单状态更改失败：", error);
  }
};

const goBackToWebview = () => {
  if (!returnUrl.value) {
    uni.showToast({ title: "返回地址异常", icon: "none" });
    return;
  }

  let finalUrl = returnUrl.value;
  try {
    if (finalUrl.includes("%")) {
      finalUrl = decodeURIComponent(finalUrl);
    }
  } catch (e) {
    console.warn("URL解码失败，使用原始URL：", e);
  }

  uni.redirectTo({
    url: `/pages/webview/index?path=${returnUrl.value}`,
  });
};
</script>

<style scoped lang="scss">
$primary: #f8c008;
$primary-dark: #e6b007;
$primary-light: #fff5cc;
$primary-disabled: #fad966;

.pay-container {
  min-height: 100vh;
  background-color: #fafafa;
  padding: 30rpx;
}

// 加载状态
.loading-wrap {
  flex-direction: column;
  height: 60vh;
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

// 订单信息卡片
.pay-content {
  .order-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx 32rpx;
    margin-bottom: 80rpx;
    box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.04);
    border: 1px solid $primary-light;

    .order-item {
      display: flex;
      align-items: center;
      margin-bottom: 28rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 28rpx;
        color: #777;
        width: 160rpx;
        font-weight: 500;
      }

      .value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
        word-break: break-all;
      }
    }

    // 🔥 高亮金额区域
    .price-highlight {
      padding: 12rpx 0;
      margin: 12rpx 0 32rpx;

      .value.price {
        display: flex;
        align-items: baseline;
        gap: 6rpx;

        .currency {
          font-size: 32rpx;
          color: $primary;
          font-weight: 600;
        }

        // 核心金额数字（最大、最亮）
        .amount-text {
          font-size: 48rpx;
          font-weight: 700;
          color: $primary;
          letter-spacing: 1rpx;
        }

        .unit {
          font-size: 28rpx;
          color: $primary;
          font-weight: 500;
          margin-left: 4rpx;
        }
      }
    }
  }
}

// 支付按钮
.pay-btn-wrap {
  .pay-btn {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background-color: $primary;
    border: none;
    border-radius: 48rpx;
    box-shadow: 0 8rpx 24rpx rgba($primary, 0.25);
    transition: all 0.2s ease;

    .btn-text {
      font-size: 34rpx;
      color: #fff;
      font-weight: 600;
      letter-spacing: 2rpx;
    }

    &:not(:disabled):active {
      background-color: $primary-dark;
      box-shadow: 0 4rpx 12rpx rgba($primary, 0.2);
      transform: translateY(2rpx);
    }

    &:disabled {
      background-color: $primary-disabled;
      box-shadow: none;
    }
  }
}

// 异常提示
.error-wrap {
  flex-direction: column;
  height: 60vh;
  .error-text {
    font-size: 30rpx;
    color: #e64340;
    margin-bottom: 40rpx;
    text-align: center;
    padding: 0 30rpx;
    line-height: 44rpx;
  }
  .back-btn {
    width: 280rpx;
    height: 76rpx;
    line-height: 76rpx;
    background-color: #fff;
    border: 1px solid $primary;
    border-radius: 38rpx;
    font-size: 28rpx;
    color: $primary;
    transition: all 0.2s ease;

    &:active {
      background-color: $primary-light;
    }
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>