一机游雄安uniapp源码
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.
 
 
 
phone_uni_xiongan/pages/translate/translate_2.vue

258 lines
6.8 KiB

<template>
<view>
<form @submit="formSubmit">
<view class="mode_com lst_sug_unit">
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu" style="float: left;">待翻译照片</view>
</view>
<view class="sug_dly_flex sug_lst_img sug_fm_img">
<view class="w_33" v-for="(item,index) in pics" :key="index">
<view class="fm_img_2">
<image :src="imgUrl + item" class="sug_img" mode="aspectFill"></image>
<view @tap="delImg(index)" class="btn_del_sug">
<image src="../../static/images/del_2.png" mode="aspectFill" class="kou_top3"></image>
</view>
</view>
</view>
<!-- 上传按钮 -->
<view @tap="uploadImg" class="w_33" :style="isShow">
<view class="fm_img_2">
<image src="../../static/images/icn_xji.png" class="kou_top" mode="aspectFill"></image>
</view>
</view>
<view>
<view class="sug_dly_flex">
<view class="sug_sgu">翻译为</view>
</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu" style="float: left;">结果:</view>
</view>
<view style="border: #000000;">
<textarea placeholder="翻译结果" placeholder-style="#FFFFF" maxlength=-1 style="border: 1px;" :value="message"></textarea>
</view>
</view>
</view>
<!-- <view class="blk_2"></view> -->
<view class="mode_com lst_sug_unit">
<view class="sug_dly_flex">
<view class="sug_sgu" style="float: left;">待翻译文字</view>
</view>
<view style="border: #000000;">
<textarea placeholder="待翻译文字" @blur="setText" placeholder-style="#FFFFF" maxlength=-1 style="border: 1px;" :value="text"></textarea>
</view>
<view>
<view class="sug_dly_flex">
<view class="sug_sgu">翻译为</view>
</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange2" :value="index2" :range="array">
<view class="uni-input">{{array[index2]}}</view>
</picker>
</view>
</view>
</view>
</view>
<!-- <view class="sug_form_line"></view> -->
<view class="sug_dly_flex">
<view class="sug_sgu" style="float: left;">结果:</view>
</view>
<view style="border: #000000;">
<textarea placeholder="翻译结果" placeholder-style="#FFFFF" maxlength=-1 style="border: 1px;" :value="textResult"></textarea>
</view>
<view class="mode_com sug_edit_btn">
<button type="default" class="state_sub" @click="fanyi2()">翻译</button>
</view>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
pics: [],
imgUrl: this.$config.ROOTPATH,
lineuser: "",
index: 0,
index2: 0,
array:[
"中文",
"繁体中文",
"英文",
"日语",
"粤语",
"韩语",
"法语",
"西班牙语"
],
arrayValue: [
"zh",
"cht",
"en",
"jp",
"yue",
"kor",
"fra",
"spa"
],
isShow:"display:block;",
message:"",
text:"",
textResult:""
}
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.target.value)
this.index = e.target.value
this.fanyi();
},
bindPickerChange2: function(e) {
console.log('picker发送选择改变,携带值为', e.target.value)
this.index2 = e.target.value
},
setText: function(e){
this.text = e.detail.value;
},
uploadImg: function() {
var that = this;
var pics = that.pics;
if (pics.length < 1) {
uni.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function(res) {
uni.showLoading({
mask: true,
title: "上传中"
})
var imgsrc = res.tempFilePaths;
uni.uploadFile({
url: that.$config.fileUpload,
filePath: imgsrc[0],
name: 'file',
success(res) {
if (res.statusCode != 200) {
uni.showToast({
title: "上传失败",
icon: "none"
})
uni.hideLoading();
}
var obj = JSON.parse(res.data);
var flag = that.$util.isSuccess(obj);
if (!flag) {
return;
}
obj = obj.data;
pics = pics.concat(obj.path);
that.pics = pics;
uni.hideLoading();
//调用翻译接口
that.isShow = "display:none;";
that.fanyi();
},
fail(res) {
uni.showToast({
title: "上传失败",
icon: "none"
})
uni.hideLoading();
}
})
}
})
} else {
uni.showToast({
title: "最多上传1张",
icon: "none"
})
}
},
fanyi: function(){
var that = this;
var data = {
fileUrl: that.imgUrl +that.pics[0],
toLanguage: that.arrayValue[that.index]
}
that.$Request.post(that.$config.generalTranslation,data).then(res => {
if(res.status == 200){
uni.showToast({
title:"翻译成功",
icon:"none"
})
that.message = res.data;
}else{
uni.showToast({
title:res.msg,
icon:"none"
})
}
});
},
fanyi2: function(){
var that = this;
if(that.text == undefined || that.text == "" || that.text.trim().length == 0){
uni.showToast({
title:"请输入带翻译内容",
icon:"none"
})
return false;
}
var data = {
query: that.text,
toLanguage: that.arrayValue[that.index2]
}
that.$Request.post(that.$config.photoTranslation,data).then(res => {
if(res.status == 200){
uni.showToast({
title:"翻译成功",
icon:"none"
})
that.textResult = res.data;
}else{
uni.showToast({
title:res.msg,
icon:"none"
})
}
});
},
delImg: function(index) {
this.isShow = "display:block;";
this.pics.splice(index, 1);
},
delName: function() {
this.lineuser = "";
}
}
}
</script>
<style>
@import url("../../static/css/common.css");
</style>