调接口加页面

MrShi

2026-04-17 f39ca3c49d26abd10f76fc67506b9c603a13547c

 small-program/pages/storage-point/storage-point.vue

@@ -8,8 +8,9 @@
                  v-model="keyword"
                  class="search-input"
                  type="text"
                  @confirm="handleSearch"
                  placeholder="搜索寄存点名称或地址"
                  placeholder-class="search-placeholder"
                  placeholder-style="color: #999999;"
               />
            </view>
            <view class="map-entry" @tap="toggleViewMode">
@@ -27,7 +28,7 @@
               :key="item.label"
               class="filter-item"
               :class="{ active: currentDropdown === item.key }"
               @tap="toggleDropdown(item.key)"
               @click="toggleDropdown(item.key)"
            >
               <text>{{ filterLabels[item.key] }}</text>
               <image :src="currentDropdown === item.key ? '/static/icon/ar_open_sel@2x.png' : '/static/icon/ar_open1@2x.png'" mode="widthFix"></image>
@@ -40,7 +41,7 @@
               :key="option.value"
               class="dropdown-option"
               :class="{ active: selectedFilters[currentDropdown] === option.value }"
               @tap="selectDropdownOption(option)"
               @click="selectDropdownOption(option)"
            >
               <text>{{ option.label }}</text>
               <u-icon v-if="selectedFilters[currentDropdown] === option.value" name="checkmark" size="24" color="#2F86F6"></u-icon>
@@ -48,13 +49,13 @@
         </view>
      </view>

      <view v-if="currentDropdown" class="dropdown-mask" @tap="closeDropdown"></view>
      <view v-if="currentDropdown" class="dropdown-mask" @click="closeDropdown"></view>

      <view class="content-wrap">
         <view v-if="!isMapMode" class="card-list">
            <view v-for="item in pointList" :key="item.name + item.distance" class="point-card">
            <view v-for="(item, index) in pointList" :key="index" class="point-card">
               <view class="thumb" :class="item.thumbClass">
                  <image src="/static/icon/nav_wode_sel@2x.png" mode="widthFix"></image>
                  <image :src="item.cover" mode="widthFix"></image>
               </view>
               <view class="point-main">
                  <view class="point-head">
@@ -95,40 +96,40 @@
                  <view class="popup-close" @tap="closeStorePopup">
                     <u-icon name="close" size="26" color="#8C939F"></u-icon>
                  </view>
                  <image class="popup-banner" src="/static/icon/nav_wode_sel@2x.png" mode="aspectFill"></image>
                  <swiper class="popup-banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
                     <swiper-item v-for="(item, index) in activeStore.images" :key="index">
                        <image class="popup-banner-image" :src="item" mode="aspectFill"></image>
                     </swiper-item>
                  </swiper>
                  <view class="popup-body">
                  <text class="popup-title">{{ activeStore.name }}</text>
                  <text class="popup-hours">{{ activeStore.time }}</text>
                  <text class="popup-desc">在合肥旅行，无论你是想在老城区的街头巷尾深度 Citywalk，还是赶高铁前挤出时间打卡天鹅湖夜景，遍布全城的行李寄存点都能让你彻底解放双手。</text>
                  <view class="popup-address-row">
                  <text class="popup-desc" v-if="activeStore.content">{{ activeStore.content }}</text>
                  <view class="popup-address-row" @click="openNavigation">
                     <view class="popup-address">
                        <image src="/static/icon/home_ic_location3@2x.png" mode="aspectFit"></image>
                        <text>{{ activeStore.address }}</text>
                     </view>
                     <view class="popup-distance-wrap">
                        <image src="/static/icon/ic_address@2x.png" mode="aspectFit"></image>
                        <text>{{ activeStore.distance }}</text>
                        <text>{{ activeStore.distanceText }}</text>
                     </view>
                  </view>
                  <view class="popup-gap"></view>
                  <view class="popup-section">
                     <text class="popup-section-title">寄存类型</text>
                     <text class="popup-section-text">行李箱（28寸/24寸等）</text>
                     <text class="popup-section-text">背包/手提包</text>
                     <text class="popup-section-text">大件行李、滑雪板、自行车等</text>
                     <text class="popup-section-text">{{ activeStore.depositTypes }}</text>
                  </view>
                  <view class="popup-gap"></view>
                  <view class="popup-section no-border">
                     <text class="popup-section-title">收费标准</text>
                     <text class="popup-section-text">大件行李箱（30-32寸）：</text>
                     <text class="popup-section-text">寄存模式：35元/每天</text>
                     <text class="popup-section-text">寄送模式：起步价里10元，每多2公里增加5元</text>
                     <text class="popup-section-text">{{ activeStore.feeStandard }}</text>
                  </view>
                  </view>
               </scroll-view>
               <view class="popup-footer">
                  <view class="popup-btn ghost" @tap="contactStore">联系门店</view>
                  <view class="popup-btn primary" @tap="storeLuggage">行李寄存</view>
                  <view class="popup-btn ghost" @click="contactStore">联系门店</view>
                  <view class="popup-btn primary" @click="storeLuggage">行李寄存</view>
               </view>
            </view>
         </view>
@@ -137,115 +138,59 @@
</template>

<script>
import { mapState } from 'vuex'
   export default {
      data() {
         return {
            keyword: '',
            page: 1,
            isMapMode: false,
            activeStore: null,
            currentDropdown: '',
            selectedFilters: {
               sort: 'all',
               range: 'all',
               hours: 'all'
               sortType: '',
               distance: '',
               businessType: ''
            },
            mapCenter: {
               latitude: 31.86119,
               longitude: 117.28565
            },
            filters: [
               { key: 'sort', label: '综合排序' },
               { key: 'range', label: '位置范围' },
               { key: 'hours', label: '营业时间' }
               { key: 'sortType', label: '综合排序' },
               { key: 'distance', label: '位置范围' },
               { key: 'businessType', label: '营业时间' }
            ],
            dropdownOptions: {
               sort: [
                  { label: '综合排序', value: 'all' },
                  { label: '距离最近', value: 'nearest' },
                  { label: '评分优先', value: 'score' }
               sortType: [
                  { label: '综合排序', value: '' },
                  { label: '评分优先', value: '2' }
               ],
               range: [
                  { label: '位置范围', value: 'all' },
                  { label: '1km内', value: '1km' },
                  { label: '3km内', value: '3km' },
                  { label: '5km内', value: '5km' }
               distance: [
                  { label: '位置范围', value: '' },
                  { label: '500m', value: '500' },
                  { label: '1km', value: '1000' },
                  { label: '2km', value: '2000' },
                  { label: '3km', value: '3000' },
                  { label: '5km', value: '5000' },
               ],
               hours: [
                  { label: '营业时间', value: 'all' },
                  { label: '营业中', value: 'open' },
                  { label: '24小时营业', value: '24h' }
               businessType: [
                  { label: '营业时间', value: '' },
                  { label: '全天营业', value: '1' },
                  { label: '限时营业', value: '0' }
               ]
            },
            pointList: [
               {
                  name: '中铁快运南站旗舰店',
                  address: '合肥南站负一层100号',
                  time: '周一至周日 7:00~23:00',
                  distance: '239m',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.80054,
                  longitude: 117.28391,
                  thumbClass: 'thumb-amber'
               },
               {
                  name: '中铁快运合肥火车站',
                  address: '合肥火车站一层12号',
                  time: '周一至周日 7:00~23:00',
                  distance: '12.8km',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.87673,
                  longitude: 117.31584,
                  thumbClass: 'thumb-sky'
               },
               {
                  name: '合肥火车站北广场',
                  address: '合肥火车站一层12号',
                  time: '周一至周日 7:00~23:00',
                  distance: '13.1km',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.87802,
                  longitude: 117.31695,
                  thumbClass: 'thumb-stone'
               },
               {
                  name: '小铁无忧存',
                  address: '合肥火车站一层12号',
                  time: '周一至周日 7:00~23:00',
                  distance: '16.3km',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.88418,
                  longitude: 117.33086,
                  thumbClass: 'thumb-orange'
               },
               {
                  name: '合肥火车站北广场',
                  address: '合肥火车站一层12号',
                  time: '周一至周日 7:00~23:00',
                  distance: '21.9km',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.85562,
                  longitude: 117.29231,
                  thumbClass: 'thumb-silver'
               },
               {
                  name: '合肥火车站北广场',
                  address: '合肥火车站一层12号',
                  time: '周一至周日 7:00~23:00',
                  distance: '24.9km',
                  cover: '/static/icon/nav_wode_sel@2x.png',
                  latitude: 31.84638,
                  longitude: 117.34752,
                  thumbClass: 'thumb-amber'
               }
            ]
            pointList: [],
            isRequest: true
         }
      },
      computed: {
         ...mapState(['latitude', 'longitude', 'cityId']),
         filterLabels() {
            return {
               sort: this.getFilterLabel('sort'),
               range: this.getFilterLabel('range'),
               hours: this.getFilterLabel('hours')
               sortType: this.getFilterLabel('sortType'),
               distance: this.getFilterLabel('distance'),
               businessType: this.getFilterLabel('businessType')
            }
         },
         currentOptions() {
@@ -256,9 +201,9 @@
               id: index,
               latitude: item.latitude,
               longitude: item.longitude,
               width: 28,
               height: 36,
               iconPath: '/static/icon/home_ic_location@2x.png',
               width: 0,
               height: 0,
               iconPath: '/static/icon/home1_ic_location@2x.png',
               anchor: {
                  x: 0.5,
                  y: 1
@@ -276,7 +221,72 @@
            }))
         }
      },
      watch: {
         filterLabels: {
            handler(newVal, oldVal) {
               this.handleSearch()
            }
         }
      },
      async onLoad() {
         await this.$onLaunched
         this.getNearbyShopList()
      },
      onReachBottom() {
         this.getNearbyShopList()
      },
      methods: {
         handleSearch() {
            this.page = 1
            this.pointList = []
            this.isRequest = true
            this.getNearbyShopList()
         },
         handleFilterChange(key, value) {
            this.selectedFilters[key] = value
            this.page = 1
            this.pointList = []
            this.getNearbyShopList()
         },
         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,
                  distance: this.selectedFilters.distance || '',
                  name: this.keyword,
                  cityId: this.cityId,
                  sortType: this.selectedFilters.sortType || 1,
                  businessType: this.selectedFilters.businessType || ''
               }
            })
            if (res.code === 200) {
               let arr = []
               res.data.records.forEach(item => {
                  let obj = {
                     shopId: item.id,
                     name: item.name,
                     address: item.address,
                     time: item.shopHours,
                     distance: item.distanceText,
                     cover: item.coverImg,
                     latitude: item.latitude,
                     longitude: item.longitude,
                     depositTypes: item.depositTypes,
                     feeStandard: item.feeStandard
                  }
                  arr.push(obj)
               })
               this.pointList = [...this.pointList, ...arr]
               this.page++
               if (res.data.total <= this.pointList.length) {
                  this.isRequest = false
               }
            }
         },
         getFilterLabel(key) {
            const options = this.dropdownOptions[key] || []
            const current = options.find(item => item.value === this.selectedFilters[key])
@@ -316,14 +326,39 @@
               latitude: current.latitude,
               longitude: current.longitude
            }
            this.activeStore = current
            console.log('current', current)
            this.$u.api.getShopDetail({
               id: current.shopId,
               latitude: this.latitude,
               longitude: this.longitude,
            }).then(res => {
               if (res.code === 200) {
                  this.activeStore = res.data
               }
            })
         },
         resetMapCenter() {
            this.mapCenter = {
               latitude: 31.86119,
               longitude: 117.28565
            }
         },
               var that = this
               uni.getLocation({
                  type: 'wgs84',
                  success: (res) => {
                     that.mapCenter = {
                        latitude: res.latitude,
                        longitude: res.longitude
                     }
                  }
               })
            },
            openNavigation() {
               uni.openLocation({
                  latitude: this.activeStore.latitude,
                  longitude: this.activeStore.longitude,
                  name: this.activeStore.name,
                  address: this.activeStore.address,
                  scale: 18,
                  infoUrl: ''
               })
            },
         contactStore() {
            uni.showToast({
               title: '联系门店待接入',
@@ -362,7 +397,7 @@
      top: 184rpx;
      bottom: 0;
      background: rgba(0, 0, 0, 0.18);
      z-index: 30;
      z-index: 14;
   }

   .content-wrap {
@@ -406,14 +441,8 @@
      height: 72rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      color: #111111;
      background: transparent;
   }

   .search-placeholder {
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
   }

   .map-entry {
@@ -570,10 +599,15 @@
      z-index: 2;
   }

   .popup-banner {
   .popup-banner-swiper {
      width: 100%;
      height: 336rpx;
      background: #eef2f8;
      height: 422rpx;
   }

   .popup-banner-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .popup-body {