调接口加页面

MrShi

2026-04-17 f39ca3c49d26abd10f76fc67506b9c603a13547c

 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 {