a

wanandroid/uniapp/components/common/empty-state.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="empty-container">
+    <view class="empty-icon">
+      <image 
+        v-if="icon" 
+        :src="icon" 
+        mode="aspectFit" 
+        class="icon-image"
+      />
+      <text v-else class="icon-text">{{ defaultIcon }}</text>
+    </view>
+    <text class="empty-title">{{ title }}</text>
+    <text class="empty-description" v-if="description">{{ description }}</text>
+    <view class="empty-action" v-if="showAction">
+      <button 
+        class="action-button" 
+        @click="handleAction"
+        :type="actionType"
+        size="mini"
+      >
+        {{ actionText }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'EmptyState',
+  props: {
+    // 图标（图片路径或文字）
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 标题
+    title: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 描述
+    description: {
+      type: String,
+      default: ''
+    },
+    // 是否显示操作按钮
+    showAction: {
+      type: Boolean,
+      default: false
+    },
+    // 操作按钮文本
+    actionText: {
+      type: String,
+      default: '刷新'
+    },
+    // 操作按钮类型
+    actionType: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  data() {
+    return {
+      defaultIcon: '📭'
+    }
+  },
+  methods: {
+    handleAction() {
+      this.$emit('action')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 40rpx;
+  font-size: 120rpx;
+  color: #ccc;
+}
+
+.icon-image {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.icon-text {
+  font-size: 120rpx;
+  line-height: 1;
+}
+
+.empty-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.empty-description {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 40rpx;
+  max-width: 500rpx;
+}
+
+.empty-action {
+  margin-top: 20rpx;
+}
+
+.action-button {
+  min-width: 200rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border-radius: 35rpx;
+  font-size: 28rpx;
+}
+
+.action-button[type="primary"] {
+  background-color: #3cc51f;
+  color: #fff;
+}
+
+.action-button[type="default"] {
+  background-color: #f8f8f8;
+  color: #333;
+  border: 1rpx solid #e5e5e5;
+}
+</style>

wanandroid/uniapp/components/common/loading.vue

@@ -0,0 +1,99 @@
+<template>
+  <view class="loading-container" v-if="visible">
+    <view class="loading-content">
+      <view class="loading-spinner">
+        <view class="spinner"></view>
+      </view>
+      <text class="loading-text">{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CommonLoading',
+  props: {
+    // 是否显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 加载文本
+    text: {
+      type: String,
+      default: '加载中...'
+    },
+    // 背景是否透明
+    transparent: {
+      type: Boolean,
+      default: false
+    },
+    // 是否全屏
+    fullscreen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.loading-container.transparent {
+  background-color: transparent;
+}
+
+.loading-container.fullscreen {
+  position: fixed;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40rpx;
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
+}
+
+.loading-spinner {
+  margin-bottom: 20rpx;
+}
+
+.spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 6rpx solid #f3f3f3;
+  border-top: 6rpx solid #3cc51f;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #666;
+  text-align: center;
+}
+</style>