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() {
|
goToMall() {
|
||||||
wx.switchTab({ url: '/pages/points/mall/index' })
|
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-label">门店地址</text>
|
||||||
<text class="detail-value">{{currentOrder.storeAddress}}</text>
|
<text class="detail-value">{{currentOrder.storeAddress}}</text>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@ -511,3 +511,29 @@
|
|||||||
.detail-value.status-completed {
|
.detail-value.status-completed {
|
||||||
color: var(--accent);
|
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,
|
storeName: order.store?.name,
|
||||||
storeAddress: order.store?.address,
|
storeAddress: order.store?.address,
|
||||||
storeContact: order.store?.contact,
|
storeContact: order.store?.contact,
|
||||||
|
storeLatitude: order.store?.latitude,
|
||||||
|
storeLongitude: order.store?.longitude,
|
||||||
createdAt: order.created_at,
|
createdAt: order.created_at,
|
||||||
verifiedAt: order.verified_at
|
verifiedAt: order.verified_at
|
||||||
}));
|
}));
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user