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/storage-point/storage-point.vue | 278 +++++++++++++++++++++++++++++++------------------------
1 files changed, 156 insertions(+), 122 deletions(-)
diff --git a/small-program/pages/storage-point/storage-point.vue b/small-program/pages/storage-point/storage-point.vue
index ee5c4b0..ea81ae8 100644
--- a/small-program/pages/storage-point/storage-point.vue
+++ b/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 {
--
Gitblit v1.9.3