feat(课程锁): 添加课程锁定组件及购买提示功能

在课程列表页添加锁定组件，当课程未购买且非试玩时显示锁定状态
点击锁定图标弹出购买提示，引导用户前往购课
同时在中文和英文课程页添加购买校验逻辑

components/lock.uvue

@@ -1,10 +1,26 @@
 <script setup lang='ts'>
-
+import { ref } from 'vue'
+const props = defineProps({
+  record: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const visible = ref(false)
+const handlePay = () => {
+  visible.value = true
+}
 </script>
 <template>
-  <view class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg1">
+  <view class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg1" @tap.stop="handlePay">
     <cl-image src="https://oss.xiaoxiongcode.com/static/home/lock.png" mode="widthFix" width="30%" height="auto" />
   </view>
+  <cl-popup v-model="visible" showClose :size="400" :show-header="false" direction="center">
+    <view class="p-[40px] ">
+      <cl-text class="text-center" color="#000" :size="20"> 小朋友，快叫爸爸妈妈帮忙，解锁更多精彩内容吧！ </cl-text>
+      <cl-button class="mt-4" size="large" type="warn" block @tap="handlePay"> 前往购课 </cl-button>
+    </view>
+  </cl-popup>
 </template>
 <style lang="scss" scoped>
 .bg1 {

pages/catalog/index.uvue

@@ -34,6 +34,13 @@ function handleSelect(item: SubjectCatalogResult) {
   visible.value = false
 }
 function handleDetail(item: SubjectCatalogResult) {
+  // if (!item.payFlag && !item.trialPlay) {
+  //   uni.showToast({
+  //     title: '请先购买',
+  //     icon: 'none'
+  //   })
+  //   return
+  // }
   router.push({
     path: "/pages/catalog/detail",
     query: {
@@ -74,7 +81,7 @@ function handleDetail(item: SubjectCatalogResult) {
           <view>
             <Progress :num="2" :percentage="course.sortNum" />
           </view>
-          <Lock v-if="!course.trialPlay" />
+          <Lock v-if="!course.trialPlay && !course.payFlag" :record="course" />
         </view>
       </scroll-view>
     </view>

pages/chinese/index.uvue

@@ -4,6 +4,7 @@ import { fetchSubjectConfigInfo } from '@/services/subject/info'
 import type { SubjectCatalogResult } from '@/services/subject/catalog'
 import Progress from '../catalog/components/progress.uvue'
 import Back from '@/components/back.uvue'
+import Lock from '@/components/lock.uvue'
 import Loading from '@/components/loading.uvue'
 import { config } from '@/config'
 import { router } from "@/.cool";
@@ -32,6 +33,13 @@ function handleSelect(item: SubjectCatalogResult) {
   visible.value = false
 }
 function handleDetail(item: SubjectCatalogResult) {
+  if (!item.payFlag && !item.trialPlay) {
+    uni.showToast({
+      title: '请先购买',
+      icon: 'none'
+    })
+    return
+  }
   router.push({
     path: "/pages/english/detail",
     query: {
@@ -69,9 +77,10 @@ function handleDetail(item: SubjectCatalogResult) {
             course.mainTitle }}</text>
           <text class="text-[14px] text-[#666]">{{
             course.assistantTitle }}</text>
-          <view>
+          <!-- <view>
             <Progress :progress="30" />
-          </view>
+          </view> -->
+          <Lock v-if="!course.trialPlay && !course.payFlag" :record="course" />
         </view>
       </scroll-view>
     </view>
@@ -124,7 +133,7 @@ function handleDetail(item: SubjectCatalogResult) {
 }
 
 .scroll-view-item_H {
-  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center;
+  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
 }
 
 .light-tag {

pages/english/index.uvue

@@ -4,6 +4,7 @@ import { fetchSubjectConfigInfo } from '@/services/subject/info'
 import type { SubjectCatalogResult } from '@/services/subject/catalog'
 import Progress from '../catalog/components/progress.uvue'
 import Back from '@/components/back.uvue'
+import Lock from '@/components/lock.uvue'
 import Loading from '@/components/loading.uvue'
 import { config } from '@/config'
 import { router } from "@/.cool";
@@ -30,6 +31,13 @@ function handleSelect(item: SubjectCatalogResult) {
   visible.value = false
 }
 function handleDetail(item: SubjectCatalogResult) {
+  if (!item.payFlag && !item.trialPlay) {
+    uni.showToast({
+      title: '请先购买',
+      icon: 'none'
+    })
+    return
+  }
   router.push({
     path: "/pages/english/detail",
     query: {
@@ -71,6 +79,7 @@ function handleDetail(item: SubjectCatalogResult) {
           <!-- <view>
             <Progress :progress="30" />
           </view> -->
+          <Lock v-if="!course.trialPlay && !course.payFlag" :record="course" />
         </view>
       </scroll-view>
     </view>