You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
427 lines
9.0 KiB
427 lines
9.0 KiB
<template>
|
|
<view class="v-pages-translate">
|
|
<view class="v-translate-bg"></view>
|
|
<view class="v-translate-card container-fluid v-translate-box">
|
|
<view class="row select flex-align-center">
|
|
<view class="col row select-item flex-align-center left" @click="fromShow = true"
|
|
:class="exchange?'right-to-left':'left-to-right'">
|
|
<text class="col">{{ActiveFrom.label}}</text>
|
|
<image class="img" mode="widthFix"
|
|
src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate-down.png">
|
|
</image>
|
|
</view>
|
|
<view class="exchange" @click="exchange=!exchange">
|
|
<image class="img" mode="widthFix"
|
|
src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate.png"></image>
|
|
</view>
|
|
<view class="col row select-item flex-align-center right" @click="toShow = true"
|
|
:class="exchange?'left-to-right':'right-to-left'">
|
|
<text class="col">{{ActiveTo.label}}</text>
|
|
<image class="img" mode="widthFix"
|
|
src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate-down.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="p-l-24 p-r-24">
|
|
<uni-easyinput class="translate" :inputBorder="false" maxlength="-1" placeholderStyle="fontSize:16px" type="textarea"
|
|
v-model="ActiveText" placeholder="请输入翻译内容" @confirm="gotoTranslate"></uni-easyinput>
|
|
</view>
|
|
|
|
<view class="result">
|
|
<zero-markdown-view :markdown="resultText"></zero-markdown-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn container-fluid" @click="chooseImage()">
|
|
<view>
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-camera.png" class="img"
|
|
mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<view class="text">图片翻译</view>
|
|
</view>
|
|
<view class="btnText">上传/拍照</view>
|
|
<u-picker :show="fromShow" :columns="fromRange" keyName="label" :closeOnClickOverlay="true"
|
|
@confirm="changeFrom" @cancel="fromShow = false" @close="fromShow = false"></u-picker>
|
|
<u-picker :show="toShow" :columns="toRange" keyName="label" :closeOnClickOverlay="true" @confirm="changeTo"
|
|
@cancel="toShow = false" @close="toShow = false"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UPicker from '@/uni_modules/uview-ui/components/u-picker/u-picker.vue'
|
|
import ZeroMarkdownView from "@/subPageC/components/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue"
|
|
export default {
|
|
components: {
|
|
UPicker,
|
|
ZeroMarkdownView
|
|
},
|
|
data() {
|
|
return {
|
|
//公共路径
|
|
rootPath: this.$config.ROOTPATH,
|
|
imageSrc: "",
|
|
imageTitle: "",
|
|
search_result: [],
|
|
ActiveText: "",
|
|
resultText: "",
|
|
exchange: false,
|
|
fromShow: false,
|
|
toShow: false,
|
|
ActiveFrom: {
|
|
id: 0,
|
|
value: 'auto',
|
|
label: "自动识别"
|
|
},
|
|
fromRange: [
|
|
[{
|
|
id: 0,
|
|
value: 'auto',
|
|
label: "自动识别"
|
|
},
|
|
{
|
|
id: 1,
|
|
value: 'zh',
|
|
label: "中文"
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 'en',
|
|
label: "英语"
|
|
}, {
|
|
id: 3,
|
|
value: 'jp',
|
|
label: "日语"
|
|
}, {
|
|
id: 4,
|
|
value: 'kor',
|
|
label: "韩语"
|
|
}, {
|
|
id: 5,
|
|
value: 'fra',
|
|
label: "法语"
|
|
}, {
|
|
id: 6,
|
|
value: 'spa',
|
|
label: "西班牙语"
|
|
}, {
|
|
id: 7,
|
|
value: 'ara',
|
|
label: "阿拉伯语"
|
|
}, {
|
|
id: 8,
|
|
value: 'de',
|
|
label: "德语"
|
|
}
|
|
]
|
|
],
|
|
ActiveTo: {
|
|
id: 1,
|
|
value: 'zh',
|
|
label: "中文"
|
|
},
|
|
toRange: [
|
|
[{
|
|
id: 1,
|
|
value: 'zh',
|
|
label: "中文"
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 'en',
|
|
label: "英语"
|
|
}, {
|
|
id: 3,
|
|
value: 'jp',
|
|
label: "日语"
|
|
}, {
|
|
id: 4,
|
|
value: 'kor',
|
|
label: "韩语"
|
|
}, {
|
|
id: 5,
|
|
value: 'fra',
|
|
label: "法语"
|
|
}, {
|
|
id: 6,
|
|
value: 'spa',
|
|
label: "西班牙语"
|
|
}, {
|
|
id: 7,
|
|
value: 'ara',
|
|
label: "阿拉伯语"
|
|
}, {
|
|
id: 8,
|
|
value: 'de',
|
|
label: "德语"
|
|
}
|
|
]
|
|
],
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
chooseImage() {
|
|
let $this = this
|
|
this.ActiveText = ""
|
|
this.resultText = ""
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
mediaType: ['image'],
|
|
sourceType: ['camera', 'album'],
|
|
success: (res) => {
|
|
$this.imageSrc = res.tempFiles[0].tempFilePath
|
|
uni.showLoading({
|
|
title: '识别中...'
|
|
})
|
|
this.task = uni.uploadFile({
|
|
url: this.rootPath + '/app-api/wechatshop/toolIdentify/identifyText',
|
|
filePath: $this.imageSrc,
|
|
name: 'file',
|
|
formData: {
|
|
'file': $this.imageSrc
|
|
},
|
|
success: (res) => {
|
|
let data = JSON.parse(res.data)
|
|
console.log('====',data)
|
|
uni.showToast({
|
|
title: '识别成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
if (data.data !== null) {
|
|
data.data.forEach((item) => {
|
|
this.ActiveText = this.ActiveText + item.words +
|
|
'\n'
|
|
})
|
|
} else {
|
|
this.ActiveText = ""
|
|
}
|
|
$this.gotoTranslate()
|
|
},
|
|
fail: (err) => {
|
|
uni.showModal({
|
|
content: err.errMsg,
|
|
showCancel: false
|
|
});
|
|
},
|
|
complete: (res) => {
|
|
uni.hideLoading();
|
|
this.task = null
|
|
}
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.log('chooseImage fail', err)
|
|
}
|
|
})
|
|
},
|
|
//选择翻译语种 from
|
|
changeFrom(val) {
|
|
this.fromShow = false
|
|
this.ActiveFrom = val.value[0]
|
|
this.gotoTranslate()
|
|
},
|
|
//选择翻译语种 to
|
|
changeTo(val) {
|
|
this.toShow = false
|
|
this.ActiveTo = val.value[0]
|
|
this.gotoTranslate()
|
|
},
|
|
//翻译
|
|
gotoTranslate() {
|
|
if (this.ActiveFrom.value == this.ActiveTo.value) {
|
|
this.resultText = this.ActiveText
|
|
} else {
|
|
let queryParams
|
|
if (!this.exchange) {
|
|
queryParams = {
|
|
query: this.ActiveText,
|
|
from: this.ActiveFrom.value,
|
|
to: this.ActiveTo.value
|
|
}
|
|
} else {
|
|
queryParams = {
|
|
query: this.ActiveText,
|
|
from: this.ActiveTo.value,
|
|
to: this.ActiveFrom.value,
|
|
}
|
|
}
|
|
this.$Request.get(this.$config.getTtranslate, queryParams, "", "", false, true)
|
|
.then(res => {
|
|
if (res.data !== null) {
|
|
this.resultText = ""
|
|
res.data.forEach((item) => {
|
|
this.resultText = this.resultText + item.dst + '</br>'
|
|
})
|
|
this.resultText = this.resultText.replaceAll('\n', '</br>');
|
|
} else {
|
|
this.resultText = this.ActiveText.replaceAll('\n', '</br>');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.v-pages-translate {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.uni-easyinput__placeholder-class {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.uni-easyinput__content-textarea {
|
|
min-height: 300rpx !important;
|
|
overflow: auto;
|
|
}
|
|
|
|
.v-translate-bg {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 15vh;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
|
|
&:after {
|
|
content: '';
|
|
width: 160%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: -30%;
|
|
top: 0;
|
|
z-index: 0;
|
|
background: linear-gradient(to bottom, #0983ff 50%, rgba(#0983ff, .8));
|
|
border-radius: 0 0 50% 50%;
|
|
}
|
|
}
|
|
|
|
.v-pages-translate {
|
|
.v-translate-textarea {
|
|
border: 0;
|
|
}
|
|
|
|
::v-deep .uni-textarea-textarea {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.exchange {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
|
|
.img {
|
|
width: 40rpx;
|
|
}
|
|
}
|
|
|
|
.v-translate-card {
|
|
position: relative;
|
|
z-index: 9;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding-bottom: 30rpx;
|
|
|
|
|
|
.select {
|
|
position: relative;
|
|
height: 80rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
.select-item {
|
|
width: 40vw;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
position: absolute;
|
|
|
|
.img {
|
|
width: 20rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.left-to-right {
|
|
left: 0
|
|
}
|
|
|
|
.right-to-left {
|
|
left: 54vw
|
|
}
|
|
|
|
}
|
|
|
|
.result {
|
|
border-top: 1rpx solid #f0f0f0;
|
|
color: #0983ff;
|
|
font-weight: bold;
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
|
|
.zero-markdown-view {
|
|
font-size: 32rpx;
|
|
color: #0983ff;
|
|
}
|
|
|
|
rich-text {
|
|
font-size: 32rpx !important;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
border-radius: 200rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
margin: 80rpx auto 0 auto;
|
|
color: #fff;
|
|
background-color: #0983ff;
|
|
|
|
.img {
|
|
width: 40%;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
margin-top: -50rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.btn-text {
|
|
position: relative;
|
|
width: 50rpx;
|
|
margin: 0 auto -25rpx auto;
|
|
height: 50rpx;
|
|
border-radius: 50rpx;
|
|
background-color: #cee6ff;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
font-size: 24rpx;
|
|
color: #0983ff;
|
|
}
|
|
|
|
.btnText {
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.v-translate-box {
|
|
margin-top: 40rpx;
|
|
}
|
|
</style> |