project init & fix ui

miniprogram_npm/tdesign-miniprogram/grid/grid-item.wxml

@@ -0,0 +1,74 @@
+<import src="../common/template/image.wxml" />
+<import src="../common/template/icon.wxml" />
+<wxs module="util">
+  module.exports.getImageSize = function(column) { if (column >= 5) return 'small'; if (column == 4) return 'middle';
+  return 'large'; }
+</wxs>
+<wxs module="_" src="../common/utils.wxs" />
+
+<view
+  class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} {{prefix}}-class"
+  style="{{ gridItemStyle }}"
+  hover-class="{{hover ? classPrefix + '--hover':''}}"
+  hover-stay-time="{{200}}"
+  bindtap="onClick"
+  aria-role="{{ariaRole || 'button'}}"
+  aria-labelledby="{{labelID}}"
+>
+  <view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}">
+    <view
+      class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content"
+      style="{{gridItemContentStyle}}"
+    >
+      <slot />
+      <t-badge
+        wx:if="{{image || icon}}"
+        color="{{badgeProps.color}}"
+        content="{{badgeProps.content}}"
+        count="{{badgeProps.count}}"
+        dot="{{badgeProps.dot}}"
+        max-count="{{badgeProps.maxCount || 99}}"
+        offset="{{badgeProps.offset}}"
+        shape="{{badgeProps.shape || 'circle'}}"
+        show-zero="{{badgeProps.showZero}}"
+        size="{{badgeProps.size || 'medium'}}"
+        t-class="{{badgeProps.tClass}}"
+        t-class-content="{{badgeProps.tClassContent}}"
+        t-class-count="{{badgeProps.tClassCount}}"
+      >
+        <view
+          class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"
+        >
+          <block wx:if="{{image && image !== 'slot'}}">
+            <template
+              is="image"
+              data="{{ src: image, shape: 'round', mode: 'widthFix', tClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]), ...imageProps }}"
+            />
+          </block>
+          <slot wx:else name="image" />
+          <template
+            wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
+            is="icon"
+            data="{{class: classPrefix + '__icon', name: iconName, ...iconData}}"
+          />
+        </view>
+      </t-badge>
+      <view class="{{_.cls(classPrefix + '__words', [layout])}}" id="{{labelID}}">
+        <view
+          wx:if="{{text && text !== 'slot'}}"
+          class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text"
+        >
+          {{text}}
+        </view>
+        <slot wx:else name="text" class="{{prefix}}-class-text" />
+        <view
+          wx:if="{{description && description!== 'slot'}}"
+          class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description"
+        >
+          {{description}}
+        </view>
+        <slot wx:else name="description" class="{{prefix}}-class-description" />
+      </view>
+    </view>
+  </view>
+</view>