paa点击首页课程增加购买方法

src/modules/home/components/Course.vue

 <script lang="ts" setup>
+import ContactDialog from '../../shop/components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
 const { mobile } = useDevice()
 const router = useRouter()
+const buyDialogVisible = ref(false)
+
 const courseList: Array<{
   tit: string
   desc: string
@@ -39,6 +42,9 @@ const courseIndex = $ref(0)
 const handleDetail = (id: any) => {
   router.push(`/shop/detail/${id}`)
 }
+const handleBuy = () => {
+  buyDialogVisible.value = true
+}
 </script>
 
 <template>
@@ -188,7 +194,7 @@ const handleDetail = (id: any) => {
         />
         <div class="btn-box">
           <div class="btn1" @click="handleDetail('1')">查看详情</div>
-          <div class="btn2">立即购买</div>
+          <div class="btn2" @click="handleBuy">立即购买</div>
         </div>
         <h1 class="mt7">PAAP(II)</h1>
         <h3>
@@ -200,7 +206,7 @@ const handleDetail = (id: any) => {
         />
         <div class="btn-box">
           <div class="btn1" @click="handleDetail('2')">查看详情</div>
-          <div class="btn2">立即购买</div>
+          <div class="btn2" @click="handleBuy">立即购买</div>
         </div>
       </template>
       <template v-if="courseIndex === 1">
@@ -214,7 +220,7 @@ const handleDetail = (id: any) => {
         />
         <div class="btn-box">
           <div class="btn1" @click="handleDetail('3')">查看详情</div>
-          <div class="btn2">立即购买</div>
+          <div class="btn2" @click="handleBuy">立即购买</div>
         </div>
       </template>
     </div>
@@ -230,6 +236,7 @@ const handleDetail = (id: any) => {
         持证人可通过线上学习、线下活动、在职学习、公开发表论文或出版著作以及担任专业组织委员等多种形式获得学分。期间由紫荆教育金融保险学院提供全方位教育科技平台支持和全流程专属导师制辅导。
       </div>
     </div>
+    <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
   </div>
 </template>