feat: 广告页、引导页改为组件

4 years ago · 2be7903127
9 changed files with 408 additions and 200 deletions
--- a/App.vue
+++ b/App.vue
@ -24,8 +24,16 @@ export default {
    }

    // 查询广告页和引导页并缓存
+    // #ifdef APP-PLUS
+    uni.$storage.setStorageSync('isOpenApp', true);
+    this.$store.commit('setIsOpenApp', true);
+    // 判断是否第一次打开App
+    let firstOpenApp = uni.$storage.getStorageSync('firstOpenApp');
+    this.$store.commit('setFirstOpenApp');
+
    this.getGuide(0);
    this.getGuide(1);
+    // #endif

    // 定时查询服务和插件
    if (!uni.$storage.getStorageSync('businessPlugin')) {
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -44,6 +44,7 @@
 - | 主体颜色 | [bb5c0e3](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/bb5c0e3)
 - | 注册、用户协议 | [68e9189](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/68e9189)
 - | app.vue | [970cf9a](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/970cf9a)
+ - | app端请求路径不对 | [b31fa14](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/b31fa14)
 deliver 交付物 | 点击交付物链接webview打开链接 | [daa59f1](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/daa59f1)
 - | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)
 - | get请求 | [3a61439](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3a61439)
--- a/components/Adv/Adv.vue
+++ b/components/Adv/Adv.vue
@ -0,0 +1,99 @@
+<template>
+  <view class="adv-box relative">
+    <swiper v-if="imgs.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" circular="true">
+      <swiper-item v-for="(item, index) in imgs" :key="index">
+        <view class="swiper-item">
+          <image :src="item"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <image v-else src="/common/img/adv.jpg"></image>
+
+    <view class="time-box absolute">{{ time }} 跳过</view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, watch } from 'vue';
+  import { useStore } from 'vuex';
+
+  const store = useStore();
+  const indicatorDots = true;
+  const autoplay = true;
+  const advs = computed(() => store.state.advs);
+  const imgs = ref([]);
+
+  if (advs.value) {
+    imgs.value = JSON.parse(advs.value);
+  }
+
+  watch(advs, () => {
+    imgs.value = JSON.parse(advs.value);
+  })
+
+  const time = ref(5);
+
+  let timer = setInterval(() => {
+    time.value--;
+    if (time.value === 0) {
+      clearInterval(timer);
+      uni.$storage.setStorageSync('isOpenApp', false);
+      store.commit('setIsOpenApp', false);
+    }
+  }, 1000);
+
+  // setTimeout(() => {
+  //   // 判断是否第一次打开App
+  //   let firstOpenApp = uni.$storage.getStorageSync('firstOpenApp');
+  //   if (firstOpenApp) {
+  //     // uni.navigateTo({
+  //     //   url: '/pages/index/index'
+  //     // })
+  //   } else {
+  //     uni.$storage.setStorageSync('firstOpenApp', true);
+  //     store.commit('setFirstOpenApp');
+  //     // uni.navigateTo({
+  //     //   url: '/pages/guide/guide'
+  //     // })
+  //   }
+  // }, 5000);
+
+</script>
+
+<style lang="scss" scoped>
+  .adv-box {
+    width: 100%;
+    height: 100%;
+
+    image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .swiper {
+    height: 100%;
+  }
+
+  .swiper-item {
+    width: 100%;
+    height: 100%;
+  }
+
+  .time-box {
+    bottom: 50px;
+    right: 10px;
+    display: inline-block;
+    width: 60px;
+    height: 24px;
+    line-height: 22px;
+    font-size: 12px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, .7);
+    border-radius: 12px;
+    color: #666;
+    border: 1px solid #eee;
+  }
+</style>
--- a/components/Guide/Guide.vue
+++ b/components/Guide/Guide.vue
@ -0,0 +1,76 @@
+<template>
+  <!-- indicator-dots 是否显示面板指示点 -->
+  <!-- indicator-color 指示点颜色 -->
+  <!-- indicator-active-color 当前选中的指示点颜色 -->
+
+  <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay">
+    <swiper-item v-for="(item, index) in imgs" :key="index">
+      <view class="swiper-item relative">
+        <image :src="item"></image>
+        <u-button class="btn absolute" v-if="index === imgs.length - 1" @click="toIndex">点击进入APP</u-button>
+      </view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script setup>
+  import { ref, computed, watch } from 'vue';
+  import { useStore } from 'vuex';
+
+  const store = useStore();
+  const indicatorDots = true;
+  const autoplay = false;
+
+  const guide = computed(() => store.state.guide);
+  const imgs = ref([]);
+
+  if (guide.value) {
+    imgs.value = JSON.parse(guide.value);
+  }
+
+  watch(guide, () => {
+    imgs.value = JSON.parse(guide.value);
+  })
+
+  function toIndex() {
+    uni.$storage.setStorageSync('firstOpenApp', true);
+    store.commit('setFirstOpenApp');
+    // uni.navigateTo({
+    //   url: '/pages/index/index'
+    // })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .swiper {
+    height: 100%;
+
+    image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .swiper-item {
+    width: 100%;
+    height: 100%;
+
+    .btn {
+      bottom: 200px;
+      display: inline-block;
+      height: 40px;
+      line-height: 38px;
+      background-color: #ECF5FF;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 20px;
+      color: #2B85E4;
+      border: 1px solid #2B85E4;
+
+      &:after {
+        border: none;
+      }
+    }
+  }
+</style>
--- a/components/Title/Title.vue
+++ b/components/Title/Title.vue
@ -102,7 +102,8 @@ function onBack() {
    uni.navigateBack();
  } else {
    // this.$u.route('/', { u: this.userId });
-    uni.reLaunch({ url: `/pages/index/index?u=${userId.value}` });
+    // uni.reLaunch({ url: `/pages/index/index?u=${userId.value}` });
+	uni.reLaunch({ url: `/pages/index/index` });
  }
 }

@ -116,7 +117,8 @@ function projectOverview() {
 }
 // 回到首页
 function openIndex() {
-  uni.webView.reLaunch({ url: `/pages/index/index?u=${this.userId}` });
+  // uni.webView.reLaunch({ url: `/pages/index/index?u=${this.userId}` });
+  uni.reLaunch({ url: `/pages/index/index` });
 }

 // 操作
--- a/pages.json
+++ b/pages.json
@ -1,19 +1,19 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/guide/adv",
-			"style": {
-				"navigationBarText": "TALL",
-				"navigationStyle": "custom"
-			}
-		},
-		{
-			"path": "pages/guide/guide",
-			"style": {
-				"navigationBarText": "TALL",
-				"navigationStyle": "custom"
-			}
-		},
+		// {
+		// 	"path": "pages/guide/adv",
+		// 	"style": {
+		// 		"navigationBarText": "TALL",
+		// 		"navigationStyle": "custom"
+		// 	}
+		// },
+		// {
+		// 	"path": "pages/guide/guide",
+		// 	"style": {
+		// 		"navigationBarText": "TALL",
+		// 		"navigationStyle": "custom"
+		// 	}
+		// },
 		{
 			"path": "pages/index/index",
 			"style": {
--- a/pages/guide/adv.vue
+++ b/pages/guide/adv.vue
@ -41,13 +41,13 @@

  setTimeout(() => {
    // 判断是否第一次打开App
-    let openNum = uni.$storage.getStorageSync('fistOpenApp');
+    let openNum = uni.$storage.getStorageSync('firstOpenApp');
    if (openNum === 'true') {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    } else {
-      uni.$storage.setStorageSync('fistOpenApp', 'true');
+      uni.$storage.setStorageSync('firstOpenApp', true);
      uni.navigateTo({
        url: '/pages/guide/guide'
      })
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -1,4 +1,13 @@
 <template>
+  <!-- #ifdef APP-PLUS -->
+  <!-- 广告 -->
+  <Adv v-if="isOpenApp"></Adv>
+
+  <!-- 引导页 -->
+  <Guide v-if="!firstOpenApp"></Guide>
+  <!-- #endif -->
+
+  <view>
    <!-- 这里是适配的状态栏的代码 -->
    <view class="statbar">
      <view class="status_bar"></view>
@ -22,6 +31,7 @@
      <!-- 全局提示框 -->
      <u-top-tips ref="uTips"></u-top-tips>
    </theme>
+  </view>
 </template>

 <script setup>
@ -32,6 +42,8 @@
  const store = useStore();
  const token = computed(() => store.state.user.token);
  const uTips = ref(null);
+  const firstOpenApp = computed(() => store.state.firstOpenApp);
+  const isOpenApp = computed(() => store.state.isOpenApp); // 是否打开APP

  const data = reactive({
    calendar: null,
--- a/store/index.js
+++ b/store/index.js
@ -20,6 +20,8 @@ const state = {
  advs: '', // 广告图片json
  businessPlugin: [], // 所有服务
  allPlugin: [], // 所有插件
+  firstOpenApp: false, // 是否是第一次打开APP或者引导页有更新，false表示从未打开过，true表示打开过
+  isOpenApp: true, // 是否打开APP
 };

 const getters = {
@ -111,6 +113,14 @@ const mutations = {
   */
  setAllPlugin(state, data) {
    state.allPlugin = data;
+  },
+
+  setFirstOpenApp(state, data) {
+    state.firstOpenApp = uni.$storage.getStorageSync('firstOpenApp');
+  },
+
+  setIsOpenApp(state, data) {
+    state.isOpenApp = data;
  }
 };