feat: 增加支付宝在线支付、套餐订购弹窗、会员权益、支持模型展示等

Yi.Ai.Vue3/src/pages/products/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { CircleCheck } from '@element-plus/icons-vue';
 import { ElMessageBox } from 'element-plus';
 import SupportModelProducts from '@/components/SupportModelProducts/indexl.vue';
 
@@ -193,46 +192,124 @@ function openContact() {
     </p>
 
     <div class="grid md:grid-cols-3 gap-6 flex justify-center">
-      <el-card
-        style="width: 400px;"
-        v-for="(plan, index) in pricing"
-        :key="index"
-        class="rounded-2xl shadow hover:shadow-lg transition-all" :class="[plan.isPopular ? 'border-2 border-blue-500' : '']"
-      >
-        <div class="flex flex-col items-center text-center">
-          <h2 class="text-2xl font-semibold mb-2">
-            {{ plan.name }}
-          </h2>
-          <p class="text-3xl font-bold text-blue-600 mb-2" style="color: #E8CB96">
-            <span>优惠后：</span>￥{{ plan.newPrice }}  <del style="color: #889F9F;font-size: 16px">￥{{ plan.price }}</del>
-          </p>
-          <p class="text-sm text-gray-500 mb-4">
-            {{ plan.period }}
-          </p>
-          <el-divider />
-          <ul class="text-left space-y-2 w-full min-h-200px">
-            <li v-for="(feature, i) in plan.features" :key="i" class="flex items-start gap-2">
-              <el-icon><CircleCheck /></el-icon>
-              <span>{{ feature }}</span>
-            </li>
-          </ul>
-          <el-button
-            class="mt-6 w-full"
-            type="primary"
-            size="large"
-            style="background: #D7BD8D;color: white;border: #191919"
-            @click="openContact"
+      <div class="text-center relative">
+        <h3 class="text-lg font-bold mb-3">
+          请扫码加入微信交流群<br>
+          获取专属客服支持
+        </h3>
+        <div class="mb-4 flex items-center justify-center space-x-2">
+          <!--          <span class="font-semibold">站长微信账号：</span> -->
+          <!--          <span id="wechat-id" class="text-blue-600 font-mono select-text">chengzilaoge520</span> -->
+          <span
+            v-if="false"
+            class="cursor-pointer" onclick="navigator.clipboard.writeText('chengzilaoge520').then(() => {  window.parent.ElMessage({
+              message: '微信号已复制到剪贴板',
+              type: 'success',
+              duration: 2000,
+            });})"
+            title="点击复制"
           >
-            立即订阅
-          </el-button>
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z" />
+            </svg>
+          </span>
         </div>
-      </el-card>
-    </div>
 
-    <el-divider class="my-16">
+        <div class="flex justify-center mb-4">
+          <div v-if="false">
+            <h4>
+              站长微信
+            </h4>
+            <img
+              :src="wxSrc"
+              class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+              onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
+              alt="微信二维码"
+            >
+          </div><div>
+            <h4>
+              微信交流群
+            </h4>
+            <img
+              :src="wxGroupQD"
+
+              class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+              onclick="document.getElementById('wx-group-qrcode-fullscreen').style.display = 'flex'"
+              alt="微信二维码"
+            >
+          </div>
+        </div>
+
+        <div v-if="false" class="text-sm text-gray-600">
+          <p class="mb-1">
+            请备注 <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">ai</span> 快速通过验证
+          </p>
+        </div>
+
+        <!-- 全屏放大二维码 -->
+        <div
+          id="wechat-qrcode-fullscreen"
+          style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
+          onclick="this.style.display='none'"
+        >
+          <img
+            :src="wxSrc"
+            style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
+          >
+        </div>
+        <div
+          id="wx-group-qrcode-fullscreen"
+          style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
+          onclick="this.style.display='none'"
+        >
+          <img
+            :src="wxGroupQD"
+
+            style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
+          >
+        </div>
+      </div>
+
+      <!--      <el-card -->
+      <!--        style="width: 400px;" -->
+      <!--        v-for="(plan, index) in pricing" -->
+      <!--        :key="index" -->
+      <!--        class="rounded-2xl shadow hover:shadow-lg transition-all" :class="[plan.isPopular ? 'border-2 border-blue-500' : '']" -->
+      <!--      > -->
+      <!--        <div class="flex flex-col items-center text-center"> -->
+      <!--          <h2 class="text-2xl font-semibold mb-2"> -->
+      <!--            {{ plan.name }} -->
+      <!--          </h2> -->
+      <!--          <p class="text-3xl font-bold text-blue-600 mb-2" style="color: #E8CB96"> -->
+      <!--            <span>优惠后：</span>￥{{ plan.newPrice }}  <del style="color: #889F9F;font-size: 16px">￥{{ plan.price }}</del> -->
+      <!--          </p> -->
+      <!--          <p class="text-sm text-gray-500 mb-4"> -->
+      <!--            {{ plan.period }} -->
+      <!--          </p> -->
+      <!--          <el-divider /> -->
+      <!--          <ul class="text-left space-y-2 w-full min-h-200px"> -->
+      <!--            <li v-for="(feature, i) in plan.features" :key="i" class="flex items-start gap-2"> -->
+      <!--              <el-icon><CircleCheck /></el-icon> -->
+      <!--              <span>{{ feature }}</span> -->
+      <!--            </li> -->
+      <!--          </ul> -->
+      <!--          <el-button -->
+      <!--            class="mt-6 w-full" -->
+      <!--            type="primary" -->
+      <!--            size="large" -->
+      <!--            style="background: #D7BD8D;color: white;border: #191919" -->
+      <!--            @click="openContact" -->
+      <!--          > -->
+      <!--            立即订阅 -->
+      <!--          </el-button> -->
+      <!--        </div> -->
+      <!--      </el-card> -->
+    </div>
+    <!--    <SupportModelList /> -->
+    <el-divider v-if="false" class="my-16">
       充值流程说明
     </el-divider>
-    <el-card class="max-w-2xl mx-auto shadow-md rounded-2xl">
+    <el-card v-if="false" class="max-w-2xl mx-auto shadow-md rounded-2xl">
       <h3 class="text-xl font-semibold mb-4">
         如何充值 VIP
       </h3>
@@ -270,7 +347,7 @@ function openContact() {
     <el-divider class="my-16">
       加入群聊
     </el-divider>
-    <el-collapse class="max-w-3xl mx-auto flex justify-center" accordion >
+    <el-collapse class="max-w-3xl mx-auto flex justify-center" accordion>
       <el-image
         style="width: 500px; height: auto;"
         :src="wxGroupQD"