init

miniprogram/components/empty-state/index.js

@@ -0,0 +1,35 @@
+Component({
+  properties: {
+    // 图标名称
+    icon: {
+      type: String,
+      value: 'shop'
+    },
+    // 标题
+    title: {
+      type: String,
+      value: '暂无商品'
+    },
+    // 描述文字
+    description: {
+      type: String,
+      value: ''
+    },
+    // 是否显示操作按钮
+    showAction: {
+      type: Boolean,
+      value: false
+    },
+    // 操作按钮文字
+    actionText: {
+      type: String,
+      value: '刷新'
+    }
+  },
+
+  methods: {
+    onActionTap() {
+      this.triggerEvent('action');
+    }
+  }
+});

miniprogram/components/empty-state/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

miniprogram/components/empty-state/index.wxml

@@ -0,0 +1,16 @@
+<view class="empty-state wr-class">
+  <view class="empty-state__icon">
+    <t-icon name="{{icon || 'shop'}}" size="120rpx" color="#ddd" />
+  </view>
+  <view class="empty-state__title">{{title || '暂无商品'}}</view>
+  <view class="empty-state__description" wx:if="{{description}}">{{description}}</view>
+  <view class="empty-state__action" wx:if="{{showAction}}">
+    <t-button 
+      variant="outline" 
+      size="medium" 
+      bind:tap="onActionTap"
+    >
+      {{actionText || '刷新'}}
+    </t-button>
+  </view>
+</view>

miniprogram/components/empty-state/index.wxss

@@ -0,0 +1,32 @@
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 40rpx;
+  text-align: center;
+  min-height: 400rpx;
+}
+
+.empty-state__icon {
+  margin-bottom: 32rpx;
+}
+
+.empty-state__title {
+  font-size: 32rpx;
+  color: #999;
+  margin-bottom: 16rpx;
+  font-weight: 500;
+}
+
+.empty-state__description {
+  font-size: 28rpx;
+  color: #bbb;
+  line-height: 1.5;
+  margin-bottom: 40rpx;
+  max-width: 400rpx;
+}
+
+.empty-state__action {
+  margin-top: 20rpx;
+}