首页h5课程按钮已购买显示联系我们

src/modules/home/components/Course.vue

 <script lang="ts" setup>
 import ContactDialog from '../../shop/components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
+import { useShopStore } from '@/stores/shop'
+import { useUserStore } from '@/stores/user'
+const shopStore = useShopStore()
+const userStore = useUserStore()
 const { mobile } = useDevice()
 const router = useRouter()
 const buyDialogVisible = ref(false)
-
-const courseList: Array<{
-  tit: string
-  desc: string
-  img: string
-  id: string
-}> = [
+const courseList = ref([
   {
     id: '1',
     tit: 'PAAP(I)',
     desc: 'PAAP（Ⅰ）即通过权属资产全面预算的系统学习，具备完成资产分析所需要的系统源点知识的底层逻辑，精确盘点资产，建立资产分析的多维模型。',
-    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set1.png'
+    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set1.png',
+    imgH5: 'https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course1.png',
+    isBuy: false
   },
   {
     id: '2',
     tit: 'PAAP(II)',
     desc: 'PAAP（Ⅱ）是学员通过深入学习资产分析的模型，并能熟练地通过模型，结合不同维度客户资产情况，准确分析形成并出具资产分析报告。',
-    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set2.png'
-  }
-]
-const courseList1: Array<{
-  tit: string
-  desc: string
-  img: string
-  id: string
-}> = [
+    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set2.png',
+    imgH5: 'https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course2.png',
+    isBuy: false
+  },
   {
     id: '3',
     tit: '',
-    desc: '',
-    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set3.png'
-  }
-]
+    desc: '高级私人资产分析管理师（Senior Private Asset Analysis Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用私人资产分析的多维模型系统解读和规划，构建私人权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现私人资产全面增值。',
+    img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set3.png',
+    imgH5: 'https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course3.png',
+    isBuy: false
+  }
+])
+watchEffect(() => {
+  courseList.value = courseList.value.map((item: any) => {
+    if (userStore.courses.length > 0) {
+      shopStore.shopList.map((it: any) => {
+        if (item.id === it.id) {
+          item.isBuy = it.isBuy
+        }
+      })
+    }
+    return item
+  })
+})
 
 const courseIndex = $ref(0)
 const handleDetail = (id: any) => {
   router.push(`/shop/detail/${id}`)
 }
-const handleBuy = () => {
+const handleBuy = (item: any) => {
+  if (item.isBuy === true) {
     buyDialogVisible.value = true
+  } else {
+    router.push(`/shop/pay/${item.id}`)
+  }
 }
 </script>
 
@@ -53,31 +66,19 @@ const handleBuy = () => {
       <div class="main_con" id="product">
         <div class="con_tit">
           <div class="tit_img">
-            <img
-              src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png"
-              class="img_box"
-            />
+            <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
           </div>
           <div class="tit_txt">课程介绍</div>
           <div class="tit_img">
-            <img
-              src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png"
-              class="img_box"
-            />
+            <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
           </div>
         </div>
         <el-tabs class="my-tabs">
           <el-tab-pane>
             <template #label>
               <div class="tab_con con1">
-                <img
-                  src="https://webapp-pub.ezijing.com/project_online/paa/tab1.png"
-                  class="con_img"
-                />
-                <img
-                  src="https://webapp-pub.ezijing.com/project_online/paa/tab1_active.png"
-                  class="con_img_active"
-                />
+                <img src="https://webapp-pub.ezijing.com/project_online/paa/tab1.png" class="con_img" />
+                <img src="https://webapp-pub.ezijing.com/project_online/paa/tab1_active.png" class="con_img_active" />
               </div>
               <div class="h"></div>
             </template>
@@ -87,11 +88,7 @@ const handleBuy = () => {
                 Planner，简称PAAP）认证系列，目前包括资产分析规划师（一级）/PAAP（Ⅰ）和资产分析规划师（二级）/PAAP（Ⅱ）。
               </div>
               <div class="con_list con_list1">
-                <div
-                  class="list_item"
-                  v-for="(item, index) in courseList"
-                  :key="index"
-                >
+                <div class="list_item" v-for="(item, index) in courseList.slice(0, 2)" :key="index">
                   <ul>
                     <li>
                       <p>{{ item.tit }}</p>
@@ -99,9 +96,7 @@ const handleBuy = () => {
                   </ul>
                   <div class="item_desc">{{ item.desc }}</div>
                   <img :src="item.img" class="item_img item_img1" />
-                  <div class="item_btn" @click="handleDetail(item.id)">
-                    查看详情
-                  </div>
+                  <div class="item_btn" @click="handleDetail(item.id)">查看详情</div>
                 </div>
               </div>
             </div>
@@ -109,34 +104,17 @@ const handleBuy = () => {
           <el-tab-pane>
             <template #label>
               <div class="tab_con con2">
-                <img
-                  src="https://webapp-pub.ezijing.com/project_online/paa/tab2.png"
-                  class="con_img"
-                />
-                <img
-                  src="https://webapp-pub.ezijing.com/project_online/paa/tab2_active.png"
-                  class="con_img_active"
-                />
+                <img src="https://webapp-pub.ezijing.com/project_online/paa/tab2.png" class="con_img" />
+                <img src="https://webapp-pub.ezijing.com/project_online/paa/tab2_active.png" class="con_img_active" />
               </div>
               <div class="h"></div>
             </template>
-            <div class="con_content">
-              <div class="content_desc">
-                高级资产分析管理师（Senior Private Asset Analysis
-                Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用资产分析的多维模型系统解读和规划，构建权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现资产全面增值。
-              </div>
+            <div class="con_content" v-for="(item, index) in courseList.slice(-1)" :key="index">
+              <div class="content_desc">{{ item.desc }}</div>
               <div class="con_list con_list2">
-                <div
-                  class="list_item"
-                  v-for="(item, index) in courseList1"
-                  :key="index"
-                  @click="handleDetail(item.id)"
-                >
-                  <div class="item_desc">{{ item.desc }}</div>
+                <div class="list_item" @click="handleDetail(item.id)">
                   <img :src="item.img" class="item_img" />
-                  <div class="item_btn" @click="handleDetail(item.id)">
-                    查看详情
-                  </div>
+                  <div class="item_btn" @click="handleDetail(item.id)">查看详情</div>
                 </div>
               </div>
             </div>
@@ -165,16 +143,10 @@ const handleBuy = () => {
   <div class="h5-main" v-else>
     <h1>师资团队</h1>
     <div class="tab-btn">
-      <div
-        :class="courseIndex === 0 ? 'btn active' : 'btn'"
-        @click="courseIndex = 0"
-      >
+      <div :class="courseIndex === 0 ? 'btn active' : 'btn'" @click="courseIndex = 0">
         <div class="logo"></div>
       </div>
-      <div
-        :class="courseIndex === 1 ? 'btn active' : 'btn'"
-        @click="courseIndex = 1"
-      >
+      <div :class="courseIndex === 1 ? 'btn active' : 'btn'" @click="courseIndex = 1">
         <div class="logo"></div>
       </div>
     </div>
@@ -184,43 +156,33 @@ const handleBuy = () => {
           私人资产分析规划师（Private Assets Analysis
           Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。
         </h2>
-        <h1>PAAP(I)</h1>
+        <div v-for="(item, index) in courseList.slice(0, 2)" :key="index">
+          <h1>{{ item.tit }}</h1>
           <h3>
-          PAAP（Ⅰ）即通过私人权属资产全面预算的系统学习，具备完成私人资产分析所需要的系统源点知识的底层逻辑，精确盘点私人资产，建立私人资产分析的多维模型。
+            {{ item.desc }}
           </h3>
-        <img
-          src="https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course1.png"
-          class="img1"
-        />
+          <img :src="item.imgH5" class="img1" />
           <div class="btn-box">
-          <div class="btn1" @click="handleDetail('1')">查看详情</div>
-          <div class="btn2" @click="handleBuy">立即购买</div>
+            <div class="btn1" @click="handleDetail(item.id)">查看详情</div>
+            <div class="btn2" @click="handleBuy(item)">
+              {{ item.isBuy === true ? '联系我们' : '立即购买' }}
+            </div>
           </div>
-        <h1 class="mt7">PAAP(II)</h1>
-        <h3>
-          PAAP（Ⅱ）是学员通过深入学习资产分析的模型，并能熟练地通过模型，结合不同维度客户资产情况，准确分析形成并出具私人资产分析报告。
-        </h3>
-        <img
-          src="https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course2.png"
-          class="img1"
-        />
-        <div class="btn-box">
-          <div class="btn1" @click="handleDetail('2')">查看详情</div>
-          <div class="btn2" @click="handleBuy">立即购买</div>
         </div>
       </template>
       <template v-if="courseIndex === 1">
+        <div v-for="(item, index) in courseList.slice(-1)" :key="index">
           <h2>
-          高级私人资产分析管理师（Senior Private Asset Analysis
-          Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用私人资产分析的多维模型系统解读和规划，构建私人权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现私人资产全面增值。
+            {{ item.desc }}
           </h2>
-        <img
-          src="https://webapp-pub.ezijing.com/project_online/fi/h5/paa-course3.png"
-          class="img1"
-        />
+          <img :src="item.imgH5" class="img1" />
           <div class="btn-box">
-          <div class="btn1" @click="handleDetail('3')">查看详情</div>
-          <div class="btn2" @click="handleBuy">立即购买</div>
+            {{ item.isBuy }}
+            <div class="btn1" @click="handleDetail(item.id)">查看详情</div>
+            <div class="btn2" @click="handleBuy(item)">
+              {{ item.isBuy === true ? '联系我们' : '立即购买' }}
+            </div>
+          </div>
         </div>
       </template>
     </div>
@@ -375,8 +337,7 @@ const handleBuy = () => {
       .con_part {
         width: 480px;
         height: 175px;
-        background: url('https://webapp-pub.ezijing.com/project_online/paa/education_bg.png')
-          center no-repeat;
+        background: url('https://webapp-pub.ezijing.com/project_online/paa/education_bg.png') center no-repeat;
         font-size: 16px;
         font-weight: 400;
         line-height: 30px;

src/modules/pay/components/PayH5.vue

@@ -19,7 +19,6 @@ const start_time = getDateTime()
 const end_time = getDateTime(90)
 const isAgree = $ref(false)
 let isAgreeText = $ref(false)
-const dialogVisible = $ref(false)
 
 const { order, pay } = usePay()
 
@@ -32,7 +31,6 @@ onMounted(() => {
 watchEffect(() => {
   if (order.value?.order_status === '4') {
     // 支付成功
-    console.log('支付成功')
     emit('success', order.value)
   }
 })

src/modules/pay/components/PayPC.vue

@@ -23,7 +23,6 @@ const { order, payOrder, pay } = usePay()
 watchEffect(() => {
   if (order.value?.order_status === '4') {
     // 支付成功
-    console.log('支付成功')
     emit('success', order.value)
   }
 })
@@ -38,7 +37,6 @@ function handlePay() {
   pay(params)
 }
 const handleAgree = (val: any) => {
-  console.log(val)
   isAgree = val
   if (val === true) {
     isAgreeText = false

src/modules/shop/components/CourseFooter.vue

@@ -16,7 +16,6 @@ const props = defineProps({
 const buyDialogVisible = ref(false)
 
 const handleBuyCourse = () => {
-  console.log(props.payStatus, props.shopItem?.isBuy)
   if (user.isLogin) {
     if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
       // window.open('https://paa-learning.ezijing.com')

src/modules/shop/components/CourseListItem.vue

@@ -2,6 +2,7 @@
 import ContactDialog from '../components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
 import { useUserStore } from '@/stores/user'
+
 const { mobile } = useDevice()
 const user = useUserStore()
 

src/modules/shop/components/TeacherCard.vue

@@ -15,37 +15,11 @@ defineProps({
 const swiper1 = ref(null)
 
 function prev(swiper) {
-  console.log(swiper, '111')
   swiper?.slidePrev()
 }
 function next(swiper) {
   swiper?.slideNext()
 }
-const list = [
-  {
-    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
-    name: '张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟',
-    title_list: ['清华大学国家金融研究院副院长、副研究员']
-  },
-  {
-    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_02.png',
-    name: '高皓',
-    title_list: ['清华大学五道口金融学院全球家族企业研究中心主任']
-  },
-  {
-    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_03.png',
-    name: '肇越',
-    title_list: ['清华大学五道口金融学院硕士生导师首席经济学家']
-  },
-  {
-    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
-    name: '陈秉正',
-    title_list: [
-      '清华大学经济管理学院金融系教授',
-      '中国保险与风险管理研究中心主任'
-    ]
-  }
-]
 </script>
 
 <template>
@@ -61,19 +35,12 @@ const list = [
             :spaceBetween="20"
             :slidePreview="1"
             :modules="[Navigation, Grid]"
-            @swiper="(swiper) => (swiper1 = swiper)"
-          >
-            <SwiperSlide
-              v-for="(item, index) in lecturerList"
-              :key="index"
-              class="teacher-item"
+            @swiper="swiper => (swiper1 = swiper)"
           >
+            <SwiperSlide v-for="(item, index) in lecturerList" :key="index" class="teacher-item">
               <div class="item_top">
                 <img
-                  :src="
-                    item.avatar ||
-                    'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'
-                  "
+                  :src="item.avatar || 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'"
                   class="top_img"
                 />
                 <div class="top_name">{{ item.name }}</div>
@@ -98,17 +65,10 @@ const list = [
   <div class="teacher_list" v-else>
     <div class="con_tit">讲师介绍</div>
     <div class="con_teacher">
-      <div
-        v-for="(item, index) in lecturerList"
-        :key="index"
-        class="teacher-item"
-      >
+      <div v-for="(item, index) in lecturerList" :key="index" class="teacher-item">
         <div class="item_top">
           <img
-            :src="
-              item.avatar ||
-              'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'
-            "
+            :src="item.avatar || 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'"
             class="top_img"
           />
           <div class="top_name">{{ item.name }}</div>

src/modules/shop/views/Index.vue

@@ -5,6 +5,7 @@ import { useDevice } from '@/composables/useDevice'
 
 const { mobile } = useDevice()
 const shopStore = useShopStore()
+
 const handleTabClick = (tab: any) => {
   if (tab.index === '4') {
     window.open('https://prp.ezijing.com')