!14 商城装修

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

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

@@ -1,34 +1,57 @@
 <template>
   <view>
+    <!-- 基础组件：搜索框 -->
+    <s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
+    <!-- 基础组件：公告栏 -->
+    <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
+    <!-- 基础组件：菜单导航 -->
+    <s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
+    <!-- 基础组件：列表导航 -->
+    <s-menu-list v-if="type === 'MenuList'" :data="data" />
+    <!-- 基础组件：宫格导航 -->
+    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
+
+    <!-- 图文组件：图片展示 -->
     <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
+    <!-- 图文组件：图片轮播 -->
     <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
-    <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 === 'NoticeBar'" :data="data" />
-    <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-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
+    <!-- 图文组件：视频播放 -->
+    <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
+    <!-- 基础组件：辅助线 -->
     <s-line-block v-if="type === 'lineBlock'" :data="data" />
+    <!-- 图文组件：富文字 -->
+    <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
+    <!-- 图文组件：热区 -->
+    <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
 
-    <s-menu-button v-if="type === 'menuButton'" :data="data" :styles="styles" />
-    <s-menu-list v-if="type === 'menuList'" :data="data" />
-    <s-menu-grid v-if="type === 'menuGrid'" :data="data" />
+    <!-- 商品组件：商品卡片 -->
+    <s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
+    <!-- 商品组件：商品栏 -->
+    <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
+
+    <!-- 营销组件：拼团 -->
+    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
+    <!-- 营销组件：秒杀 -->
+    <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles" />
+    <!-- 营销组件：积分商城 -->
+    <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
+    <!-- 营销组件：小程序直播 -->
+    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
+    <!-- 营销组件：优惠券 -->
+    <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles" />
 
+    <!-- 会员组件：会员卡片 -->
     <s-user-card v-if="type === 'userCard'" />
-    <s-wallet-card v-if="type === 'walletCard'" />
+    <!-- 会员组件：订单卡片 -->
     <s-order-card v-if="type === 'orderCard'" :data="data" />
-
+    <!-- 会员组件：资产卡片 -->
+    <s-wallet-card v-if="type === 'walletCard'" />
+    <!-- 会员组件：卡券卡片 -->
     <s-coupon-card v-if="type === 'couponCard'" />
-    <s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
-    <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
-    <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
-    <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles"></s-coupon-block>
-    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles"></s-live-block>
-    <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles"></s-seckill-block>
-    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles"></s-groupon-block>
-    <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles"></s-richtext-block>
-    <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles"></s-hotzone-block>
-
   </view>
 </template>
 

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

@@ -21,12 +21,12 @@
         :class="{ cur: state.cur == index }"
       >
         <!-- 宫格 -->
-        <view class="grid-wrap" :col="data.rowNum">
+        <view class="grid-wrap">
           <view
             v-for="(item, index) in arr"
             :key="index"
             class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-            :style="[{ width: clWidth + 'px', height: '200rpx' }]"
+            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
             hover-class="ss-hover-btn"
             @tap="sheep.$router.go(item.url)"
           >
@@ -34,12 +34,12 @@
               <view
                 v-if="item.badge.show"
                 class="tag-box"
-                :style="[{ background: item.badge.bgColor, color: item.badge.color }]"
+                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
               >
                 {{ item.badge.text }}
               </view>
               <image
-                v-if="item.src"
+                v-if="item.iconUrl"
                 class="menu-icon"
                 :style="[
                   {
@@ -47,15 +47,15 @@
                     height: props.iconSize + 'rpx',
                   },
                 ]"
-                :src="sheep.$url.cdn(item.src)"
+                :src="sheep.$url.cdn(item.iconUrl)"
                 mode="aspectFill"
               ></image>
               <view
-                v-if="data.layout == 1"
+                v-if="data.layout === 'iconText'"
                 class="menu-title"
-                :style="[{ color: item.title.color }]"
+                :style="[{ color: item.titleColor }]"
               >
-                {{ item.title.text }}
+                {{ item.title }}
               </view>
             </view>
           </view>
@@ -206,15 +206,9 @@
   });
 
   // 生成数据
-  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.col));
-  const swiperHeight = computed(() => props.data.row * (props.data.layout == 1 ? 200 : 180));
+  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+  const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
   const windowWidth = sheep.$platform.device.windowWidth;
-  const clWidth = computed(
-    () =>
-      (windowWidth -
-        (props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) /
-      props.data.col,
-  );
 
   // current 改变时会触发 change 事件
   const swiperChange = (e) => {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-grid :showBorder="Boolean(data.border)" :column="data.col">
+  <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
     <uni-grid-item
       v-for="(item, index) in data.list"
       :key="index"
@@ -10,19 +10,19 @@
           <view
             class="tag-box"
             v-if="item.badge.show"
-            :style="[{ background: item.badge.bgColor, color: item.badge.color }]"
+            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
           >
             {{ item.badge.text }}
           </view>
-          <image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
+          <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
         </view>
 
         <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
-          <view class="grid-text" :style="[{ color: item.title.color }]">
-            {{ item.title.text }}
+          <view class="grid-text" :style="[{ color: item.titleColor }]">
+            {{ item.title }}
           </view>
-          <view class="grid-tip" :style="[{ color: item.tip.color }]">
-            {{ item.tip.text }}
+          <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+            {{ item.subtitle }}
           </view>
         </view>
       </view>

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

@@ -11,25 +11,25 @@
         <template v-slot:header>
           <view class="ss-flex ss-col-center">
             <image
-              v-if="item.src"
+              v-if="item.iconUrl"
               class="list-icon"
-              :src="sheep.$url.cdn(item.src)"
+              :src="sheep.$url.cdn(item.iconUrl)"
               mode="aspectFit"
             ></image>
             <view
               class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
-              :style="[{ color: item.title.color }]"
+              :style="[{ color: item.titleColor }]"
             >
-              {{ item.title.text }}
+              {{ item.title }}
             </view>
           </view>
         </template>
         <template v-slot:footer>
           <view
             class="notice-text ss-flex ss-row-center ss-col-center"
-            :style="[{ color: item.tip.color }]"
+            :style="[{ color: item.subtitleColor }]"
           >
-            {{ item.tip.text }}
+            {{ item.subtitle }}
           </view>
         </template>
       </uni-list-item>