feat: Add navigation feature to store in order page
- Implemented a new button to navigate to the store location from the order details. - Added functionality to open the store's location in the map application or copy the address if location data is unavailable. - Updated UI to include the navigation button conditionally based on store information availability. - Enhanced styling for the navigation button to improve user experience.
This commit is contained in:
parent
98f9e64d91
commit
459fa02eb9
@ -158,5 +158,38 @@ Page({
|
||||
|
||||
goToMall() {
|
||||
wx.switchTab({ url: '/pages/points/mall/index' })
|
||||
},
|
||||
|
||||
// 导航到门店
|
||||
navigateToStore() {
|
||||
const order = this.data.currentOrder
|
||||
if (!order) return
|
||||
|
||||
const lat = order.storeLatitude != null ? parseFloat(order.storeLatitude) : null
|
||||
const lng = order.storeLongitude != null ? parseFloat(order.storeLongitude) : null
|
||||
const name = order.storeName || '领取门店'
|
||||
const address = order.storeAddress || ''
|
||||
|
||||
if (lat != null && lng != null && !isNaN(lat) && !isNaN(lng)) {
|
||||
wx.openLocation({
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
name: name,
|
||||
address: address,
|
||||
scale: 18
|
||||
})
|
||||
} else {
|
||||
// 无经纬度时,复制地址到剪贴板
|
||||
if (address) {
|
||||
wx.setClipboardData({
|
||||
data: `${name} ${address}`.trim(),
|
||||
success: () => {
|
||||
wx.showToast({ title: '地址已复制,可在地图应用中粘贴搜索', icon: 'none', duration: 2500 })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
wx.showToast({ title: '该门店暂无位置信息', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -153,6 +153,11 @@
|
||||
<text class="detail-label">门店地址</text>
|
||||
<text class="detail-value">{{currentOrder.storeAddress}}</text>
|
||||
</view>
|
||||
<view class="navigate-btn-wrap" wx:if="{{currentOrder.storeName || currentOrder.storeAddress}}">
|
||||
<view class="navigate-btn" bindtap="navigateToStore">
|
||||
<text class="navigate-btn-text">导航到门店</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -511,3 +511,29 @@
|
||||
.detail-value.status-completed {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* 导航到门店按钮 */
|
||||
.navigate-btn-wrap {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.navigate-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 32rpx;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: var(--shadow-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navigate-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.navigate-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -265,6 +265,8 @@ class PointsController {
|
||||
storeName: order.store?.name,
|
||||
storeAddress: order.store?.address,
|
||||
storeContact: order.store?.contact,
|
||||
storeLatitude: order.store?.latitude,
|
||||
storeLongitude: order.store?.longitude,
|
||||
createdAt: order.created_at,
|
||||
verifiedAt: order.verified_at
|
||||
}));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user