Codespace super duper space memory g7qv9jrrv7jcvvq4

src/layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
   <wd-config-provider :themeVars="themeVars">
     <slot />
+    "this is default"
     <wd-toast />
     <wd-message-box />
   </wd-config-provider>

src/layouts/demo.vue

@@ -1,6 +1,7 @@
 <template>
   <wd-config-provider :themeVars="themeVars">
     <slot />
+    "this is demo"
     <wd-toast />
     <wd-message-box />
   </wd-config-provider>

src/layouts/tabbar.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="global-page-color p-3">
+    <wd-config-provider theme="light">
+      <slot />
+      <view>
+        <wd-tabbar
+          fixed
+          v-model="tabbarStore.tabbarInfo.activeIndex"
+          @change="tabbarChange"
+          shape="round"
+          bordered
+          safeAreaInsetBottom
+          placeholder
+        >
+          <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
+          <wd-tabbar-item title="任务" icon="view-module" :value="5"></wd-tabbar-item>
+          <wd-tabbar-item title="结算" icon="chart" :value="2"></wd-tabbar-item>
+          <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
+        </wd-tabbar>
+      </view>
+      <wd-toast />
+      <wd-message-box />
+    </wd-config-provider>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useTabbarStore } from '@/store'
+const tabbarStore = useTabbarStore()
+
+const tabbarViewList: string[] = [
+  '/pages/home/home',
+  '/pages/task/task',
+  '/pages/settlement/settlement',
+  '/pages/profile/profile',
+]
+
+function tabbarChange({ value }: { value: string }) {
+  console.log(`选中标签:${value}`)
+  console.log(tabbarViewList[value])
+  uni.redirectTo({ url: tabbarViewList[value] })
+  tabbarStore.tabbarInfo.activeIndex = Number(value)
+}
+</script>
+
+<style scoped>
+.main-view {
+  padding: 0 10rpx;
+}
+.global-page-color {
+  background-color: red;
+}
+</style>

src/pages.json

@@ -39,10 +39,18 @@
   },
   "pages": [
     {
-      "path": "pages/index/index",
+      "path": "pages/tarbar-view/tarbar",
       "type": "home",
+      "layout": "tabbar",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/home/home",
+      "type": "home",
+      "layout": "tabbar",
       "style": {
-        "navigationStyle": "custom",
         "navigationBarTitleText": "首页"
       }
     },
@@ -52,6 +60,38 @@
       "style": {
         "navigationBarTitleText": "关于"
       }
+    },
+    {
+      "path": "pages/index/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/profile/profile",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
+    },
+    {
+      "path": "pages/settlement/settlement",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationBarTitleText": "结算"
+      }
+    },
+    {
+      "path": "pages/task/task",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationBarTitleText": "任务"
+      }
     }
   ],
   "subPackages": []

src/pages/home/home.vue

@@ -0,0 +1,145 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5" type="home">
+{
+  layout: 'tabbar',
+  style: {
+    navigationBarTitleText: '首页',
+  },
+}
+</route>
+<template>
+  <view class="home">
+    <view class="search" @click="navToSearchPage">
+      <wd-search
+        custom-class="custom-search"
+        hide-cancel
+        placeholder-left
+        disabled
+        placeholder="公众号入门指导手册"
+      />
+    </view>
+    <view class="card-swiper">
+      <wd-swiper
+        :list="swiperList"
+        autoplay
+        v-model:current="current"
+        :indicator="{ type: 'dots-bar' }"
+        @click="handleClick"
+        @change="onChange"
+      ></wd-swiper>
+    </view>
+    <view class="content-center">
+      <view class="content-center-title">赛道中心</view>
+      <view class="home-content-list">
+        <wd-card>
+          <template #title>
+            <view class="title">
+              <view>2020-02-03服务到期</view>
+              <view class="title-tip">
+                <wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
+                您可以去电脑上使用该服务
+              </view>
+            </view>
+          </template>
+          <view style="height: 40px" class="content">
+            <image
+              src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
+              width="40"
+              height="40"
+              alt="joy"
+              style="margin-right: 12px; border-radius: 4px; width: 40px; height: 40px"
+            />
+            <view>
+              <view style=" font-size: 16 px ;c olor: rgba(0,0,0,0.85)">智催评营销</view>
+              <view style=" font-size: 12 px ;c olor: rgba(0,0,0,0.25)">
+                高级版-快速吸粉 | 周期一年
+              </view>
+            </view>
+          </view>
+
+          <template #footer>
+            <view>
+              <wd-button size="small" style="margin-right: 8px">评价</wd-button>
+              <wd-button size="small" plain>立即使用</wd-button>
+            </view>
+          </template>
+        </wd-card>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+//   ----------   轮播图  -------------------
+const current = ref<number>(0)
+
+const swiperList = ref([
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
+])
+function handleClick(e) {
+  console.log(e)
+}
+function onChange(e) {
+  console.log(e)
+}
+
+function navToSearchPage(value: any) {
+  console.log(value)
+}
+
+//   ----------   赛道中心  -------------------
+const contentCenterList = ref([{ title: '111' }, { title: '222' }])
+</script>
+
+<style lang="scss" scoped>
+.main-title-color {
+  color: #d14328;
+}
+
+.home {
+  .search {
+    margin-bottom: 20rpx;
+    :deep(.custom-search) {
+      padding: 0;
+    }
+    .wd-search {
+      background-color: transparent;
+    }
+  }
+}
+
+.content,
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.content {
+  justify-content: flex-start;
+}
+.title {
+  justify-content: space-between;
+}
+.title-tip {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+}
+.content image {
+  margin-right: 12rpx;
+  border-radius: 4rpx;
+}
+
+.content-center {
+  background-color: #d14328;
+}
+
+.content-center .content-center-title {
+  font-size: 20rpx;
+  margin: 10rpx 20rpx;
+}
+</style>

src/pages/index/index.vue

@@ -1,5 +1,5 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
-<route lang="json5" type="home">
+<route lang="json5">
 {
   style: {
     navigationStyle: 'custom',

src/pages/profile/profile.vue

@@ -0,0 +1,16 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5">
+{
+  layout: 'tabbar',
+  style: {
+    navigationBarTitleText: '我的',
+  },
+}
+</route>
+<template>
+  <view>'欢迎来到我的'</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/pages/settlement/settlement.vue

@@ -0,0 +1,18 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5">
+{
+  layout: 'tabbar',
+  style: {
+    navigationBarTitleText: '结算',
+  },
+}
+</route>
+<template>
+  <view>'欢迎来到结算'</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/tarbar-view/tarbar.vue

@@ -0,0 +1,20 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5" type="home">
+{
+  layout: 'tabbar',
+  style: {
+    navigationBarTitleText: '首页',
+  },
+}
+</route>
+<template>
+  <view>'欢迎来到首页'</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.main-title-color {
+  color: #d14328;
+}
+</style>

src/pages/task/task.vue

@@ -0,0 +1,16 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5">
+{
+  layout: 'tabbar',
+  style: {
+    navigationBarTitleText: '任务',
+  },
+}
+</route>
+<template>
+  <view>'欢迎来到任务'</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/store/index.ts

@@ -15,3 +15,4 @@ export default store
 
 // 模块统一导出
 export * from './user'
+export * from './tabbar'

src/store/tabbar.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const initState = { name: '首页', activeIndex: 0 }
+
+export const useTabbarStore = defineStore(
+  'tabbar',
+  () => {
+    const tabbarInfo = ref<TabbarInfo>({ ...initState })
+
+    const setTabbarInfo = (val: TabbarInfo) => {
+      tabbarInfo.value = val
+    }
+
+    const clearTabbarInfo = () => {
+      tabbarInfo.value = { ...initState }
+    }
+    // 一般没有reset需求，不需要的可以删除
+    const reset = () => {
+      tabbarInfo.value = { ...initState }
+    }
+
+    return {
+      tabbarInfo,
+      setTabbarInfo,
+      clearTabbarInfo,
+      reset,
+    }
+  },
+  {
+    persist: false,
+  },
+)