fix: 充值成功与记录页面增加联系客服，apikey教程更改

2025-08-17 22:08:03 +08:00
parent 4e42e2202e
commit ec27ee58b4
6 changed files with 294 additions and 25 deletions
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
 import { CircleCheck } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { onMounted, ref } from 'vue';
@@ -239,14 +239,43 @@ onMounted(async () => {
  <!-- 使用说明 -->
  <div v-if="apiKey" class="usage-guide">
    <el-divider />
-    <h3>使用说明</h3>
-    <div class="guide-content">
+
+    <div class="max-w-4xl mx-auto p-4 space-y-4">
+      <!-- 标题链接 -->
+      <h1 class="text-2xl font-bold text-gray-800 hover:text-blue-600 transition-colors">
+        <a
+          href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
+          target="_blank"
+          class="flex items-center gap-2 group"
+          title="点击跳转玩法指南专栏"
+        >
+          【意心Ai】AI工具玩法指南
+          <span class="text-sm text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">
+            → 点击查看完整指南
+          </span>
+        </a>
+      </h1>
+
+      <!-- iframe 容器（关键修复部分） -->
+      <div class="relative w-full overflow-auto rounded-xl shadow-lg border border-gray-200 bg-gray-50">
+        <!-- 自适应缩放 iframe -->
+        <iframe
+          src="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
+          class="min-w-full h-[700px] scale-100 hover:scale-[0.98] transition-transform duration-300"
+          loading="lazy"
+          sandbox="allow-scripts allow-same-origin allow-popups"
+          @load="document.querySelector('.iframe-loading')?.remove()"
+        />
+      </div>
+    </div>
+
+    <div v-if="false" class="guide-content">
      <p><strong>API地址：</strong>https://ai.ccnetcore.com</p>
      <p><strong>密钥：</strong>上面申请的token</p>
      <p><strong>模型：</strong>聊天界面显示的模型名称</p>
    </div>

-    <div class="guide-images">
+    <div v-if="false" class="guide-images">
      <el-image
        style="max-width: 100%; margin: 10px 0;"
        src="/images/api_usage_instructions.png"
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { List, Refresh, Search } from '@element-plus/icons-vue';
+import { ChatLineRound, List, Refresh, Search } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import { computed, onMounted, ref } from 'vue';
 import { getRechargeLog } from '@/api/model/index.ts';
+import { isUserVip } from '@/utils/user.ts';

 interface RechargeLog {
  id: string;
@@ -15,11 +17,48 @@ interface RechargeLog {
 }

 const loading = ref(false);
+const innerVisibleContact = ref(false);
 const logData = ref<RechargeLog[]>([]);
 const searchText = ref('');
 const currentSort = ref({ prop: '', order: '' });
 const currentPage = ref(1);
 const pageSize = ref(10);
+const showWechatFullscreen = ref(false);
+const showWxGroupFullscreen = ref(false);
+
+const wxSrc = computed(
+  () => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
+);
+const wxGroupQD = computed(
+  () => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`,
+);
+
+// 复制微信号
+function copyWechatId() {
+  navigator.clipboard.writeText('chengzilaoge520').then(() => {
+    ElMessage({
+      message: '微信号已复制到剪贴板',
+      type: 'success',
+      duration: 2000,
+    });
+  });
+}
+
+// 显示微信二维码全屏
+function showWechatFullscreenImage() {
+  showWechatFullscreen.value = true;
+}
+
+// 显示微信群二维码全屏
+function showWxGroupFullscreenImage() {
+  showWxGroupFullscreen.value = true;
+}
+
+// 关闭全屏图片
+function closeFullscreenImage() {
+  showWechatFullscreen.value = false;
+  showWxGroupFullscreen.value = false;
+}

 // 模拟数据获取
 async function fetchRechargeLog() {
@@ -60,6 +99,11 @@ function refreshLog() {
  currentSort.value = { prop: '', order: '' };
 }

+// 联系售后弹窗
+function contactCustomerService() {
+  innerVisibleContact.value = !innerVisibleContact.value;
+}
+
 // 过滤和排序后的数据
 const filteredData = computed(() => {
  let data = [...logData.value];
@@ -90,18 +134,11 @@ const filteredData = computed(() => {
    });
  }

-  // 分页处理
-  // if (showPagination.value) {
-  //   const start = (currentPage.value - 1) * pageSize.value;
-  //   return data.slice(start, start + pageSize.value);
-  // }
-
  return data;
 });

 // 是否显示分页 暂时不需要分页功能
 const showPagination = computed(() => {
-  // return logData.value.length > 10;
  return false;
 });

@@ -111,6 +148,74 @@ onMounted(() => {
 </script>

 <template>
+  <el-dialog
+    v-model="innerVisibleContact"
+    width="500"
+    title="售后支持"
+    append-to-body
+  >
+    <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
+        class="cursor-pointer"
+        title="点击复制"
+        @click="copyWechatId"
+      >
+        <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>
+    <div class="flex justify-center mb-4">
+      <div class="px-4">
+        <h4>站长微信(备注“AI”以便通过)</h4>
+
+        <img
+          :src="wxSrc"
+          class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+          alt="微信二维码"
+          @click="showWechatFullscreenImage"
+        >
+      </div>
+      <div class="px-4">
+        <h4>微信交流群</h4>
+        <img
+          :src="wxGroupQD"
+          class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+          alt="微信二维码"
+          @click="showWxGroupFullscreenImage"
+        >
+      </div>
+    </div>
+
+    <!-- 全屏放大二维码 -->
+    <div
+      v-if="showWechatFullscreen"
+      class="fullscreen-image-overlay"
+      @click="closeFullscreenImage"
+    >
+      <img
+        :src="wxSrc"
+        class="fullscreen-image"
+      >
+    </div>
+    <div
+      v-if="showWxGroupFullscreen"
+      class="fullscreen-image-overlay"
+      @click="closeFullscreenImage"
+    >
+      <img
+        :src="wxGroupQD"
+        class="fullscreen-image"
+      >
+    </div>
+  </el-dialog>
+
  <div class="recharge-log-container">
    <div class="log-header">
      <h2 class="log-title">
@@ -118,6 +223,13 @@ onMounted(() => {
        充值记录
      </h2>
      <div class="header-actions">
+        <el-tooltip v-if="isUserVip()" content="联系售后" placement="top">
+          <el-button circle :loading="loading" @click="contactCustomerService">
+            <el-icon color="#07c160">
+              <ChatLineRound />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
        <el-tooltip content="刷新数据" placement="top">
          <el-button circle :loading="loading" @click="refreshLog">
            <el-icon><Refresh /></el-icon>
@@ -218,6 +330,25 @@ onMounted(() => {
 </template>

 <style scoped>
+/* 新增全屏图片样式 */
+.fullscreen-image-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fullscreen-image {
+  max-width: 90%;
+  max-height: 90%;
+  border: 8px solid white;
+  border-radius: 16px;
+  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
+}
+
 .recharge-log-container {
  padding: 20px;
  background: #fff;
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
@@ -177,14 +177,6 @@ function onProductPackage() {
      class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
      @click="onProductPackage"
    >
-      <!--      <svg -->
-      <!--        xmlns="http://www.w3.org/2000/svg" -->
-      <!--        class="icon-rocket w-5 h-5 animate-bounce" -->
-      <!--        viewBox="0 0 24 24" -->
-      <!--        fill="currentColor" -->
-      <!--      > -->
-      <!--        <path d="M12 2C10 5 8 8 8 11l-5 5c0 3 3 3 5 5s5-3 8-5l5-5c-3-2-6-4-8-9z" /> -->
-      <!--      </svg> -->
      <span>立即购买</span>
    </el-button>
    <!-- 用户信息区域 -->
@@ -344,6 +336,19 @@ function onProductPackage() {
  }
 }

+//移动端，屏幕小于756px
+@media screen and (max-width: 756px) {
+  .buy-btn {
+    background: linear-gradient(90deg, #FFD700, #FFC107);
+    color: #fff;
+    border: none;
+    border-radius: 9999px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    font-size: 12px;
+    max-width: 60px;
+  }
+}
+
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
--- a/Yi.Ai.Vue3/src/pages/payResult/index.vue
+++ b/Yi.Ai.Vue3/src/pages/payResult/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ElButton, ElDivider } from 'element-plus';
-import { onMounted, ref } from 'vue';
+import { ElButton, ElDivider, ElMessage } from 'element-plus';
+import { computed, onMounted, ref } from 'vue';

 import { useRouter } from 'vue-router';

@@ -16,6 +16,9 @@ import { useSessionStore } from '@/stores/modules/session.ts';
 const userStore = useUserStore();
 const router = useRouter();
 const sessionStore = useSessionStore();
+const innerVisibleContact = ref(false);
+const showWechatFullscreen = ref(false);
+const showWxGroupFullscreen = ref(false);

 interface PayResult {
  out_trade_no: string;
@@ -107,6 +110,45 @@ function handleThirdPartyLogin(type: any) {
 function toHome() {
  router.replace('/');
 }
+
+const wxSrc = computed(
+  () => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
+);
+const wxGroupQD = computed(
+  () => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`,
+);
+
+// 显示微信二维码全屏
+function showWechatFullscreenImage() {
+  showWechatFullscreen.value = true;
+}
+
+// 显示微信群二维码全屏
+function showWxGroupFullscreenImage() {
+  showWxGroupFullscreen.value = true;
+}
+
+// 关闭全屏图片
+function closeFullscreenImage() {
+  showWechatFullscreen.value = false;
+  showWxGroupFullscreen.value = false;
+}
+
+// 复制微信号
+function copyWechatId() {
+  navigator.clipboard.writeText('chengzilaoge520').then(() => {
+    ElMessage({
+      message: '微信号已复制到剪贴板',
+      type: 'success',
+      duration: 2000,
+    });
+  });
+}
+
+// 联系售后弹窗
+function contactCustomerService() {
+  innerVisibleContact.value = !innerVisibleContact.value;
+}
 </script>

 <template>
@@ -140,8 +182,12 @@ function toHome() {
      </div>

      <!-- 重新登录提示 -->
-      <div class="mb-4 text-gray-600">
-        开通 VIP 后，需要重新登录意社区生效
+      <!--      绿色背景 -->
+      <div class="mb-4 text-gray-600 ">
+        开通 VIP 后，需要重新登录意社区生效。<br>
+      </div>
+      <div v-if="false" class="order-info p-4 rounded-lg mb-4 bg-[#ffc406] mb-4 text-gray-600 ">
+        加入售后群获得更多专业支持！
      </div>

      <ElDivider content-position="center">
@@ -168,8 +214,64 @@ function toHome() {
          返回首页
        </ElButton>
      </div>
+
+      <ElButton
+        class="mt-6 w-full py-3 text-lg font-medium"
+        type="default"
+        size="large"
+        @click="contactCustomerService()"
+      >
+        联系客服获取售后支持
+      </ElButton>
    </div>
  </div>
+
+  <el-dialog
+    v-model="innerVisibleContact"
+    width="500"
+    title="售后支持"
+    append-to-body
+  >
+    <h3 class="text-lg font-bold mb-3">
+      请扫码加入微信交流群<br>
+      或添加站长微信加入售后群获取专属客服支持
+    </h3>
+    <div class="py-10 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
+        class="cursor-pointer"
+        title="点击复制"
+        @click="copyWechatId"
+      >
+        <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>
+
+    <div class="flex justify-center mb-4">
+      <div class="px-4">
+        <h4>站长微信(备注“AI”以便通过)</h4>
+        <img
+          :src="wxSrc"
+          class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+          alt="微信二维码"
+        >
+      </div>
+      <div class="px-4">
+        <h4>微信交流群</h4>
+        <img
+          :src="wxGroupQD"
+          class="w-50  py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+          alt="微信二维码"
+        >
+      </div>
+    </div>
+
+    <!-- 全屏放大二维码 -->
+  </el-dialog>
 </template>

 <style scoped lang="scss">
--- a/Yi.Ai.Vue3/src/utils/user.ts
+++ b/Yi.Ai.Vue3/src/utils/user.ts
@@ -4,7 +4,8 @@ import { useUserStore } from '@/stores/index.js';
 export function isUserVip(): boolean {
  const userStore = useUserStore();
  const userRoles = userStore.userInfo?.roles ?? [];
-  return userRoles.some((role: any) => role.roleCode === 'YiXinAi-Vip');
+  const isVip = userRoles.some((role: any) => role.roleCode === 'YiXinAi-Vip');
+  return isVip;
 }

 // 用户头像
--- a/Yi.Ai.Vue3/types/components.d.ts
+++ b/Yi.Ai.Vue3/types/components.d.ts
@@ -56,6 +56,7 @@ declare module 'vue' {
    UserManagement: typeof import('./../src/components/userPersonalCenter/components/UserManagement.vue')['default']
    VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
    WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
+    X: typeof import('./../src/components/userPersonalCenter/components/x.vue')['default']
  }
  export interface GlobalDirectives {
    vLoading: typeof import('element-plus/es')['ElLoadingDirective']