pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:国际化多语言适配

Browse Source
This commit is contained in:
ISFP_T
2025-10-29 15:48:40 +08:00
parent 985d739324
commit 3d67dc928d
41 changed files with 2636 additions and 2801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+60 -34
View File
@@ -1,19 +1,23 @@
<template>
<view class="container fullscreen">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
<text class="navbar-title">风电者共享风扇&暖手充电宝</text>
</view>
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
<text class="navbar-title">{{ $t('home.title') }}</text>
</view>
<view class="map-notice" v-if="noticeText" @click="openNoticePopup">
</view>
<!-- 顶部信息区域（通知、招商等） -->
<view class="top-info-section" :style="{ top: (statusBarHeight + navBarHeight) + 'px' }">
<!-- 通知栏 -->
<view class="notice-wrapper" v-if="noticeText" @click="openNoticePopup">
<uv-notice-bar :text="noticeText" :speed="50" :show-icon="true" color="#07c160" bg-color="#E8F8EF"
icon="volume"></uv-notice-bar>
</view>
</view>
<!-- 内容区域 -->
<view class="main-content" :style="{ paddingTop: (statusBarHeight) + 'px' }">
<!-- 内容区域 -->
<view class="main-content" :style="{ paddingTop: (statusBarHeight + navBarHeight + noticeHeight) + 'px' }">
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
@@ -25,7 +29,7 @@
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>正在获取位置信息...</text>
<text>{{ $t('common.loadingLocation') }}</text>
</view>
</view>
</view>
@@ -36,28 +40,28 @@
<view class="icon-wrap">
<image class="action-icon" src="/static/map.png" mode="aspectFit" />
</view>
<text class="action-label">附近设备</text>
<text class="action-label">{{ $t('home.nearbyDevices') }}</text>
</view> -->
<view class="action-btn secondary small btn-nearby" @click="openPopup">
<view class="icon-wrap">
<image src="/static/use_help.png" class="action-icon" mode="aspectFit"></image>
</view>
<text class="action-label">使用指南</text>
<text class="action-label">{{ $t('home.useGuide') }}</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" />
</view>
<text class="primary-label">扫码使用</text>
<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" />
</view>
<text class="action-label">个人中心</text>
<text class="action-label">{{ $t('home.personalCenter') }}</text>
</view>
</view>
@@ -67,7 +71,7 @@
:expanded="isExpanded"
:positions="filteredPositions"
:isLoading="isLoading"
title="附近设备场地"
:title="$t('home.nearbyDeviceLocation')"
@close="hideLocationList"
@select="selectPositionFromPopup"
@navigate="navigateToPosition"
@@ -77,7 +81,7 @@
<view class="loading-overlay" v-if="isLoading">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>正在获取场地信息...</text>
<text>{{ $t('common.loadingPosition') }}</text>
</view>
</view>
@@ -86,17 +90,17 @@
<view class="popup-mask" @click.stop="showPhoneAuthPopup = false"></view>
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">授权获取手机号</text>
<text class="popup-title">{{ $t('auth.authTitle') }}</text>
</view>
<view class="popup-body">
<view class="auth-desc">
<text>为了提供更好的服务和紧急联系，需要授权获取您的手机号</text>
<text>{{ $t('auth.authDesc') }}</text>
</view>
<button class="auth-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
<text>一键获取手机号</text>
<text>{{ $t('auth.getPhoneNumber') }}</text>
</button>
<view class="auth-cancel" @click="showPhoneAuthPopup = false">
<text>暂不授权</text>
<text>{{ $t('auth.notNow') }}</text>
</view>
</view>
</view>
@@ -106,7 +110,7 @@
<uv-popup ref="guidePopup" mode="center" round="24" :overlay="true" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
<view class="guide-popup">
<view class="guide-header">
<text class="guide-title">使用指南</text>
<text class="guide-title">{{ $t('guide.title') }}</text>
<!-- <view class="guide-close" @click="closeGuidePopup">
<uv-icon name="close" size="20"></uv-icon>
</view> -->
@@ -115,8 +119,8 @@
<view class="guide-step" v-for="(step, idx) in guideSteps" :key="idx">
<view class="step-index">{{ idx + 1 }}</view>
<view class="step-info">
<view class="step-title">{{ step.title }}</view>
<view class="step-desc">{{ step.desc }}</view>
<view class="step-title">{{ $t('guide.step' + (idx + 1) + 'Title') }}</view>
<view class="step-desc">{{ $t('guide.step' + (idx + 1) + 'Desc') }}</view>
</view>
</view>
</view>
@@ -133,7 +137,7 @@
<uv-popup ref="noticePopup" mode="center" round="24" :overlay="true" :closeOnClickOverlay="true" :safeAreaInsetBottom="false">
<view class="notice-popup">
<view class="notice-header">
<text class="notice-title">通知公告</text>
<text class="notice-title">{{ $t('home.noticeTitle') }}</text>
</view>
<view class="notice-content">
<text class="notice-text">{{ noticeText }}</text>
@@ -182,6 +186,8 @@
// 注意：从 pages/index/ 目录访问 components/ 需要使用 ../../components/ 路径
import MapComponent from '../../components/MapComponent.vue'
import LocationListSheet from '../../components/LocationListSheet.vue'
import { useI18n } from '../../utils/i18n.js'
// 开启右上角分享菜单（仅 mp-weixin 有效）
// #ifdef MP-WEIXIN
wx.showShareMenu({
@@ -190,6 +196,8 @@
})
// #endif
const { t: $t } = useI18n()
// 响应式数据
const searchKeyword = ref('')
const userLocation = ref(null)
@@ -205,6 +213,7 @@
// 导航栏高度相关
const statusBarHeight = ref(0)
const navBarHeight = ref(44) // 默认导航栏内容高度
const noticeHeight = ref(0) // 通知栏高度
// 使用指南步骤
const guideSteps = ref([
@@ -240,6 +249,11 @@
const res = await getNoticeTextData(parasm);
noticeText.value = res.data.noticeContent;
// 设置通知栏高度
if (res.data.noticeContent) {
noticeHeight.value = 50 // 通知栏高度约50px
}
// 将通知内容存储到本地缓存
try {
uni.setStorageSync('noticeContent', res.data.noticeContent);
@@ -400,7 +414,7 @@ const noticePopup = ref(null)
} catch (error) {
console.error('获取位置失败:', error)
uni.showToast({
title: '获取位置失败，显示默认地图',
title: $t('home.getLocationFailed'),
icon: 'none'
})
}
@@ -578,7 +592,7 @@ const noticePopup = ref(null)
uni.hideLoading()
uni.showToast({
title: '定位成功',
title: $t('home.locateSuccess'),
icon: 'success',
duration: 1500
})
@@ -587,7 +601,7 @@ const noticePopup = ref(null)
uni.hideLoading()
uni.showToast({
title: e.errMsg || '定位失败，请检查定位权限',
title: e.errMsg || $t('home.locateFailed'),
icon: 'none',
duration: 2000
})
@@ -691,7 +705,7 @@ const noticePopup = ref(null)
if (!deviceNo) {
uni.showToast({
title: '无效的设备二维码',
title: $t('home.invalidQRCode'),
icon: 'none'
})
return
@@ -830,16 +844,18 @@ const closeNoticePopup = () => {
export default {
// 分享给朋友
onShareAppMessage() {
const $t = this.$t || ((key) => key)
return {
title: '风电者 - 共享风扇暖手充电宝',
title: $t('share.title'),
path: '/pages/index/index',
// imageUrl: '/static/logo.png'
}
},
// 朋友圈
onShareTimeline() {
const $t = this.$t || ((key) => key)
return {
title: '风电者 - 共享风扇暖手充电宝',
title: $t('share.title'),
query: '',
// imageUrl: '/static/logo.png'
}
@@ -889,6 +905,8 @@ const closeNoticePopup = () => {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 180rpx; /* 为底部按钮留出空间 */
box-sizing: border-box;
}
/* 顶部Logo和通知栏 */
@@ -1376,7 +1394,7 @@ const closeNoticePopup = () => {
top: 0;
left: 0;
right: 0;
bottom: 0;
bottom: 180rpx; /* 为底部按钮留出空间 */
background: #f6f7fb;
display: flex;
align-items: center;
@@ -1502,11 +1520,19 @@ const closeNoticePopup = () => {
line-height: 1;
}
.map-notice {
/* 顶部信息区域 */
.top-info-section {
position: fixed;
left: 0;
right: 0;
z-index: 998;
background: transparent;
}
.notice-wrapper {
margin: 0 20rpx;
margin-top: 10rpx;
padding: 10rpx 0;
border-radius: 20rpx;
z-index: 15;
}
/* 使用指南弹窗样式 */