居民助手

src/components/utils/PageBase.js

@@ -21,6 +21,9 @@ class PageBase {
       if (/navigationBarBackgroundColor/.test(vue)) {
         this.style.navigationBarBackgroundColor = vue.replace(/[\s\S]*navigationBarBackgroundColor:([^,]+),[\s\S]*/gm, '$1').replace(/["']/g, '')?.trim()
       }
+      if (/enablePullDownRefresh/.test(vue)) {
+        this.style.enablePullDownRefresh = true
+      }
     } else {
       this.style = {navigationBarTitleText: this.label}
       //是否开启下拉刷新

src/project/biaopin/AppResidentAssistant/AppResidentAssistant.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppResidentAssistant">
-    <u-navbar :is-back="false" title="居民助手" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
+    <u-navbar :is-back="false" title="居民助手" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :z-index="9999999999"></u-navbar>
     <div class="service-content">
       <div class="text-content">
         <div class="text-left">
@@ -11,31 +11,24 @@
         <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service.png" alt="" class="service-img">
       </div>
     </div>
+    <!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll"> -->
       <div class="list-content">
-      <div class="item-right">
+        <div :class="item.userType == 1 ? 'item-right' : 'item-left'" v-for="(item, index) in messageList" :key="index">
-        <div class="item">
+          <div class="item" :class="'item'+index">
-          <div class="img-div">
+            <div class="img-div" v-if="item.sdkFileUrl">
-            <u-icon name="play-circle" color="#fff" size="52"></u-icon>
+              <u-icon name="play-circle" :color="item.userType == 1 ? '#fff' : '#A8ADAE'" size="52" v-if="!item.isPlay" @click="play(item.sdkFileUrl, index)"></u-icon>
-            <!-- <u-icon name="pause-circle" color="#fff" size="52"></u-icon> -->
+              <u-icon name="pause-circle" :color="item.userType == 1 ? '#fff' : '#A8ADAE'" size="52" v-else @click="playStop(index)"></u-icon>
-            <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-white.png" alt="">
+              <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-white.png" alt="" v-if="item.userType == 1">
+              <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-gray.png" alt="" v-else>
             </div>
-          <p>你好，你好~</p>
+            <p>{{item.content}}</p>
-        </div>
-      </div>
-      <div class="item-left">
-        <div class="item">
-          <div class="img-div">
-            <u-icon name="play-circle" color="#656668" size="52"></u-icon>
-            <!-- <u-icon name="pause-circle" color="#656668" size="52"></u-icon> -->
-            <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-gray.png" alt="">
-          </div>
-          <p>你好，有什么可以帮助你的吗？你好，有什么可以帮助你的吗？你好，有什么可以帮助你的吗？</p>
           </div>
         </div>
       </div>
+    <!-- </scroll-view> -->
     <div class="fixed-bottom">
       <div class="type-text" v-if="type == 'text'">
-        <u-input type="text" placeholder="输入您的问题…" height="80" input-align="left"  :clearable="false" placeholder-style="color:#666;" v-model="content"></u-input>
+        <u-input type="text" placeholder="输入您的问题…" height="80" input-align="left"  :clearable="false" placeholder-style="color:#666;" v-model="content" @confirm="sendMsg"></u-input>
         <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/microphone-btn.png" alt="" @click="microPhone">
       </div>
       <div class="type-record" v-else>
@@ -57,57 +50,86 @@
 <script>
 
 import {mapState} from "vuex";
-
+const recorderManager = uni.getRecorderManager();
+const innerAudioContext = uni.createInnerAudioContext();
+innerAudioContext.autoplay = true;
 export default {
   customNavigation: true,
+  enablePullDownRefresh: true,
   name: 'AppResidentAssistant',
   appName: '居民助手',
   data() {
     return {
       backgroundNavbar: {
-        background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.png) no-repeat',
+        background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
         backgroundSize: 'cover',
       },
       recorderManager: null,
       type: 'text',
       isStart: false,
-      content: ''
+      content: '',
+      isFlag: false,
+      voiceUrl: 'http://test87ftp.cunwuyun.cn/20240104/tmp_b07b802b794a05a3d887c2fbe0af67d9642eff6d78e75f4e-20240104102324.mp3',
+      voiceId: 'bd1f18e183e544ad9bc1c90203321545',
+      messageList: [
+        {
+          sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/tmp_c37efa0c4f079bd10b32a52ee7565d35087d82a49d33be69-20240104151440.m4a',
+          content: '123456',
+          userType: 0,
+          isPlay: false
+        },
+        {
+          sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/tmp_c37efa0c4f079bd10b32a52ee7565d35087d82a49d33be69-20240104151440.m4a',
+          content: '123456',
+          userType: 1,
+          isPlay: false
+        }
+      ],
+      current: 1,
+      pages: 2
     }
   },
   computed: {
     ...mapState(['user']),
   },
   onLoad() {
-    
+    recorderManager.onStop((res)=> {
+      this.upLoad(res.tempFilePath)
+		});
+    // this.getHistoryList()
   },
-  onShow() {
+  onPullDownRefresh() {
+    if(this.current > this.pages) {
+      return this.$u.toast('没有更多记录')
+    }
+    this.current = this.current + 1
+    this.getHistoryList()
   },
   methods: {
     startRecord() {
-       console.log(111)
+      if(this.isFlag) return
+      this.isStart = true
       uni.authorize({
         scope: 'scope.record',
         success() {
-          console.log(222)
+          // const options = {
-          this.recorderManager = uni.getRecorderManager()
+          //   duration: 10000,
+          //   sampleRate: 44100,
+          //   numberOfChannels: 1,
+          //   encodeBitRate: 192000,
+          //   format: 'aac',
+          //   frameSize: 50
+          // }
           const options = {
-            duration: 10000,
+            duration: 60000,
-            sampleRate: 44100,
+            sampleRate: 16000,
-            numberOfChannels: 1,
+            format: 'm4a'
-            encodeBitRate: 192000,
-            format: 'aac',
-            frameSize: 50
           }
-          this.recorderManager.start(options)
+          recorderManager.start(options);
-          this.recorderManager.onStart(() => {
+          
-            this.isStart = true
-          })
-          this.recorderManager.onError((err) => {
-            alert(err)
-          })
         },
         fail(err) {
-          console.log(err)
+          this.isStart = false
           uni.showModal({
             title: "提示",
             content: "您的录音权限未开启",
@@ -116,13 +138,11 @@ export default {
       })	
 		},
 		endRecord() {
-      this.recorderManager.stop()
-      this.recorderManager.onStop((res)=> {
-        console.log('录音结束');
-        alert('recorder stop' + JSON.stringify(res.tempFilePath));
-        // self.voicePath = res.tempFilePath;
       this.isStart = false
-      });
+      setTimeout(() => {
+        this.isFlag = false
+      }, 6000)
+      recorderManager.stop();
 		},
     microPhone() {
       this.type = 'voice'
@@ -131,6 +151,95 @@ export default {
     keyboardClick() {
       this.type = 'text'
       this.content = ''
+    },
+    upLoad(filePath) {
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: `${this.$instance.defaults.baseURL}/admin/file/add`,
+          filePath,
+          fileType: 'audio',
+          name: 'file',
+          success: uploadFileRes => {
+            this.voiceUrl = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
+            this.voiceId = JSON.parse(uploadFileRes.data).data[0].split(';')[1]
+            resolve(uploadFileRes)
+          },
+          fail: err => {
+            reject(err)
+          }
+        })
+      })
+    },
+    sendMsg() {
+      this.$loading()
+      this.$instance.post("/app/appaigccopilotinfo/add", {content: this.content}).then(res => {
+        if(res.code == 0) {
+          this.content = ''
+          this.messageList.push(res.data[0])
+          this.messageList.push(res.data[1])
+          this.$hideLoading()
+        }
+      })
+    },
+    sendVoice() {
+      this.$loading()
+      this.$instance.post("/app/appaigccopilotinfo/add", {sdkFileUrl: this.voiceUrl, fileId: this.voiceId}).then(res => {
+        if(res.code == 0) {
+          this.voiceUrl = ''
+          this.voiceId = ''
+          res.data((item) => {
+            if(item.sdkFileUrl) {
+              item.isPlay = false
+            }
+          })
+          this.messageList.push(res.data[0])
+          this.messageList.push(res.data[1])
+          this.$hideLoading()
+        }
+      })
+    },
+    getHistoryList() {
+      this.$loading()
+      this.$instance.post(`/app/appaigccopilotinfo/list?current=${this.current}&size=10`).then(res => {
+        if(res.code == 0 && res.data.records.length) {
+          res.data.records((item) => {
+            if(item.sdkFileUrl) {
+              item.isPlay = false
+            }
+          })
+          this.messageList = this.current == 1 ? res.data.records : [...res.data.records, ...this.messageList]
+          var idPage = res.data.records.length-3
+          this.$nextTick(() => {  
+            uni.pageScrollTo({
+              duration: 300,
+              selector: this.current == 1 ? `.item${this.messageList.length-1}` :  `.item${idPage}`
+            });
+          })
+          this.pages = res.data.pages
+          this.$hideLoading()
+        }
+        
+      })
+    },
+    play(src, index) {
+      innerAudioContext.stop();
+      this.messageList.map((item) => {
+        if(item.sdkFileUrl) {
+          item.isPlay = false
+        }
+      })
+      this.messageList[index].isPlay = true
+      innerAudioContext.src = src;
+      innerAudioContext.play();
+      innerAudioContext.onEnded(() => {
+        this.messageList[index].isPlay = false
+      })
+    },
+    playStop(index) {
+      innerAudioContext.stop();
+      innerAudioContext.onStop(() => {
+        this.messageList[index].isPlay = false
+      })
     }
   },
 }
@@ -198,7 +307,9 @@ page {
   .list-content {
     padding: 0 32px 364px;
     overflow: hidden;
+    margin-top: -112px;
     .item {
+      display: inline-block;
       max-width: 600px;
       border-radius: 24px 24px 0 24px;
       padding: 24px 32px;