feat: 新增小程序支付测试页及路由配置

添加 weappPayBridge.vue 页面用于在小程序 WebView 中测试支付功能，该页面包含环境检测、订单参数输入及消息发送功能。同时，在路由配置中添加了对应的访问路径。

@@ -128,4 +128,12 @@ export default [
       title: '详情页',
     },
   },
+  {
+    path: '/weapp-pay-bridge',
+    name: 'WeappPayBridge',
+    component: () => import('@/views/weappPayBridge.vue'),
+    meta: {
+      title: '小程序支付测试',
+    },
+  },
 ];

+<template>
+  <div class="weapp-pay-bridge-page">
+    <div class="hero-card">
+      <div class="eyebrow">WebView 支付测试</div>
+      <h1 class="title">从 H5 跳转到小程序支付测试页</h1>
+      <p class="desc">
+        这个页面用于在小程序 WebView 中点击按钮后，直接跳到外层小程序的支付测试页，并自动尝试拉起微信支付弹框。
+      </p>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head">
+        <span class="panel-title">当前环境</span>
+        <span :class="['env-tag', isMiniProgramWebView ? 'env-ok' : 'env-warn']">
+          {{ isMiniProgramWebView ? '小程序 WebView 内' : '普通浏览器' }}
+        </span>
+      </div>
+      <p class="hint">只有在小程序 WebView 中，点击下方按钮才会真正调用外层小程序页面。</p>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head">
+        <span class="panel-title">支付参数</span>
+      </div>
+      <label class="field-label" for="orderId">测试订单 ID</label>
+      <input
+        id="orderId"
+        v-model.trim="orderId"
+        class="field-input"
+        type="text"
+        placeholder="请输入后端可生成支付参数的 order_id"
+      />
+      <p class="hint">建议使用未支付且可以正常返回支付参数的测试订单。</p>
+      <div class="path-box">
+        <div class="path-label">发给小程序 WebView 容器的消息</div>
+        <div class="path-value">{{ payMessagePreview }}</div>
+      </div>
+      <button class="primary-btn" @click="sendPayMessage">点击触发小程序支付测试</button>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head">
+        <span class="panel-title">最近结果</span>
+      </div>
+      <div class="result-text">{{ resultText }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { showToast } from 'vant';
+import wx from 'weixin-js-sdk';
+
+const orderId = ref('');
+const resultText = ref('等待开始测试');
+
+const isMiniProgramWebView = computed(() => {
+  return navigator.userAgent.includes('miniProgram');
+});
+
+const payMessagePreview = computed(() => {
+  return JSON.stringify({
+    type: 'pay_test',
+    order_id: orderId.value || '',
+    source: 'weapp-pay-bridge',
+  });
+});
+
+const ensureOrderId = () => {
+  if (orderId.value) return true;
+
+  showToast('请先输入订单 ID');
+  resultText.value = '未填写订单 ID，无法继续触发支付测试。';
+  return false;
+};
+
+const sendPayMessage = () => {
+  if (!ensureOrderId()) return;
+
+  if (!isMiniProgramWebView.value) {
+    resultText.value = '当前不是小程序 WebView 环境，postMessage 不会发给小程序。';
+    showToast('请在小程序 WebView 中打开此页');
+    return;
+  }
+
+  try {
+    wx.miniProgram.postMessage({
+      data: {
+        type: 'pay_test',
+        order_id: orderId.value,
+        source: 'weapp-pay-bridge',
+      },
+    });
+    resultText.value = '已发送支付请求消息给当前小程序 WebView 容器。';
+  } catch (error) {
+    const message = error?.message || '发送 postMessage 失败';
+    resultText.value = message;
+    showToast(message);
+  }
+};
+</script>
+
+<style scoped lang="less">
+.weapp-pay-bridge-page {
+  height: 100vh;
+  padding: 24px 18px 40px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background:
+    radial-gradient(circle at top left, rgba(84, 171, 174, 0.18), transparent 28%),
+    linear-gradient(180deg, #f7fbfb 0%, #eef4f6 100%);
+  color: #16323a;
+}
+
+.hero-card,
+.panel {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(22, 50, 58, 0.08);
+  border-radius: 22px;
+  box-shadow: 0 18px 42px rgba(22, 50, 58, 0.08);
+  padding: 22px 18px;
+  box-sizing: border-box;
+}
+
+.hero-card {
+  margin-bottom: 16px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #e0f2f1;
+  color: #0f766e;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+}
+
+.title {
+  margin: 14px 0 0;
+  font-size: 28px;
+  line-height: 1.25;
+}
+
+.desc,
+.hint,
+.result-text {
+  margin: 12px 0 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #4f6470;
+}
+
+.panel {
+  margin-bottom: 16px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #16323a;
+}
+
+.env-tag {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.env-ok {
+  color: #166534;
+  background: #dcfce7;
+}
+
+.env-warn {
+  color: #9a3412;
+  background: #ffedd5;
+}
+
+.field-label {
+  display: block;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #36505b;
+}
+
+.field-input {
+  width: 100%;
+  height: 46px;
+  padding: 0 14px;
+  border: 1px solid #cfd8dc;
+  border-radius: 14px;
+  box-sizing: border-box;
+  background: #f9fbfb;
+  font-size: 15px;
+  color: #16323a;
+}
+
+.path-box {
+  margin-top: 14px;
+  padding: 14px;
+  border-radius: 14px;
+  background: #f2f7f8;
+  border: 1px dashed #b6c8cf;
+}
+
+.path-label {
+  font-size: 12px;
+  color: #68808a;
+}
+
+.path-value {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-all;
+  color: #16323a;
+}
+
+.primary-btn,
+.ghost-btn {
+  width: 100%;
+  height: 46px;
+  border: none;
+  border-radius: 999px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.primary-btn {
+  margin-top: 16px;
+  color: #fff;
+  background: linear-gradient(135deg, #0f766e, #155e75);
+}
+
+.ghost-btn {
+  margin-top: 10px;
+  color: #155e75;
+  background: #e6f4f1;
+}
+</style>