营销：装修模板，底部导航适配APP

sheep/api/promotion/diy/template.js

@@ -0,0 +1,10 @@
+import request from '@/sheep/request';
+
+export default {
+  // TODO 芋艿：测试
+  getUsedDiyTemplate: () =>
+    request({
+      url: '/app-api/promotion/diy-template/used',
+      method: 'GET',
+    }),
+};

sheep/components/s-tabbar/s-tabbar.vue

@@ -1,29 +1,29 @@
 <template>
-  <view class="u-page__item" v-if="tabbar?.list.length > 0">
+  <view class="u-page__item" v-if="tabbar?.items.length > 0">
     <su-tabbar
       :value="path"
       :fixed="true"
       :placeholder="true"
       :safeAreaInsetBottom="true"
-      :inactiveColor="tabbar.inactiveColor"
+      :inactiveColor="tabbar.style.color"
-      :activeColor="tabbar.activeColor"
+      :activeColor="tabbar.style.activeColor"
       :midTabBar="tabbar.mode === 2"
       :customStyle="tabbarStyle"
     >
       <su-tabbar-item
-        v-for="(item, index) in tabbar.list"
+        v-for="(item, index) in tabbar.items"
         :key="item.text"
         :text="item.text"
         :name="item.url"
         :isCenter="getTabbarCenter(index)"
-        :centerImage="sheep.$url.cdn(item.inactiveIcon)"
+        :centerImage="sheep.$url.cdn(item.iconUrl)"
         @tap="sheep.$router.go(item.url)"
       >
         <template v-slot:active-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIcon)"></image>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
         </template>
         <template v-slot:inactive-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.inactiveIcon)"></image>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
         </template>
       </su-tabbar-item>
     </su-tabbar>
@@ -39,20 +39,22 @@
   });
 
   const tabbarStyle = computed(() => {
-    const backgroundStyle = tabbar.value.background;
+    const backgroundStyle = tabbar.value.style;
-    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
+    if (backgroundStyle.bgType === 'color') {
-    if (backgroundStyle.type == 'image')
+      return { background: backgroundStyle.bgColor };
+    }
+    if (backgroundStyle.bgType === 'img')
       return {
         background: `url(${sheep.$url.cdn(
-          backgroundStyle.bgImage,
+          backgroundStyle.bgImg,
         )}) no-repeat top center / 100% auto`,
       };
   });
 
   const getTabbarCenter = (index) => {
     if (unref(tabbar).mode !== 2) return false;
-    return unref(tabbar).list % 2 > 0
+    return unref(tabbar).items % 2 > 0
-      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
+      ? Math.ceil(unref(tabbar).items.length / 2) === index + 1
       : false;
   };
 

sheep/store/app.js

@@ -1,4 +1,5 @@
 import appApi from '@/sheep/api/app';
+import diyTemplateApi from '@/sheep/api/promotion/diy/template';
 import { defineStore } from 'pinia';
 import $platform from '@/sheep/platform';
 import $router from '@/sheep/router';
@@ -71,6 +72,17 @@ const app = defineStore({
         }
         this.chat = res.data.chat;
 
+        const diyTemplate = await diyTemplateApi.getUsedDiyTemplate();
+        if (diyTemplate?.data?.property) {
+          const templateProperty = JSON.parse(diyTemplate?.data?.property)
+          this.template.basic.tabbar = templateProperty.tabBar
+          if (templateProperty?.tabBar.theme) {
+            this.template.basic.theme = templateProperty?.tabBar.theme;
+          }
+        } else {
+          $router.error('TemplateError');
+        }
+
         // 加载主题
         const sysStore = sys();
         sysStore.setTheme();

sheep/ui/su-tabbar-item/su-tabbar-item.vue

@@ -8,7 +8,7 @@
         <image
           v-if="icon"
           :name="icon"
-          :color="isActive ? parentData.activeColor : parentData.inactiveColor"
+          :color="isActive ? parentData.activeColor : parentData.color"
           :size="20"
         ></image>
         <block v-else>
@@ -29,7 +29,7 @@
         <text
           class="u-tabbar-item__text"
           :style="{
-            color: isActive ? parentData.activeColor : parentData.inactiveColor,
+            color: isActive ? parentData.activeColor : parentData.color,
           }"
         >
           {{ text }}
@@ -120,7 +120,7 @@
         parentData: {
           value: null,
           activeColor: '',
-          inactiveColor: '',
+          color: '',
         },
         parent: {},
       };