youxi-app/pages/catalog/web-view.uvue

<script setup lang='ts'>
import { ref, onMounted, watchEffect } from 'vue'
import { router } from '@/.cool'
const menu2Items = [
  { id: '1', name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/kanke.png' },
  { id: '2', name: '提问', icon: 'https://oss.xiaoxiongcode.com/static/home/lianxi.png' },
  { id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/shiyan.png' },
  { id: '4', name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
  { id: '5', name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
  { id: '6', name: '拓展', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
]
const progress = ref(1)
const webviewSrc = ref('')
onMounted(() => {
  webviewSrc.value = router.query().src
  progress.value = router.query().progress
})
function handleMessage(e) {
  var pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  prevPage.status = "success"
}
</script>
<template>
  <view class="w-full h-full absolute top-0 left-0 z-[11]">
    <view class="video-fullscreen_title">
      <Back />
      <view class="control-progress">
        <view class="before"></view>
        <view v-for="(item, i) in menu2Items" :key="item.id"
          class="px-0 py-3 flex items-center justify-center gap-[5px]  relative z-[1]"
          :class="{ '!bg-[#fff] rounded-full': progress == i + 1 }">
          <cl-image :src="item.icon" mode="heightFix" class="!h-[30px]"></cl-image>
          <text class="text-[14px]  font-bold" :class="{ '!text-[#2BA0F3]': progress == i + 1 }">{{ item.name
          }}</text>
        </view>
      </view>
    </view>
    <web-view :src="webviewSrc + '?' + Math.random()" class="w-full h-full" @message="handleMessage"></web-view>
  </view>
</template>
<style lang="less" scoped></style>