!28 商城装修

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

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

@@ -20,7 +20,7 @@
     <!-- 图文组件：图片轮播 -->
     <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
     <!-- 基础组件：标题栏 -->
-    <s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
+    <s-title-block v-if="type === 'TitleBar'" :data="data" :styles="styles" />
     <!-- 图文组件：广告魔方 -->
     <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
     <!-- 图文组件：视频播放 -->
@@ -28,7 +28,7 @@
     <!-- 基础组件：分割线 -->
     <s-line-block v-if="type === 'Divider'" :data="data" />
     <!-- 图文组件：热区 -->
-    <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
+    <s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" />
 
     <!-- 商品组件：商品卡片 -->
     <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />

sheep/components/s-float-menu/s-float-menu.vue

@@ -25,19 +25,7 @@
   const props = defineProps({
     data: {
       type: Object,
-      default() {
+      default() {},
-        return {
-          // horizontal vertical
-          direction: 'vertical',
-          showText: true,
-          list: [{
-            imgUrl: 'http://localhost/logo.gif',
-            url: '',
-            text: '客服',
-            textColor: '',
-          }],
-        }
-      },
     }
   })
 

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

@@ -1,16 +1,16 @@
 <template>
   <view class="hotzone-wrap">
-    <image :src="sheep.$url.cdn(data.src)" style="width: 100%" mode="widthFix"></image>
+    <image :src="sheep.$url.cdn(data.imgUrl)" style="width: 100%" mode="widthFix"></image>
     <view
       class="hotzone-box"
-      v-for="item in data.list"
+      v-for="(item, index) in data.list"
-      :key="item.width"
+      :key="index"
       :style="[
         {
-          top: item.top + 'rpx',
+          top: `${item.top}px`,
-          left: item.left + 'rpx',
+          left: `${item.left}px`,
-          width: item.width + 'rpx',
+          width: `${item.width}px`,
-          height: item.height + 'rpx',
+          height: `${item.height}px`,
         },
       ]"
       @tap.stop="sheep.$router.go(item.url)"

sheep/components/s-menu-button/s-menu-button.vue

@@ -197,7 +197,7 @@
     },
     iconSize: {
       type: Number,
-      default: 96,
+      default: 80,
     },
     color: {
       type: String,
@@ -264,13 +264,13 @@
 
     .menu-icon {
       transform: translate(0, 0);
-      width: 98rpx;
+      width: 80rpx;
-      height: 98rpx;
+      height: 80rpx;
       padding-bottom: 10rpx;
     }
 
     .menu-title {
-      font-size: 30rpx;
+      font-size: 24rpx;
       color: #333;
     }
   }

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

@@ -32,7 +32,7 @@
 <style lang="scss" scoped>
   .notice-wrap {
     .icon-img {
-      height: 60rpx;
+      height: 56rpx;
     }
   }
 </style>

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

@@ -2,36 +2,29 @@
 <template>
   <view
     class="ss-title-wrap ss-flex ss-col-center"
-    :class="[state.typeMap[data.location]]"
+    :class="[state.typeMap[data.textAlign]]"
     :style="[elStyles]"
   >
     <view class="title-content">
-      <view v-if="data.title.text" class="title-text" :style="[titleStyles]">{{
+      <!-- 主标题 -->
-        data.title.text
+      <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
-      }}</view>
+      <!-- 副标题 -->
-      <view v-if="data.subtitle.text" :style="[subtitleStyles]" class="sub-title-text">
+      <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
-        {{ data.subtitle.text }}
-      </view>
     </view>
-    <view v-if="data.more.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)">
+    <!-- 查看更多 -->
-      <view class="more-text">查看更多</view>
+    <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
-      <text class="_icon-forward"></text>
+          :style="{color: data.descriptionColor}">
+      <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
+      <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
     </view>
   </view>
 </template>
 
 <script setup>
   /**
-   *
    * 标题栏
-   *
-   * @property {String} title 				- 标题
-   * @property {String} subTitle 				- 副标题
-   * @property {Number} height 				- 高度
-   * @property {String} Type = [left | right | center | between]					- 样式
-   *
    */
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import sheep from '@/sheep';
 
   // 数据
@@ -52,35 +45,28 @@
       type: Object,
       default() {},
     },
-    height: {
-      type: Number,
-      default: 100,
-    },
   });
 
   // 组件样式
   const elStyles = {
-    background: `url(${sheep.$url.cdn(props.data.src)}) no-repeat top center / 100% auto`,
+    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
-    height: props.styles.height + 'px',
+    fontSize: `${props.data.titleSize}px`,
-    fontStyle: props.data.title.other.includes('italic') ? 'italic' : 'normal',
+    fontWeight: `${props.data.titleWeight}px`,
-    fontWeight: props.data.title.other.includes('bold') ? 'bold' : '',
   };
 
   // 标题样式
   const titleStyles = {
-    color: props.data.title.color,
+    color: props.data.titleColor,
-    fontSize: props.data.title.textFontSize + 'px',
+    fontSize: `${props.data.titleSize}px`,
-    textAlign: props.data.location,
+    textAlign: props.data.textAlign
-    marginLeft: props.data.skew + 'px',
   };
 
   // 副标题
-  const subtitleStyles = {
+  const descStyles = {
-    color: props.data.subtitle.color,
+    color: props.data.descriptionColor,
-    fontSize: props.data.subtitle.textFontSize + 'px',
+    textAlign: props.data.textAlign,
-    textAlign: props.data.location,
+    fontSize: `${props.data.descriptionSize}px`,
-    fontStyle: props.data.subtitle.other.includes('italic') ? 'italic' : 'normal',
+    fontWeight: `${props.data.descriptionWeight}px`,
-    fontWeight: props.data.subtitle.other.includes('bold') ? 'bold' : '',
   };
 </script>