|
@@ -1,158 +1,170 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="guide">
|
|
|
|
|
- <div class="guide__header">
|
|
|
|
|
- <ul class="flex">
|
|
|
|
|
- <li class="tab" :class="{ active: active === 0 }" @click="change(0)">
|
|
|
|
|
- 鞋子使用
|
|
|
|
|
- </li>
|
|
|
|
|
- <li class="tab" :class="{ active: active === 1 }" @click="change(1)">
|
|
|
|
|
- 游戏操作
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <p class="tips f12 mt15" v-if="active === 0">
|
|
|
|
|
- <img
|
|
|
|
|
- class="warning-fill"
|
|
|
|
|
- src="@/assets/guide/warning-fill.png"
|
|
|
|
|
- alt="提醒"
|
|
|
|
|
- />
|
|
|
|
|
- 注意：首次使用前需给鞋子充电5分钟。确保鞋子配对、APP连接鞋子、查看电量等操作可正常执行
|
|
|
|
|
- </p>
|
|
|
|
|
|
|
+ <keep-alive>
|
|
|
|
|
+ <div class="guide">
|
|
|
|
|
+ <div class="guide__header">
|
|
|
|
|
+ <ul class="flex">
|
|
|
|
|
+ <li class="tab" :class="{ active: active === 0 }" @click="change(0)">
|
|
|
|
|
+ 鞋子使用
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="tab" :class="{ active: active === 1 }" @click="change(1)">
|
|
|
|
|
+ 游戏操作
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <p class="tips f12 mt15" v-if="active === 0">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="warning-fill"
|
|
|
|
|
+ src="@/assets/guide/warning-fill.png"
|
|
|
|
|
+ alt="提醒"
|
|
|
|
|
+ />
|
|
|
|
|
+ 注意：首次使用前需给鞋子充电5分钟。确保鞋子配对、APP连接鞋子、查看电量等操作可正常执行
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="guide__body mt16">
|
|
|
|
|
+ <ul class="shoes-use" v-if="active === 0">
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
|
|
|
|
|
+ @click="navigate('/recharge')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/recharge@2x.png"
|
|
|
|
|
+ alt="鞋子充电"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">鞋子充电</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/pair')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/pair@2x.png"
|
|
|
|
|
+ alt="配对激活"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">配对激活</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/connect')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/connect@2x.png"
|
|
|
|
|
+ alt="连接APP"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">连接APP</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/begin')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/begin@2x.png"
|
|
|
|
|
+ alt="开始运动"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">开始运动</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/power')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/power@2x.png"
|
|
|
|
|
+ alt="查看电量"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">查看电量</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/replace')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/replace@2x.png"
|
|
|
|
|
+ alt="更换设备"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">更换设备</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
+ @click="navigate('/miracast')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/game_operate@2x.png"
|
|
|
|
|
+ alt="游戏操作指引"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">电视投屏</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <ul class="shoes-use" v-else>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
|
|
|
|
|
+ @click="
|
|
|
|
|
+ open(
|
|
|
|
|
+ 'http://static.ouj.com/video/bcc4eb41-7475-3296-845f-1ef35a2d01d8.mp4'
|
|
|
|
|
+ )
|
|
|
|
|
+ "
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ src="@/assets/guide/game_common@2x.png"
|
|
|
|
|
+ alt="鞋子充电"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="ml10">游戏通用操作教程</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="item df jc-sb ai-c pl16 pr16 pt16 pb16 pointer mt16"
|
|
|
|
|
+ v-for="item in gameLinks"
|
|
|
|
|
+ :key="item.image"
|
|
|
|
|
+ @click="open(item.video)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class=" df ai-c">
|
|
|
|
|
+ <img class="image" :src="item.image" :alt="item.alt" />
|
|
|
|
|
+ <span class="ml10">{{ item.title }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <van-icon name="arrow" color="#999999" />
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <VideoDialog v-model:visible="videoVisible" :url="cVideo" />
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="guide__body mt16">
|
|
|
|
|
- <ul class="shoes-use" v-if="active === 0">
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
|
|
|
|
|
- @click="navigate('/recharge')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/recharge@2x.png"
|
|
|
|
|
- alt="鞋子充电"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">鞋子充电</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/pair')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img class="icon" src="@/assets/guide/pair@2x.png" alt="配对激活" />
|
|
|
|
|
- <span class="ml10">配对激活</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/connect')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/connect@2x.png"
|
|
|
|
|
- alt="连接APP"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">连接APP</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/begin')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/begin@2x.png"
|
|
|
|
|
- alt="开始运动"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">开始运动</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/power')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/power@2x.png"
|
|
|
|
|
- alt="查看电量"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">查看电量</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/replace')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/replace@2x.png"
|
|
|
|
|
- alt="更换设备"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">更换设备</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
|
|
|
|
|
- @click="navigate('/miracast')"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/game_operate@2x.png"
|
|
|
|
|
- alt="游戏操作指引"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">电视投屏</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <ul class="shoes-use" v-else>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
|
|
|
|
|
- @click="
|
|
|
|
|
- open(
|
|
|
|
|
- 'http://static.ouj.com/video/bcc4eb41-7475-3296-845f-1ef35a2d01d8.mp4'
|
|
|
|
|
- )
|
|
|
|
|
- "
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img
|
|
|
|
|
- class="icon"
|
|
|
|
|
- src="@/assets/guide/game_common@2x.png"
|
|
|
|
|
- alt="鞋子充电"
|
|
|
|
|
- />
|
|
|
|
|
- <span class="ml10">游戏通用操作教程</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- <li
|
|
|
|
|
- class="item df jc-sb ai-c pl16 pr16 pt16 pb16 pointer mt16"
|
|
|
|
|
- v-for="item in gameLinks"
|
|
|
|
|
- :key="item.image"
|
|
|
|
|
- @click="open(item.video)"
|
|
|
|
|
- >
|
|
|
|
|
- <div class=" df ai-c">
|
|
|
|
|
- <img class="image" :src="item.image" :alt="item.alt" />
|
|
|
|
|
- <span class="ml10">{{ item.title }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <van-icon name="arrow" color="#999999" />
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </div>
|
|
|
|
|
- <VideoDialog v-model:visible="videoVisible" :url="cVideo" />
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </keep-alive>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
-import { defineComponent, ref, reactive } from "vue";
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ defineComponent,
|
|
|
|
|
+ ref,
|
|
|
|
|
+ reactive,
|
|
|
|
|
+ onUnmounted,
|
|
|
|
|
+ onBeforeUnmount
|
|
|
|
|
+} from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import VideoDialog from "./components/VideoDialog/index.vue";
|
|
import VideoDialog from "./components/VideoDialog/index.vue";
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
@@ -215,8 +227,14 @@ export default defineComponent({
|
|
|
const cVideo = ref("");
|
|
const cVideo = ref("");
|
|
|
const is = ref(route.query.is);
|
|
const is = ref(route.query.is);
|
|
|
|
|
|
|
|
|
|
+ if (route.query.active) active.value = +route.query.active;
|
|
|
|
|
+
|
|
|
const $_change = (index: number) => {
|
|
const $_change = (index: number) => {
|
|
|
active.value = index;
|
|
active.value = index;
|
|
|
|
|
+ if (is.value) {
|
|
|
|
|
+ const href = window.location.href.replace(/\?\S+/g, "");
|
|
|
|
|
+ window.location.href = href + `?is=1&active=${index}`;
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const $_navigate = (path: string) => {
|
|
const $_navigate = (path: string) => {
|
|
@@ -224,9 +242,16 @@ export default defineComponent({
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const $_open = (url: string) => {
|
|
const $_open = (url: string) => {
|
|
|
- cVideo.value = url;
|
|
|
|
|
- videoVisible.value = true;
|
|
|
|
|
|
|
+ if (!is.value) {
|
|
|
|
|
+ cVideo.value = url;
|
|
|
|
|
+ videoVisible.value = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ const href = window.location.href.replace(/\?\S+/g, "");
|
|
|
|
|
+ window.location.href = href + "?is=1&active=1";
|
|
|
|
|
+ window.open(url, "_self");
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
return {
|
|
return {
|
|
|
active,
|
|
active,
|
|
|
change: $_change,
|
|
change: $_change,
|
