百度AI表单

src/apps/AppAiInput/AppAiInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppAiInput">
-    <div class="content-info">我排查的人名叫沈浩</div>
+    <div class="content-info" v-if="text">{{text}}</div>
     <div class="problem-list">
       <p class="title">请一句话告诉我这些信息：</p>
       <div class="list-content">
@@ -13,37 +13,65 @@
       </div>
     </div>
     <div class="microphone-info">
-      <div class="microphone-img">
+      <div class="microphone-img" @touchstart="start" @touchend="end">
-        <img src="./img/microphone.png" alt="">
+        <!-- <img src="./img/microphone.png" alt="" @longpress="">  -->
+        <u-icon name="mic" color="#fff" size="140" style="margin-top:20px;"></u-icon>
+      </div>
+      <p class="text">{{isStart ? '松开结束说话' : '按住说话'}}</p>
+      <div class="btn">
+        <p class="cancel" @click="cancel">取消</p>
+        <p class="confirm" @click="confirm" v-if="text">确定</p>
       </div>
-      <p class="text">松开结束说话</p>
-      <p class="cancel">取消</p>
     </div>
   </div>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapState, mapActions} from "vuex";
-
 export default {
   name: 'AppAiInput',
   appName: '百度AI输入',
   data() {
     return {
-
+      isStart: false,
+      text: ''
     }
   },
   computed: {
     ...mapState(['user']),
   },
-  created() {
+  onLoad() {
-    
+    this.injectJWeixin(['startRecord','stopRecord', 'translateVoice'])
   },
   onShow() {
     document.title = '婚姻家庭纠纷入户登记表'
   },
   methods: {
-    
+    ...mapActions(['injectJWeixin']),
+    start() {
+      wx.startRecord()
+      this.isStart = true
+    },
+    end() {
+      wx.stopRecord({
+        success: (res)=> {
+          wx.translateVoice({
+            localId: res.localId, // 需要识别的音频的本地Id，由录音相关接口获得，音频时长不能超过60秒
+            isShowProgressTips: 1, // 默认为1，显示进度提示
+            success: (e)=> {
+              this.isStart = false
+              this.text = this.text + e.translateResult  // 语音识别的结果
+            }
+          });
+        }
+      });
+    },
+    confirm() {
+      uni.navigateTo({url: `./formEdit?word=${this.text}`})
+    },
+    cancel() {
+      this.text = ''
+    }
   },
 }
 </script>
@@ -129,11 +157,22 @@ uni-page-body {
       color: #222;
       margin-bottom: 64px;
     }
-    .cancel {
+    .btn {
+      text-align: center;
       font-family: PingFangSC-Regular;
       font-size: 36px;
-      color: #999;
+      p {
+        display: inline-block;
+      }
+      .cancel {
+        color: #999;
+      }
+      .confirm {
+        color: #0262F2;
+        margin-left: 120px;
+      }
     }
+
   }
 }
 </style>

src/apps/AppAiInput/formConfirm.vue

@@ -6,7 +6,7 @@
         <div class="item-border">
           <div class="label">户主姓名</div>
           <div class="value">
-            <u-input type="text" class="right" placeholder="请输入" height="44" input-align="right"></u-input>
+            <u-input type="text" class="right" placeholder="请输入" height="44" input-align="right" v-model="info.name"></u-input>
           </div>
         </div>
       </div>
@@ -14,18 +14,59 @@
         <span class="tips">*</span>
         <div class="item-border">
           <div class="label">性别</div>
-          <div class="value">
+          <div class="value" @click="showSex=true">
-            <u-input type="text" class="right" placeholder="请选择" height="44" input-align="right" disabled></u-input>
+            <span :class="info.sex == null ? 'color-999' : ''">{{ $dict.getLabel('sex', info.sex) || '请选择'}}</span>
             <img src="./img/arrow-right.png" alt="">
           </div>
         </div>
       </div>
+      <div class="item">
+        <span class="tips">*</span>
+        <div class="item-border">
+          <div class="label">联系电话</div>
+          <div class="value">
+            <u-input type="text" class="right" placeholder="请输入" height="44" input-align="right" v-model="info.phone"></u-input>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <span class="tips">*</span>
+        <div class="item-border">
+          <div class="label">出生日期</div>
+          <div class="value" @click="showDate=true">
+            <span :class="info.birthday == null ? 'color-999' : ''">{{ info.birthday || '请选择'}}</span>
+            <img src="./img/arrow-right.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <span class="tips">*</span>
+        <div class="item-border">
+          <div class="label">民族</div>
+          <div class="value"  @click="showNation=true">
+            <span :class="info.nation == null ? 'color-999' : ''">{{ $dict.getLabel('nation', info.nation) || '请选择'}}</span>
+            <img src="./img/arrow-right.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <span class="tips">*</span>
+        <div class="item-border">
+          <div class="label">家庭人口数</div>
+          <div class="value">
+            <u-input type="text" class="right" placeholder="请输入" height="44" input-align="right" v-model="info.householdNumber"></u-input>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="bottom-btn">
-      <div class="confirm">保存内容</div>
+      <div class="confirm" @click="confirm('保存成功')">保存内容</div>
-      <div class="confirm">提交</div>
+      <div class="confirm" @click="confirm('提交成功')">提交</div>
       <div class="cancel">取消</div>
     </div>
+    <u-picker mode="time" v-model="showDate" :params="deteParams" start-year="1930" @confirm="dateConfirm">请选择</u-picker>
+    <u-select v-model="showSex" :list="$dict.getDict('sex')" label-name="dictName" value-name="dictValue" @confirm="confirmSex"/>
+    <u-select v-model="showNation" :list="$dict.getDict('nation')" label-name="dictName" value-name="dictValue" @confirm="confirmNation"/>
   </div>
 </template>
 
@@ -36,20 +77,69 @@ export default {
   name: 'formConfirm',
   data() {
     return {
-
+      word: '',
+      info: {},
+      showSex: false,
+      showNation: false,
+      showDate: false,
+      deteParams: {year: true, month: true, day: true, hour: false, minute: false, second: false},
     }
   },
   computed: {
     ...mapState(['user']),
   },
-  created() {
+  onLoad(option) {
-    
+    uni.showLoading({title: '加载中'})
+    this.word = option.word
+    this.$dict.load('sex', 'nation').then(() => {
+      this.getInfo()
+    })
   },
   onShow() {
     document.title = '婚姻家庭纠纷入户登记表'
   },
   methods: {
-    
+    getInfo() {
+      this.$http.post(`/app/appbaiduai/queryByInfo?word=${this.word}`).then((res) => {
+        if (res.code === 0) {
+          this.info = {...res.data}
+          uni.hideLoading()
+        }
+      }).catch(res => {
+        this.$u.toast(res)
+        uni.hideLoading()
+      })
+    },
+    confirmSex(e) {
+      this.info.sex = e[0].value
+    },
+    confirmNation(e) {
+      this.info.nation = e[0].value
+    },
+    dateConfirm(e) {
+      this.info.birthday = `${e.year}-${e.month}-${e.day}`
+    },
+    confirm(successText) {
+      if(this.info.name == null || !this.info.name) {
+        return this.$u.toast('请输入户主姓名')
+      }
+      if(this.info.sex == null) {
+        return this.$u.toast('请选择性别')
+      }
+      if(this.info.phone == null || !this.info.phone) {
+        return this.$u.toast('请输入联系电话')
+      }
+      if(this.info.birthday == null) {
+        return this.$u.toast('请选择出生日期')
+      }
+      if(this.info.nation == null) {
+        return this.$u.toast('请选择民族')
+      }
+      if(this.info.householdNumber == null || !this.info.householdNumber) {
+        return this.$u.toast('请输入家庭人口数')
+      }
+      this.$u.toast(successText)
+    }
   },
 }
 </script>
@@ -102,6 +192,10 @@ uni-page-body {
             width: 32px;
             height: 32px;
             margin-left: 8px;
+            vertical-align: middle;
+          }
+          .color-999 {
+            color: rgb(192, 196, 204);
           }
         }
       }

src/apps/AppAiInput/formEdit.vue

@@ -6,26 +6,77 @@
     <div class="list">
       <div class="item">
         <div class="label">
-          户主姓名
+          <span>户主姓名</span>
-          <div class="edit">
+          <div class="edit" @click="editName=true">
             <img src="./img/edit.png" alt="">修改
           </div>
         </div>
-        <div class="value">沈浩</div>
+        <div class="value">
+          <u-input type="text" class="right" placeholder="请输入" height="44" input-align="center" v-model="info.name" :clearable="false" v-if="editName"></u-input>
+          <span v-else>{{info.name || '请输入'}}</span>
+        </div>
       </div>
       <div class="item">
         <div class="label">
-          性别
+          <span>性别</span>
-          <div class="edit">
+          <div class="edit" @click="showSex=true">
             <img src="./img/edit.png" alt="">修改
           </div>
         </div>
-        <div class="value">男</div>
+        <div class="value">
+          <span>{{ $dict.getLabel('sex', info.sex) || '请选择'}}</span>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          <span>联系电话</span>
+          <div class="edit" @click="editPhone=true">
+            <img src="./img/edit.png" alt="">修改
+          </div>
+        </div>
+        <div class="value">
+          <u-input type="text" class="right" placeholder="请输入" height="44" input-align="center" v-model="info.phone" :clearable="false" v-if="editPhone"></u-input>
+          <span v-else>{{info.phone || '请输入'}}</span>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          <span>出生日期</span>
+          <div class="edit" @click="showDate=true">
+            <img src="./img/edit.png" alt="">修改
+          </div>
+        </div>
+        <div class="value">
+          <span>{{info.birthday || '请选择'}}</span>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          <span>民族</span>
+          <div class="edit" @click="showNation=true">
+            <img src="./img/edit.png" alt="">修改
+          </div>
+        </div>
+        <div class="value">
+          <span>{{ $dict.getLabel('nation', info.nation) || '请选择'}}</span>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          <span>家庭人口数</span>
+          <div class="edit" @click="editHouseholdNumber=true">
+            <img src="./img/edit.png" alt="">修改
+          </div>
+        </div>
+        <div class="value">
+          <u-input type="text" class="right" placeholder="请输入" height="44" input-align="center" v-model="info.householdNumber" :clearable="false" v-if="editHouseholdNumber"></u-input>
+          <span v-else>{{info.householdNumber || '请输入'}}</span>
+        </div>
       </div>
     </div>
     <div class="bottom-btn">
-      <div class="confirm">确认使用</div>
+      <div class="confirm" @click="toConfirm">确认使用</div>
-      <div class="cancel">取消输入</div>
+      <div class="cancel" @click="back">取消输入</div>
     </div>
   </div>
 </template>
@@ -37,20 +88,75 @@ export default {
   name: 'formEdit',
   data() {
     return {
-
+      word: '',
+      info: {},
+      showSex: false,
+      showNation: false,
+      showDate: false,
+      deteParams: {year: true, month: true, day: true, hour: false, minute: false, second: false},
+      editName: false,
+      editPhone: false,
+      editHouseholdNumber: false
     }
   },
   computed: {
     ...mapState(['user']),
   },
-  created() {
+  onLoad(option) {
-    
+    uni.showLoading({title: '加载中'})
+    this.word = option.word
+    this.$dict.load('sex', 'nation').then(() => {
+      this.getInfo()
+    })
   },
   onShow() {
     document.title = '婚姻家庭纠纷入户登记表'
   },
   methods: {
-    
+    getInfo() {
+      this.$http.post(`/app/appbaiduai/queryByInfo?word=${this.word}`).then((res) => {
+        if (res.code === 0) {
+          this.info = {...res.data}
+          uni.hideLoading()
+        }
+      }).catch(res => {
+        this.$u.toast(res)
+        uni.hideLoading()
+      })
+    },
+    confirmSex(e) {
+      this.info.sex = e[0].value
+    },
+    confirmNation(e) {
+      this.info.nation = e[0].value
+    },
+    dateConfirm(e) {
+      this.info.birthday = `${e.year}-${e.month}-${e.day}`
+    },
+    toConfirm() {
+      if(this.info.name == null || !this.info.name) {
+        return this.$u.toast('请输入户主姓名')
+      }
+      if(this.info.sex == null) {
+        return this.$u.toast('请选择性别')
+      }
+      if(this.info.phone == null || !this.info.phone) {
+        return this.$u.toast('请输入联系电话')
+      }
+      if(this.info.birthday == null) {
+        return this.$u.toast('请选择出生日期')
+      }
+      if(this.info.nation == null) {
+        return this.$u.toast('请选择民族')
+      }
+      if(this.info.householdNumber == null || !this.info.householdNumber) {
+        return this.$u.toast('请输入家庭人口数')
+      }
+      uni.navigateTo({url: `./formConfirm?word=${this.word}`})
+    },
+    back() {
+      uni.navigateBack()
+    }
   },
 }
 </script>
@@ -84,19 +190,25 @@ uni-page-body {
     padding-bottom: 272px;
     .item {
       text-align: center;
-      margin-bottom: 32px;
+      margin-bottom: 64px;
       .label {
-        color: #999;
+        margin-bottom: 18px;
-        font-size: 40px;
+        span {
-        font-family: PingFangSC;
+          color: #999;
-        font-weight: 500;
+          font-size: 40px;
-        line-height: 60px;
+          font-family: PingFangSC;
-        text-align: center;
+          font-weight: 500;
+          line-height: 60px;
+          text-align: center;
+        }
         .edit {
           display: inline-block;
+          width: 150px;
+          text-align: right;
           font-family: PingFangSC-Regular;
           font-size: 28px;
           color: #3072F5;
+          vertical-align: text-bottom;
           img {
             width: 28px;
             height: 28px;
@@ -106,11 +218,24 @@ uni-page-body {
         }
       }
       .value {
-        color: #3975c6;
+        width: calc(100% - 150px);
-        font-size: 40px;
+        .u-input, span{
-        font-family: PingFangSC;
+          display: inline-block;
-        font-weight: 500;
+          width: 100%;
-        line-height: 60px;
+          text-align: center;
+          color: #3975c6;
+          font-size: 40px;
+          font-family: PingFangSC;
+          font-weight: 500;
+          line-height: 60px;
+        }
+        ::v-deep .uni-input-input {
+          color: #3975c6;
+          font-size: 40px;
+          font-family: PingFangSC;
+          font-weight: 500;
+          line-height: 60px;
+        }
       }
     }
   }