uni-app 求历史联系人组件

在Uni-app中实现一个历史联系人组件，你可以利用Vue.js的组件化开发模式，结合Uni-app的跨平台特性，来创建一个可复用的历史联系人组件。下面是一个简单的代码示例，包括组件的模板、脚本和样式部分。

1. 创建组件文件 HistoryContacts.vue

<template>
  <view class="history-contacts">
    <view class="contact-list">
      <view v-for="(contact, index) in contacts" :key="index" class="contact-item">
        <image :src="contact.avatar" class="contact-avatar"></image>
        <view class="contact-info">
          <text class="contact-name">{{ contact.name }}</text>
          <text class="contact-last-contact">{{ formatLastContact(contact.lastContact) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        { name: 'Alice', avatar: 'path/to/avatar1.png', lastContact: '2023-10-01T12:00:00' },
        { name: 'Bob', avatar: 'path/to/avatar2.png', lastContact: '2023-09-25T15:30:00' },
        // 更多联系人数据...
      ]
    };
  },
  methods: {
    formatLastContact(date) {
      const d = new Date(date);
      return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`;
    }
  }
};
</script>

<style scoped>
.history-contacts {
  padding: 20px;
}
.contact-list {
  display: flex;
  flex-wrap: wrap;
}
.contact-item {
  margin: 10px;
  width: calc(50% - 20px);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.contact-avatar {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.contact-info {
  padding: 10px;
}
.contact-name {
  font-size: 18px;
  font-weight: bold;
}
.contact-last-contact {
  font-size: 14px;
  color: #888;
}
</style>

2. 使用组件

在需要使用这个历史联系人组件的页面中，你可以通过import语句引入并使用它。例如，在index.vue中：

<template>
  <view>
    <HistoryContacts />
  </view>
</template>

<script>
import HistoryContacts from '@/components/HistoryContacts.vue';

export default {
  components: {
    HistoryContacts
  }
};
</script>

这个示例展示了如何创建一个简单的历史联系人组件，并在页面中引用它。你可以根据自己的需求进一步扩展和美化这个组件，比如添加点击事件、动态加载数据等功能。