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

会话存档记录

Browse Source
This commit is contained in:
liuye
2023-06-13 16:34:06 +08:00
parent bcf0d45308
commit 57b76d549b
1 changed files with 124 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/project/pidu/AppConversation/conversationDetail.vue
View File

@@ -17,101 +17,103 @@
</div> </div>
</div> </div>
</AiTopFixed> </AiTopFixed>
<div class="conversation-list" v-if="list.length"> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="list.length" :style="{height: scrollHeight+'px'}">
<div v-for="(item, index) in list" :key="index"> <div class="conversation-list">
<div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'"> <div v-for="(item, index) in list" :key="index">
<div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'">
<!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId"> --> <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId"> -->
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar"> <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar">
<img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar"> <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
<p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p> <p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
<div class="content"> <div class="content">
<span class="cir" v-if="item.msgType == 'text'"></span> <span class="cir" v-if="item.msgType == 'text'"></span>
<p class="content-text" v-if="item.msgType == 'text'">{{item.content}}</p> <p class="content-text" v-if="item.msgType == 'text'">{{item.content}}</p>
<div class="img-list" v-if="item.msgType == 'image'"> <div class="img-list" v-if="item.msgType == 'image'">
<img :src="item.sdkFileUrl" alt="" @click="previewImage(item.sdkFileUrl)"> <img :src="item.sdkFileUrl" alt="" @click="previewImage(item.sdkFileUrl)">
</div>
<audio :src="item.sdkFileUrl" controls style="display: block;" v-if="item.msgType == 'voice'"></audio>
<video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
<div class="file" @click="prevFile(item)" v-if="item.msgType == 'file'">
<u-row justify="between">
<label class="left">
<img :src="$cdn + 'common/appendix.png'" alt="">
<span>{{ item.sdkFileName }}</span>
</label>
<span>{{ item.fileSizeStr }}</span>
</u-row>
</div>
<div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
<div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容，你将无法继续提供服务</div>
<div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容，你可以继续提供服务</div>
<div class="card-info" v-if="item.msgType == 'card'">
<div class="top">
<div class="card-left">
<h3>{{item.cardCorpName}}</h3>
<p>{{item.cardUserName}}</p>
<!-- <div>{{item.cardUserId}}</div> -->
</div>
<div class="card-right">
<img :src="item.cardUserAvatar" alt="" v-if="item.cardUserAvatar">
<img src="./img/user-img.png" alt="" v-else>
</div>
</div> </div>
<div class="bottom">个人名片</div>
</div>
<img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width/2+'px'}, {height: item.height/2+'px'}]"> <audio :src="item.sdkFileUrl" controls style="display: block;" v-if="item.msgType == 'voice'"></audio>
<div class="map-info" v-if="item.msgType == 'location'"> <video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
<map style="width: 100%; height: 100%;" :latitude="item.lat" :longitude="item.lng" :scale="item.zoom"></map>
<div class="address-text"> <div class="file" @click="prevFile(item)" v-if="item.msgType == 'file'">
<p>{{item.title}}</p> <u-row justify="between">
<p>{{item.address}}</p> <label class="left">
<img :src="$cdn + 'common/appendix.png'" alt="">
<span>{{ item.sdkFileName }}</span>
</label>
<span>{{ item.fileSizeStr }}</span>
</u-row>
</div> </div>
</div>
<div class="card-info" v-if="item.msgType == 'weapp'" @click="openApp(item)"> <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
<div class="top">
<div class="card-left"> <div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容，你将无法继续提供服务</div>
<h3>{{item.description}}</h3>
<div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容，你可以继续提供服务</div>
<div class="card-info" v-if="item.msgType == 'card'">
<div class="top">
<div class="card-left">
<h3>{{item.cardCorpName}}</h3>
<p>{{item.cardUserName}}</p>
<!-- <div>{{item.cardUserId}}</div> -->
</div>
<div class="card-right">
<img :src="item.cardUserAvatar" alt="" v-if="item.cardUserAvatar">
<img src="./img/user-img.png" alt="" v-else>
</div>
</div>
<div class="bottom">个人名片</div>
</div>
<img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width/2+'px'}, {height: item.height/2+'px'}]">
<div class="map-info" v-if="item.msgType == 'location'">
<map style="width: 100%; height: 100%;" :latitude="item.lat" :longitude="item.lng" :scale="item.zoom"></map>
<div class="address-text">
<p>{{item.title}}</p> <p>{{item.title}}</p>
<div>{{item.username}}{{item.displayname}}</div> <p>{{item.address}}</p>
</div> </div>
</div> </div>
<div class="bottom">小程序</div>
</div>
<div class="card-info" v-if="item.msgType == 'link'" @click="openLink(item)"> <div class="card-info" v-if="item.msgType == 'weapp'" @click="openApp(item)">
<div class="top"> <div class="top">
<div class="card-left"> <div class="card-left">
<p>{{item.title}}</p> <h3>{{item.description}}</h3>
<div>{{item.username}}</div> <p>{{item.title}}</p>
</div> <div>{{item.username}}{{item.displayname}}</div>
<div class="card-right" v-if="item.imageUrl"> </div>
<img :src="item.imageUrl" alt="" >
</div> </div>
<div class="bottom">小程序</div>
</div> </div>
<div class="bottom">分享链接</div>
</div>
<div class="card-info" v-if="item.msgType == 'link'" @click="openLink(item)">
<div class="top">
<div class="card-left">
<p>{{item.title}}</p>
<div>{{item.username}}</div>
</div>
<div class="card-right" v-if="item.imageUrl">
<img :src="item.imageUrl" alt="" >
</div>
</div>
<div class="bottom">分享链接</div>
</div>
</div>
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
<!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId"> -->
</div> </div>
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
<!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId"> -->
</div> </div>
</div> </div>
</div> </scroll-view>
<AiEmpty v-else/> <AiEmpty v-else/>
<u-calendar v-model="isShowDate" @change="onDateChange" mode="range"></u-calendar> <u-calendar v-model="isShowDate" @change="onDateChange" mode="range"></u-calendar>
<!-- <div class="footer" @click="toGroup">{{type == 1 ? '群详情' : '个人信息'}}</div> --> <!-- <div class="footer" @click="toGroup">{{type == 1 ? '群详情' : '个人信息'}}</div> -->
@@ -122,7 +124,6 @@
import {mapState, mapActions} from "vuex"; import {mapState, mapActions} from "vuex";
export default { export default {
name: "conversationDetail", name: "conversationDetail",
enablePullDownRefresh: true,
data() { data() {
return { return {
tabList: [ tabList: [
@@ -151,9 +152,9 @@ export default {
type: '', type: '',
isShowDate: false, isShowDate: false,
dateList: [], dateList: [],
scrollTop: 0,
amrPlay: '', scrollHeight: '',
amrPlayStatus: false, preveHeight: ''
}; };
}, },
computed: { computed: {
@@ -167,23 +168,36 @@ export default {
} }
this.type = option.type this.type = option.type
this.getList() this.getList()
console.log()
this.scrollHeight = uni.getSystemInfoSync().windowHeight - 150
}, },
onShow() { onShow() {
document.title = '会话详情' document.title = '会话详情'
}, },
onPullDownRefresh() { // onPullDownRefresh() {
if(this.current > this.pages) { // if(this.current > this.pages) {
uni.stopPullDownRefresh() // uni.stopPullDownRefresh()
return this.$u.toast('已加载完成，没有更多数据') // return this.$u.toast('已加载完成，没有更多数据')
}else { // }else {
this.current ++ // this.current ++
this.getList() // this.getList()
setTimeout(() => { // setTimeout(() => {
uni.stopPullDownRefresh() // uni.stopPullDownRefresh()
}, 1000) // }, 1000)
} // }
}, // },
methods: { methods: {
scroll(e) {
console.log(e)
if(e.detail.scrollTop == 0) {
if(this.current > this.pages) {
return this.$u.toast('已加载完成，没有更多数据')
}else {
this.current ++
this.getList()
}
}
},
toGroup() { toGroup() {
if(this.type == 1) { if(this.type == 1) {
uni.navigateTo({url: `./groupDetail`}) uni.navigateTo({url: `./groupDetail`})
@@ -212,6 +226,12 @@ export default {
this.getList() this.getList()
}, },
getList() { getList() {
if(this.current > 1) {
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
console.log('old', res.height, uni.getSystemInfoSync().windowHeight)
this.preveHeight = res.height
}).exec();
}
this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, { this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
params: { params: {
current: this.current, current: this.current,
@@ -243,6 +263,18 @@ export default {
}) })
this.list = this.current > 1 ? [ ...res.data.records, ...this.list]: res.data.records this.list = this.current > 1 ? [ ...res.data.records, ...this.list]: res.data.records
this.pages = res.data.pages this.pages = res.data.pages
this.$nextTick(() => {
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
console.log(this.scrollTop, res.height)
if(this.current == 1) {
this.scrollTop = res.height - this.scrollHeight
}else {
this.scrollTop = res.height - this.preveHeight
}
console.log(this.current, this.scrollTop, res.height)
}).exec();
})
} }
}) })
}, },