src/api/sectionAudition.ts

@@ -1,11 +1,21 @@
 import request from '@/service'
 
 /**
- * 获取试听小节
+ * 逻小熊试听小节
  */
-export const getTrialAudioRequest = (code: string) => {
+export const getTrialAudioLXXRequest = (code: string) => {
   return request({
     url: `/app/h5/trialAudio/${code}`,
     method: 'GET'
   })
 }
+
+/**
+ * 拼图试听小节
+ */
+export const getTrialAudioPTRequest = (code: string) => {
+  return request({
+    url: `/app/h5/trialAudio/pt/${code}`,
+    method: 'GET'
+  })
+}

src/components/OpenApp/index.vue

@@ -65,6 +65,10 @@ const handleReadyFn = () => {
       'https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app'
   })
 }
+
+setTimeout(() => {
+  console.log(props.extinfo, 'props.extinfo')
+}, 3000)
 </script>
 
 <style></style>

src/pages/SectionAudition/router/index.ts

@@ -1,6 +1,11 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import('../views/index.vue')
+  },
   {
     path: '/:id',
     name: 'index',

src/pages/SectionAudition/views/index.vue

@@ -2,10 +2,11 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAudioManager } from '@/hook'
-import ProgressBar from '@/pages/SectionAudition/components/ProgressBar.vue'
+import OpenApp from '@/components/OpenApp/index.vue'
 import { registerWxopenButton } from '@/utils/utils'
-import { getTrialAudioRequest } from '@/api/sectionAudition'
+import { getTrialAudioLXXRequest, getTrialAudioPTRequest } from '@/api/sectionAudition'
 import dayjs from 'dayjs'
+import { AxiosResponse } from 'axios'
 
 const logo = require('../assets/logo.png')
 const pause = require('../assets/pause.png')
@@ -165,7 +166,8 @@ const defaultCourse = {
   trialLearn: 0
 }
 
-const { id } = useRoute().params
+const { id: ptId } = useRoute().query
+const { id: lxxId } = useRoute().params
 
 const [fco, atx] = useAudioManager({
   url: '',
@@ -179,6 +181,25 @@ const playing = ref(false)
 const show = ref(false)
 const progressRef = ref()
 const progressBarWidth = ref(0)
+const isFirstClick = ref(false)
+
+// 剩余时间
+const remainingTime = computed(() => {
+  // console.log(1 - percentage.value, '1 - percentage.value')
+  return Math.round(section.freeTime - timeToSeconds(fco.updateTime))
+})
+
+const totalTime = computed(() => {
+  // console.log(fco.duration, 'fco.durationfco.duration')
+  if (!fco.duration) {
+    return secondsToTime(section.audio.duration)
+  }
+  return fco.duration
+})
+
+const extinfo = computed(() => {
+  return `home/wx/play?skuId=${course.id}&index=${course.position}`
+})
 
 const maxPercentage = computed(() => {
   if (section.freeTime && section.audio.duration) {
@@ -233,10 +254,11 @@ const timeToSeconds = (timeStr: string | number) => {
 }
 
 function secondsToTime (seconds:string) {
-  return dayjs(Math.round(Number(seconds))).format('mm:ss')
+  return dayjs(Math.round(Number(seconds) * 1000)).format('mm:ss')
 }
 
 function playAudio () {
+  if (!isFirstClick.value) isFirstClick.value = true
   if (!playing.value) {
     if (fco.percentage >= maxPercentage.value) {
       fco.setPercentage(0)
@@ -248,54 +270,62 @@ function playAudio () {
   playing.value = !playing.value
 }
 
-async function getTrialAudio (id: string) {
-  const { data, status } = await getTrialAudioRequest(id)
+async function getTrialAudio () {
+  const id = ptId || lxxId
+  const request = ptId ? getTrialAudioPTRequest : getTrialAudioLXXRequest
+  const { data, status } = await request(id as string)
   if (status === 200) {
     Object.assign(course, data)
-    if (
-      data &&
-      Array.isArray(data.chapterList) &&
-      data.chapterList.length > 0 &&
-      data.chapterList[0].itemList &&
-      data.chapterList[0].itemList.length > 0
-    ) {
-      Object.assign(section, data.chapterList[0].itemList[0], {
-        // freeTime: 10,
-        // audio: {
-        //   id: null,
-        //   audioUrl: 'https://img.luojigou.vip/FiNShd4u8KWEQf09XrjryjfdzR_e',
-        //   parentId: null,
-        //   createTime: null,
-        //   updateTime: null,
-        //   duration: '12'
-        // }
-      })
+    if (data?.chapterList?.length > 0 && data.chapterList[0]?.itemList.length > 0) {
+      Object.assign(section, data.chapterList[0].itemList[0])
       console.log(fco.duration, 'fco.duration')
       console.log(section.audio.duration, 'section.audio.duration')
     }
   }
 }
 
-onMounted(async () => {
+function initAudio () {
   progressBarWidth.value = progressRef.value.clientWidth - space * 2
 
   progressRef.value.addEventListener('touchstart', () => {
+    console.log('touchstart')
+
+    if (!isFirstClick.value) {
+      fco.play()
+      playing.value = true
+      isFirstClick.value = true
+    }
     fco.pause()
     playing.value = false
   })
   progressRef.value.addEventListener('touchmove', (event: { touches: { pageX: number }[] }) => {
+    console.log('touchmove')
     const { pageX } = event.touches[0]
-    if (pageX > space && pageX <= progressBarWidth.value + space) {
-      const num = (pageX - space) / progressBarWidth.value
-      fco.setPercentage(num)
+    let num
+    if (pageX <= space) {
+      num = 0
+    } else if ((pageX - space) / progressBarWidth.value > maxPercentage.value) {
+      num = maxPercentage.value
+    } else {
+      num = (pageX - space) / progressBarWidth.value
     }
+
+    fco.setPercentage(num)
   })
   progressRef.value.addEventListener('touchend', () => {
+    console.log('touchend')
     fco.play()
     playing.value = true
   })
-  console.log(id, 'id')
-  await getTrialAudio(id as string)
+}
+
+onMounted(async () => {
+  initAudio()
+
+  console.log(ptId, '拼图id')
+  console.log(lxxId, '逻小熊id')
+  await getTrialAudio()
+
   await registerWxopenButton()
 })
 </script>
@@ -305,34 +335,42 @@ onMounted(async () => {
     <div class="sa-cover" @click="playAudio">
       <img :src="section.imgCover" alt="" class="sa-cover-img" />
       <div class="sa-cover-tips">
-        试听剩余{{timeToSeconds(fco.duration) - timeToSeconds(fco.updateTime)}}s，体验完整版前往APP
+        试听剩余{{remainingTime}}s，体验完整版前往APP
       </div>
       <img :src="playing ? pause : play" alt="" class="sa-cover-btn" />
     </div>
-    <div class="sa-process">
+    <div class="sa-process" :style="{opacity: course.imgCover ? 1: 0}">
       <div class="progress" ref="progressRef">
         <div
           class="progress-bar"
           :style="{ width: `calc(100vw - ${space * 2}px)` }"
         >
+          <!--最大播放范围-->
           <div
             class="progress-bar-track"
             :style="{ width: `${maxPercentage * progressBarWidth}px` }"
           ></div>
+          <!--最大播放位置小竖线-->
           <div
             v-if="maxPercentage < 1 && maxPercentage > 0"
             class="progress-bar-max"
             :style="{ left: `${maxPercentage * progressBarWidth}px` }"
           ></div>
+          <!--当前位置圆点-->
           <div
             class="progress-bar-pivot"
             :style="{ left: `${percentage * progressBarWidth}px` }"
           ></div>
+          <!--已经播放过的部分-->
+          <div
+            class="progress-bar-line"
+            :style="{ width: `${percentage * progressBarWidth}px` }"
+          ></div>
         </div>
       </div>
       <div class="sa-process-time">
         <div>{{ fco.updateTime || "00:00" }}</div>
-        <div>{{ fco.duration || secondsToTime(section.audio.duration) ||"00:00" }}</div>
+        <div>{{ totalTime }}</div>
       </div>
     </div>
     <div class="sa-title">{{ course.name }}</div>
@@ -343,7 +381,7 @@ onMounted(async () => {
         <div>少儿思维教育，就选逻辑狗</div>
       </div>
       <div class="sa-open-btn">
-        <OpenApp>
+        <OpenApp :extinfo="extinfo">
           <div
             style="
               display: flex;
@@ -378,7 +416,7 @@ onMounted(async () => {
           <div class="title">前往APP继续观看</div>
           <div class="desc">试听已结束，收听完整资源</div>
           <div class="desc mb12">请前往APP继续</div>
-          <OpenApp>
+          <OpenApp :extinfo="extinfo">
             <div
               style="
                 display: flex;
@@ -406,6 +444,12 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .sa {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #fff;
   overflow: hidden;
 
   &-cover {
@@ -488,9 +532,19 @@ onMounted(async () => {
           z-index: 3;
           width: 13px;
           height: 13px;
-          background-color: #0643a2;
+          background-color: #0643A2;
           border-radius: 50%;
         }
+        &-line {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          z-index: 3;
+          height: 3px;
+          background-color: #0643A2;
+          border-radius: 2px;
+        }
       }
     }
 
@@ -514,12 +568,12 @@ onMounted(async () => {
 
   &-title {
     margin-top: 18px;
-    height: 16px;
+    //height: 16px;
     font-size: 18px;
     font-family: PingFang SC-Semibold, PingFang SC;
     font-weight: 600;
     color: #333333;
-    line-height: 16px;
+    //line-height: 16px;
     text-align: center;
   }
 

vue.config.js

@@ -53,8 +53,8 @@ module.exports = {
         }
       },
       '/zd-api/': {
-        target: 'https://open.test.luojigou.vip/', // 开发环境
-        // target: 'https://open.api.luojigou.vip/', // 生产环境
+        // target: 'https://open.test.luojigou.vip/', // 开发环境
+        target: 'https://open.api.luojigou.vip/', // 生产环境
         ws: false,
         secure: false,
         changeOrigin: true,