feat: 新增少儿编程入口及相关会员弹窗，优化多处页面细节

1.  首页新增少儿编程菜单入口和对应的会员福利弹窗
2.  调整物理组件跳转路径到测试页面
3.  优化目录页加载逻辑、锁组件参数和代码格式
4.  调整测试页面的锁定判断逻辑和锁组件参数
5.  优化进度页面的代码格式和加载逻辑

pages/catalog/index.uvue

@@ -20,7 +20,7 @@ const record = ref<any>()
 async function getDataList() {
   const id = dict.getValueByLabelMapByType('index_subject_id')['物理']
   const res = await fetchSubjectAppInfo({ id })
-   record.value = res
+  record.value = res
   dataList.value = res.catalogList || []
   catalog.value = res?.catalogList?.[0]
   courseList.value = res?.courseList || []
@@ -29,9 +29,7 @@ onShow(async () => {
   isLoading.value = true
   try {
     await getDataList()
-    setTimeout(() => {
-      isLoading.value = false
-    }, 1000)
+    isLoading.value = false
   } catch (err) {
     console.log(err);
     isLoading.value = false
@@ -110,7 +108,8 @@ function handleClose(val: boolean) {
   <Loading v-show="isLoading" />
   <cl-page v-show="!isLoading">
     <Back />
-    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/2.png" alt="" class="w-full h-full object-cover" />
+    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/2.png" alt=""
+      class="w-full h-full object-cover" />
     <!-- 精灵图动画 -->
     <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
       class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
@@ -141,7 +140,7 @@ function handleClose(val: boolean) {
               :percentage="course.courseUserProgress ? course.courseUserProgress?.status == 1 ? 6 : course.courseUserProgress?.assistantProgress : 0" />
           </view>
           <Lock v-if="(!course.trialPlay && !record.payFlag) || !course.platFormLock" :record="course" type="course"
-            :finish="course.platFormLock"  @close="handleClose" />
+            :finish="course.platFormLock" @close="handleClose" />
         </view>
       </scroll-view>
     </view>

pages/catalog/progress.uvue

@@ -11,108 +11,110 @@ const isLoading = ref(false)
 const progressStatus = ref(0)
 //通过路由参数获取课程id
 async function fetchCatalog() {
-    course.value = await fetchSubjectCourseApp({ id: router.query().id })
-    if (!course.value?.courseUserProgress) {
-        await updateSubjectProgress({
-            courseId: course.value?.id,
-            mainProgress: 1,
-            assistantProgress: 1,
-            status: 0
-        })
-        progress.value = 1
-    } else if (course.value?.courseUserProgress.status == 0) {
-        progressStatus.value =  course.value?.courseUserProgress.status
-        progress.value = course.value?.courseUserProgress.assistantProgress
-    } else {
-        progress.value = 6
-        progressStatus.value =  course.value?.courseUserProgress.status
-    }
+  course.value = await fetchSubjectCourseApp({ id: router.query().id })
+  if (!course.value?.courseUserProgress) {
+    await updateSubjectProgress({
+      courseId: course.value?.id,
+      mainProgress: 1,
+      assistantProgress: 1,
+      status: 0
+    })
+    progress.value = 1
+  } else if (course.value?.courseUserProgress.status == 0) {
+    progressStatus.value = course.value?.courseUserProgress.status
+    progress.value = course.value?.courseUserProgress.assistantProgress
+  } else {
+    progress.value = 6
+    progressStatus.value = course.value?.courseUserProgress.status
+  }
 }
 onShow(async () => {
-    isLoading.value = true
-    await fetchCatalog()
-    setTimeout(() => {
-        isLoading.value = false
-    }, 1000)
+  isLoading.value = true
+  await fetchCatalog()
+  isLoading.value = false
 })
 
 const menuItems = [
-  { id: 1, name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/6419.png' ,x:0,y:15},
-  { id: 2, name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/6414.png' ,x:15,y:22},
-  { id: 3, name: '思考', icon: 'https://oss.xiaoxiongcode.com/static/home/6418.png' ,x:29,y:13},
-  { id: 4, name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/6412.png' ,x:41,y:3},
-  { id: 5, name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/6416.png' ,x:59,y:7},
-  { id: 6, name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/6417.png' ,x:80,y:10},
+  { id: 1, name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/6419.png', x: 0, y: 15 },
+  { id: 2, name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/6414.png', x: 15, y: 22 },
+  { id: 3, name: '思考', icon: 'https://oss.xiaoxiongcode.com/static/home/6418.png', x: 29, y: 13 },
+  { id: 4, name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/6412.png', x: 41, y: 3 },
+  { id: 5, name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/6416.png', x: 59, y: 7 },
+  { id: 6, name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/6417.png', x: 80, y: 10 },
 ]
 //点击事件
 function handleClick(id: number) {
-  if (course.value?.id && course.value?.courseUserProgress.status  == 0) {
-      updateSubjectProgress({
+  if (course.value?.id && course.value?.courseUserProgress.status == 0) {
+    updateSubjectProgress({
       courseId: course.value?.id,
       mainProgress: 1,
       assistantProgress: id,
-      status: course.value?.courseUserProgress.status 
+      status: course.value?.courseUserProgress.status
     })
   }
-   router.push({
+  router.push({
     path: "/pages/catalog/detail",
     query: {
-      id: router.query().id ,
+      id: router.query().id,
       progress: id,
     }
   });
 }
 </script>
 <template>
-    <!-- <Loading v-show="isLoading" /> -->
-    <cl-page>
-        <Back />
-        <view class="main">
+  <Loading v-show="isLoading" />
+  <cl-page>
+    <Back />
+    <view class="main">
       <!-- <image class="absolute top-0 left-0 z-[1] w-full h-full "  mode="aspectFill"  src="https://oss.xiaoxiongcode.com/static/home/641.png"   /> -->
-            
-             <view class="text-[20px] font-bold text-[#333333] absolute top-6 left-20">
-          {{ course?.mainTitle }}
-        </view>
-            <view class="progress w-[90vw] h-[45vw] pb-[5vw] flex items-center justify-end ">
-                <image class="w-[80vw]" mode="widthFix"  src="https://oss.xiaoxiongcode.com/static/home/形状 1.png" />
-                <view v-for="item in menuItems" :key="item.id" class="w-[10vw] h-[19vw] absolute flex items-center justify-between z-[2]"
-                :style="{
-                    top: `${item.y}vw`,
-                    left: `${item.x}vw`
-                }" @click="handleClick(item.id)">
-                <view class="w-[9vw] h-[9vw] flex items-center justify-center bg-[#fff] rounded-[2vw] box-shadow">
-                    <image :src="item.icon" class="w-[4vw] "  mode="widthFix" />
-                    <text class="text-[2vw] text-[#000]">{{item.name}}</text>
-                </view>
-                   <view class="flex items-center justify-between gap-[1vw]">
-                     <image v-if="progress === item.id&&progressStatus == 0" src="https://oss.xiaoxiongcode.com/static/home/6411.png" class="h-[4vw] "  mode="heightFix" />
-                       <view v-else-if="progress<item.id&&progressStatus == 0" class="text-[2vw] w-[4vw] h-[4vw] flex items-center justify-center text-bold text-[#333] bg-[#fff] rounded-full ">
-                       {{ item.id }}
-                     </view>
-                     <image v-else src="https://oss.xiaoxiongcode.com/static/home/6413.png" class="h-[4vw] "  mode="heightFix" />
-                   
-                     <image src="https://oss.xiaoxiongcode.com/static/home/6415.png" class="w-[4vw] "  mode="widthFix" />
-                   </view>
-                </view>
+
+      <view class="text-[20px] font-bold text-[#333333] absolute top-6 left-20">
+        {{ course?.mainTitle }}
+      </view>
+      <view class="progress w-[90vw] h-[45vw] pb-[5vw] flex items-center justify-end ">
+        <image class="w-[80vw]" mode="widthFix" src="https://oss.xiaoxiongcode.com/static/home/形状 1.png" />
+        <view v-for="item in menuItems" :key="item.id"
+          class="w-[10vw] h-[19vw] absolute flex items-center justify-between z-[2]" :style="{
+            top: `${item.y}vw`,
+            left: `${item.x}vw`
+          }" @click="handleClick(item.id)">
+          <view class="w-[9vw] h-[9vw] flex items-center justify-center bg-[#fff] rounded-[2vw] box-shadow">
+            <image :src="item.icon" class="w-[4vw] " mode="widthFix" />
+            <text class="text-[2vw] text-[#000]">{{ item.name }}</text>
+          </view>
+          <view class="flex items-center justify-between gap-[1vw]">
+            <image v-if="progress === item.id && progressStatus == 0"
+              src="https://oss.xiaoxiongcode.com/static/home/6411.png" class="h-[4vw] " mode="heightFix" />
+            <view v-else-if="progress < item.id && progressStatus == 0"
+              class="text-[2vw] w-[4vw] h-[4vw] flex items-center justify-center text-bold text-[#333] bg-[#fff] rounded-full ">
+              {{ item.id }}
             </view>
+            <image v-else src="https://oss.xiaoxiongcode.com/static/home/6413.png" class="h-[4vw] " mode="heightFix" />
+
+            <image src="https://oss.xiaoxiongcode.com/static/home/6415.png" class="w-[4vw] " mode="widthFix" />
+          </view>
         </view>
-    </cl-page>
+      </view>
+    </view>
+  </cl-page>
 </template>
 <style lang="scss" scoped>
-.main{
-    background: linear-gradient(0deg, #88C5F0, #D0ECFF);
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
- .progress{
+.main {
+  background: linear-gradient(0deg, #88C5F0, #D0ECFF);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .progress {
     position: relative;
     z-index: 2;
- } 
+  }
 }
-.box-shadow{
-box-shadow: 4px 7px 10px 0px rgba(62,166,238,0.44);
+
+.box-shadow {
+  box-shadow: 4px 7px 10px 0px rgba(62, 166, 238, 0.44);
 }
 </style>

pages/index/components/physics.uvue

@@ -19,7 +19,7 @@ function openPopup() {
        <image class="absolute bottom-5 left-5 z-[2] h-[40vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/3.gif"  />
        <image class="absolute bottom-[14vh] right-[12vw] z-[2] h-[20vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/play.png"  />
     </view>
-    <view @tap="handleView('/pages/catalog/index')" class="w-[30vw] box">
+    <view @tap="handleView('/pages/test/index')" class="w-[30vw] box">
            <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/644.png"   />
        <image class="relative mx-auto mt-2 z-[2] h-[14vh] w-[28vw]" mode="aspectFit" src="https://oss.xiaoxiongcode.com/static/home/642.png"  />
     </view>

pages/index/home.uvue

@@ -15,6 +15,10 @@ const menuList = computed(() => {
 	return [
 		...dict.getChildrenList('index_subject_id'),
 		{
+			label: '少儿编程',
+			code: 'coding'
+		},
+		{
 			label: '兑换',
 			code: 'exchange'
 		},
@@ -33,6 +37,7 @@ const icons = {
 	exchange: "https://oss.xiaoxiongcode.com/static/home/图层 5.png",
 	user: "https://oss.xiaoxiongcode.com/static/home/个人中心.png",
 	math: "https://oss.xiaoxiongcode.com/static/home/math.png",
+	coding: "https://oss.xiaoxiongcode.com/static/home/coding.png",
 }
 const selected = ref<string>('physics')
 function handlePage(val: any) {
@@ -40,6 +45,10 @@ function handlePage(val: any) {
 		router.push({ path: '/pages/user/info' })
 		return
 	}
+	if (val.code === 'coding') {
+		visible2.value = true
+		return
+	}
 	selected.value = val.code
 
 }
@@ -51,6 +60,18 @@ function handleView(url) {
 }
 const userInfo = computed(() => user.info.value?.userInfo)
 const visible = ref(false)
+const visible2 = ref(false)
+function copyUrl() {
+	uni.setClipboardData({
+		data: 'www.xiaoxiongcode.com',
+		success: (res) => {
+			uni.showToast({
+				title: '复制成功',
+				icon: 'success'
+			});
+		}
+	});
+}
 
 </script>
 <template>
@@ -63,20 +84,22 @@ const visible = ref(false)
 			<view class="w-[87vw] relative z-[2] p-1 px-3 flex flex-row items-center justify-between gap-1 mx-auto ">
 				<view v-for="item in menuList" :key="item.code"
 					class="flex flex-col items-center p-1 px-4 justify-center gap-1  transition-all duration-300"
-					@tap="handlePage(item)" :class="{ 'selected': item.code === selected }">
+					@tap="handlePage(item)" :class="{ 'selected': item.code === selected }" >
 					<image :src="icons[item.code]" mode="aspectFill" class="w-[4vw] h-[4vw]"></image>
 					<text class="text-[1.5vw] text-[#1E1E1E]">{{ item.label }}</text>
 				</view>
-				<view class="flex flex-col items-center p-1 px-4 justify-center gap-1  transition-all duration-300"
+
+			</view>
+		</view>
+		<cl-float-view :left="20" :bottom="200" >
+			<view class="flex flex-col items-center p-1 px-4 justify-center gap-1 w-[40px] h-[40px] transition-all duration-300"
+				@tap="visible = true">
+				<view class="bg-[#09ba07] p-[1vw] rounded-full w-[40px] h-[40px] flex items-center justify-center"
 					@tap="visible = true">
-					<view class="bg-[#09ba07] p-[1vw] rounded-[2vw] w-[4vw] h-[4vw] flex items-center justify-center"
-						@tap="visible = true">
-						<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-full h-full"></image>
-					</view>
-					<text class="text-[1.5vw] text-[#1E1E1E]">添加老师</text>
+					<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-[20px] h-[20px]"></image>
 				</view>
 			</view>
-		</view>
+		</cl-float-view>
 		<!-- <view class="flex flex-col items-center justify-center fixed bottom-[3vh] right-[3vh]  ">
 			 <view class="bg-[#09ba07] p-2 rounded-full border-[2px] border-[#FFF] border-solid " @tap="visible = true">
 				<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-5 h-5"></image>
@@ -93,6 +116,22 @@ const visible = ref(false)
 				</view>
 			</view>
 		</cl-popup>
+		<cl-popup v-model="visible2" :size="400" :show-header="false" direction="center">
+			<view class="flex flex-col items-center justify-center gap-4 py-7 bg-slate-50">
+				<cl-text class="text-center " color="#09ba07" :size="30"> ——会员福利—— </cl-text>
+				<image src="https://oss.xiaoxiongcode.com/static/home/coding.png" 
+					class="w-32 h-32" />
+				<view class="text-center " v-if="userInfo?.memberLevel !== 'default'">
+					 <cl-text class="text-center" color="#999" :size="14">账号：小程序登录手机账号  </cl-text>
+					<cl-text class="text-center" color="#999" :size="14"> 密码：初始密码为123456 </cl-text>
+					<cl-text class="text-center" color="#999" :size="14">少儿编程网址: www.xiaoxiongcode.com </cl-text>
+					<cl-button type="primary" size="small" @tap="copyUrl"> 复制网址 </cl-button>
+				</view>
+				<view class="text-center " v-else>
+					 <cl-text class="text-center" color="#999" :size="14"> 您不是会员，无法使用会员福利 </cl-text>
+				</view>
+			</view>
+		</cl-popup>
 		<Physics v-if="selected === 'physics'" />
 		<Chinese v-else-if="selected === 'chinese'" />
 		<English v-else-if="selected === 'english'" />

pages/test/index.uvue

@@ -97,7 +97,7 @@ async function onScroll(e: any) {
             class="!w-full !h-[28vh] mb-[10px] rounded-xl"></cl-image>
           <text class="text-[4vh] font-bold">{{
             test.name }}</text>
-          <Lock v-if="userInfo?.memberLevel === 'default'" :record="test" type="vip"/>
+          <Lock v-if="test?.lockFlag" :record="test" type="course" :finish="test.lockFlag" />
         </view>
       </scroll-view>
     </view>