!10 商城装修

Merge pull request !10 from 疯狂的世界/master-vue3

pages/index/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<view v-if="template">
-		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
+		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
 			:navbarStyle="template.style?.navbar" onShareAppMessage>
-			<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
-				<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
+			<s-block v-for="(item, index) in template.components" :key="index" :styles="item.style">
+				<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
 			</s-block>
 			<!-- 广告模块 -->
 			<s-popup-image />
@@ -22,25 +22,10 @@
 	} from '@dcloudio/uni-app';
 	import sheep from '@/sheep';
 	import $share from '@/sheep/platform/share';
-	import index2Api from '@/sheep/api/index2';
 	// 隐藏原生tabBar
 	uni.hideTabBar();
 
 	const template = computed(() => sheep.$store('app').template?.home);
-	// 在此处拦截改变一下首页轮播图 此处先写死后期复活
-	(async function() {
-		let {
-			data
-		} = await index2Api.decorate();
-		template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
-			return {
-				src: item.picUrl,
-				url: item.url,
-				title: item.name,
-				type: "image"
-			}
-		})
-	}())
 
 	onLoad((options) => {
 		// #ifdef MP
@@ -81,4 +66,4 @@
 	onPageScroll(() => {});
 </script>
 
-<style></style>
+<style></style>

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-block-item/s-block-item.vue

@@ -5,7 +5,7 @@
     <s-video-block v-if="type === 'videoPlayer'" :data="data" :styles="styles" />
     <s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
 
-    <s-notice-block v-if="type === 'noticeBlock'" :data="data" />
+    <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
     <s-search-block v-if="type === 'searchBlock'" :data="data" :navbar="false" />
     <s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
     <s-line-block v-if="type === 'lineBlock'" :data="data" />

sheep/components/s-layout/s-layout.vue

@@ -161,8 +161,8 @@
   const bgMain = computed(() => {
     if (navbarMode.value === 'inner') {
       return {
-        background: `${props.bgStyle.color} url(${sheep.$url.cdn(
-          props.bgStyle.src,
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
         )}) no-repeat top center / 100% auto`,
       };
     }
@@ -173,8 +173,8 @@
   const bgBody = computed(() => {
     if (navbarMode.value === 'normal') {
       return {
-        background: `${props.bgStyle.color} url(${sheep.$url.cdn(
-          props.bgStyle.src,
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
         )}) no-repeat top center / 100% auto`,
       };
     }

sheep/components/s-notice-block/s-notice-block.vue

@@ -1,15 +1,16 @@
 <template>
   <view class="ss-flex ss-col-center notice-wrap">
-    <image class="icon-img" :src="sheep.$url.cdn(data.src)" mode="heightFix"></image>
+    <image class="icon-img" :src="sheep.$url.cdn(data.iconUrl)" mode="heightFix"></image>
+    <!-- todo：@owen 暂时只支持一个公告   -->
     <su-notice-bar
       style="flex: 1"
       :showIcon="false"
       scrollable
       single
-      :text="data.title.text"
+      :text="data.contents[0].text"
       :speed="50"
-      :color="data.title.color"
-      @tap="sheep.$router.go(data.url)"
+      :color="data.textColor"
+      @tap="sheep.$router.go(data.contents[0].url)"
     ></su-notice-bar>
   </view>
 </template>

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"
-      :activeColor="tabbar.activeColor"
+      :inactiveColor="tabbar.style.color"
+      :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;
-    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
-    if (backgroundStyle.type == 'image')
+    const backgroundStyle = tabbar.value.style;
+    if (backgroundStyle.bgType === 'color') {
+      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
-      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
+    return unref(tabbar).items % 2 > 0
+      ? 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,8 @@ const app = defineStore({
         }
         this.chat = res.data.chat;
 
+        await adaptTemplate(this.template);
+
         // 加载主题
         const sysStore = sys();
         sysStore.setTheme();
@@ -96,4 +99,18 @@ const app = defineStore({
   },
 });
 
+// todo: @owen 先做数据适配，后期重构
+const adaptTemplate = async (appTemplate) => {
+  const diyTemplate = await diyTemplateApi.getUsedDiyTemplate();
+  const tabBar = diyTemplate?.data?.property?.tabBar;
+  if (tabBar) {
+    appTemplate.basic.tabbar = tabBar
+    if (tabBar?.theme) {
+      appTemplate.basic.theme = tabBar?.theme;
+    }
+  }
+  appTemplate.home = diyTemplate?.data?.home;
+  // appTemplate.user = diyTemplate?.data?.user;
+}
+
 export default app;

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: {},
       };