1

components/empty/empty.js

@@ -0,0 +1,31 @@
+// components/empty/empty.js
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    icon: {
+      type: String,
+      value: '📭'
+    },
+    text: {
+      type: String,
+      value: '暂无数据'
+    },
+    desc: {
+      type: String,
+      value: ''
+    },
+    buttonText: {
+      type: String,
+      value: ''
+    }
+  },
+
+  methods: {
+    onButtonClick() {
+      this.triggerEvent('buttonclick')
+    }
+  }
+})

components/empty/empty.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/empty/empty.wxml

@@ -0,0 +1,11 @@
+<!--components/empty/empty.wxml-->
+<view class="empty-container" wx:if="{{show}}">
+  <view class="empty-image">
+    <text class="empty-icon">{{icon}}</text>
+  </view>
+  <view class="empty-text">{{text}}</view>
+  <view class="empty-desc" wx:if="{{desc}}">{{desc}}</view>
+  <button class="empty-button" wx:if="{{buttonText}}" bindtap="onButtonClick">
+    {{buttonText}}
+  </button>
+</view>

components/empty/empty.wxss

@@ -0,0 +1,42 @@
+/* components/empty/empty.wxss */
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 60rpx;
+  min-height: 400rpx;
+}
+
+.empty-image {
+  margin-bottom: 30rpx;
+}
+
+.empty-icon {
+  font-size: 120rpx;
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 32rpx;
+  color: #666666;
+  margin-bottom: 15rpx;
+  font-weight: 500;
+}
+
+.empty-desc {
+  font-size: 26rpx;
+  color: #999999;
+  text-align: center;
+  line-height: 1.6;
+  margin-bottom: 30rpx;
+}
+
+.empty-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  border: none;
+  padding: 20rpx 60rpx;
+  border-radius: 50rpx;
+  font-size: 28rpx;
+}

components/loading/loading.js

@@ -0,0 +1,25 @@
+// components/loading/loading.js
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    type: {
+      type: String,
+      value: 'spinner' // skeleton, spinner, progress
+    },
+    text: {
+      type: String,
+      value: '加载中...'
+    },
+    mask: {
+      type: Boolean,
+      value: true
+    },
+    progress: {
+      type: Number,
+      value: 0
+    }
+  }
+})

components/loading/loading.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/loading/loading.wxml

@@ -0,0 +1,27 @@
+<!--components/loading/loading.wxml-->
+<view class="loading-container" wx:if="{{show}}">
+  <view class="loading-mask" wx:if="{{mask}}"></view>
+  <view class="loading-content">
+    <!-- 骨架屏模式 -->
+    <view class="skeleton" wx:if="{{type === 'skeleton'}}">
+      <view class="skeleton-avatar"></view>
+      <view class="skeleton-lines">
+        <view class="skeleton-line" wx:for="{{[1,2,3]}}" wx:key="index"></view>
+      </view>
+    </view>
+
+    <!-- 加载动画模式 -->
+    <view class="loading-spinner" wx:if="{{type === 'spinner'}}">
+      <view class="spinner"></view>
+      <text class="loading-text" wx:if="{{text}}">{{text}}</text>
+    </view>
+
+    <!-- 进度条模式 -->
+    <view class="loading-progress" wx:if="{{type === 'progress'}}">
+      <view class="progress-bar">
+        <view class="progress-fill" style="width: {{progress}}%"></view>
+      </view>
+      <text class="progress-text">{{progress}}%</text>
+    </view>
+  </view>
+</view>

components/loading/loading.wxss

@@ -0,0 +1,137 @@
+/* components/loading/loading.wxss */
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.loading-content {
+  position: relative;
+  z-index: 10000;
+}
+
+/* 骨架屏 */
+.skeleton {
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 30rpx;
+  width: 600rpx;
+}
+
+.skeleton-avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-lines {
+  margin-top: 20rpx;
+}
+
+.skeleton-line {
+  height: 30rpx;
+  margin-bottom: 15rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-line:nth-child(1) {
+  width: 100%;
+}
+
+.skeleton-line:nth-child(2) {
+  width: 80%;
+}
+
+.skeleton-line:nth-child(3) {
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 加载动画 */
+.loading-spinner {
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 12rpx;
+  padding: 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  margin-top: 20rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+/* 进度条 */
+.loading-progress {
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 40rpx;
+  width: 500rpx;
+}
+
+.progress-bar {
+  height: 8rpx;
+  background-color: #E0E0E0;
+  border-radius: 4rpx;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(to right, #667eea, #764ba2);
+  transition: width 0.3s;
+}
+
+.progress-text {
+  display: block;
+  text-align: center;
+  margin-top: 20rpx;
+  color: #666666;
+  font-size: 28rpx;
+}