updates

src/components/layout/Header.vue

@@ -3,6 +3,8 @@ import { useWindowScroll } from '@vueuse/core'
 import { useUserStore } from '@/stores/user'
 import { useRoute } from 'vue-router'
 import AppNav from './Nav.vue'
+import { ElMessage } from 'element-plus'
+// const { courses } = useUserStore()
 
 interface Props {
   fixed?: boolean
@@ -42,6 +44,13 @@ const { y } = useWindowScroll()
 const isScrolled = computed(() => {
   return y.value > 0
 })
+const handleStudy = () => {
+  if (JSON.parse(localStorage.getItem('courses') as string).length > 0) {
+    window.open('https://paa-learning.ezijing.com')
+  } else {
+    ElMessage.warning('请先购买课程，才能开始学习')
+  }
+}
 </script>
 
 <template>
@@ -58,6 +67,7 @@ const isScrolled = computed(() => {
       <div class="app-header-right">
         <AppNav></AppNav>
         <div class="menu" @click="toggleMenu"></div>
+        <div class="study" @click="handleStudy" v-if="user.isLogin">立即学习</div>
       </div>
       <div class="app-header-right">
         <template v-if="user.isLogin">
@@ -122,6 +132,11 @@ const isScrolled = computed(() => {
   }
 }
 .app-header-right {
+  .study {
+    font-size: 18px;
+    line-height: 50px;
+    margin-right: 30px;
+  }
   display: flex;
 
   .app-header-logout {

src/components/layout/Nav.vue

@@ -28,7 +28,7 @@ const navList = [
     justify-content: space-between;
   }
   .app-menu > li {
-    margin-right: 80px;
+    margin-right: 60px;
     position: relative;
     > .cell {
       font-size: 18px;

src/modules/pay/components/Confirm.vue

@@ -9,13 +9,22 @@ defineProps({
 })
 const payMode = ref(1)
 const isAgree = ref(false)
-const isAgreeChecked = ref(false)
+function getDateTime(dayNum: any) {
+  const dateDay = new Date()
+  dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
+  console.log(dateDay)
+  const y = dateDay.getFullYear()
+  const m = dateDay.getMonth() + 1 < 10 ? '0' + (dateDay.getMonth() + 1) : dateDay.getMonth() + 1 //获取当前月份的日期，不足10补0
+  const d = dateDay.getDate() < 10 ? '0' + dateDay.getDate() : dateDay.getDate() //获取当前几号，不足10补0
+  return y + '-' + m + '-' + d
+}
+const start_time = getDateTime(0)
+const end_time = getDateTime(90)
 const emit = defineEmits<{
   (e: 'success', params: object): void
 }>()
 const handlePay = () => {
   if (isAgree.value === false) {
-    isAgreeChecked.value = true
     ElMessage.warning('请先勾选紫荆金保服务协议')
   } else {
     const params = {
@@ -39,7 +48,7 @@ const handlePay = () => {
           />
           <div class="course_info">
             <div class="info_tit">{{ shopItem?.title }}</div>
-            <div class="info_range">有效期：{{ shopItem?.start_time }} 至 {{ shopItem?.end_time }}</div>
+            <div class="info_range">有效期：{{ start_time }} 至 {{ end_time }}</div>
             <div class="info_price">
               <div class="price_icon">¥</div>
               <div class="price_num">{{ shopItem?.price }}</div>
@@ -68,9 +77,7 @@ const handlePay = () => {
               ><span style="color: #666666; font-size: 16px; font-weight: 400">同意</span
               ><a style="color: #e3a232; font-size: 16px; font-weight: 400">紫荆金保服务协议</a></el-checkbox
             >
-            <div class="left_desc" :class="isAgreeChecked === true ? 'left_desc_active' : ''">
-              请先勾选紫荆金保服务协议
-            </div>
+            <div class="left_desc" :class="isAgree === false ? 'left_desc_active' : ''">请先勾选紫荆金保服务协议</div>
           </div>
           <div class="footer_right">
             <div class="right_top">

src/modules/shop/components/CourseIntroduceCard.vue

 <script lang="ts" setup>
+const router = useRouter()
+
 defineProps({
   shopItem: {
     type: Object
@@ -9,6 +11,10 @@ const defaultProps = {
   children: 'children',
   label: 'label'
 }
+
+const handleDetail = (item: any) => {
+  router.push(`/shop/detail/${item.id}`)
+}
 </script>
 
 <template>
@@ -30,7 +36,12 @@ const defaultProps = {
         <div class="info_tit">课程目录</div>
         <div class="info_line"></div>
         <div class="info_con1" v-if="shopItem?.type === '课程包'">
-          <div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index">
+          <div
+            class="course_list"
+            v-for="(item, index) in shopItem?.course_list"
+            :key="index"
+            @click="handleDetail(item)"
+          >
             <img
               src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
               alt=""
@@ -114,6 +125,7 @@ const defaultProps = {
         border-bottom: 1px solid #e8e8e8;
         padding: 20px 0;
         box-sizing: border-box;
+        cursor: pointer;
         img {
           width: 140px;
           height: 80px;

src/modules/shop/components/CourseListItem.vue

 <script setup lang="ts">
+import ContactDialog from '../components/ContactDialog.vue'
+
 const router = useRouter()
+const buyDialogVisible = ref(false)
 
 defineProps({
   courseItem: {
@@ -13,6 +16,17 @@ const handleDatail = (item: any) => {
     path: `/shop/detail/${item}`
   })
 }
+const handleBuy = (courseItem: any) => {
+  if (courseItem.type === '课程包') {
+    buyDialogVisible.value = true
+  } else {
+    if (courseItem?.isBuy === true) {
+      window.open('https://paa-learning.ezijing.com')
+    } else {
+      router.push(`/pay/${courseItem.id}`)
+    }
+  }
+}
 </script>
 
 <template>
@@ -43,11 +57,14 @@ const handleDatail = (item: any) => {
           </div>
           <div class="bottom_btn">
             <div class="btn_detail" @click="handleDatail(courseItem?.id)">查看详情</div>
-            <div class="btn_buy">立即购买</div>
+            <div class="btn_buy" @click="handleBuy(courseItem)">
+              {{ courseItem?.isBuy === true ? '立即学习' : '立即购买' }}
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
   </div>
 </template>
 

src/modules/shop/views/View.vue

@@ -28,7 +28,7 @@ const handleBuyCourse = () => {
   if (shopItem?.type === '课程包') {
     buyDialogVisible.value = true
   } else {
-    if (route.query.payStatus === '4') {
+    if (route.query.payStatus === '4' && shopItem?.isBuy === true) {
       window.open('https://paa-learning.ezijing.com')
     } else {
       router.push(`/pay/${shopItem?.id}`)
@@ -77,7 +77,7 @@ const handleShare = () => {
         <div class="left_tip tip2">课程回放</div>
       </div>
       <div class="buy_right" @click="handleBuyCourse">
-        {{ route.query.payStatus === '4' ? '立即学习' : '立即购买' }}
+        {{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
       </div>
     </div>
     <div class="detail_con">
@@ -106,7 +106,7 @@ const handleShare = () => {
       <div class="left_status" v-else>已购买</div>
 
       <div class="footer_btn" @click="handleBuyCourse">
-        {{ route.query.payStatus === '4' ? '立即学习' : '立即购买' }}
+        {{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
       </div>
     </div>
     <ShareDialog v-model:shareDialogVisible="shareDialogVisible" />

src/stores/shop.ts

 import { defineStore } from 'pinia'
-import { useUserStore } from './user'
-const { courses } = useUserStore()
+// import { useUserStore } from './user'
+// const { courses } = useUserStore()
 interface ShopFilter {
   label: string
   value: string
@@ -22,6 +22,8 @@ export const useShopStore = defineStore({
   getters: {
     shopList({ list }) {
       return list.map(item => {
+        // const { courses } = useUserStore()
+        const courses = JSON.parse(localStorage.getItem('courses') as string)
         item.isBuy = !!courses.find((course: any) => course.course_id === item.course_id)
         return item
       })

src/stores/user.ts

@@ -10,7 +10,7 @@ export const useUserStore = defineStore({
   id: 'user',
   state: (): State => ({
     user: null,
-    courses: []
+    courses: [] || JSON.parse(localStorage.getItem('courses') as string)
   }),
   getters: {
     isLogin: state => !!state.user,
@@ -28,6 +28,7 @@ export const useUserStore = defineStore({
       const res = await getUser()
       try {
         this.courses = await getBuyShop()
+        localStorage.setItem('courses', JSON.stringify(this.courses))
       } catch (error) {
         console.log(error)
       }