change ui

app.json

@@ -7,13 +7,14 @@
   ],
   "window": {
       "backgroundTextStyle": "light",
+      "backgroundColor": "#FAFAFA",
       "navigationBarBackgroundColor": "#FAFAFA",
       "navigationBarTitleText": "面对面翻译",
       "navigationBarTextStyle": "black"
   },
   "plugins": {
     "WechatAI": {
-      "version": "0.0.5",
+      "version": "0.0.6",
       "provider": "wx069ba97219f66d99"
     }
   }

app.wxss

@@ -11,11 +11,12 @@
   position:relative;
   font-family: "PingFang-SC-Regular","SimSun","Microsoft Yahei";
   font-variant-ligatures: none;
+  background-color: #FAFAFA;
 }
 page {
   height: 100%;
   width: 100%;
-  background-color: #FAFAFA;
+  background: #FAFAFA;
 }
 
 input {

components/bottom-button/index.js

@@ -40,7 +40,6 @@ let buttonBackground = {
 
 Component({
   properties: {
-
     buttonDisabled: {
       type: Boolean,
       value: false,
@@ -49,14 +48,7 @@ Component({
         this.changeButtonType(buttonType)
 
       }
-
     },
-
-    shadowShow: {
-      type: Boolean,
-      value: false,
-    },
-
   },
 
   data: {

components/bottom-button/index.wxml

@@ -1,4 +1,4 @@
-<view class="button-wrap {{shadowShow ? 'button-wrap-shadow' : ''}}" hidden="{{hidden}}">
+<view class="button-wrap" hidden="{{hidden}}">
   <view class="img-big-wrap">
     <view class="button-container">
       <view wx:for="{{buttons}}" wx:for-item="button" wx:key="{{button.lang}}" class="button-item">

components/bottom-button/index.wxss

@@ -4,9 +4,7 @@
   -webkit-justify-content: center;
   justify-content: center;
 }
-.button-wrap-shadow {
-   box-shadow: -1px 1px 7px 0 rgba(0,0,0,0.13);
-}
+
 .img-big-wrap {
   width: 100%;
   display: -webkit-flex;
@@ -14,75 +12,6 @@
   background: #FAFAFA;
 }
 
-.input-language {
-  position: absolute;
-  right: 50%;
-  bottom: 60rpx;
-  height: 159rpx;
-  width: 230rpx;
-  display: flex;
-  display: -webkit-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.output-language{
-  position: absolute;
-  left: 50%;
-  bottom: 60rpx;
-  height: 159rpx;
-  width: 230rpx;
-  display: flex;
-  display: -webkit-flex;
-  align-items: center;
-  justify-content: center;
-}
-.normal-record-icon {
-  height: 30rpx;
-  width: 20rpx;
-}
-.normal-record-text {
-  color: #9B9B9B;
-  font-size: 24rpx;
-  margin: 0 10rpx;
-}
-.press-record-icon {
-  height: 32rpx;
-  width: 20rpx;
-}
-.press-record-text {
-  color: #4A90E2;
-  font-size: 32rpx;
-  margin: 0 10rpx;
-}
-.record-text {
-  color: #9B9B9B;
-  font-size:24rpx;
-  text-align:center;
-  position:absolute;
-  left:50%;
-  margin-left:-160rpx;
-  width:320rpx;
-  bottom:229rpx;/*159 + 60 + 10*/
-}
-.keyboard-button {
-  height:40rpx;
-  width:48rpx;
-  position:absolute;
-  left:50%;
-  margin-left:-302rpx;/*-254 - 48*/
-  bottom:120rpx;
-}
-.keyboard-text {
-  color: #4A4A4A;
-  font-size:32rpx;
-  text-align:center;
-  position:absolute;
-  left:80%;
-  margin-left:-135rpx;
-  width:320rpx;
-  top:175rpx;
-}
 .button-container{
   display: flex;
   display: -webkit-flex;
@@ -110,7 +39,7 @@
   box-sizing: border-box;
 }
 .button-label {
-  font-size: 30rpx;
+  font-size: 28rpx;
   color: #9B9B9B;
   letter-spacing: 0;
   margin: 15rpx 0 0 0;
@@ -120,7 +49,6 @@
   display: flex;
   display: -webkit-flex;
   height: 100rpx;
-  /* width: 240rpx; */
   width: 100%;
   border-radius: 100rpx;
   justify-content: center;

components/modal/index.js

@@ -79,12 +79,15 @@ Component({
       switch(itemType) {
         case 'copySource':
           this.setClip(item.text)
+
           break;
         case 'copyTarget':
           this.setClip(item.translateText)
+
           break
         case 'delete':
           this.deleteBubbleModal()
+
           break
         default:
           break

components/modal/index.wxss

@@ -1,7 +1,7 @@
 .modal-wrapper {
   position:relative;
   color:#FFFFFF;
-  height:32px;
+  height:70rpx;
   width:80%;
   margin: 0 auto;
   z-index:70;
@@ -10,7 +10,7 @@
 .modal-triangle {
   position:relative;
   margin: 0 auto;
-  top: 26px;
+  top: 28px;
   height:0;
   width:0;
   border:5px solid #000000;
@@ -27,7 +27,7 @@
   z-index:69
 }
 .menu-modal {
-  height:32px;
+  height:70rpx;
   font-size:14px;
   position:absolute;
   top:0;

components/play-icon/index.js

@@ -9,18 +9,53 @@ http://opensource.org/licenses/MIT
 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 */
 
+const loadingIcon = '../../image/loading.gif'
+
 Component({
 
   properties: {
     playType: {
       type: String,
       value: 'wait',
+      observer: function(newVal, oldVal){
+        if(oldVal == 'loading' && newVal == 'playing') {
+
+          let loadingTransitionTime = 1240;
+          let nowTime = + new Date()
+          let loadingStartTime = this.data.loadingStartTime
+          let loadingTime = nowTime - loadingStartTime
+          let loadingCount = parseInt(loadingTime / loadingTransitionTime); // 完整播放次数
+          let timeLeft = loadingTransitionTime - loadingTime % loadingTransitionTime; // 剩余播放时间
+
+          if(loadingCount > 0 && timeLeft > 1000) {
+            this.setData({
+              realPlayType: newVal,
+              loadingImg: '',
+            })
+          } else {
+            setTimeout( ()=>{
+              this.setData({
+                realPlayType: newVal,
+              })
+            }, timeLeft)
+          }
+        } else if (newVal == 'loading'){
+          this.setData({
+            loadingStartTime: + new Date(),
+            realPlayType: newVal,
+          })
+        } else {
+          this.setData({
+            realPlayType: newVal,
+          })
+        }
+      },
     }
   },
 
   data: {
-
-
+    realPlayType: 'wait', // 真正wxml中使用的type变量
+    loadingStartTime: 0,
   },
 
   ready: function () {

components/play-icon/index.wxml

@@ -1,17 +1,18 @@
-<view  wx:if="{{playType != 'loading'}}" class="play-loud-icon" >
 
-  <image  src="../../image/play_loud.png" class="play-loud-icon  play-loud-img" ></image>
+<view  class="play-loud-icon" >
+  <image  src="../../image/play_loud.png" class="play-loud-img play-icon-main {{realPlayType == 'loading' ? 'is-hide' : ''}}" ></image>
 
-  <block wx:if="{{playType=='playing'}}">
-      <image  src="../../image/play_loud_1.png" class="play-loud-icon play-loud-img play-animation "  ></image>
-      <image  src="../../image/play_loud_2.png"  class="play-loud-icon play-loud-img play-animation1"  ></image>
+  <block  wx:if="{{realPlayType != 'loading'}}">
+
+    <block wx:if="{{realPlayType=='playing'}}">
+        <image  src="../../image/play_loud_1.png" class="play-loud-img play-animation "  ></image>
+        <image  src="../../image/play_loud_2.png"  class="play-loud-img play-animation1"  ></image>
+    </block>
+    <block wx:else>
+        <image  src="../../image/play_loud_1.png" class="play-loud-img" ></image>
+    </block>
   </block>
-  <block wx:else>
-      <image  src="../../image/play_loud_1.png" class="play-loud-icon play-loud-img" ></image>
+  <block wx:else="{{realPlayType != 'loading'}}">
+    <view class="play-transition"></view>
   </block>
-
-</view>
-
-<view wx:if="{{playType=='loading'}}"  class="play-loud-icon" >
-  <image  src="../../image/loading.gif" class="play-loading-img play-loud-img" ></image>
 </view>

components/result-bubble/index.js

@@ -41,6 +41,8 @@ Component({
         // 翻译内容改变触发播放
         if(newVal.autoPlay && newVal.translateVoicePath != oldVal.translateVoicePath){
           this.autoPlayTranslateVoice()
+        } else if(newVal.translateVoicePath == "") {
+          this.playAnimationEnd()
         }
 
       }
@@ -137,6 +139,8 @@ Component({
           index: this.data.index,
         })
       }
+
+
     },
 
     /**

components/result-bubble/index.wxss

@@ -25,7 +25,7 @@
 .create-time {
   font-size:28rpx;
   color: #B2B2B2;
-  margin-bottom:5px;
+  margin-bottom:10px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
@@ -74,15 +74,15 @@
   position: absolute;
   display: flex;
   align-items: center;
-  right: 10rpx;
+  right: 8rpx;
   bottom: 0;
   padding: 0 8rpx;
   bottom: 7rpx;
 }
 
 .edit-icon-img {
-  height:31rpx;
-  width:31rpx
+  width:40rpx;
+  height:40rpx;
 }
 
 .play-icon {

components/waiting-icon/index.js

@@ -35,7 +35,6 @@ Component({
 
   // 组件生命周期函数，在组件实例被从页面节点树移除时执行
   detached: function() {
-    console.log("detach")
     this.clearAnimation()
   },
 
@@ -43,12 +42,10 @@ Component({
 
     clearAnimation: function() {
       this.endWaitAnimation()
-
-
     },
 
     /**
-     * 清楚等待区域以及翻译区域的动画
+     * 清除动画
      */
     endWaitAnimation: function() {
         clearInterval(this.data.waiting_interval)
@@ -69,7 +66,7 @@ Component({
     },
 
     /**
-     * 设置识别,翻译部分的等待动画
+     * 设置动画
      */
     setWaitInterval: function() {
        this.endWaitAnimation()

components/waiting-icon/index.wxml

@@ -1,5 +1,5 @@
 <view class="loading">
-  <view class="loading-icon">.</view>
+  <view    class="loading-icon">.</view>
   <view animation="{{waiting_animation}}" class="loading-icon">.</view>
   <view animation="{{waiting_animation_1}}" class="loading-icon">.</view>
 </view>

pages/edit/edit.js

@@ -9,6 +9,8 @@ http://opensource.org/licenses/MIT
 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 */
 
+const initBottomHeight = 0
+
 var app = getApp()
 Page({
 
@@ -22,6 +24,7 @@ Page({
     is_focus: false,
     tips: "",
     index: -1,
+    bottomHeight:  initBottomHeight
   },
   /**
    * 获得最大文本长度
@@ -80,11 +83,38 @@ Page({
       //文本输入为空时提示
     }
   },
+
+  /**
+   * 点击文本输入框修改底下按钮行高，让提示和按钮始终在键盘上方   *
+   */
+  editFocus: function(e) {
+    let {value, height} = e.detail
+    console.log(value, height)
+
+    if(!isNaN(height)) {
+      this.setData({
+        bottomHeight: height + initBottomHeight
+      })
+    }
+  },
+
+  /**
+   * 输入框失焦
+   */
+  editBlur: function() {
+    this.setData({
+      bottomHeight: initBottomHeight
+    })
+  },
+
   /**
    * 清空内容
    */
   deleteContent: function () {
     this.setEditText("")
+    this.setData({
+      is_focus: true
+    })
   },
 
   /**

pages/edit/edit.wxml

@@ -1,10 +1,12 @@
 <!--pages/edit/edit.wxml-->
 <view class="container edit-container">
-  <textarea maxlength="{{edit_text_max}}" auto-height="{{true}}" class="edit_textarea" cursor-spacing="20" focus="{{is_focus}}" bindinput="editInput"  bindconfirm="editConfirm" value="{{edit_text}}"></textarea>
-  <view class="tips-wrapper">
-    <textarea class="edit-tips" value="{{tips}}" auto-height="{{true}}" disabled="{{true}}"></textarea>
-    <view class="delete-content"  bindtap="deleteContent">
-      <image src="../../image/delete_all.png" class="img-delete-all"></image>
+  <textarea maxlength="{{edit_text_max}}"  class="edit_textarea" auto-focus="{{true}}" focus="{{is_focus}}" bindinput="editInput"  bindconfirm="editConfirm" value="{{edit_text}}" adjust-position="{{true}}" bindfocus="editFocus" bindblur="editBlur"></textarea>
+  <view class="bottom-wrap" style="padding-bottom: {{bottomHeight}}px">
+    <view class="tips-wrapper" >
+      <text class="edit-tips" >{{tips}}</text>
+      <view class="delete-content"  capture-bind:tap="deleteContent" >
+        <image src="../../image/delete_all.png" class="img-delete-all"></image>
+      </view>
     </view>
   </view>
-</view>
+</view>

pages/edit/edit.wxss

@@ -1,16 +1,19 @@
 /* pages/edit/edit.wxss */
 .edit-container {
-  padding:20px 20px;
+  position: relative;
+  padding:20px 50rpx 20rpx;
   justify-content:flex-start;
-  -webkit-justify-content:flex-start
+  -webkit-justify-content:flex-start;
+  background-color: #FAFAFA;
 }
 .edit_textarea {
-  max-height:400rpx;
+  flex: 1;
   width:100%;
   box-sizing:border-box;
   font-size:36rpx;
-  line-height:50rpx;
+  line-height:60rpx;
 }
+
 .tips-wrapper {
   width:100%;
   display:flex;
@@ -18,7 +21,7 @@
   justify-content:space-between;
   -webkit-justify-content: spacce-between;
 
-  padding: 0 25rpx 0 0;
+  padding: 0 ;
   box-sizing: border-box;
   align-items: center;
   -webkit-align-items: center;
@@ -29,9 +32,11 @@
   line-height: 50rpx;
 }
 .img-delete-all {
-  height:30rpx;
+  height:32rpx;
   width:28rpx;
 }
 .delete-content {
-    padding:20rpx 20rpx;
-}
+  position: relative;
+  right: -20rpx;
+  padding:20rpx 20rpx;
+}

pages/index/index.js

@@ -64,19 +64,14 @@ Page({
 
   },
 
-  longpressEvent: function(e) {
-    console.log("长按", e)
-  },
-
-
 
   /**
    * 按住按钮开始语音识别
    */
   streamRecord: function(e) {
-    console.log("streamrecord" ,e)
-    let detail = e.detail
-    let buttonItem = detail.buttonItem
+    // console.log("streamrecord" ,e)
+    let detail = e.detail || {}
+    let buttonItem = detail.buttonItem || {}
     manager.start({
       lang: buttonItem.lang,
     })
@@ -94,10 +89,6 @@ Page({
     })
     this.scrollToNew();
 
-    wx.reportAnalytics('record_and_translate_event', {
-      lfrom: buttonItem.lang,
-      lto: buttonItem.lto,
-    });
   },
 
 
@@ -106,9 +97,9 @@ Page({
    */
   streamRecordEnd: function(e) {
 
-    console.log("streamRecordEnd" ,e)
-    let detail = e.detail  // 自定义组件触发事件时提供的detail对象
-    let buttonItem = detail.buttonItem
+    // console.log("streamRecordEnd" ,e)
+    let detail = e.detail || {}  // 自定义组件触发事件时提供的detail对象
+    let buttonItem = detail.buttonItem || {}
 
     // 防止重复触发stop函数
     if(!this.data.recording || this.data.recordStatus != 0) {
@@ -139,8 +130,10 @@ Page({
       success: (resTrans)=>{
 
         let passRetcode = [
-          0, // 成功
+          0, // 翻译合成成功
           -10006, // 翻译成功，合成失败
+          -10007, // 翻译成功，传入了不支持的语音合成语言
+          -10008, // 翻译成功，语音合成达到频率限制
         ]
 
         if(passRetcode.indexOf(resTrans.retcode) >= 0 ) {
@@ -175,7 +168,11 @@ Page({
 
       },
       fail: function(resTrans) {
-        console.log("调用失败",resTrans, item)
+        console.error("调用失败",resTrans, item)
+        this.setData({
+          bottomButtonDisabled: false,
+          recording: false,
+        })
       },
       complete: resTrans => {
         this.setData({
@@ -199,16 +196,22 @@ Page({
 
     this.translateText(item, index)
 
+
+
   },
 
   /**
    * 语音文件过期，重新合成语音文件
    */
   expiredAction: function(e) {
-    let detail = e.detail  // 自定义组件触发事件时提供的detail对象
-    let item = detail.item
+    let detail = e.detail || {}  // 自定义组件触发事件时提供的detail对象
+    let item = detail.item || {}
     let index = detail.index
 
+    if(isNaN(index) || index < 0) {
+      return
+    }
+
     let lto = item.lto || 'en_US'
 
     plugin.textToSpeech({
@@ -241,6 +244,18 @@ Page({
   })
   },
 
+  /**
+   * 初始化为空时的卡片
+   */
+  initCard: function () {
+    let initTranslateNew = Object.assign({}, this.data.initTranslate, {
+      create: util.recordTime(new Date()),
+    })
+    this.setData({
+      initTranslate: initTranslateNew
+    })
+  },
+
 
   /**
    * 删除卡片
@@ -253,11 +268,15 @@ Page({
     let tmpDialogList = this.data.dialogList.slice(0)
     let arrIndex = detail.index
     tmpDialogList.splice(arrIndex, 1)
+
     // 不使用setTImeout可能会触发 Error: Expect END descriptor with depth 0 but get another
     setTimeout( ()=>{
       this.setData({
         dialogList: tmpDialogList
       })
+      if(tmpDialogList.length == 0) {
+        this.initCard()
+      }
     }, 0)
 
   },
@@ -274,6 +293,7 @@ Page({
     wx.showToast({
       title: this.data.tips_language.recognize_nothing,
       icon: 'success',
+      image: '/image/no_voice.png',
       duration: 1000,
       success: function (res) {
 
@@ -410,6 +430,8 @@ Page({
   onShow: function() {
     this.scrollToNew();
 
+    this.initCard()
+
     if(this.data.recordStatus == 2) {
       wx.showLoading({
         // title: '',

pages/index/index.wxml

@@ -1,7 +1,6 @@
 <!--index.wxml-->
 <view class="container">
   <scroll-view id="scroll-content"
-    catchlongpress="longpressEvent"
     scroll-top="{{scroll_top}}"
     scroll-y="true"
     class="dialog-part"
@@ -28,7 +27,6 @@
 
   <view class="foot-group" catchlongpress="catchTapEvent">
     <bottom-button button-disabled="{{bottomButtonDisabled}}"
-      shadow-show="{{isScroll}}"
       bindrecordstart="streamRecord"
       bindrecordend="streamRecordEnd"></bottom-button>
   </view>

utils/conf.js

@@ -23,7 +23,7 @@ let language = [
     type_here:"输入文字",
     bg_content:"请输入翻译内容",
     record_failed:"录制失败",
-    recognize_nothing:"识别内容为空",
+    recognize_nothing:"请说话",
     time_left:"录音输入倒数",
     text_left:"剩余文本长度",
     prompt_time:"提示秒数",