From f39ca3c49d26abd10f76fc67506b9c603a13547c Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 17 四月 2026 20:20:30 +0800
Subject: [PATCH] 调接口加页面
---
small-program/pages/index/index.vue | 201 ++++++++++++++++++++------------------------------
1 files changed, 80 insertions(+), 121 deletions(-)
diff --git a/small-program/pages/index/index.vue b/small-program/pages/index/index.vue
index fca9930..1abd847 100644
--- a/small-program/pages/index/index.vue
+++ b/small-program/pages/index/index.vue
@@ -9,14 +9,6 @@
<text>{{ currentAddress }}</text>
<u-icon name="arrow-right" size="14" color="#ffffff"></u-icon>
</view>
- <view class="hero-actions">
- <view class="hero-action action-pill">
- <u-icon name="more-dot-fill" size="34" color="#2c2c2c"></u-icon>
- </view>
- <view class="hero-action action-ring">
- <u-icon name="scan" size="28" color="#2c2c2c"></u-icon>
- </view>
- </view>
</view>
<view class="search-box" @tap="goStoragePage">
@@ -25,18 +17,17 @@
</view>
<view class="banner-card hero-banner">
- <view class="banner-tag">2027鏄ヨ繍淇濋殰璁″垝</view>
- <view class="banner-copy">
- <text>杞绘澗鍑鸿</text>
- <text>琛屾潕鍏堣</text>
- </view>
- <image class="banner-image" mode="aspectFill"></image>
+ <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true" :indicator-color="'rgba(255, 255, 255, 0.5)'" :indicator-active-color="'#ffffff'">
+ <swiper-item v-for="(item, index) in bannerList" :key="index">
+ <image class="banner-image" :src="item.imgurlFull" mode="aspectFill"></image>
+ </swiper-item>
+ </swiper>
</view>
</view>
<view class="page-body">
<view class="service-grid">
- <view class="service-card deposit-card">
+ <view class="service-card deposit-card" @click="jumpxiadan">
<image class="service-image" src="/static/image/home_ic_jicun@2x.png" mode="aspectFit"></image>
</view>
<view class="service-card retrieve-card">
@@ -56,35 +47,35 @@
<view class="section-head">
<text class="section-title">鎺ㄨ崘瀵勫瓨鐐�</text>
- <text class="section-more">鏌ョ湅鏇村</text>
+ <text class="section-more" @click="jumpJC">鏌ョ湅鏇村</text>
</view>
<view class="recommend-list">
- <view v-for="(item, index) in pointList" :key="index" class="point-card" @tap="goStoragePage">
+ <view v-for="(item, index) in pointList" :key="index" class="point-card" @click="goStoragePage(item)">
<view class="point-thumb">
- <image class="point-thumb-image" mode="aspectFill"></image>
+ <image class="point-thumb-image" :src="item.coverImg" mode="widthFix"></image>
</view>
<view class="point-main">
<view class="point-head">
<text class="point-name">{{ item.name }}</text>
- <text class="point-distance">{{ item.distance }}</text>
+ <text class="point-distance">{{ item.distanceText }}</text>
</view>
<view class="point-address">
<image src="/static/icon/home_ic_location3@2x.png" mode="aspectFit"></image>
<text>{{ item.address }}</text>
</view>
- <text class="point-time">{{ item.time }}</text>
+ <text class="point-time">{{ item.shopHours }}</text>
</view>
</view>
</view>
</view>
- <view class="location-toast">
+ <view class="location-toast" v-if="!latitude">
<view class="toast-copy">
<text class="toast-title">鏈巿鏉冨畾浣�</text>
<text class="toast-text">鎴戜滑鏃犳硶鑾峰緱鎮ㄥ綋鍓嶄綅缃俊鎭负鎮ㄦ帹鑽愰檮杩戝瘎瀛樼偣</text>
</view>
- <view class="toast-btn" @tap="handleLocation">寮�鍚畾浣�</view>
+ <view class="toast-btn" @click="handleLocation">寮�鍚畾浣�</view>
</view>
</view>
</template>
@@ -94,7 +85,7 @@
export default {
computed: {
- ...mapState(['navHeight', 'statusbarHeight', 'address']),
+ ...mapState(['navHeight', 'statusbarHeight', 'address', 'latitude', 'cityId', 'longitude']),
currentAddress() {
return this.address && this.address !== '瀹氫綅涓�' ? this.address : '鑾峰彇瀹氫綅'
}
@@ -102,32 +93,57 @@
data() {
return {
backgroundImage: require('@/static/image/bg_home@2x.png'),
- pointList: [
- {
- name: '涓搧蹇繍鍗楃珯鏃楄埌搴�',
- address: '鍚堣偉鍗楃珯璐熶竴灞�100鍙�',
- time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
- distance: '239m'
- },
- {
- name: '涓搧蹇繍鍚堣偉鐏溅绔�',
- address: '鍚堣偉鐏溅绔欎竴灞�12鍙�',
- time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
- distance: '12.8km'
- },
- {
- name: '鍚堣偉鐏溅绔欏寳骞垮満',
- address: '鍚堣偉鐏溅绔欎竴灞�12鍙�',
- time: '鍛ㄤ竴鑷冲懆鏃� 7:00~23:00',
- distance: '13.1km'
- }
- ]
+ bannerList: [],
+ pointList: [],
+ page: 1,
+ isRequest: true
}
},
async onLoad() {
await this.$onLaunched
+ await this.getBannerList()
+ await this.getNearbyShopList()
+ },
+ onReachBottom() {
+ this.getNearbyShopList()
},
methods: {
+ jumpxiadan() {
+ uni.navigateTo({
+ url: '/pages/luggage-storage/luggage-storage'
+ })
+ },
+ async getBannerList() {
+ const res = await this.$u.api.getBannerList({ position: 0 })
+ if (res.code === 200) {
+ this.bannerList = res.data || []
+ }
+ },
+ async getNearbyShopList() {
+ if (!this.isRequest) return;
+ const res = await this.$u.api.getNearbyShopList({
+ capacity: 10,
+ page: this.page,
+ model: {
+ latitude: this.latitude,
+ longitude: this.longitude,
+ cityId: this.cityId,
+ sortType: 1
+ }
+ })
+ if (res.code === 200) {
+ this.pointList = res.data.records || []
+ this.page++
+ if (res.data.total <= this.pointList.length) {
+ this.isRequest = false
+ }
+ }
+ },
+ jumpJC() {
+ uni.navigateTo({
+ url: '/pages/storage-point/storage-point'
+ })
+ },
handleLocation() {
uni.showToast({
title: '瀹氫綅鍔熻兘寰呮帴鍏�',
@@ -146,9 +162,7 @@
<style lang="scss" scoped>
.index-page {
position: relative;
- min-height: 100vh;
- background: #f5f7fb;
- padding-bottom: 160rpx;
+ padding-bottom: 30rpx;
}
.top-gradient-bg {
@@ -185,6 +199,7 @@
gap: 6rpx;
max-width: 360rpx;
image {
+ flex-shrink: 0;
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
@@ -197,26 +212,6 @@
font-size: 32rpx;
color: #FFFFFF;
}
- }
-
- .hero-actions {
- display: flex;
- align-items: center;
- padding: 6rpx 10rpx;
- border-radius: 999rpx;
- background: rgba(255, 255, 255, 0.7);
- }
-
- .hero-action {
- width: 52rpx;
- height: 52rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .action-ring {
- border-left: 1rpx solid rgba(44, 44, 44, 0.12);
}
.search-box {
@@ -247,70 +242,35 @@
.banner-card {
position: relative;
- height: 310rpx;
- padding: 28rpx 26rpx;
+ height: 320rpx;
+ padding: 0;
border-radius: 20rpx;
overflow: hidden;
- background: linear-gradient(180deg, #bde7ff 0%, #e9f9ff 38%, #90d16e 100%);
box-sizing: border-box;
}
- .banner-card::before,
- .banner-card::after {
- content: '';
- position: absolute;
- top: 28rpx;
- width: 140rpx;
- height: 78rpx;
- background: rgba(255, 255, 255, 0.62);
- border-radius: 999rpx;
+ .banner-swiper {
+ height: 100%;
}
- .banner-card::before {
- left: -34rpx;
+ .banner-swiper ::deep .uni-swiper-dot {
+ width: 30rpx;
+ height: 6rpx;
+ border-radius: 3rpx;
}
- .banner-card::after {
- right: -24rpx;
+ .banner-swiper ::deep .uni-swiper-dot-active {
+ background-color: #ffffff;
}
- .banner-tag {
- display: inline-flex;
- align-items: center;
- height: 46rpx;
- padding: 0 18rpx;
- border-radius: 24rpx;
- background: #ff7d51;
- font-size: 24rpx;
- font-weight: 600;
- color: #ffffff;
- }
+.banner-swiper swiper-item {
+ height: 100%;
+}
- .banner-copy {
- position: relative;
- z-index: 1;
- width: 196rpx;
- margin-top: 44rpx;
- padding: 20rpx 18rpx;
- border: 4rpx solid rgba(255, 255, 255, 0.7);
- border-radius: 18rpx;
- background: rgba(112, 175, 92, 0.28);
- text {
- display: block;
- font-size: 48rpx;
- font-weight: 700;
- line-height: 1.25;
- color: #ffffff;
- }
- }
-
- .banner-image {
- position: absolute;
- right: 10rpx;
- bottom: 12rpx;
- width: 320rpx;
- height: 220rpx;
- }
+.banner-image {
+ width: 100%;
+ height: 100%;
+}
.service-grid {
display: grid;
@@ -403,14 +363,14 @@
}
.recommend-list {
- margin-top: 14rpx;
+ margin-top: 32rpx;
}
.point-card {
display: flex;
gap: 18rpx;
padding: 24rpx;
- margin-bottom: 18rpx;
+ margin-bottom: 20rpx;
border-radius: 18rpx;
background: #f4f7fc;
}
@@ -422,7 +382,6 @@
height: 104rpx;
border-radius: 12rpx;
overflow: hidden;
- background: #dfe7f3;
}
.point-thumb-image {
--
Gitblit v1.9.3