国际版独立

This commit is contained in:
2026-04-29 11:10:29 +08:00
parent 120eba6c6a
commit 6913d9266b
10 changed files with 742 additions and 106 deletions
+294
View File
@@ -0,0 +1,294 @@
<template>
<view class="h5-home-wrap">
<view class="main-content" :style="mainContentStyle">
<view class="h5-banner-section" v-if="bannerImages && bannerImages.length > 0">
<swiper class="h5-banner-swiper" :indicator-dots="bannerImages.length > 1" :autoplay="true" :interval="4000"
:duration="500" circular>
<swiper-item v-for="(img, idx) in bannerImages" :key="idx">
<view class="h5-banner-item" @click="$emit('bannerClick', idx)">
<image :src="img" mode="aspectFill" class="h5-banner-image"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="h5-banner-empty" v-else>
<text>{{ loadingText }}</text>
</view>
<view class="h5-cta-card">
<view class="h5-cta-header">
<text class="h5-cta-title">{{ scanText }}</text>
<text class="h5-cta-desc">{{ t('home.h5ScanDesc') }}</text>
</view>
<view class="h5-cta-btn" @click="$emit('scan')">
<image class="h5-cta-icon" src="/static/scan-icon.png" mode="aspectFit" />
<text class="h5-cta-btn-text">{{ scanText }}</text>
</view>
</view>
<view class="h5-section">
<view class="h5-section-title">{{ t('home.h5HowItWorks') }}</view>
<view class="h5-steps">
<view class="h5-step-item">
<text class="h5-step-index">1</text>
<text class="h5-step-text">{{ t('home.h5StepScan') }}</text>
</view>
<view class="h5-step-item">
<text class="h5-step-index">2</text>
<text class="h5-step-text">{{ t('home.h5StepUnlock') }}</text>
</view>
<view class="h5-step-item">
<text class="h5-step-index">3</text>
<text class="h5-step-text">{{ t('home.h5StepReturn') }}</text>
</view>
</view>
</view>
<view class="h5-section">
<view class="h5-section-title">{{ t('home.h5ServiceTitle') }}</view>
<view class="h5-tags">
<text class="h5-tag">{{ t('home.h5ServiceSupport') }}</text>
<text class="h5-tag">{{ t('home.h5ServiceSafePayment') }}</text>
<text class="h5-tag">{{ t('home.h5ServiceEasyReturn') }}</text>
</view>
</view>
</view>
<view class="h5-bottom-actions">
<view class="action-btn secondary" @click="$emit('buy')">
<image class="action-icon" src="/static/shop_icon.png" mode="aspectFit" />
<text class="action-label">{{ buyDeviceText }}</text>
</view>
<view class="action-btn primary" @click="$emit('scan')">
<image class="action-icon" src="/static/scan-icon.png" mode="aspectFit" />
<text class="action-label primary-label">{{ scanText }}</text>
</view>
<view class="action-btn secondary" @click="$emit('my')">
<image class="action-icon" src="/static/user.png" mode="aspectFit" />
<text class="action-label">{{ personalCenterText }}</text>
</view>
</view>
</view>
</template>
<script setup>
import { useI18n } from '../../utils/i18n.js'
const { t } = useI18n()
defineEmits(['bannerClick', 'scan', 'buy', 'my'])
defineProps({
mainContentStyle: { type: Object, default: () => ({}) },
bannerImages: { type: Array, default: () => [] },
loadingText: { type: String, default: '' },
buyDeviceText: { type: String, default: '' },
scanText: { type: String, default: '' },
personalCenterText: { type: String, default: '' }
})
</script>
<style lang="scss" scoped>
.h5-home-wrap {
min-height: 100%;
}
.main-content {
padding-bottom: 220rpx;
}
.h5-banner-section {
padding: 24rpx 20rpx 0;
box-sizing: border-box;
}
.h5-banner-swiper {
width: 100%;
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
background: #f5f5f5;
}
.h5-banner-item,
.h5-banner-image {
width: 100%;
height: 100%;
}
.h5-banner-empty {
padding: 80rpx 20rpx 0;
text-align: center;
color: #999;
font-size: 26rpx;
}
.h5-cta-card {
margin: 20rpx;
padding: 24rpx;
border-radius: 20rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.05);
}
.h5-cta-header {
flex: 1;
}
.h5-cta-title {
font-size: 32rpx;
font-weight: 600;
color: #1f7d43;
display: block;
}
.h5-cta-desc {
font-size: 24rpx;
color: #4f7b61;
margin-top: 8rpx;
display: block;
}
.h5-cta-btn {
height: 76rpx;
padding: 0 24rpx;
background: #3EAB64;
border-radius: 38rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
}
.h5-cta-icon {
width: 30rpx;
height: 30rpx;
filter: brightness(0) invert(1);
}
.h5-cta-btn-text {
color: #fff;
font-size: 24rpx;
font-weight: 600;
}
.h5-section {
margin: 0 20rpx 20rpx;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}
.h5-section-title {
font-size: 28rpx;
font-weight: 600;
color: #2d2d2d;
margin-bottom: 16rpx;
}
.h5-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12rpx;
}
.h5-step-item {
background: #f4f8f6;
border-radius: 14rpx;
padding: 16rpx 10rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
}
.h5-step-index {
width: 34rpx;
height: 34rpx;
background: #3EAB64;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
}
.h5-step-text {
font-size: 22rpx;
color: #315c46;
}
.h5-tags {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
.h5-tag {
padding: 10rpx 16rpx;
background: #eef8f1;
color: #2e7d4f;
border-radius: 999rpx;
font-size: 22rpx;
}
.h5-bottom-actions {
position: fixed;
left: 20rpx;
right: 20rpx;
bottom: 30rpx;
z-index: 1200;
padding: 14rpx;
background: rgba(255, 255, 255, 0.96);
border-radius: 56rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 12rpx;
}
.action-btn {
height: 86rpx;
border-radius: 43rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
}
.action-btn.primary {
flex: 1;
background: #3EAB64;
max-width: 360rpx;
}
.action-btn.secondary {
width: 150rpx;
background: #f4f6f8;
}
.action-icon {
width: 32rpx;
height: 32rpx;
}
.action-btn.primary .action-icon {
filter: brightness(0) invert(1);
}
.action-label {
font-size: 24rpx;
color: #333;
}
.primary-label {
color: #fff;
font-weight: 600;
}
</style>
+276
View File
@@ -0,0 +1,276 @@
<template>
<view>
<view class="main-content" :style="mainContentStyle">
<!-- 支付宝小程序使用专用组件 -->
<!-- #ifdef MP-ALIPAY -->
<MapComponentAlipay v-if="!isLoading && userLocation && !locationPermissionDenied" ref="innerMapRef"
:userLocation="userLocation" :positionList="positionList" :filteredPositions="filteredPositions"
:searchKeyword="searchKeyword" :enableMarkers="true" :bannerImages="bannerImages"
:hideMapOverlays="hideMapOverlays" @relocate="$emit('relocate')" @scan="$emit('scan')"
@showList="$emit('showList')" @markerTap="$emit('markerTap', $event)"
@mapCenterChange="$emit('mapCenterChange', $event)" @bannerClick="$emit('bannerClick', $event)"
@guide="$emit('guide')" />
<!-- #endif -->
<!-- 非支付宝小程序使用通用组件 -->
<!-- #ifndef MP-ALIPAY -->
<MapComponent v-if="!isLoading && userLocation && !locationPermissionDenied" ref="innerMapRef"
:userLocation="userLocation" :positionList="positionList" :filteredPositions="filteredPositions"
:searchKeyword="searchKeyword" :enableMarkers="true" :bannerImages="bannerImages"
:hideMapOverlays="hideMapOverlays" @relocate="$emit('relocate')" @scan="$emit('scan')"
@showList="$emit('showList')" @markerTap="$emit('markerTap', $event)"
@mapCenterChange="$emit('mapCenterChange', $event)" @bannerClick="$emit('bannerClick', $event)"
@guide="$emit('guide')" />
<!-- #endif -->
<!-- 地图加载状态 -->
<!-- #ifdef MP-ALIPAY -->
<view v-if="!userLocation" class="location-denied-placeholder">
<view class="denied-content">
<text class="denied-text">{{ locationPermissionText }}</text>
<view class="denied-enable-btn" @click="$emit('enableLocation')">
<text class="denied-enable-btn-text">{{ enableLocationText }}</text>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>{{ loadingLocationText }}</text>
</view>
</view>
<!-- #endif -->
</view>
<view class="bottom-actions">
<view class="action-btn secondary small btn-nearby" @click="$emit('buy')">
<view class="icon-wrap">
<image src="/static/shop_icon.png" class="action-icon" mode="scaleToFill" lazy-load="true"></image>
</view>
<text class="action-label">{{ buyDeviceText }}</text>
</view>
<view class="action-btn primary btn-scan" @click="$emit('scan')">
<view class="icon-wrap">
<image class="action-icon" src="/static/scan-icon.png" mode="aspectFill" lazy-load="true" />
</view>
<text class="primary-label">{{ scanText }}</text>
</view>
<view class="action-btn secondary small btn-my" @click="$emit('my')">
<view class="icon-wrap">
<image class="action-icon" src="/static/user.png" mode="aspectFit" lazy-load="true" />
</view>
<text class="action-label">{{ personalCenterText }}</text>
</view>
</view>
</view>
</template>
<script setup>
import { computed, ref } from 'vue'
import MapComponent from '../MapComponent.vue'
// #ifdef MP-ALIPAY
import MapComponentAlipay from '../MapComponentAlipay.vue'
// #endif
defineEmits(['relocate', 'scan', 'showList', 'markerTap', 'mapCenterChange', 'bannerClick', 'guide', 'enableLocation', 'buy', 'my'])
const props = defineProps({
mainContentStyle: { type: Object, default: () => ({}) },
isLoading: { type: Boolean, default: false },
userLocation: { type: Object, default: null },
locationPermissionDenied: { type: Boolean, default: false },
positionList: { type: Array, default: () => [] },
filteredPositions: { type: Array, default: () => [] },
searchKeyword: { type: String, default: '' },
bannerImages: { type: Array, default: () => [] },
hideMapOverlays: { type: Boolean, default: false },
locationPermissionText: { type: String, default: '' },
enableLocationText: { type: String, default: '' },
loadingLocationText: { type: String, default: '' },
buyDeviceText: { type: String, default: '' },
scanText: { type: String, default: '' },
personalCenterText: { type: String, default: '' }
})
const innerMapRef = ref(null)
defineExpose({
mapCenter: computed(() => innerMapRef.value?.mapCenter || null),
moveToLocation: (location) => innerMapRef.value && innerMapRef.value.moveToLocation && innerMapRef.value.moveToLocation(location)
})
</script>
<style lang="scss" scoped>
.main-content {
flex: 1;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 180rpx;
box-sizing: border-box;
}
.map-loading-placeholder {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 180rpx;
background: #f6f7fb;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
.loading-content {
background: #ffffff;
border-radius: 16rpx;
padding: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
.loading-spinner {
width: 60rpx;
height: 60rpx;
border: 4rpx solid #f0f0f0;
border-top: 4rpx solid #2196F3;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 24rpx;
}
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.location-denied-placeholder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 180rpx;
background: #f6f7fb;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40rpx;
box-sizing: border-box;
}
.denied-content {
width: 100%;
background: #ffffff;
border-radius: 16rpx;
padding: 40rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.denied-text {
display: block;
font-size: 28rpx;
color: #333;
line-height: 1.6;
}
.denied-enable-btn {
margin-top: 28rpx;
width: 100%;
height: 88rpx;
background: #3EAB64;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.denied-enable-btn-text {
font-size: 32rpx;
font-weight: 700;
color: #ffffff;
}
.bottom-actions {
position: fixed;
left: 20rpx;
right: 20rpx;
bottom: 40rpx;
z-index: 1200;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.action-btn.primary {
background: #3EAB64;
color: #fff;
border-radius: 56rpx;
height: 112rpx;
flex: 1;
max-width: 400rpx;
padding: 0 24rpx;
flex-direction: row;
gap: 8rpx;
}
.action-btn.secondary {
color: #333;
border-radius: 24rpx;
height: 100rpx;
width: 140rpx;
flex-shrink: 0;
padding: 8rpx 12rpx;
}
.icon-wrap {
width: 36rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btn-scan .icon-wrap {
width: 48rpx;
height: 48rpx;
}
.action-icon {
width: 36rpx;
height: 36rpx;
}
.btn-scan .action-icon {
width: 32rpx;
height: 32rpx;
filter: brightness(0) invert(1);
}
.primary-label {
color: #ffffff;
font-size: 28rpx;
font-weight: 600;
}
.action-label {
line-height: 1.2;
text-align: center;
}
</style>
+2 -1
View File
@@ -1,5 +1,6 @@
// export const URL = "https://my.gxfs123.com/api" //正式服务器-弃用 // export const URL = "https://my.gxfs123.com/api" //正式服务器-弃用
export const URL = "https://manager.fdzpower.com/api" //正式服务器 // export const URL = "https://manager.fdzpower.com/api" //正式国内服务器
export const URL = "https://ina.fdzpower.com/api" //正式国外服务器
// export const URL = "https://fansdev.gxfs123.com/api" //测试服务器 // export const URL = "https://fansdev.gxfs123.com/api" //测试服务器
// export const URL = "http://192.168.0.158:8080" //本地调试 // export const URL = "http://192.168.0.158:8080" //本地调试
// export const URL = "http://127.0.0.1:8080" //本地调试 // export const URL = "http://127.0.0.1:8080" //本地调试
+9
View File
@@ -92,6 +92,15 @@ export default {
relocate: 'Relocate', relocate: 'Relocate',
search: 'Search', search: 'Search',
service: 'Service', service: 'Service',
h5ScanDesc: 'Scan the device QR code to start',
h5HowItWorks: 'How It Works',
h5StepScan: 'Scan',
h5StepUnlock: 'Device Ejects',
h5StepReturn: 'Return',
h5ServiceTitle: 'Service',
h5ServiceSupport: '24/7 Support',
h5ServiceSafePayment: 'Safe Payment',
h5ServiceEasyReturn: 'Easy Return',
searchPlaceholder: 'Search locations', searchPlaceholder: 'Search locations',
nearbyDeviceLocation: 'Nearby', nearbyDeviceLocation: 'Nearby',
noNearbyDevice: 'No devices nearby', noNearbyDevice: 'No devices nearby',
+9
View File
@@ -92,6 +92,15 @@ export default {
relocate: 'Lokasi Ulang', relocate: 'Lokasi Ulang',
search: 'Cari', search: 'Cari',
service: 'Layanan Pelanggan', service: 'Layanan Pelanggan',
h5ScanDesc: 'Pindai kode QR perangkat untuk mulai menggunakan',
h5HowItWorks: 'Cara Penggunaan',
h5StepScan: 'Pindai',
h5StepUnlock: 'Perangkat Keluar',
h5StepReturn: 'Kembalikan',
h5ServiceTitle: 'Layanan',
h5ServiceSupport: 'Dukungan 24/7',
h5ServiceSafePayment: 'Pembayaran Aman',
h5ServiceEasyReturn: 'Pengembalian Mudah',
searchPlaceholder: 'Cari lokasi terdekat', searchPlaceholder: 'Cari lokasi terdekat',
nearbyDeviceLocation: 'Lokasi Perangkat Terdekat', nearbyDeviceLocation: 'Lokasi Perangkat Terdekat',
noNearbyDevice: 'Tidak ada perangkat terdekat', noNearbyDevice: 'Tidak ada perangkat terdekat',
+9
View File
@@ -91,6 +91,15 @@ export default {
relocate: '重新定位', relocate: '重新定位',
search: '搜索', search: '搜索',
service: '客服', service: '客服',
h5ScanDesc: '扫描设备二维码,立即开始使用',
h5HowItWorks: '使用流程',
h5StepScan: '扫码',
h5StepUnlock: '设备弹出',
h5StepReturn: '归还',
h5ServiceTitle: '服务保障',
h5ServiceSupport: '24小时在线客服',
h5ServiceSafePayment: '安全支付',
h5ServiceEasyReturn: '便捷归还',
searchPlaceholder: '搜索附近场地', searchPlaceholder: '搜索附近场地',
nearbyDeviceLocation: '附近设备场地', nearbyDeviceLocation: '附近设备场地',
noNearbyDevice: '附近暂无设备', noNearbyDevice: '附近暂无设备',
+31 -3
View File
@@ -34,12 +34,12 @@
<view class="pricing-banner"> <view class="pricing-banner">
<view class="pricing-main"> <view class="pricing-main">
<text class="price-symbol">¥</text> <text class="price-symbol">{{ displayCurrencySymbol }}</text>
<text class="price">{{ deviceFeeConfig.maxHourPrice || '5.00' }}</text> <text class="price">{{ displayHourlyPrice }}</text>
<text class="unit">/{{ getPriceUnit() }}</text> <text class="unit">/{{ getPriceUnit() }}</text>
</view> </view>
<view class="cap-badge"> <view class="cap-badge">
<text class="cap-text">{{ deviceInfo.depositAmount || '99' }}{{ $t('device.capLimit') }}</text> <text class="cap-text">{{ displayDepositCap }}{{ $t('device.capLimit') }}</text>
</view> </view>
</view> </view>
@@ -129,6 +129,7 @@
import { import {
ref, ref,
reactive, reactive,
computed,
onMounted onMounted
} from 'vue' } from 'vue'
import { import {
@@ -178,6 +179,8 @@
const isWechatMiniProgram = ref(false) const isWechatMiniProgram = ref(false)
const isAlipayMiniProgram = ref(false) const isAlipayMiniProgram = ref(false)
const isH5 = ref(false) const isH5 = ref(false)
const IDR_DEPOSIT_DISPLAY = 99000
const IDR_HOUR_PRICE_DISPLAY = 6000
// 生命周期 onLoad 钩子 // 生命周期 onLoad 钩子
onLoad(async (options) => { onLoad(async (options) => {
@@ -499,6 +502,7 @@
// 获取价格单位文本 // 获取价格单位文本
const getPriceUnit = () => { const getPriceUnit = () => {
if (isIdrCurrency.value) return t('time.hour')
console.log(deviceInfo.value); console.log(deviceInfo.value);
// 按分钟计费 // 按分钟计费
if (deviceInfo.value && deviceInfo.value.feeType === 'minute') { if (deviceInfo.value && deviceInfo.value.feeType === 'minute') {
@@ -547,6 +551,9 @@
// 生成计费说明文本 // 生成计费说明文本
const getPricingInfoText = () => { const getPricingInfoText = () => {
if (isIdrCurrency.value) {
return `${displayCurrencySymbol.value}${displayHourlyPrice.value}/${t('time.hour')}`
}
const unitPrice = getBillingUnitPrice() const unitPrice = getBillingUnitPrice()
const maxHourPrice = deviceFeeConfig.value.maxHourPrice || '5' const maxHourPrice = deviceFeeConfig.value.maxHourPrice || '5'
@@ -562,6 +569,9 @@
// 生成详细说明文本 // 生成详细说明文本
const getDetailInfoText = () => { const getDetailInfoText = () => {
if (isIdrCurrency.value) {
return `不足1${t('time.hour')}按1${t('time.hour')}计费,封顶${displayCurrencySymbol.value}${displayDepositCap.value},持续计费至${displayCurrencySymbol.value}${displayDepositCap.value}视为买断`
}
const freeMinutes = getFreeMinutes() const freeMinutes = getFreeMinutes()
const unitMinutes = getBillingUnitMinutes() const unitMinutes = getBillingUnitMinutes()
const depositAmount = deviceInfo.value.depositAmount || '99' const depositAmount = deviceInfo.value.depositAmount || '99'
@@ -584,6 +594,24 @@
} }
} }
const currencyCode = computed(() => {
return (positionInfo.value?.currency || '').toUpperCase()
})
const isIdrCurrency = computed(() => currencyCode.value === 'IDR')
const displayCurrencySymbol = computed(() => (isIdrCurrency.value ? 'Rp ' : '¥'))
const displayHourlyPrice = computed(() => {
if (isIdrCurrency.value) return `${IDR_HOUR_PRICE_DISPLAY}`
return deviceFeeConfig.value.maxHourPrice || '5.00'
})
const displayDepositCap = computed(() => {
if (isIdrCurrency.value) return `${IDR_DEPOSIT_DISPLAY}`
return deviceInfo.value.depositAmount || '99'
})
// 提交租借订单 // 提交租借订单
const submitRentOrder = async (payWay) => { const submitRentOrder = async (payWay) => {
try { try {
+86 -97
View File
@@ -17,80 +17,25 @@
</view> </view>
<!-- 内容区域 --> <!-- 内容区域 -->
<view class="main-content" :style="mainContentStyle"> <!-- #ifndef H5 -->
<!-- 全屏地图组件 --> <HomeMainNonH5 ref="mapRef" :mainContentStyle="mainContentStyle" :isLoading="isLoading" :userLocation="userLocation"
<!-- 支付宝小程序使用专用组件 --> :locationPermissionDenied="locationPermissionDenied" :positionList="positionList"
<!-- #ifdef MP-ALIPAY --> :filteredPositions="filteredPositions" :searchKeyword="searchKeyword" :bannerImages="bannerImages"
<MapComponentAlipay v-if="!isLoading && userLocation && !locationPermissionDenied" ref="mapRef" :hideMapOverlays="showGuidePopup || showNoticePopup || showActivityPopup"
:userLocation="userLocation" :positionList="positionList" :filteredPositions="filteredPositions" :locationPermissionText="$t('home.locationPermissionOffTip')" :enableLocationText="$t('home.enableLocation')"
:searchKeyword="searchKeyword" :enableMarkers="true" :bannerImages="bannerImages" :loadingLocationText="$t('common.loadingLocation')" :buyDeviceText="$t('home.buyDevice')"
:hideMapOverlays="showGuidePopup || showNoticePopup || showActivityPopup" @relocate="handleRelocate" :scanText="$t('home.scanToUse')" :personalCenterText="$t('home.personalCenter')" @relocate="handleRelocate"
@scan="handleScan" @showList="showLocationList" @markerTap="selectPosition" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition" @mapCenterChange="onMapCenterChange"
@mapCenterChange="onMapCenterChange" @bannerClick="handleBannerClick" @guide="openGuidePopup" /> @bannerClick="handleBannerClick" @guide="openGuidePopup" @enableLocation="handleEnableLocation" @buy="goToBuy"
<!-- #endif --> @my="goMy" />
<!-- 非支付宝小程序使用通用组件 --> <!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<MapComponent v-if="!isLoading && userLocation && !locationPermissionDenied" ref="mapRef"
:userLocation="userLocation" :positionList="positionList" :filteredPositions="filteredPositions"
:searchKeyword="searchKeyword" :enableMarkers="true" :bannerImages="bannerImages"
:hideMapOverlays="showGuidePopup || showNoticePopup || showActivityPopup" @relocate="handleRelocate"
@scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" @bannerClick="handleBannerClick" @guide="openGuidePopup" />
<!-- #endif -->
<!-- 地图加载状态 --> <!-- #ifdef H5 -->
<!-- #ifdef MP-ALIPAY --> <HomeMainH5 :mainContentStyle="mainContentStyle" :bannerImages="bannerImages" :loadingText="$t('common.loading')"
<view v-if="!userLocation" class="location-denied-placeholder"> :buyDeviceText="$t('home.buyDevice')" :scanText="$t('home.scanToUse')"
<view class="denied-content"> :personalCenterText="$t('home.personalCenter')" @bannerClick="handleBannerClick" @scan="handleScan"
<text class="denied-text">{{ $t('home.locationPermissionOffTip') }}</text> @buy="goToBuy" @my="goMy" />
<view class="denied-enable-btn" @click="handleEnableLocation"> <!-- #endif -->
<text class="denied-enable-btn-text">{{ $t('home.enableLocation') }}</text>
</view>
</view>
</view>
<!-- 支付宝端拒绝定位后直接展示提示不展示 common.loadingLocation -->
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>{{ $t('common.loadingLocation') }}</text>
</view>
</view>
<!-- #endif -->
</view>
<!-- 底部操作栏附近设备 / 扫码使用 / 我的 -->
<view class="bottom-actions">
<!-- <view class="action-btn secondary small btn-nearby" @click="showLocationList">
<view class="icon-wrap">
<image class="action-icon" src="/static/map.png" mode="aspectFit" />
</view>
<text class="action-label">{{ $t('home.nearbyDevices') }}</text>
</view> -->
<view class="action-btn secondary small btn-nearby" @click="goToBuy">
<view class="icon-wrap">
<image src="/static/shop_icon.png" class="action-icon" mode="scaleToFill" lazy-load="true"></image>
</view>
<text class="action-label">{{ $t('home.buyDevice') }}</text>
</view>
<view class="action-btn primary btn-scan" @click="handleScan">
<view class="icon-wrap">
<image class="action-icon" src="/static/scan-icon.png" mode="aspectFill" lazy-load="true" />
</view>
<text class="primary-label">{{ $t('home.scanToUse') }}</text>
</view>
<view class="action-btn secondary small btn-my" @click="goMy">
<view class="icon-wrap">
<image class="action-icon" src="/static/user.png" mode="aspectFit" lazy-load="true" />
</view>
<text class="action-label">{{ $t('home.personalCenter') }}</text>
</view>
</view>
<!-- 场地列表弹窗组件 --> <!-- 场地列表弹窗组件 -->
<LocationListSheet :show="showLocationPopup" :expanded="isExpanded" :positions="filteredPositions" <LocationListSheet :show="showLocationPopup" :expanded="isExpanded" :positions="filteredPositions"
@@ -256,12 +201,8 @@
calculateDistanceSync, calculateDistanceSync,
testDistanceCalculation testDistanceCalculation
} from '../../utils/mapUtils.js' } from '../../utils/mapUtils.js'
// 同样需要使用相对路径引入组件 import HomeMainNonH5 from '../../components/home/HomeMainNonH5.vue'
// 注意:从 pages/index/ 目录访问 components/ 需要使用 ../../components/ 路径 import HomeMainH5 from '../../components/home/HomeMainH5.vue'
import MapComponent from '../../components/MapComponent.vue'
// #ifdef MP-ALIPAY
import MapComponentAlipay from '../../components/MapComponentAlipay.vue'
// #endif
import LocationListSheet from '../../components/LocationListSheet.vue' import LocationListSheet from '../../components/LocationListSheet.vue'
import { import {
useI18n useI18n
@@ -441,27 +382,40 @@
appPlatform = 'ali' appPlatform = 'ali'
// #endif // #endif
// 调用接口获取广告内容 const platformCandidates = []
const res = await getCurrentAdvertisement({ if (appPlatform) {
appPlatform: appPlatform, // 微信平台 platformCandidates.push(appPlatform)
appType: 'user', // 用户端 }
pictureLocation: 'home_banner' // #ifdef H5
}) // H5 无固定 appPlatform,依次尝试常见值,兼容后端按平台分组配置广告位
platformCandidates.push('h5', 'wechat', 'ali')
// #endif
console.log('首页广告响应:', res) let loaded = false
for (const platform of Array.from(new Set(platformCandidates))) {
// 调用接口获取广告内容
const res = await getCurrentAdvertisement({
appPlatform: platform,
appType: 'user',
pictureLocation: 'home_banner'
})
if (res && res.code === 200 && res.data) { console.log('首页广告响应:', platform, res)
// 使用 imageList 字段(包含图片和链接信息)
const imageList = res.data.imageList || [] if (res && res.code === 200 && res.data) {
if (imageList.length > 0) { const imageList = res.data.imageList || []
bannerImageList.value = imageList if (imageList.length > 0) {
// 提取图片URL用于展示 bannerImageList.value = imageList
bannerImages.value = imageList.map(item => item.imageUrl) // 提取图片URL用于展示
} else { bannerImages.value = imageList.map(item => item.imageUrl)
console.warn('未获取到广告图片') loaded = true
break
}
} }
} else { }
console.warn('获取首页广告失败:', res?.msg || '未知错误')
if (!loaded) {
console.warn('未获取到首页广告图片')
} }
} catch (error) { } catch (error) {
console.error('获取首页广告失败:', error) console.error('获取首页广告失败:', error)
@@ -668,6 +622,11 @@
getBannerImages() getBannerImages()
]) ])
// #ifdef H5
// H5 首页不展示地图,跳过定位与附近设备加载
return
// #endif
// 1. 先获取用户位置 // 1. 先获取用户位置
await getUserLocationAndAddress() await getUserLocationAndAddress()
@@ -1626,6 +1585,36 @@
box-sizing: border-box; box-sizing: border-box;
} }
.h5-banner-section {
padding: 24rpx 20rpx 0;
box-sizing: border-box;
}
.h5-banner-swiper {
width: 100%;
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
background: #f5f5f5;
}
.h5-banner-item {
width: 100%;
height: 100%;
}
.h5-banner-image {
width: 100%;
height: 100%;
}
.h5-banner-empty {
padding: 80rpx 20rpx 0;
text-align: center;
color: #999;
font-size: 26rpx;
}
/* 顶部Logo和通知栏 */ /* 顶部Logo和通知栏 */
.header-section { .header-section {
width: 92%; width: 92%;
+13 -1
View File
@@ -124,6 +124,8 @@
const deviceInfo = ref(null) const deviceInfo = ref(null)
const passedTotalAmount = ref(null) const passedTotalAmount = ref(null)
const passedDepositAmount = ref(null) const passedDepositAmount = ref(null)
const currencyCode = ref('USD')
const IDR_DEPOSIT_DISPLAY = 99000
// 支付方式相关(微信/支付宝/H5-Antom 多平台) // 支付方式相关(微信/支付宝/H5-Antom 多平台)
const paymentMethods = ref([]) const paymentMethods = ref([])
@@ -149,6 +151,9 @@
}) })
const totalAmount = computed(() => { const totalAmount = computed(() => {
if (currencyCode.value === 'IDR') {
return `${IDR_DEPOSIT_DISPLAY}`
}
if (passedTotalAmount.value !== null) { if (passedTotalAmount.value !== null) {
return parseFloat(passedTotalAmount.value).toFixed(2); return parseFloat(passedTotalAmount.value).toFixed(2);
} }
@@ -156,7 +161,10 @@
return deposit.toFixed(2) return deposit.toFixed(2)
}) })
const currencySymbol = computed(() => 'USD') const currencySymbol = computed(() => {
if (currencyCode.value === 'IDR') return 'Rp'
return 'USD'
})
// 加载订单信息 // 加载订单信息
const loadOrderInfo = async () => { const loadOrderInfo = async () => {
@@ -244,10 +252,14 @@
const res = await getDeviceInfo(deviceNo.value); const res = await getDeviceInfo(deviceNo.value);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
deviceInfo.value = res.data.device; deviceInfo.value = res.data.device;
currencyCode.value = (res.data?.position?.currency || currencyCode.value || 'USD').toUpperCase()
if (deviceInfo.value && deviceInfo.value.depositAmount) { if (deviceInfo.value && deviceInfo.value.depositAmount) {
orderInfo.value.deposit = deviceInfo.value.depositAmount; orderInfo.value.deposit = deviceInfo.value.depositAmount;
} }
if (currencyCode.value === 'IDR') {
orderInfo.value.deposit = `${IDR_DEPOSIT_DISPLAY}`
}
} }
} catch (error) { } catch (error) {
console.error('获取设备信息失败:', error); console.error('获取设备信息失败:', error);
+10 -1
View File
@@ -24,6 +24,7 @@
</view> </view>
<!-- 验证码输入 --> <!-- 验证码输入 -->
<!-- #ifndef H5 -->
<view class="form-group"> <view class="form-group">
<view class="code-input-wrapper"> <view class="code-input-wrapper">
<input <input
@@ -38,6 +39,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #endif -->
<!-- 区域提示 --> <!-- 区域提示 -->
<view class="region-notice"> <view class="region-notice">
@@ -50,6 +52,7 @@
</view> </view>
<!-- 协议勾选 --> <!-- 协议勾选 -->
<!-- #ifndef H5 -->
<view class="agreement-box"> <view class="agreement-box">
<checkbox-group @change="onAgreementChange"> <checkbox-group @change="onAgreementChange">
<label class="agreement-label"> <label class="agreement-label">
@@ -63,6 +66,7 @@
</label> </label>
</checkbox-group> </checkbox-group>
</view> </view>
<!-- #endif -->
</view> </view>
</template> </template>
@@ -171,15 +175,19 @@
const handleLogin = async () => { const handleLogin = async () => {
if (!validatePhone()) return if (!validatePhone()) return
// #ifndef H5
if (!verifyCode.value) { if (!verifyCode.value) {
uni.showToast({ title: t('auth.codeRequired'), icon: 'none' }) uni.showToast({ title: t('auth.codeRequired'), icon: 'none' })
return return
} }
// #endif
// #ifndef H5
if (!isAgreed.value) { if (!isAgreed.value) {
uni.showToast({ title: t('auth.pleaseAgreeToTerms'), icon: 'none' }) uni.showToast({ title: t('auth.pleaseAgreeToTerms'), icon: 'none' })
return return
} }
// #endif
try { try {
uni.showLoading({ title: t('common.loggingIn') }) uni.showLoading({ title: t('common.loggingIn') })
@@ -187,7 +195,8 @@
loginType: 'SMS', loginType: 'SMS',
appid, appid,
phonenumber: getSubmitPhoneNumber(), phonenumber: getSubmitPhoneNumber(),
smsCode: verifyCode.value // H5 按产品要求不做验证码发送与校验,小程序端保持原流程
smsCode: verifyCode.value || ''
}) })
if (res && res.code !== 200) { if (res && res.code !== 200) {