Table of contents:
Code example:
<template>
<view class="container">
<view class="tab">
<view class="tab-item" :class="{ active: activeTab === 'nearby' }" @click="activeTab = 'nearby'">
附近的人
</view>
<view class="tab-item" :class="{ active: activeTab === 'message' }" @click="activeTab = 'message'">
消息
</view>
<view class="tab-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
我的
</view>
</view>
<view class="page" v-show="activeTab === 'nearby'">
<view class="search-bar">
<input class="search-input" type="text" placeholder="搜索附近的人">
<button class="search-btn">搜索</button>
</view>
<view class="user-list">
<view class="user-item" v-for="(user, index) in nearbyUsers" :key="index">
<image class="user-avatar" :src="user.avatar"></image>
<view class="user-info">
<view class="user-name">{
{ user.name }}</view>
<view class="user-description">{
{ user.description }}</view>
</view>
<view class="btn-group">
<button class="btn btn-primary" @click="sendMsg(user)">发消息</button>
<button class="btn btn-secondary" @click="addFriend(user)">加好友</button>
</view>
</view>
</view>
</view>
<view class="page" v-show="activeTab === 'message'">
<view class="chat-list">
<view class="chat-item" v-for="(chat, index) in messageList" :key="index">
<image class="chat-avatar" :src="chat.avatar"></image>
<view class="chat-info">
<view class="chat-name">{
{ chat.name }}</view>
<view class="chat-message">{
{ chat.message }}</view>
</view>
<view class="chat-time">{
{ chat.time }}</view>
</view>
</view>
</view>
<view class="page" v-show="activeTab === 'profile'">
<view class="profile-header">
<image class="profile-avatar" src="https://cdn.pixabay.com/photo/2019/11/09/17/45/portrait-4616146_1280.jpg"></image>
<view class="profile-name">Lucy</view>
<view class="profile-description">爱好：旅游、音乐、电影</view>
</view>
<view class="profile-action">
<button class="btn btn-primary" @click="editProfile">编辑个人信息</button>
<button class="btn btn-secondary" @click="logout">退出登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activeTab: 'nearby',
nearbyUsers: [
{
id: 1,
name: 'Tom',
description: '我喜欢唱歌，跳舞，弹吉他',
avatar: 'https://cdn.pixabay.com/photo/2014/07/04/12/35/guitar-384096_1280.jpg'
},
{
id: 2,
name: 'Jerry',
description: '我喜欢看电影，旅游，游泳',
avatar: 'https://cdn.pixabay.com/photo/2016/11/29/13/07/beautiful-1869489_1280.jpg'
}
],
messageList: [
{
id: 1,
name: 'Tom',
avatar: 'https://cdn.pixabay.com/photo/2014/07/04/12/35/guitar-384096_1280.jpg',
message: '你好，我们可以交个朋友吗？',
time: '10:30'
},
{
id: 2,
name: 'Jerry',
avatar: 'https://cdn.pixabay.com/photo/2016/11/29/13/07/beautiful-1869489_1280.jpg',
message: '好的，很高兴认识你。',
time: '11:00'
}
]
};
},
methods: {
sendMsg(user) {
// 发送私信
},
addFriend(user) {
// 发送好友请求
},
editProfile() {
// 编辑个人信息
},
logout() {
// 退出登录
}
}
};
</script>
<style>
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.tab {
display: flex;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
height: 44px;
}
.tab-item {
flex: 1;
text-align: center;
line-height: 44px;
color: #999;
font-size: 16px;
}
.tab-item.active {
color: #007aff;
border-bottom: 2px solid #007aff;
}
.page {
display: none;
}
.search-bar {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-input {
flex: 1;
height: 30px;
padding: 0 10px;
border: 1px solid #e5e5e5;
border-radius: 5px;
}
.search-btn {
margin-left: 10px;
background-color: #007aff;
color: #fff;
border-radius: 5px;
padding: 5px 10px;
}
.user-list {
padding: 10px;
}
.user-item {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 10px;
}
.user-name {
font-size: 16px;
font-weight: bold;
}
.user-description {
font-size: 14px;
margin-top: 5px;
color: #999;
}
.btn-group {
margin-left: auto;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.btn-primary {
background-color: #007aff;
color: #fff;
margin-right: 10px;
}
.btn-secondary {
background-color: #e5e5e5;
color: #333;
}
.chat-item {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.chat-info {
flex: 1;
}
.chat-name {
font-size: 16px;
font-weight: bold;
}
.chat-message {
font-size: 14px;
margin-top: 5px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-time {
font-size: 12px;
color: #999;
}
.profile-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.profile-name {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.profile-description {
font-size: 14px;
margin-top: 10px;
}
.profile-action {
margin-top: 20px;
display: flex;
justify-content: center;
}
.btn-primary {
background-color: #007aff;
color: #fff;
margin-right: 10px;
}
.btn-secondary {
background-color: #e5e5e5;
color: #333;
}
</style>
The above code implements the front-end page of a simple dating applet, including three pages: nearby people, messages, and personal center. It implements functions such as searching for nearby people, sending private messages, adding friends, editing personal information, and logging out. Each page has corresponding styles and interactive effects.
The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)