fix: 非会员模型选择跳转修改

Yi.Ai.Vue3/src/components/ProductPackage/index.vue

@@ -4,8 +4,10 @@ import { ElMessage } from 'element-plus';
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { createOrder, getOrderStatus } from '@/api';
+import LoginDialog from '@/components/LoginDialog/index.vue';
 import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
 import ProductPage from '@/pages/products/index.vue';
+import { useUserStore } from '@/stores';
 
 const emit = defineEmits(['close']);
 
@@ -24,6 +26,8 @@ const packagesData = {
     { id: 9, name: '联系站长', desc: '', price: 0, tag: '企业级需求', discount: '' },
   ],
 };
+const userStore = useUserStore();
+const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
 
 const visible = ref(true);
 const activeTab = ref('member');
@@ -123,6 +127,10 @@ function selectPackage(pkg: any) {
   selectPackageObject.value = pkg;
 }
 
+function handleClickLogin() {
+  userStore.openLoginDialog();
+}
+
 async function pay() {
   if (!selectedId.value) {
     ElMessage.warning('请选择一个套餐');
@@ -242,8 +250,13 @@ function onClose() {
 </script>
 
 <template>
-  <el-dialog v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
-    :show-close="false" destroy-on-close class="product-package-dialog" @close="onClose">
+  <!-- 登录弹框 -->
+  <LoginDialog v-model:visible="isLoginDialogVisible" />
+
+  <el-dialog
+    v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
+    :show-close="false" destroy-on-close class="product-package-dialog" @close="onClose"
+  >
     <!-- 详情页 -->
     <div v-if="showDetails" class="details-view">
       <!-- 顶部标题和返回按钮 -->
@@ -302,10 +315,12 @@ function onClose() {
 
       <!-- Tab 切换 -->
       <div class="flex border-b mb-6 overflow-x-auto">
-        <div v-for="tab in tabs" :key="tab.key"
+        <div
+          v-for="tab in tabs" :key="tab.key"
           class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap" :class="activeTab === tab.key
             ? 'border-orange-500 text-orange-500 font-semibold'
-            : 'border-transparent text-gray-500 hover:text-orange-500'" @click="activeTab = tab.key">
+            : 'border-transparent text-gray-500 hover:text-orange-500'" @click="activeTab = tab.key"
+        >
           {{ tab.label }}
         </div>
       </div>
@@ -314,8 +329,10 @@ function onClose() {
       <div v-if="isMobile" class="mobile-layout">
         <!-- 套餐卡片列表 -->
         <div class="package-list">
-          <div v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
-            :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)">
+          <div
+            v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
+            :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
+          >
             <!-- 标签 -->
             <div v-if="pkg.discount" class="discount-tag">
               {{ pkg.discount }}
@@ -346,12 +363,15 @@ function onClose() {
             </div>
           </div>
         </div>
-          <div style="display: flex;justify-content: space-between;margin-top: 15px;">
-            <div>
-              <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
-              <p style="margin-top: 10px;">客服微信号：chengzilaoge520 或扫描右侧二维码</p>
-            </div>
-            <div> <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
+        <div style="display: flex;justify-content: space-between;margin-top: 15px;">
+          <div>
+            <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
+            <p style="margin-top: 10px;">
+              客服微信号：chengzilaoge520 或扫描右侧二维码
+            </p>
+          </div>
+          <div>
+            <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
           </div>
         </div>
         <!-- 权益预览 -->
@@ -389,13 +409,14 @@ function onClose() {
             <el-button text type="primary" class="view-details-btn" @click="toggleDetails">
               了解更多
             </el-button>
-            <el-button type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
-              @click="pay">
+            <el-button
+              type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
+              @click="pay"
+            >
               立即支付
             </el-button>
           </div>
 
-
           <div class="note-text">
             可叠加购买次数，过期时间以最后订单为准。<br>
             最终解释权归YiXinAI所有。
@@ -409,8 +430,10 @@ function onClose() {
         <div class="w-[60%] flex flex-col justify-between">
           <!-- 套餐卡片列表 -->
           <div class="flex flex-wrap gap-4">
-            <div v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
-              :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)">
+            <div
+              v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
+              :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
+            >
               <!-- 标签 -->
               <div v-if="pkg.discount" class="discount-tag">
                 {{ pkg.discount }}
@@ -444,62 +467,67 @@ function onClose() {
           <div style="display: flex;justify-content: space-between;margin-top: 15px;">
             <div>
               <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
-              <p style="margin-top: 10px;">客服微信号：chengzilaoge520 或扫描右侧二维码</p>
-            </div>
-            <div> <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
-          </div>
-        </div>
-        <!-- 支付按钮 -->
-        <div class="payment-section">
-          <div v-if="false" class="agreement-text">
-            登录和注册都代表同意YiXinAI的会员协议
-          </div>
-          <div class="payment-action">
-            <div class="actual-payment">
-              <span>实际支付：</span>
-              <span class="price">¥{{ selectedPrice || 0 }}</span>
+              <p style="margin-top: 10px;">
+                客服微信号：chengzilaoge520 或扫描右侧二维码
+              </p>
             </div>
             <div>
-              <el-button class="pay-button" text type="primary" @click="toggleDetails">
-                了解更多
-              </el-button>
-              <el-button type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
-                class="pay-button" @click="pay">
-                立即支付
-              </el-button>
+              <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
             </div>
           </div>
+          <!-- 支付按钮 -->
+          <div class="payment-section">
+            <div v-if="false" class="agreement-text">
+              登录和注册都代表同意YiXinAI的会员协议
+            </div>
+            <div class="payment-action">
+              <div class="actual-payment">
+                <span>实际支付：</span>
+                <span class="price">¥{{ selectedPrice || 0 }}</span>
+              </div>
+              <div>
+                <el-button class="pay-button" text type="primary" @click="toggleDetails">
+                  了解更多
+                </el-button>
+                <el-button
+                  type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
+                  class="pay-button" @click="pay"
+                >
+                  立即支付
+                </el-button>
+              </div>
+            </div>
 
-          <div class="note-text">
-            可叠加购买次数，过期时间以最后订单为准。<br>
-            最终解释权归YiXinAI所有。
+            <div class="note-text">
+              可叠加购买次数，过期时间以最后订单为准。<br>
+              最终解释权归YiXinAI所有。
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 右栏 套餐权益 + 详情 -->
-      <div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
-        <div>
-          <div class="section-title">
-            会员权益
-          </div>
-          <ul class="benefits-list ">
-            <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
-              <span class="dot">
-                <el-icon>
-                  <CircleCheck />
-                </el-icon>
-              </span>
-              <span>
-                <span class="benefit-name">{{ b.name }}</span>
-                <span v-if="b.value">：{{ b.value }}</span>
-              </span>
-            </li>
-          </ul>
+        <!-- 右栏 套餐权益 + 详情 -->
+        <div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
+          <div>
+            <div class="section-title">
+              会员权益
+            </div>
+            <ul class="benefits-list ">
+              <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
+                <span class="dot">
+                  <el-icon>
+                    <CircleCheck />
+                  </el-icon>
+                </span>
+                <span>
+                  <span class="benefit-name">{{ b.name }}</span>
+                  <span v-if="b.value">：{{ b.value }}</span>
+                </span>
+              </li>
+            </ul>
 
-          <!-- 额外描述 -->
-          <div v-if="activeTab === 'member'" class="extra-description ">
-            <SupportModelList />
+            <!-- 额外描述 -->
+            <div v-if="activeTab === 'member'" class="extra-description ">
+              <SupportModelList />
 
             <!--              <div class="description-card"> -->
             <!--                <div class="title"> -->
@@ -524,18 +552,18 @@ function onClose() {
             <!--                  "AI+办公!"解锁300+工具箱会员权益 -->
             <!--                </div> -->
             <!--              </div> -->
+            </div>
           </div>
-        </div>
 
-        <!-- 查看详情 -->
-        <div class="view-details">
+          <!-- 查看详情 -->
+          <div class="view-details">
           <!--            <el-button text type="primary" @click="toggleDetails"> -->
           <!--              查看详情 -->
           <!--            </el-button> -->
+          </div>
         </div>
       </div>
     </div>
-    </div>
   </el-dialog>
 </template>