营销：装修页面适配搜索框

pages/index/index.vue

@@ -2,7 +2,7 @@
 	<view v-if="template">
 		<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.components" :key="index" :styles="item.style">
+			<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
 				<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
 			</s-block>
 			<!-- 广告模块 -->

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

@@ -6,7 +6,7 @@
     <s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
 
     <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
-    <s-search-block v-if="type === 'searchBlock'" :data="data" :navbar="false" />
+    <s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :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-block/s-block.vue

@@ -20,12 +20,12 @@
 
   const elBackground = computed(() => {
     if (props.styles) {
-      if (props.styles.background.type == 'color')
-        return { background: props.styles.background.bgColor };
-      if (props.styles.background.type == 'image')
+      if (props.styles.bgType === 'color')
+        return { background: props.styles.bgColor };
+      if (props.styles.bgType === 'img')
         return {
           background: `url(${sheep.$url.cdn(
-            props.styles.background.bgImage,
+            props.styles.bgImage,
           )}) no-repeat top center / 100% auto`,
         };
     }
@@ -34,15 +34,18 @@
   const elStyles = computed(() => {
     if (props.styles) {
       return {
-        marginTop: `${props.styles.marginTop}px`,
-        marginBottom: props.styles.marginBottom + 'px',
-        marginLeft: `${props.styles.marginLeft}px`,
-        marginRight: props.styles.marginRight + 'px',
-        'border-top-left-radius': props.styles.borderRadiusTop + 'px',
-        'border-top-right-radius': props.styles.borderRadiusTop + 'px',
-        'border-bottom-left-radius': props.styles.borderRadiusBottom + 'px',
-        'border-bottom-right-radius': props.styles.borderRadiusBottom + 'px',
-        padding: props.styles.padding + 'px',
+        marginTop: `${props.styles.marginTop || 0}px`,
+        marginBottom: `${props.styles.marginBottom || 0}px`,
+        marginLeft: `${props.styles.marginLeft || 0}px`,
+        marginRight: `${props.styles.marginRight || 0}px`,
+        paddingTop: `${props.styles.paddingTop || 0}px`,
+        paddingRight: `${props.styles.paddingRight || 0}px`,
+        paddingBottom: `${props.styles.paddingBottom || 0}px`,
+        paddingLeft: `${props.styles.paddingLeft || 0}px`,
+        borderTopLeftRadius: `${props.styles.borderTopLeftRadius || 0}px`,
+        borderTopRightRadius: `${props.styles.borderTopRightRadius || 0}px`,
+        borderBottomRightRadius: `${props.styles.borderBottomRightRadius || 0}px`,
+        borderBottomLeftRadius: `${props.styles.borderBottomLeftRadius || 0}px`,
         overflow: 'hidden',
       };
     }

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

@@ -29,24 +29,23 @@
       v-model="state.searchVal"
     />
     <view class="keyword-link ss-flex">
-      <view v-for="(item, index) in data.keywords" :key="index">
+      <view v-for="(item, index) in data.hotKeywords" :key="index">
         <view
           class="ss-m-r-16"
-          :style="[{ color: item.color }]"
-          @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
-          >{{ item.text }}</view
+          :style="[{ color: data.textColor }]"
+          @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
+          >{{ item }}</view
         >
       </view>
     </view>
-
-    <view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
+    <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
       <button
         class="ss-reset-button keyword-btn"
-        v-for="(item, index) in data.keywords"
+        v-for="(item, index) in data.hotKeywords"
         :key="index"
-        :style="[{ color: item.color, marginRight: '10rpx' }]"
+        :style="[{ color: data.textColor, marginRight: '10rpx' }]"
       >
-        {{ item.text }}
+        {{ item }}
       </button>
     </view>
   </view>