aiotagro/jiebanke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Generating commit message...

Browse Source
This commit is contained in:
mapleaf
2025-08-30 14:33:49 +08:00
parent 4d469e95f0
commit 7f9bfbb381
99 changed files with 69225 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

687
mini-program/pages/index/index.vue Normal file
View File

@@ -0,0 +1,687 @@
<template>
<view class="container">
<!-- 顶部状态栏占位 -->
<view class="status-bar"></view>
<!-- 搜索栏 -->
<view class="search-bar">
<view class="search-input">
<uni-icons type="search" size="16" color="#999"></uni-icons>
<input type="text" placeholder="搜索目的地、用户、动物" placeholder-class="placeholder" @focus="navigateToSearch" />
</view>
</view>
<!-- 轮播图 -->
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
<swiper-item v-for="(item, index) in banners" :key="index" @click="navigateTo(item.link)">
<image :src="item.image" mode="aspectFill" class="banner-image" />
</swiper-item>
</swiper>
<!-- 功能入口 -->
<view class="feature-grid">
<view class="feature-item" @click="navigateTo('/pages/travel/list')">
<view class="feature-icon travel">
<uni-icons type="map" size="24" color="#007aff"></uni-icons>
</view>
<text class="feature-text">找搭子</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/animal/list')">
<view class="feature-icon animal">
<uni-icons type="heart" size="24" color="#ff2d55"></uni-icons>
</view>
<text class="feature-text">认领动物</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/flower/order')">
<view class="feature-icon flower">
<uni-icons type="flower" size="24" color="#ff9500"></uni-icons>
</view>
<text class="feature-text">送花服务</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/promotion/invite')">
<view class="feature-icon promotion">
<uni-icons type="gift" size="24" color="#34c759"></uni-icons>
</view>
<text class="feature-text">推广奖励</text>
</view>
</view>
<!-- 公告栏 -->
<view class="notice-bar">
<uni-icons type="sound" size="16" color="#ff9500"></uni-icons>
<swiper class="notice-swiper" vertical autoplay circular :interval="3000">
<swiper-item v-for="(notice, index) in notices" :key="index">
<text class="notice-text">{{notice}}</text>
</swiper-item>
</swiper>
</view>
<!-- 推荐旅行计划 -->
<view class="section">
<view class="section-header">
<text class="section-title">推荐旅行计划</text>
<text class="section-more" @click="navigateTo('/pages/travel/list')">更多</text>
</view>
<scroll-view class="plan-list" scroll-x="true" show-scrollbar="false">
<view class="plan-card" v-for="(plan, index) in travelPlans" :key="index" @click="navigateTo(`/pages/travel/detail?id=${plan.id}`)">
<image :src="plan.coverImage" mode="aspectFill" class="plan-image" />
<view class="plan-info">
<text class="plan-destination">{{ plan.destination }}</text>
<text class="plan-date">{{ plan.startDate }} - {{ plan.endDate }}</text>
<view class="plan-meta">
<text class="plan-budget">¥{{ plan.budget }}</text>
<text class="plan-members">{{ plan.currentMembers }}/{{ plan.maxMembers }}人</text>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 热门动物 -->
<view class="section">
<view class="section-header">
<text class="section-title">热门动物</text>
<text class="section-more" @click="navigateTo('/pages/animal/list')">更多</text>
</view>
<view class="animal-grid">
<view class="animal-card" v-for="(animal, index) in animals" :key="index" @click="navigateTo(`/pages/animal/detail?id=${animal.id}`)">
<image :src="animal.image" mode="aspectFill" class="animal-image" />
<view class="animal-tag" v-if="animal.isHot">热门</view>
<view class="animal-info">
<text class="animal-name">{{ animal.name }}</text>
<text class="animal-species">{{ animal.species }}</text>
<text class="animal-price">¥{{ animal.price }}</text>
</view>
</view>
</view>
</view>
<!-- 送花服务 -->
<view class="section">
<view class="section-header">
<text class="section-title">精选花束</text>
<text class="section-more" @click="navigateTo('/pages/flower/list')">更多</text>
</view>
<scroll-view class="flower-list" scroll-x="true" show-scrollbar="false">
<view class="flower-card" v-for="(flower, index) in flowers" :key="index" @click="navigateTo(`/pages/flower/detail?id=${flower.id}`)">
<image :src="flower.image" mode="aspectFill" class="flower-image" />
<view class="flower-info">
<text class="flower-name">{{ flower.name }}</text>
<text class="flower-desc">{{ flower.description }}</text>
<text class="flower-price">¥{{ flower.price }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 底部导航栏 -->
<view class="tab-bar">
<view class="tab-item active">
<uni-icons type="home" size="24" color="#007aff"></uni-icons>
<text class="tab-text">首页</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/discover/index')">
<uni-icons type="compass" size="24" color="#999"></uni-icons>
<text class="tab-text">发现</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/message/index')">
<uni-icons type="chat" size="24" color="#999"></uni-icons>
<text class="tab-text">消息</text>
<view class="badge" v-if="unreadCount > 0">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
</view>
<view class="tab-item" @click="navigateTo('/pages/user/center')">
<uni-icons type="person" size="24" color="#999"></uni-icons>
<text class="tab-text">我的</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
banners: [
{ image: '/static/banners/banner1.jpg', link: '/pages/travel/list' },
{ image: '/static/banners/banner2.jpg', link: '/pages/animal/list' },
{ image: '/static/banners/banner3.jpg', link: '/pages/flower/list' }
],
notices: [
'欢迎来到结伴客，找到志同道合的旅伴！',
'新用户注册即送50积分，可兑换精美礼品',
'推荐好友加入，双方各得30积分奖励'
],
travelPlans: [
{
id: 1,
destination: '西藏拉萨',
startDate: '10月1日',
endDate: '10月7日',
budget: 5000,
currentMembers: 3,
maxMembers: 6,
coverImage: '/static/travel/tibet.jpg'
},
{
id: 2,
destination: '云南大理',
startDate: '10月5日',
endDate: '10月12日',
budget: 3500,
currentMembers: 2,
maxMembers: 4,
coverImage: '/static/travel/yunnan.jpg'
},
{
id: 3,
destination: '新疆喀什',
startDate: '10月10日',
endDate: '10月20日',
budget: 6000,
currentMembers: 4,
maxMembers: 8,
coverImage: '/static/travel/xinjiang.jpg'
},
{
id: 4,
destination: '青海湖',
startDate: '10月15日',
endDate: '10月20日',
budget: 4000,
currentMembers: 2,
maxMembers: 5,
coverImage: '/static/travel/qinghai.jpg'
}
],
animals: [
{
id: 1,
name: '小羊驼',
species: '羊驼',
price: 1000,
isHot: true,
image: '/static/animals/alpaca.jpg'
},
{
id: 2,
name: '小绵羊',
species: '绵羊',
price: 800,
isHot: false,
image: '/static/animals/sheep.jpg'
},
{
id: 3,
name: '小花猪',
species: '猪',
price: 600,
isHot: true,
image: '/static/animals/pig.jpg'
},
{
id: 4,
name: '小公鸡',
species: '鸡',
price: 300,
isHot: false,
image: '/static/animals/chicken.jpg'
}
],
flowers: [
{
id: 1,
name: '浪漫玫瑰',
description: '11朵红玫瑰',
price: 199,
image: '/static/flowers/rose.jpg'
},
{
id: 2,
name: '向日葵花束',
description: '9朵向日葵',
price: 179,
image: '/static/flowers/sunflower.jpg'
},
{
id: 3,
name: '百合花束',
description: '7朵白百合',
price: 229,
image: '/static/flowers/lily.jpg'
}
],
unreadCount: 5
}
},
onLoad() {
// 获取系统信息设置状态栏高度
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
// 加载数据
this.loadData();
},
methods: {
loadData() {
// 实际开发中，这里应该从API获取数据
console.log('加载首页数据');
},
navigateTo(url) {
uni.navigateTo({
url: url
});
},
navigateToSearch() {
uni.navigateTo({
url: '/pages/search/index'
});
}
}
}
</script>
<style>
/* 移除图标字体相关样式 */
/* 页面样式 */
.container {
min-height: 100vh;
background-color: #f8f9fa;
padding-bottom: 100rpx; /* 为底部导航留出空间 */
}
.status-bar {
height: var(--status-bar-height);
width: 100%;
}
.search-bar {
padding: 20rpx 30rpx;
background-color: #ffffff;
}
.search-input {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 50rpx;
padding: 15rpx 30rpx;
}
.search-input .iconfont {
font-size: 32rpx;
color: #999;
margin-right: 10rpx;
}
.search-input input {
flex: 1;
font-size: 28rpx;
}
.placeholder {
color: #999;
}
.banner-swiper {
height: 300rpx;
margin: 0 30rpx 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
.banner-image {
width: 100%;
height: 100%;
}
.feature-grid {
display: flex;
justify-content: space-around;
padding: 20rpx 30rpx 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
}
.feature-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15rpx;
}
.feature-icon .iconfont {
font-size: 50rpx;
}
.feature-icon.travel {
background-color: rgba(0, 122, 255, 0.1);
}
.feature-icon.travel .iconfont {
color: #007aff;
}
.feature-icon.animal {
background-color: rgba(255, 45, 85, 0.1);
}
.feature-icon.animal .iconfont {
color: #ff2d55;
}
.feature-icon.flower {
background-color: rgba(255, 149, 0, 0.1);
}
.feature-icon.flower .iconfont {
color: #ff9500;
}
.feature-icon.promotion {
background-color: rgba(52, 199, 89, 0.1);
}
.feature-icon.promotion .iconfont {
color: #34c759;
}
.feature-text {
font-size: 24rpx;
color: #333;
}
.notice-bar {
display: flex;
align-items: center;
background-color: #fff8e6;
padding: 15rpx 30rpx;
margin: 0 30rpx 20rpx;
border-radius: 10rpx;
}
.notice-bar .iconfont {
font-size: 32rpx;
color: #ff9500;
margin-right: 15rpx;
}
.notice-swiper {
height: 40rpx;
flex: 1;
}
.notice-text {
font-size: 24rpx;
color: #ff9500;
line-height: 40rpx;
}
.section {
margin-bottom: 30rpx;
background-color: #ffffff;
padding: 30rpx 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
position: relative;
padding-left: 20rpx;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 30rpx;
background-color: #007aff;
border-radius: 4rpx;
}
.section-more {
font-size: 24rpx;
color: #999;
}
.plan-list {
white-space: nowrap;
padding: 0 30rpx;
}
.plan-card {
display: inline-block;
width: 300rpx;
margin-right: 20rpx;
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.plan-image {
width: 100%;
height: 180rpx;
}
.plan-info {
padding: 15rpx;
}
.plan-destination {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plan-date {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.plan-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.plan-budget {
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.plan-members {
font-size: 22rpx;
color: #999;
}
.animal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
padding: 0 30rpx;
}
.animal-card {
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
position: relative;
}
.animal-image {
width: 100%;
height: 200rpx;
}
.animal-tag {
position: absolute;
top: 15rpx;
right: 15rpx;
background-color: #ff2d55;
color: #fff;
font-size: 20rpx;
padding: 5rpx 10rpx;
border-radius: 10rpx;
}
.animal-info {
padding: 15rpx;
}
.animal-name {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 5rpx;
}
.animal-species {
display: block;
font-size: 22rpx;
color: #999;
margin-bottom: 10rpx;
}
.animal-price {
display: block;
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.flower-list {
white-space: nowrap;
padding: 0 30rpx;
}
.flower-card {
display: inline-block;
width: 240rpx;
margin-right: 20rpx;
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.flower-image {
width: 100%;
height: 240rpx;
}
.flower-info {
padding: 15rpx;
}
.flower-name {
display: block;
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-bottom: 5rpx;
}
.flower-desc {
display: block;
font-size: 22rpx;
color: #999;
margin-bottom: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flower-price {
display: block;
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background-color: #ffffff;
display: flex;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.tab-item .iconfont {
font-size: 40rpx;
color: #999;
margin-bottom: 5rpx;
}
.tab-item.active .iconfont {
color: #007aff;
}
.tab-text {
font-size: 20rpx;
color: #999;
}
.tab-item.active .tab-text {
color: #007aff;
}
.badge {
position: absolute;
top: 0;
right: 50%;
transform: translateX(10rpx);
background-color: #ff2d55;
color: #fff;
font-size: 20rpx;
min-width: 32rpx;
height: 32rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6rpx;
}
</style>