页面“更多”国际化
This commit is contained in:
小林
30
package-lock.json
generated
30
package-lock.json
generated
@@ -25,7 +25,9 @@
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4070520250711001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4070520250711001",
|
||||
"@dcloudio/uni-ui": "^1.5.10",
|
||||
"@qiun/ucharts": "^2.5.0-20230101",
|
||||
"echarts": "^6.0.0",
|
||||
"mpvue-echarts": "^1.0.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.14.5"
|
||||
},
|
||||
@@ -3877,7 +3879,6 @@
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
@@ -3917,7 +3918,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -3938,7 +3938,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -3959,7 +3958,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -3980,7 +3978,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4001,7 +3998,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4022,7 +4018,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4043,7 +4038,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4064,7 +4058,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4085,7 +4078,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4106,7 +4098,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4127,7 +4118,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4148,7 +4138,6 @@
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4169,7 +4158,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4183,6 +4171,12 @@
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@qiun/ucharts": {
|
||||
"version": "2.5.0-20230101",
|
||||
"resolved": "https://registry.npmjs.org/@qiun/ucharts/-/ucharts-2.5.0-20230101.tgz",
|
||||
"integrity": "sha512-C7ccBgfPuGF6dxTRuMW0NPPMSCf1k/kh3I9zkRVBc5PaivudX/rPL+jd2Wty6gn5ya5L3Ob+YmYe09V5xw66Cw==",
|
||||
"license": "Apache"
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
|
||||
@@ -6446,7 +6440,6 @@
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"bin": {
|
||||
@@ -9619,6 +9612,12 @@
|
||||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mpvue-echarts": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mpvue-echarts/-/mpvue-echarts-1.0.0.tgz",
|
||||
"integrity": "sha512-tY73yPqfB3KvU5o5vMxOjqknJI+Z+s/dk2l6Uw/yo3Hz0NgDPqa8t2z6H+6e4AWqLu2TODjjOys2IUMq5/YOGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@@ -9679,7 +9678,6 @@
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
|
||||
@@ -53,7 +53,9 @@
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4070520250711001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4070520250711001",
|
||||
"@dcloudio/uni-ui": "^1.5.10",
|
||||
"@qiun/ucharts": "^2.5.0-20230101",
|
||||
"echarts": "^6.0.0",
|
||||
"mpvue-echarts": "^1.0.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.14.5"
|
||||
},
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
{
|
||||
|
||||
|
||||
"easycom": {
|
||||
"^qiun-(.*)": "@qiun/ucharts/components/$1/$1.vue"
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
|
||||
@@ -65,9 +65,7 @@
|
||||
<swiper class="indices-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" @change="handleSwiperChange">
|
||||
<swiper-item v-for="(index, i) in marketIndices" :key="i">
|
||||
<view class="index-item">
|
||||
<!-- 左右布局容器 -->
|
||||
<view class="index-content">
|
||||
<!-- 左侧数据区域 -->
|
||||
<view class="index-data">
|
||||
<text class="index-name">{{index.name}}</text>
|
||||
<text class="index-value">{{index.value}}</text>
|
||||
@@ -76,13 +74,15 @@
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧图表区域 -->
|
||||
<view class="chart-container">
|
||||
<canvas
|
||||
type="2d"
|
||||
:id="'index-chart-' + i"
|
||||
:canvas-id="'index-chart-' + i"
|
||||
class="index-chart"
|
||||
@init="onCanvasInit(i)"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
></canvas>
|
||||
</view>
|
||||
</view>
|
||||
@@ -171,13 +171,23 @@ export default {
|
||||
time: "2023-06-15T07:15:00Z"
|
||||
}
|
||||
],
|
||||
charts: [], // 存储图表实例
|
||||
canvasElements: [] // 存储canvas元素
|
||||
charts: [],
|
||||
systemInfo: null,
|
||||
dpr: 1
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.systemInfo = res;
|
||||
this.dpr = res.pixelRatio;
|
||||
}
|
||||
});
|
||||
},
|
||||
onReady() {
|
||||
// 页面初次渲染完成后初始化可见的图表
|
||||
this.initVisibleCharts();
|
||||
setTimeout(() => {
|
||||
this.initCharts();
|
||||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
formatNumber(num) {
|
||||
@@ -209,37 +219,50 @@ export default {
|
||||
url: `/pages/news/detail?title=${encodeURIComponent(news.title)}`
|
||||
});
|
||||
},
|
||||
// 保存canvas初始化信息
|
||||
onCanvasInit(index) {
|
||||
return (canvas, width, height) => {
|
||||
this.canvasElements[index] = { canvas, width, height };
|
||||
// 如果是当前显示的图表，立即初始化
|
||||
if (index === 0) { // 默认显示第一个
|
||||
this.initChart(index);
|
||||
}
|
||||
};
|
||||
},
|
||||
// 初始化指定索引的图表
|
||||
initChart(index) {
|
||||
if (!this.canvasElements[index]) return;
|
||||
|
||||
const { canvas, width, height } = this.canvasElements[index];
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height
|
||||
initCharts() {
|
||||
this.marketIndices.forEach((_, index) => {
|
||||
this.initChart(index);
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
// 获取当前指数的历史数据
|
||||
},
|
||||
initChart(index) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(`#index-chart-${index}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
if (!res[0] || !res[0].node) {
|
||||
setTimeout(() => this.initChart(index), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = res[0].node;
|
||||
const width = res[0].width;
|
||||
const height = res[0].height;
|
||||
|
||||
canvas.width = width * this.dpr;
|
||||
canvas.height = height * this.dpr;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: this.dpr
|
||||
});
|
||||
|
||||
const option = this.getChartOption(index);
|
||||
chart.setOption(option);
|
||||
|
||||
this.charts[index] = chart;
|
||||
canvas.setChart(chart);
|
||||
});
|
||||
},
|
||||
getChartOption(index) {
|
||||
const indexData = this.marketIndices[index];
|
||||
|
||||
// 设置图表配置
|
||||
const option = {
|
||||
return {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
axisPointer: { type: 'line' }
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
@@ -280,39 +303,44 @@ export default {
|
||||
symbol: 'none'
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
this.charts[index] = chart;
|
||||
|
||||
return chart;
|
||||
},
|
||||
// 初始化可见的图表
|
||||
initVisibleCharts() {
|
||||
// 初始化第一个图表（默认显示的）
|
||||
this.initChart(0);
|
||||
touchStart(e) {
|
||||
const chart = this.getChartFromEvent(e);
|
||||
chart && chart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: 0
|
||||
});
|
||||
},
|
||||
touchMove(e) {
|
||||
const chart = this.getChartFromEvent(e);
|
||||
chart && chart.dispatchAction({
|
||||
type: 'hideTip'
|
||||
});
|
||||
},
|
||||
touchEnd(e) {
|
||||
const chart = this.getChartFromEvent(e);
|
||||
chart && chart.dispatchAction({
|
||||
type: 'hideTip'
|
||||
});
|
||||
},
|
||||
getChartFromEvent(e) {
|
||||
const canvasId = e.currentTarget.id;
|
||||
const index = parseInt(canvasId.split('-')[2]);
|
||||
return this.charts[index];
|
||||
},
|
||||
// 轮播图切换时处理
|
||||
handleSwiperChange(e) {
|
||||
const current = e.detail.current;
|
||||
// 确保图表在切换时已初始化并重新绘制
|
||||
if (!this.charts[current]) {
|
||||
// 如果图表尚未初始化，则初始化它
|
||||
this.initChart(current);
|
||||
} else {
|
||||
// 否则重新调整大小
|
||||
if (this.charts[current]) {
|
||||
this.charts[current].resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时销毁图表实例，释放资源
|
||||
this.charts.forEach(chart => {
|
||||
if (chart) {
|
||||
chart.dispose();
|
||||
}
|
||||
chart && chart.dispose();
|
||||
});
|
||||
this.charts = [];
|
||||
this.canvasElements = [];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -322,7 +350,7 @@ export default {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx; /* 给底部导航留空间 */
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
@@ -361,8 +389,8 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label{
|
||||
margin-top: 20rpx;
|
||||
.label {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.total-assets {
|
||||
@@ -462,10 +490,9 @@ export default {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 市场指数左右布局样式 */
|
||||
.indices-swiper {
|
||||
width: 100%;
|
||||
height: 300rpx; /* 调整高度适应左右布局 */
|
||||
height: 300rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
@@ -477,19 +504,18 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 左右布局容器 */
|
||||
.index-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 左侧数据区域 - 占30%宽度 */
|
||||
.index-data {
|
||||
flex: 0 0 30%;
|
||||
flex: 0 0 28%; /* 减少左侧数据区域宽度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-right: 20rpx;
|
||||
padding-right: 15rpx; /* 减少右侧内边距 */
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -509,16 +535,17 @@ export default {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 右侧图表区域 - 占70%宽度 */
|
||||
.chart-container {
|
||||
flex: 0 0 70%;
|
||||
padding-left: 20rpx;
|
||||
flex: 1; /* 使用flex:1而不是固定百分比，让图表占满剩余空间 */
|
||||
padding-left: 15rpx; /* 减少左侧内边距 */
|
||||
position: relative;
|
||||
height: 100%; /* 确保高度充满容器 */
|
||||
}
|
||||
|
||||
.index-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
|
||||
@@ -2,33 +2,33 @@
|
||||
<view class="container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="header">
|
||||
<text class="title">设置</text>
|
||||
<text class="title">{{ $t('more.setting.title') }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 顶部用户信息 -->
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info" @click="navigateTo('/pages/user/profile')">
|
||||
<view class="avatar">
|
||||
<image :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="name">{{userInfo.nickname || '未登录'}}</text>
|
||||
<text class="phone">{{userInfo.phone ? hidePhone(userInfo.phone) : '点击登录'}}</text>
|
||||
<text class="name">{{ userInfo.nickname || $t('more.nologin') }}</text>
|
||||
<text class="phone">{{userInfo.phone ? hidePhone(userInfo.phone) : $t('more.clicklogin') }}</text>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<!-- 功能菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<!-- 银行卡 -->
|
||||
<view class="menu-item" @click="navigateTo('/pages/user/bankCard')">
|
||||
<view class="item-left">
|
||||
<uni-icons type="wallet" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">我的银行卡</text>
|
||||
<text class="text">{{ $t('more.bankcard') }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="tips" v-if="userInfo.bankCardCount > 0">{{userInfo.bankCardCount}}张</text>
|
||||
<text class="tips" v-if="userInfo.bankCardCount > 0">{{userInfo.bankCardCount}}</text>
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
@@ -37,44 +37,84 @@
|
||||
<view class="menu-item" @click="navigateTo('/pages/user/realAuth')">
|
||||
<view class="item-left">
|
||||
<uni-icons type="person" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">实名认证</text>
|
||||
<text class="text">{{ $t('more.authentication') }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="tips" :style="{color: userInfo.authStatus === 1 ? '#4a7dff' : '#ff5a5f'}">
|
||||
{{authStatusText[userInfo.authStatus] || '未认证'}}
|
||||
{{authStatusText[userInfo.authStatus] || $t('more.not_authenticated')}}
|
||||
</text>
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言选择 -->
|
||||
<view class="menu-item" @click="navigateTo('/pages/user/language')">
|
||||
<!-- 修改密码 -->
|
||||
<view class="menu-item" @click="navigateTo('/pages/user/changePassword')">
|
||||
<view class="item-left">
|
||||
<uni-icons type="compose" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">语言设置</text>
|
||||
<uni-icons type="locked" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">{{ $t('more.changePassword') }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="tips">{{languageText[userInfo.language] || '简体中文'}}</text>
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设置 -->
|
||||
<view class="menu-item" @click="navigateTo('/pages/user/settings')">
|
||||
<!-- 在线客服 -->
|
||||
<view class="menu-item" @click="contactCustomerService">
|
||||
<view class="item-left">
|
||||
<uni-icons type="gear" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">系统设置</text>
|
||||
<uni-icons type="chat" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">{{ $t('more.customerService') }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言设置 -->
|
||||
<view class="menu-item" @click="showLanguageModal = true">
|
||||
<view class="item-left">
|
||||
<uni-icons type="compose" size="20" color="#4a7dff"></uni-icons>
|
||||
<text class="text">{{ $t('more.languagesettings') }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="tips">{{currentLanguageText}}</text>
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<view class="logout-btn" @click="handleLogout" v-if="userInfo.isLogin">
|
||||
<text>退出登录</text>
|
||||
<text>{{ $t('more.logout')}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 语言选择弹窗 -->
|
||||
<view class="lang-modal" v-if="showLanguageModal">
|
||||
<view class="modal-mask" @click="showLanguageModal = false"></view>
|
||||
<view class="modal-content">
|
||||
<view class="modal-title">{{$t('more.selectlanguage')}}</view>
|
||||
<view class="lang-list">
|
||||
<view
|
||||
class="lang-item"
|
||||
v-for="(text, key) in languageOptions"
|
||||
:key="key"
|
||||
@click="handleLanguageChange(key)"
|
||||
:class="{ 'active': userInfo.language === key }"
|
||||
>
|
||||
<text>{{ text }}</text>
|
||||
<uni-icons
|
||||
type="checkmark"
|
||||
size="18"
|
||||
color="#4a7dff"
|
||||
v-if="userInfo.language === key"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<button class="modal-close" @click="showLanguageModal = false">
|
||||
{{ $t('more.close') }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -82,29 +122,65 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLanguageModal: false,
|
||||
userInfo: {
|
||||
avatar: '/static/avatar.jpg',
|
||||
nickname: '张三',
|
||||
phone: '13800138000',
|
||||
bankCardCount: 2,
|
||||
authStatus: 1, // 0-未认证 1-已认证 2-认证中 3-认证失败
|
||||
language: 'zh-CN',
|
||||
language: 'zh',
|
||||
isLogin: true
|
||||
},
|
||||
authStatusText: {
|
||||
0: '未认证',
|
||||
1: '已认证',
|
||||
2: '认证中',
|
||||
3: '认证失败'
|
||||
0: this.$t('more.not_authenticated'),
|
||||
1: this.$t('more.authenticated'),
|
||||
2: this.$t('more.authenticating'),
|
||||
3: this.$t('more.auth_failed')
|
||||
},
|
||||
languageText: {
|
||||
'zh-CN': '简体中文',
|
||||
'en-US': 'English',
|
||||
'zh-TW': '繁體中文'
|
||||
languageOptions: {
|
||||
'zh': 'Chinese',
|
||||
'en': 'English',
|
||||
}
|
||||
}
|
||||
},onShow() {
|
||||
this.setTabBarI18n();
|
||||
},
|
||||
computed: {
|
||||
currentLanguageText() {
|
||||
return this.languageOptions[this.userInfo.language] || $t('more.language')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
setTabBarI18n() {
|
||||
const locale = this.$i18n.locale;
|
||||
const tabBarTexts = {
|
||||
zh: ['首页', '基金', '股票', '资产', '更多'],
|
||||
en: ['Home', 'Market', 'Trade', 'Assets', 'More']
|
||||
};
|
||||
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('tabBar.index')
|
||||
});
|
||||
uni.setTabBarItem({
|
||||
index: 1,
|
||||
text: this.$t('tabBar.market')
|
||||
});
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('tabBar.trade')
|
||||
});
|
||||
uni.setTabBarItem({
|
||||
index: 3,
|
||||
text: this.$t('tabBar.assets')
|
||||
});
|
||||
uni.setTabBarItem({
|
||||
index: 4,
|
||||
text: this.$t('tabBar.more')
|
||||
});
|
||||
},
|
||||
// 隐藏手机号中间四位
|
||||
hidePhone(phone) {
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
@@ -117,16 +193,23 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// 联系客服
|
||||
contactCustomerService() {
|
||||
//跳转客服页面
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/customerService/index'
|
||||
// });
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
title: this.$t('common.tip'),
|
||||
content: this.$t('more.confirmLogout'),
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 这里调用退出登录接口
|
||||
uni.showLoading({
|
||||
title: '正在退出...'
|
||||
title: this.$t('common.loggingOut')
|
||||
})
|
||||
|
||||
// 模拟退出登录
|
||||
@@ -136,11 +219,11 @@ export default {
|
||||
this.userInfo.nickname = ''
|
||||
this.userInfo.phone = ''
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
title: this.$t('common.logoutSuccess'),
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 跳转到登录页或其他页面
|
||||
// 跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
@@ -148,6 +231,26 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 更改语言
|
||||
handleLanguageChange(lang) {
|
||||
this.userInfo.language = lang
|
||||
this.$i18n.locale = lang;
|
||||
this.showLanguageModal = false
|
||||
|
||||
this.setTabBarI18n();
|
||||
|
||||
uni.showToast({
|
||||
title: `${this.$t('more.languageChanged')}${this.languageOptions[lang]}`,
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
// 实际项目中这里可以调用API保存语言偏好
|
||||
// this.saveLanguagePreference(lang);
|
||||
|
||||
// 如果需要国际化，可以在这里触发语言更新
|
||||
this.$i18n.locale = lang;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -156,7 +259,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -166,7 +269,7 @@ export default {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
@@ -179,6 +282,7 @@ export default {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
@@ -186,6 +290,7 @@ export default {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
@@ -221,6 +326,7 @@ export default {
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
@@ -254,6 +360,10 @@ export default {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,5 +376,118 @@ export default {
|
||||
color: #ff5a5f;
|
||||
font-size: 32rpx;
|
||||
margin-top: 40rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 语言选择弹窗样式 */
|
||||
.lang-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: slide-up 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.lang-list {
|
||||
padding: 0 30rpx;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.lang-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.active {
|
||||
text {
|
||||
color: #4a7dff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,7 @@
|
||||
{
|
||||
// Login
|
||||
"index.Loading": "Loading...",
|
||||
"index.errMsg": "Failed to load",
|
||||
"login.loginButton": "Login",
|
||||
"login.usernamePlaceholder": "Please enter username",
|
||||
"login.idCardLabel": "Last 6 digits of ID card",
|
||||
@@ -7,7 +10,7 @@
|
||||
"login.appTitle": "European Stock Software",
|
||||
"login.rememberPassword": "Remember password",
|
||||
"login.forgotPassword": "Forgot password",
|
||||
"login.agreeTermsPrefix": "I have read and agree to",
|
||||
"login.agreeTermsPrefix": "I have read and agree to the",
|
||||
"login.agreeTermsSuffix": "User Agreement",
|
||||
"login.userAgreement": "User Agreement",
|
||||
"login.and": "and",
|
||||
@@ -17,27 +20,79 @@
|
||||
"login.languagechangeclose": "Done",
|
||||
"login.chooseLanguage": "Select Language",
|
||||
"login.changelanguage": "Change Language",
|
||||
"login.errors.agreeTermsFirst": "Please agree to the User Agreement and Privacy Policy first",
|
||||
"login.errors.emptyUsername": "Please enter username",
|
||||
"login.errors.invalidIdCard": "Please enter the last 6 digits of your ID card correctly",
|
||||
"login.errors.emptyPassword": "Please enter password",
|
||||
|
||||
// Registration
|
||||
"register.chooseLanguage": "Select Language",
|
||||
"register.languagechangeclose": "Done",
|
||||
"register.appTitle": "European Stock Software",
|
||||
"register.registerDesc": "Create an account to continue",
|
||||
"register.idCardLabel": "Last 6 digits of ID card",
|
||||
"register.idCardPlaceholder": "Please enter last 6 digits of ID card",
|
||||
"register.idCardPlaceholder": "Please enter the last 6 digits of ID card",
|
||||
"register.errors.emptyIdCard": "Please enter ID card number",
|
||||
"register.passwordLabel": "Password",
|
||||
"register.passwordTip": "Password must be at least 6 characters",
|
||||
"register.passwordPlaceholder": "Please enter password",
|
||||
"register.confirmPasswordLabel": "Confirm Password",
|
||||
"register.confirmPasswordPlaceholder": "Please confirm password again",
|
||||
"register.confirmPasswordPlaceholder": "Please enter password again",
|
||||
"register.inviteCodeLabel": "Invitation Code",
|
||||
"register.inviteCodePlaceholder": "Please enter invitation code",
|
||||
"register.emailLabel": "Email",
|
||||
"register.emailPlaceholder": "Please enter email",
|
||||
"register.agreeTermsPrefix": "I have read and agree to",
|
||||
"register.errors.emailRequired": "Email cannot be empty",
|
||||
"register.idCardLast6Error": "Please enter correct ID card number",
|
||||
"register.errors.invalidPassword": "Password must be at least 8 characters with both letters and numbers",
|
||||
"register.errors.emptyPassword": "Password cannot be empty",
|
||||
"register.errors.confirmPasswordRequired": "Please enter password again",
|
||||
"register.errors.invalidEmail": "Please enter a valid email",
|
||||
"register.errors.passwordMismatch": "Passwords do not match",
|
||||
"register.errors.invalidIdCard": "Please enter correct ID card number",
|
||||
"register.errors.agreeTermsFirst": "Please read and agree to the User Agreement and Privacy Policy first",
|
||||
"register.registerProcessing": "Registering...",
|
||||
"register.agreeTermsPrefix": "I have read and agree to the",
|
||||
"register.userAgreement": "User Agreement",
|
||||
"register.and": "and",
|
||||
"register.privacyPolicy": "Privacy Policy",
|
||||
"register.registerButton": "Register",
|
||||
"register.hasAccount": "Already have an account?",
|
||||
"register.loginNow": "Login now",
|
||||
"register.registerSuccess": "Registration successful"
|
||||
}
|
||||
"register.registerSuccess": "Registration successful",
|
||||
|
||||
// Home
|
||||
"home.welcome": "Welcome",
|
||||
"home.totalAssets": "Total Assets",
|
||||
|
||||
// Settings
|
||||
"more.setting.title": "Settings",
|
||||
"more.nologin": "Not logged in",
|
||||
"more.clicklogin": "Click to login",
|
||||
"more.bankcard": "Bank Cards",
|
||||
"more.authentication": "Real-name Authentication",
|
||||
"more.not_authenticated": "Not authenticated",
|
||||
"more.authenticated": "Authenticated",
|
||||
"more.authenticating": "Authenticating",
|
||||
"more.auth_failed": "Authentication failed",
|
||||
"more.changePassword": "Change Password",
|
||||
"more.customerService": "Customer Service",
|
||||
"more.languagesettings": "Language Settings",
|
||||
"more.logout": "Logout",
|
||||
"more.selectlanguage": "Select Language",
|
||||
"more.languageChanged": "Language changed to",
|
||||
"more.close": "Close",
|
||||
"more.confirmLogout": "Are you sure you want to logout?",
|
||||
|
||||
// Common
|
||||
"common.tip": "Tip",
|
||||
"common.loggingOut": "Logging out...",
|
||||
"common.logoutSuccess": "Logout successful",
|
||||
|
||||
// TabBar
|
||||
"tabBar.index": "Home",
|
||||
"tabBar.market": "Funds",
|
||||
"tabBar.trade": "Stocks",
|
||||
"tabBar.assets": "Assets",
|
||||
"tabBar.more": "More"
|
||||
}
|
||||
@@ -67,7 +67,40 @@
|
||||
|
||||
//首页
|
||||
"home.welcome":"欢迎",
|
||||
"home.totalAssets":"总资产"
|
||||
"home.totalAssets":"总资产",
|
||||
|
||||
|
||||
|
||||
//设置
|
||||
"more.setting.title":"设置",
|
||||
"more.nologin":"未登录",
|
||||
"more.clicklogin":"点击登录",
|
||||
"more.bankcard":"银行卡",
|
||||
"more.authentication":"实名认证",
|
||||
"more.not_authenticated":"未认证",
|
||||
"more.authenticated":"已认证",
|
||||
"more.authenticating":"认证中",
|
||||
"more.auth_failed":"认证失败",
|
||||
"more.changePassword":"修改密码",
|
||||
"more.customerService":"在线客服",
|
||||
"more.languagesettings":"语言设置",
|
||||
"more.logout":"退出登录",
|
||||
"more.selectlanguage":"选择语言",
|
||||
"more.languageChanged":"语言已切换成",
|
||||
"more.close":"关闭",
|
||||
"more.confirmLogout":"确定要退出登录吗？",
|
||||
|
||||
"common.tip":"提示",
|
||||
"common.loggingOut":"正在退出登录...",
|
||||
"common.logoutSuccess":"退出登录成功",
|
||||
|
||||
"tabBar.index":"首页",
|
||||
"tabBar.market":"基金",
|
||||
"tabBar.trade":"股票",
|
||||
"tabBar.assets":"资产" ,
|
||||
"tabBar.more":"更多"
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user