init

components/asset/assetList.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="asset-list">
+    <view
+      v-for="item in list"
+      :key="item.id"
+      class="asset-card"
+      @click="onClick(item)"
+    >
+      <image class="cover" :src="item.cover || '/static/images/default-cover.png'" mode="aspectFill" />
+
+      <view class="info">
+        <text class="name">{{ item.name }}</text>
+        <text class="address">{{ item.address }}</text>
+        <text class="status">{{ item.statusText }}</text>
+      </view>
+
+      <u-icon name="arrow-right" size="28" color="#999" class="arrow" />
+    </view>
+
+    <u-loadmore v-if="showLoadmore" :status="loadStatus" />
+    <u-empty v-else-if="list.length === 0" mode="list" text="暂无资产数据" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "AssetList",
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    showLoadmore: {
+      type: Boolean,
+      default: true,
+    },
+    loadStatus: {
+      type: String,
+      default: "loadmore",
+    },
+  },
+  emits: ["click"],
+  methods: {
+    onClick(item) {
+      this.$emit("click", item);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.asset-list {
+  padding: 20rpx;
+}
+
+.asset-card {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  border-radius: 16rpx;
+  position: relative;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  .cover {
+    width: 160rpx;
+    height: 120rpx;
+    border-radius: 12rpx;
+    margin-right: 20rpx;
+    background-color: #f0f0f0;
+  }
+
+  .info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .name {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 6rpx;
+    }
+
+    .address {
+      font-size: 24rpx;
+      color: #666;
+      margin-bottom: 4rpx;
+    }
+
+    .status {
+      font-size: 24rpx;
+      color: #409eff;
+    }
+  }
+
+  .arrow {
+    margin-left: 10rpx;
+  }
+}
+</style>