devops/ece.suwa3d.com
1
0 Fork 0
forked from natuka/web.puabadge.com
Code Issues Pull Requests Actions Projects Releases Wiki Activity

电商翻译

Browse Source
This commit is contained in:
Linzm committed 2025-11-13 16:21:57 +08:00
1 parent 6938e12196
commit 75e04a4de3
12 files changed
+854 -891
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/badge/index.vue
+79 -72
View File
@@ -5,7 +5,7 @@
<div class="order-type">
<div class="order-type-item">
<div class="order-type-item-title" v-if="orderStat.order_no">
订单编号
{{ toValueWithout("订单编号") }}
</div>
<div class="order-type-item-title">
{{ orderStat.order_no }}
@@ -13,24 +13,24 @@
</div>
<div class="order-type-item" v-if="prodId">
<div class="order-type-item-title">
产品类型
{{ toValueWithout("产品类型") }}
</div>
<div class="order-type-item-title" v-if="typeId == 1">
立体徽章
{{ toValueWithout("立体徽章") }}
</div>
<div class="order-type-item-title" v-if="typeId == 2">
浮雕相框
{{ toValueWithout("浮雕相框") }}
</div>
<div class="order-type-item-title" v-if="typeId == 3">
3D冰箱贴
{{ toValueWithout("3D冰箱贴") }}
</div>
<div class="order-type-item-title" v-if="typeId == 4">
3D卡通手办
{{ toValueWithout("3D卡通手办") }}
</div>
</div>
</div>
<div class="size-title">
剩余兑换数量
{{ toValueWithout("剩余兑换数量") }}
</div>
<div class="size-options">
<div class="size-item" v-for="item in sizeList" :key="item.id">
@@ -38,7 +38,7 @@
{{ item.size }}
</div>
<div class="size-count">
（剩余兑换：{{ item.remaining }}）
（{{ toValueWithout("剩余兑换") }}：{{ item.remaining }}）
</div>
</div>
</div>
@@ -46,41 +46,41 @@
<div class="badge-info" v-if="trialCode == false">
<div class="badge-item" @click="goToRecord">
<div class="badge-title">
设计图集
{{ toValueWithout("设计图集") }}
</div>
<div class="badge-count">
{{ orderStat.create_count || 0 }}张
{{ orderStat.create_count || 0 }}{{ toValueWithout("张") }}
</div>
</div>
<div class="badge-item" @click="goToMyOrder">
<div class="badge-title">
我的订单
{{ toValueWithout("我的订单") }}
</div>
<div class="badge-count">
{{ orderStat.order_count || 0 }}笔
{{ orderStat.order_count || 0 }}{{ toValueWithout("笔") }}
</div>
</div>
</div>
<div class="badge-phone" v-if="trialCode == true">
<van-field
label="手机号码"
:label="toValueWithout('手机号码')"
type="number"
v-model="mobile"
placeholder="请输入手机号"
:placeholder="toValueWithout('请输入手机号')"
required
maxlength="11"
:rules="[{ required: true, message: '请输入手机号' }]"
:rules="[{ required: true, message: toValueWithout('请输入手机号') }]"
@blur="onBlur"
@confirm="onBlur"
/>
<p style="font-size: 12px; color: #000; margin-left: 16px;">注：需要先输入手机号才可体验徽章设计</p>
<p style="font-size: 12px; color: #000; margin-left: 16px;">{{ toValueWithout("注：需要先输入手机号才可体验徽章设计") }}</p>
<div class="style-box">
<div class="style-box-item">
<div class="style-item-title" :class="{ styleActive: prodId == 7 || prodId == 1 }" @click="styleChange(7)">
{{ prop == '3D真人肖像' ? '3D真人肖像' : '人物立体徽章' }}
{{ prop == '3D真人肖像' ? toValueWithout('3D真人肖像') : toValueWithout('人物立体徽章') }}
</div>
<div class="style-item-title" :class="{ styleActive: prodId == 8 || prodId == 2 }" @click="styleChange(8)">
宠物立体徽章
{{ toValueWithout("宠物立体徽章") }}
</div>
</div>
</div>
@@ -93,10 +93,10 @@
</div>
<div class="step-content">
<div class="step-title">
上传正面照片
{{ toValueWithout("上传正面照片") }}
</div>
<div class="step-desc">
1张五官清晰的正面照片
{{ toValueWithout("1张五官清晰的正面照片") }}
</div>
</div>
</div>
@@ -106,10 +106,10 @@
</div>
<div class="step-content">
<div class="step-title">
确认下单
{{ toValueWithout("确认下单") }}
</div>
<div class="step-desc">
选择一个你喜欢的设计
{{ toValueWithout("选择一个你喜欢的设计") }}
</div>
</div>
</div>
@@ -117,20 +117,20 @@
<div class="tag-change-box" v-if="trialCode == false">
<div class="tag-change-item">
<div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 }" @click="prodChange(7)">
人物主体
{{ toValueWithout("人物主体") }}
</div>
<div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 }" @click="prodChange(8)">
宠物主体
{{ toValueWithout("宠物主体") }}
</div>
</div>
<div style="font-size: 12px; color: #888; text-align: center;">注：不同主体的照片检测标准不同</div>
<div style="font-size: 12px; color: #888; text-align: center;">{{ toValueWithout("不同主体的照片检测标准不同") }}</div>
</div>
<div class="step-line" v-if="prop == '3D真人肖像'">
<div class="step-line-item">
<div class="step-line-item-title">
<span style="display: flex; align-items: center;justify-content: center;">
<span style="height: 1px; background: #ccc;width: 50px;"></span>
<span style="margin: 0 8px; color: #888;">照片示例</span>
<span style="margin: 0 8px; color: #888;">{{ toValueWithout("照片示例") }}</span>
<span style="height: 1px; background: #ccc;width: 50px;"></span>
</span>
</div>
@@ -154,21 +154,21 @@
<div v-if="!picture" class="photo-upload-box">
<div class="photo-upload-header" @click="imgShow = true">
<van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
<span class="photo-upload-guide-text">图片上传指南</span>
<span class="photo-upload-guide-text">{{ toValueWithout("图片上传指南") }}</span>
</div>
<div class="photo-upload-area">
<div class="photo-upload-plus">
+
</div>
<div class="photo-upload-text">
点击上传照片
{{ toValueWithout("点击上传照片") }}
</div>
<div class="photo-upload-tip">
*上传照片时建议勾选[原图]
*{{ toValueWithout("上传照片时建议勾选[原图]") }}
</div>
</div>
<div class="photo-upload-footer">
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
{{ toValueWithout("请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务") }}
</div>
</div>
<img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
@@ -177,41 +177,41 @@
</div>
</div>
<div v-if="typeId == 4 && kindList.length > 0">
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">风格类型</div>
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("风格类型") }}</div>
<div class="kind-box">
<div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }">
<div class="kind-item-title" @click="kindChange(item.id)">
{{ item.name }}
{{ toValueWithout(item.name) }}
</div>
</div>
</div>
</div>
<div v-if="typeId == 4 && prodId == 19">
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">多视角参考图</div>
<div style="font-size: 12px; color: #aaa; margin-top: 8px;padding: 0 16px;">AI建模具有随机性，上传参考图有助于更好的还原主体特征</div>
<div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("多视角参考图") }}</div>
<div style="font-size: 12px; color: #aaa; margin-top: 8px;padding: 0 16px;">{{ toValueWithout("AI建模具有随机性，上传参考图有助于更好的还原主体特征") }}</div>
<div class="photo-upload-box-refer">
<van-uploader v-model="referPicture" multiple :max-count="3" :max-size="10 * 1024 * 1024" @oversize="onOversize" :deletable="true" :show-preview="true" :before-read="beforeRead" upload-icon="plus" />
</div>
</div>
<div v-if="typeId != 4">
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">温馨提示：请上传只有1-3只宠物的照片</div>
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">{{ toValueWithout("温馨提示：请上传只有") }}{{ prop == '3D真人肖像' ? '1' : '1-3' }}{{ toValueWithout("人的照片") }}</div>
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">{{ toValueWithout("温馨提示：请上传只有") }}1-3{{ toValueWithout("只宠物的照片") }}</div>
</div>
<div style="height: 120px;"></div>
<div class="design-action-bar">
<div class="design-left">
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
<span v-if="trialCode == false" class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
<span v-if="trialCode == true" class="design-remaining">体验1次</span>
<span v-if="trialCode == false" class="design-remaining">{{ toValueWithout("剩余") }}{{ orderStat.remain_count || 0 }}{{ toValueWithout("次") }}</span>
<span v-if="trialCode == true" class="design-remaining">{{ toValueWithout("体验1次") }}</span>
</div>
<button class="design-btn" @click="goToPreview">
<span>开始设计</span>
<span>{{ toValueWithout("开始设计") }}</span>
<img class="design-arrow" src="@/assets/badge/arrow.png" alt="">
</button>
</div>
</div>
<van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
<van-action-sheet v-model:show="imgShow" :title="toValueWithout('图片上传指南')" :close-on-click-overlay="true" closeable>
<div style="padding: 0 16px 24px 16px;">
<div style="text-align: center;">
<img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;">
@@ -220,19 +220,19 @@
<div style="flex: 1; text-align: center;">
<img :src="sundryList[1].path" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
多主体
{{ toValueWithout("多主体") }}
</div>
</div>
<div style="flex: 1; text-align: center;">
<img :src="sundryList[2].path" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
光线昏暗
{{ toValueWithout("光线昏暗") }}
</div>
</div>
<div style="flex: 1; text-align: center;">
<img :src="sundryList[3].path" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
后侧面及背影
{{ toValueWithout("后侧面及背影") }}
</div>
</div>
</div>
@@ -240,19 +240,19 @@
<div style="flex: 1; text-align: center;">
<img :src="sundryList[4].path" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
照片模糊
{{ toValueWithout("照片模糊") }}
</div>
</div>
<div style="flex: 1; text-align: center;">
<img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;">
照片留白过少
{{ toValueWithout("照片留白过少") }}
</div>
</div>
</div>
<div style="margin-top: 24px; text-align: center;">
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="imgShow = false">
我已了解
{{ toValueWithout("我已了解") }}
</button>
</div>
</div>
@@ -265,10 +265,17 @@ import "vue-cropper-h5/dist/style.css"
import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
import type { UploaderFileListItem } from 'vant'
import * as badgeApi from '@/api/badge'
import { useTranslation } from "i18next-vue";
import * as i18n from '@/lang/utils'
import { toValueWithout } from '@/lang/utils'
import { localStorage } from '@/utils/local-storage'
import CryptoJS from 'crypto-js'
// 初始化翻译功能
const { t } = useTranslation();
i18n.set(t);
const show = ref(false)
const imgShow = ref(false)
@@ -376,16 +383,16 @@ const getKindList = () => {
const prodChange = (id: number) => {
console.log('prodChange', id)
if (typeId.value == 3 && id == 7) {
showToast('人物3D冰箱贴暂未开放')
showToast(toValueWithout('人物3D冰箱贴暂未开放'))
return
}
if (typeId.value == 4) {
if(prodId.value == 19) {
showToast('该订单属于宠物卡通手办')
showToast(toValueWithout('该订单属于宠物卡通手办'))
return
}
if(prodId.value == 1) {
showToast('该订单属于人物卡通手办')
showToast(toValueWithout('该订单属于人物卡通手办'))
return
}
}
@@ -409,11 +416,11 @@ function goToPreview() {
}
console.log('goToPreview')
if (!imgurl.value) {
showToast('请先上传照片')
showToast(toValueWithout('请先上传照片'))
return
}
if (orderStat.value.remain_count <= 0) {
showToast('剩余次数不足')
showToast(toValueWithout('剩余次数不足'))
return
}
isLoading.value = true
@@ -427,12 +434,12 @@ function goToPreview() {
// 一次性体验链接
const trialPhone = async () => {
if (!mobile.value) {
showToast('请输入手机号');
showToast(toValueWithout('请输入手机号'));
return;
}
const mobileReg = /^1[3-9]\d{9}$/;
if (!mobileReg.test(mobile.value)) {
showToast('请输入正确的手机号');
showToast(toValueWithout('请输入正确的手机号'));
return;
}
await badgeApi.trialPhone({
@@ -469,14 +476,14 @@ function getbase64Data(data) {
imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight;
if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于300*300像素的照片')
showToast(toValueWithout('请上传尺寸大于300*300像素的照片'))
imgurl.value = null
picture.value = null
return false;
}
const blob = base64ToBlob(data);
if (blob.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
showToast(toValueWithout('照片大小不能超过10M'))
imgurl.value = null
picture.value = null
return false;
@@ -510,7 +517,7 @@ function imgorigoinf(data) {
imageWidth.value = img.naturalWidth;
imageHeight.value = img.naturalHeight;
if (imageWidth.value < 300 || imageHeight.value < 300) {
showToast('请上传尺寸大于300*300像素的照片')
showToast(toValueWithout('请上传尺寸大于300*300像素的照片'))
setTimeout(() => {
const btn = document.querySelector('.btn')
if (btn) {
@@ -555,13 +562,13 @@ const sendFaceToOss = async (src: string, url: string, path: string) => {
}).then((res: any) => {
console.log('faceCheck', res)
showSuccessToast({
message: '人脸检测成功',
message: toValueWithout('人脸检测成功'),
duration: 2000,
})
}).catch((err) => {
console.log('faceCheck', err)
showFailToast({
message: err.message || '人脸检测失败',
message: err.message || toValueWithout('人脸检测失败'),
icon: 'none',
duration: 2000,
})
@@ -576,7 +583,7 @@ const sendFaceToOss = async (src: string, url: string, path: string) => {
} catch (err) {
closeToast()
showFailToast({
message: err.message || '上传失败',
message: err.message || toValueWithout('上传失败'),
icon: 'none',
duration: 2000,
})
@@ -585,7 +592,7 @@ const sendFaceToOss = async (src: string, url: string, path: string) => {
const onOversize = (file: any) => {
if (file.size > 10 * 1024 * 1024) {
showToast('照片大小不能超过10M')
showToast(toValueWithout('照片大小不能超过10M'))
return false
}
return true
@@ -600,7 +607,7 @@ const beforeRead = (file: any) => {
return new Promise((resolve, reject) => {
const raw: File = input.file || input
if (raw.size > MAX_SIZE) {
showToast('照片大小不能超过10M')
showToast(toValueWithout('照片大小不能超过10M'))
reject(false)
return
}
@@ -614,7 +621,7 @@ const beforeRead = (file: any) => {
imageHeight.value = height
URL.revokeObjectURL(objectUrl)
if (width < MIN_WIDTH || height < MIN_HEIGHT) {
showToast(`请上传尺寸大于${MIN_WIDTH}×${MIN_HEIGHT}像素的照片`)
showToast(toValueWithout(`请上传尺寸大于${MIN_WIDTH}×${MIN_HEIGHT}像素的照片`))
reject(false)
return
}
@@ -627,13 +634,13 @@ const beforeRead = (file: any) => {
resolve(out)
}
reader.onerror = () => {
showToast('图片读取失败')
showToast(toValueWithout('图片读取失败'))
reject(false)
}
reader.readAsDataURL(raw)
}
img.onerror = () => {
showToast('图片加载失败')
showToast(toValueWithout('图片加载失败'))
URL.revokeObjectURL(objectUrl)
reject(false)
}
@@ -658,7 +665,7 @@ const beforeRead = (file: any) => {
const pid = ref('')
const getPid = async () => {
showLoadingToast({
message: '上传中...',
message: toValueWithout('上传中...'),
forbidClick: true,
loadingType: 'spinner',
duration: 0,
@@ -694,7 +701,7 @@ const getPid = async () => {
closeToast()
console.error('上传失败:', err)
showFailToast({
message: '上传失败',
message: toValueWithout('上传失败'),
duration: 2000,
})
isLoading.value = false
@@ -771,11 +778,11 @@ const createLog = () => {
type_id: typeId.value,
kind_id: kindId.value
}
badgeApi.createLog(params).then((res: any) => {
badgeApi.createLog(params).then((res: any) => {
console.log('createLog', res)
closeToast()
showSuccessToast({
message: '照片上传成功',
message: toValueWithout('照片上传成功'),
duration: 2000,
})
setTimeout(() => {
@@ -842,12 +849,12 @@ const userId = ref('')
const onBlur = async () => {
console.log(mobile.value);
if (!mobile.value) {
showToast('请输入手机号');
showToast(toValueWithout('请输入手机号'));
return;
}
const mobileReg = /^1[3-9]\d{9}$/;
if (!mobileReg.test(mobile.value)) {
showToast('请输入正确的手机号');
showToast(toValueWithout('请输入正确的手机号'));
return;
}
}
@@ -1070,7 +1077,7 @@ onMounted(() => {
.photo-upload-plus {
font-size: 48px;
color: #c2c2c2;
margin-bottom: 8px;
margin-bottom: 0;
}
.photo-upload-text {
font-size: 16px;
@@ -1083,7 +1090,7 @@ onMounted(() => {
}
.photo-upload-footer {
position: absolute;
bottom: 10px;
bottom: 0px;
left: 0;
width: 100%;
text-align: center;