kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

百度ai表单

Browse Source
This commit is contained in:
liuye
2024-05-21 09:43:15 +08:00
parent a7f282691f
commit d719644038
1 changed files with 424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

424
src/project/baidu/AppResidentAssistant/AppResidentAssistant.vue Normal file
View File

@@ -0,0 +1,424 @@
<template>
<div class="AppResidentAssistant">
<u-navbar title="居民助手" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
<div class="service-content">
<div class="text-content">
<div class="text-left">
<div>嘿，你好呀！</div>
<p>我是您的<span>「专属助手」</span>，</p>
<p>有什么问题都可以问我哟~</p>
</div>
<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.userType == 1 ? 'item-left' : 'item-right'" v-for="(item, index) in messageList" :key="index">
<div class="item" :class="'item'+index">
<div class="img-div" v-if="item.sdkFileUrl">
<u-icon name="play-circle" :color="item.userType == 0 ? '#fff' : '#A8ADAE'" size="52" v-if="!item.isPlay" @click="play(item.sdkFileUrl, index)"></u-icon>
<u-icon name="pause-circle" :color="item.userType == 0 ? '#fff' : '#A8ADAE'" size="52" v-else @click="playStop(index)"></u-icon>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-white.png" alt="" v-if="item.userType == 0">
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-gray.png" alt="" v-else>
</div>
<p>{{item.content || ''}}</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" @confirm="sendMsg"></u-input>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/send.png" alt="" v-if="content.length" @click="sendMsg">
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/microphone-btn.png" alt="" v-else @click="microPhone">
</div>
<div class="type-record" v-else>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/keyboard-btn.png" alt="" class="keyboard-btn" @click="keyboardClick">
<div v-if="!isStart" @click="startRecord">
<p>点击开始录音</p>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/record-btn.png" alt="" class="record-btn">
</div>
<div v-else @click="endRecord">
<p>正在录音中</p>
<div class="tips-text">点击下方，停止录音</div>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/shengbo.gif" alt="" class="recording">
</div>
</div>
</div>
</div>
</template>
<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.jpeg) no-repeat',
backgroundSize: 'cover',
},
recorderManager: null,
type: 'text',
isStart: false,
content: '',
isFlag: false,
voiceUrl: '',
voiceId: '',
messageList: [
// {
// userType: 0,
// sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
// isPlay: false
// }
],
current: 1,
pages: 2
}
},
computed: {
...mapState(['user']),
},
onLoad() {
recorderManager.onStop((res)=> {
console.log(res)
this.upLoad(res.tempFilePath)
});
this.getHistoryList()
},
onPullDownRefresh() {
if(this.current > this.pages) {
return this.$u.toast('没有更多记录')
}
this.current = this.current + 1
this.getHistoryList()
},
methods: {
startRecord() {
if(this.isFlag) return
this.isStart = true
uni.authorize({
scope: 'scope.record',
success() {
// const options = {
// duration: 10000,
// sampleRate: 44100,
// numberOfChannels: 1,
// encodeBitRate: 192000,
// format: 'aac',
// frameSize: 50
// }
const options = {
duration: 60000,
sampleRate: 16000,
format: 'mp3'
}
recorderManager.start(options);
},
fail(err) {
this.isStart = false
uni.showModal({
title: "提示",
content: "您的录音权限未开启",
})
}
})
},
endRecord() {
this.isStart = false
setTimeout(() => {
this.isFlag = false
}, 6000)
recorderManager.stop();
},
microPhone() {
this.type = 'voice'
this.isStart = false
},
keyboardClick() {
if(this.isStart) return
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]
this.sendVoice()
resolve(uploadFileRes)
},
fail: err => {
reject(err)
}
})
})
},
sendMsg() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {content: this.content, appType: 0}).then(res => {
if(res.code == 0) {
this.content = ''
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
this.$nextTick(() => {
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-1}`
});
})
this.$hideLoading()
}
})
},
sendVoice() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {sdkFileUrl: this.voiceUrl, fileId: this.voiceId, appType: 0}).then(res => {
if(res.code == 0) {
this.voiceUrl = ''
this.voiceId = ''
res.data.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-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.map((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-1
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;
this.$nextTick(() => {
innerAudioContext.play();
})
innerAudioContext.onEnded(() => {
this.messageList[index].isPlay = false
})
},
playStop(index) {
innerAudioContext.stop();
innerAudioContext.onStop(() => {
this.messageList[index].isPlay = false
})
}
},
}
</script>
<style lang="scss" scoped>
@import "~dvcp-wui/common";
page {
height: 100%;
}
.AppResidentAssistant {
height: 100vh;
background-color: #fff;
.service-content {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding-top: 20px;
box-sizing: border-box;
.text-content {
margin: 0 0 0 32px;
width: 686px;
height: 260px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service-content-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding: 32px;
box-sizing: border-box;
border-radius: 32px;
display: flex;
justify-content: space-between;
.text-left {
width: calc(100% - 192px);
div {
line-height: 54px;
font-family: SourceHanSansCN-Bold;
font-weight: 700;
font-size: 36px;
background: linear-gradient(to bottom, #2A6EE9, #58A5F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
}
p {
color: #222;
font-size: 28px;
font-family: SourceHanSansCN;
line-height: 44px;
span {
display: inline-block;
font-weight: 700;
}
}
}
.service-img {
display: inline-block;
width: 192px;
height: 170px;
}
}
}
.list-content {
padding: 0 32px 364px;
overflow: hidden;
margin-top: -112px;
background-color: #fff;
.item {
display: inline-block;
max-width: 600px;
border-radius: 24px 24px 0 24px;
padding: 24px 32px;
box-sizing: border-box;
margin-bottom: 32px;
.img-div {
margin-bottom: 4px;
img {
width: 136px;
height: 28px;
margin-left: 26px;
}
}
p {
word-break: break-all;
line-height: 48px;
font-family: SourceHanSansCN-Regular;
font-size: 32px;
}
}
.item-right {
display: flex;
justify-content: flex-end;
.item {
background-image: linear-gradient(-76deg, #569EF0 0%, #276FEC 100%);
}
p {
color: #fff;
}
}
.item-left {
.item {
background-color: #F1F4F8;
}
p {
color: #222;
}
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 64px;
border-top: 1px solid #eee;
background-color: #fff;
.type-text {
padding: 24px 0 24px 32px;
display: flex;
u-input {
width: calc(100% - 112px);
height: 80px;
background: #F4F6FA;
border-radius: 40px;
padding-left: 32px;
}
img {
width: 80px;
height: 80px;
padding: 0 16px;
}
}
.type-record {
position: relative;
text-align: center;
padding-top: 36px;
.keyboard-btn {
width: 48px;
height: 36px;
position: absolute;
top: 32px;
right: 32px;
}
p {
line-height: 58px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 40px;
color: #222;
}
.record-btn {
width: 156px;
height: 156px;
margin-top: 24px;
}
.tips-text {
line-height: 40px;
font-family: SourceHanSansCN-Regular;
font-size: 28px;
color: #999;
margin-top: 16px;
}
.recording {
padding-top: 48px;
width: 204px;
height: 96px;
}
}
}
}
</style>