小助理

This commit is contained in:
liuye
2024-07-05 14:54:01 +08:00
parent 38265dc4ff
commit db5233f3ff
6 changed files with 442 additions and 1 deletions

View File

@@ -0,0 +1,185 @@
<template>
<div class="AppRecord">
<u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false" :height="44"></u-navbar>
<div class="list-bg">
<div class="search-content">
<u-search v-model="searchVal" :clearabled="true" placeholder="请输入搜索关键词…" :show-action="false"
bg-color="#fff" search-icon-color="#E2E8F1" color="#666" height="72" @search="getSearchList" @clear="handerClear">
</u-search>
</div>
</div>
<div class="list-content">
<div class="item">
<p class="item-text">111111111111</p>
<div class="time-flex">
<p class="time-text">2024-06-02 10:21:23</p>
<div class="item-view">
<p>查看对话</p>
<div class="del-btn">
<img src="./img/del-img.png" alt="">
</div>
</div>
</div>
</div>
<AiEmpty v-if="!messageList.length"/>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
export default {
customNavigation: true,
enablePullDownRefresh: true,
name: 'AppRecord',
appName: 'Copilot小助理(记录)',
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
searchVal: '',
messageList: [
// {
// userType: 0,
// sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
// isPlay: false
// }
],
current: 1,
pages: 2,
}
},
computed: {
...mapState(['user', 'token']),
},
onShow() {
//this.getHistoryList()
},
onPullDownRefresh() {
if(this.current > this.pages) {
return this.$u.toast('没有更多记录')
}
this.current = this.current + 1
this.getHistoryList()
},
methods: {
...mapActions(['autoLogin']),
getHistoryList() {
if(!this.token) {
return this.$u.toast("请先进行登录")
}
this.$loading()
this.$instance.post(`/app/appaicopilotinfo/list?current=${this.current}&size=10&content=${this.searchVal}`).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()
}else {
if(this.current == 1) {
this.messageList = []
}
}
})
},
getSearchList() {
this.current = 1
this.getHistoryList()
},
handerClear() {
this.searchVal = ''
this.getSearchList()
},
},
}
</script>
<style lang="scss" scoped>
@import "~dvcp-wui/common";
page {
height: 100%;
}
.AppRecord {
height: 100vh;
background-color: #fff;
position: relative;
.list-bg {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
position: fixed;
left: 0;
z-index: 1;
background-size: 100vw;
background-repeat: no-repeat;
.search-content {
padding: 32px;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
z-index: 99;
background: linear-gradient(to bottom, #D7EDFE, #EAF5FE);
}
}
.list-content {
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 144px 32px 364px;
.item {
.item-text {
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #333;
padding: 18px;
background-color: #CCE2FF;
border-radius: 8px;
}
.time-flex {
display: flex;
justify-content: space-between;
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 24px;
.time-text {
color: #999;
padding-top: 34px;
}
.item-view {
p {
display: inline-block;
font-size: 28px;
color: #216AFD;
}
div {
display: inline-block;
padding: 34px 0 34px 38px;
img {
width: 40px;
height: 40px;
vertical-align: bottom;
}
}
}
}
}
}
}
</style>

View File

@@ -0,0 +1,256 @@
<template>
<div class="Detail">
<u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false" :height="44"></u-navbar>
<div class="list-bg">
<div class="search-content">
<u-search v-model="searchVal" :clearabled="true" placeholder="请输入搜索关键词…" :show-action="false"
bg-color="#fff" search-icon-color="#E2E8F1" color="#666" height="72" @search="getSearchList" @clear="handerClear">
</u-search>
</div>
</div>
<div class="list-content">
<div v-for="(item, index) in messageList" :key="index">
<div class="send-time">{{item.createTime.substring(5, 16)}}</div>
<div :class="item.userType == 1 ? 'item-left' : 'item-right'">
<img src="https://cdn.cunwuyun.cn/wechat/baiduAI/user-img.png" alt="" class="user-img" v-if="item.userType == 1">
<div class="item" :class="'item'+index">
<u-icon name="play-right-fill" color="#CCE2FF" size="20" v-if="item.userType != 1" class="u-icon-right"></u-icon>
<u-icon name="play-left-fill" color="#F3F5F7" size="20" v-if="item.userType == 1" class="u-icon-left"></u-icon>
<div class="voice-div" v-if="item.sdkFileUrl" @click="play(item.sdkFileUrl, index)">
<span>8</span>
<img src="https://cdn.cunwuyun.cn/wechat/baiduAI/play-d.gif" alt="" v-if="item.isPlay">
<img src="https://cdn.cunwuyun.cn/wechat/baiduAI/play-j.png" alt="" v-else>
</div>
<p v-if="!item.sdkFileUrl">{{item.content || ''}}</p>
</div>
<img src="https://cdn.cunwuyun.cn/wechat/baiduAI/user-img.png" alt="" class="user-img" v-if="item.userType != 1">
</div>
</div>
<AiEmpty v-if="!messageList.length"/>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
export default {
customNavigation: true,
enablePullDownRefresh: true,
name: 'Detail',
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
searchVal: '',
messageList: [
// {
// userType: 0,
// sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
// isPlay: false
// }
],
current: 1,
pages: 2,
}
},
computed: {
...mapState(['user', 'token']),
},
onShow() {
this.getHistoryList()
},
onPullDownRefresh() {
if(this.current > this.pages) {
return this.$u.toast('没有更多记录')
}
this.current = this.current + 1
this.getHistoryList()
},
methods: {
...mapActions(['autoLogin']),
getHistoryList() {
if(!this.token) {
return this.$u.toast("请先进行登录")
}
this.$loading()
this.$instance.post(`/app/appaicopilotinfo/list?current=${this.current}&size=10&content=${this.searchVal}`).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()
}else {
if(this.current == 1) {
this.messageList = []
}
}
})
},
getSearchList() {
this.current = 1
this.getHistoryList()
},
handerClear() {
this.searchVal = ''
this.getSearchList()
},
play(src, index) {
innerAudioContext.stop();
if(this.messageList[index].isPlay) {
innerAudioContext.onStop(() => {
this.messageList[index].isPlay = false
})
return
}
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%;
}
.Detail {
height: 100vh;
background-color: #fff;
position: relative;
.list-bg {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
position: fixed;
left: 0;
z-index: 1;
background-size: 100vw;
background-repeat: no-repeat;
.search-content {
padding: 32px;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
z-index: 99;
background: linear-gradient(to bottom, #D7EDFE, #EAF5FE);
}
}
.list-content {
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 144px 32px 364px;
.send-time {
display: block;
width: 100%;
line-height: 28px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 20px;
color: #999;
text-align: center;
margin-bottom: 28px;
}
.user-img {
display: inline-block;
width: 72px;
height: 72px;
vertical-align: top;
}
.item {
display: inline-block;
max-width: 440px;
border-radius: 8px;
padding: 18px;
box-sizing: border-box;
margin-bottom: 28px;
position: relative;
.voice-div {
img {
width: 26px;
height: 28px;
}
span {
display: inline-block;
color: #333;
font-size: 28px;
font-family: PingFangSC;
line-height: 28px;
margin-right: 68px;
}
}
p {
word-break: break-all;
line-height: 40px;
font-family: SourceHanSansCN-Regular;
font-size: 32px;
color: #333;
}
}
.item-right {
display: flex;
justify-content: flex-end;
.item {
background-color: #CCE2FF;
}
.user-img {
margin-left: 24px;
}
.u-icon-right {
position: absolute;
top: 12px;
right: -12px;
}
}
.item-left {
.item {
background-color: #F3F5F7;
}
.user-img {
margin-right: 24px;
}
.u-icon-left {
position: absolute;
top: 12px;
left: -12px;
}
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 795 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 B

View File

@@ -27,7 +27,7 @@
<image :src="item.fileUrl ? item.fileUrl : 'https://cdn.cunwuyun.cn/wechat/fd-store/shop-img.png' " alt="" mode="aspectFill">
</div>
<div class="right">
<div class="right-btn" @click="toEvaluateForm(item.id)">
<div class="right-btn" @click.stop="toEvaluateForm(item.id)">
<div>
<img src="https://cdn.cunwuyun.cn/wechat/fd-store/store-detail-edit-icon.png" alt="">评价
</div>