hsai/im-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

进入uniapp

Browse Source
This commit is contained in:
luojie
2023-12-01 23:57:44 +08:00
parent a78893ea1f
commit d61f5e6c92
524 changed files with 88081 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

620
im-uniapp/components/friends-circle-detail/friends-circle-detail.vue Normal file
View File

@@ -0,0 +1,620 @@
<template>
<view class="friendsCircle-content-item">
<image class="friendsCircle-content-avatar" :src="content.avatar" mode="aspectFill"></image>
<view class="friendsCircle-content-right">
<view class="friendsCircle-content-nikeName">{{ content.nikeName }}</view>
<view class="friendsCircle-content-text">{{ content.text }}</view>
<view class="friendsCircle-content-imgs" v-if="content.topicType=='IMAGE'&&content.files.length>0">
<image v-for="(item, ii) in content.files" :key="ii" class="friendsCircle-content-img" :class="'fci' + content.files.length" :src="item.url" mode="aspectFill" @click="pimgs(content.files,ii)"></image>
</view>
<view class="friendsCircle-content-video" @click="openVideo(content.files[0].videoUrl)" v-if="content.topicType=='VIDEO'&&content.files.length>0">
<image class="friendsCircle-content-video-icon" src="../../static/img/bf.png" mode="aspectFill"></image>
<image class="friendsCircle-content-video-img" :src="content.files[0].url" mode="aspectFill"></image>
</view>
<view v-if="content.location" class="friendsCircle-content-location" @click="goMap(content.location)">{{ content.location.name }}</view>
<view class="friendsCircle-content-tools">
<view class="friendsCircle-content-time">{{ content.time }}</view>
<view class="friendsCircle-content-tool" :class="{ 'tabon': tabToolIndex }">
<view class="wxfont caidan" @click="tabTool(i)"></view>
<view class="friendsCircle-content-tool-absolute">
<view class="friendsCircle-popup">
<view class="friendsCircle-popup-item" @click="zan(content)">
<view class="friendsCircle-popup-icon wxfont zan"></view>
<view class="friendsCircle-popup-text" v-if="content.like=='Y'">取消</view>
<view class="friendsCircle-popup-text" v-else>赞</view>
</view>
<view class="friendsCircle-popup-item" @click="comment(content)">
<view class="friendsCircle-popup-icon wxfont pinglun"></view>
<view class="friendsCircle-popup-text">评论</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="friendsCircle-content-item-detail">
<view class="friendsCircle-content-item-detail-item" v-if="content.likeList&&content.likeList.length>0">
<view class="friendsCircle-like-icon wxfont zan"></view>
<view class="friendsCircle-like">
<image class="friendsCircle-like-img" mode="aspectFill" v-for="(z,zindex) in content.likeList" :src="z.portrait"></image>
</view>
</view>
<view class="friendsCircle-content-item-detail-item" v-if="content.replyList&&content.replyList.length>0">
<view class="friendsCircle-comment-icon wxfont pinglun"></view>
<view class="friendsCircle-comment">
<view class="friendsCircle-comment-item" v-for="(c,ci) in content.replyList" :key="ci">
<image class="friendsCircle-comment-img" :src="c.portrait" mode="aspectFill"></image>
<view class="friendsCircle-comment-item-text">
<view class="friendsCircle-comment-item-name">
<text class="friendsCircle-comment-text">{{c.nickName}}</text>
<text class="friendsCircle-comment-item-time">{{c.createTime}}</text>
</view>
<view style="width: 100%;" @click="replyclick(c,ci)">
<view class="friendsCircle-comment-feedback" v-if="c.replyType=='2'">
<text>回复</text>
<text class="friendsCircle-comment-text">{{c.toNickName}}</text>
</view>
<text class="friendsCircle-comment-textx">{{c.content}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="height: 120rpx;"></view>
<view class="zfb-tk-send-tool" :style="{bottom:keyboardHeight+'px'}">
<form @submit="sendMsg(msg)">
<view class="zfb-tk-send-tool-c">
<view class="zfb-tk-send-tool-input-box" @click="msgFocus=true">
<textarea class="zfb-tk-send-tool-input" :adjust-position="false" :focus="msgFocus" v-model="msg" :placeholder="placeholder" confirm-type="send" @confirm="sendMsg(msg)" hold-keyboard :maxlength="-1" auto-height />
</view>
<view class="zfb-tk-send-tool-text" @click="sendMsg(msg)" :style="{ background: msg !== '' ? '#1BC418' : '#F7F7F7', color: msg !== '' ? '#fff' : '#ddd', 'border-color': msg !== '' ? '#1BC418' : '#ddd' }">发送</view>
</view>
</form>
</view>
</template>
<script>
export default {
// 朋友圈列表内容区
data() {
return {
timer:null,
placeholder:'评论',
keyboardHeight:0,
msg: '',
type:'msg',
replydata:'',
msgFocus:false,
tabToolIndex: false,
content:this.detail
};
},
props:{
detail:{
type:Object
}
},
watch:{
detail(v){
this.content=v
}
},
computed:{
userInfo(){
return this.$store.state.userInfo
}
},
mounted() {
// #ifdef APP-PLUS
uni.onKeyboardHeightChange(res => {
this.keyboardHeight=res.height
})
// #endif
},
methods: {
scrolltoBottom() {
this.$nextTick(()=>{
this.timer = setTimeout(() => {
uni.pageScrollTo({
scrollTop: 9999999,
duration: 10
});
this.$forceUpdate()
}, 100);
})
},
replyclick(e,ci){
if(e.canDeleted=='Y'){
this.hidenTool()
uni.showActionSheet({
itemList: ['复制','删除'],
success: (res) => {
switch (res.tapIndex){
case 0:
uni.setClipboardData({
data: e.content,
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none',
position: 'bottom'
})
}
});
break;
case 1:
this.$http.request({
url: '/topic/removeReply/'+e.replyId,
success: (res) => {
if (res.data.code == 200) {
uni.showToast({
title:'删除成功',
icon:'none'
})
this.content.replyList.splice(ci,1)
}
}
});
break;
default:
break;
}
}
});
}else{
this.replydata=e
this.type='reply'
this.placeholder='回复'+e.nickName
this.$nextTick(()=>{
this.msgFocus=true
})
}
},
gofriend(e){
uni.navigateTo({
url:'../../wx/personInfo/detail?param='+e.userId
})
},
pimgs(arr,ii){
var imgs=[]
for (var i = 0; i < arr.length; i++) {
imgs.push(arr[i].url)
}
this.$fc.previewImages(imgs, ii)
},
goMap(e) {
uni.openLocation({
latitude: e.latitude,
longitude: e.longitude,
success: function() {}
});
},
openVideo(e){
this.$fc.plusDownload({onlinePath:e}).then(res=>{
this.$fc.plusOpenFile({filePath:res})
})
},
tabTool(e) {
this.tabToolIndex=!this.tabToolIndex
},
comment(e) {
this.hidenTool()
//评论
this.type='msg'
this.placeholder='评论'
this.$nextTick(()=>{
this.msgFocus=true
})
},
zan(e,i){//点赞
switch (e.like){
case 'N':
this.$http.request({
url: '/topic/like/'+e.topicId,
success: (res) => {
if (res.data.code == 200) {
var like=e.like=='N' ? e.like='Y' : e.like='N'
this.content.like=like
this.content.likeList.push({
userId: this.userInfo.userId,
nickName: this.userInfo.nickName,
portrait: this.userInfo.portrait
})
}
}
});
break;
case 'Y':
this.$http.request({
url: '/topic/cancelLike/'+e.topicId,
success: (res) => {
if (res.data.code == 200) {
var like=e.like=='N' ? e.like='Y' : e.like='N'
this.content.like=like
var thisObj=this.$fc.arrFindkey({arr:this.content.likeList,key:'userId',val:this.userInfo.userId})
this.content.likeList.splice(thisObj.index,1)
}
}
});
break;
default:
break;
}
},
sendMsg(e) {
if (!e) {
return;
}
var replyId=''
var replyType=''
if(this.type=='msg'){
replyId=this.content.topicId
replyType='1'
}
if(this.type=='reply'){
replyId=this.replydata.replyId
replyType='2'
}
this.$http.request({
url: '/topic/reply',
method: 'POST',
data:JSON.stringify({
replyId: replyId,
replyType: replyType,
content: e
}),
success: (res) => {
if (res.data.code == 200) {
this.content.replyList.push(res.data.data)
this.$nextTick(()=>{
this.scrolltoBottom()
})
}
}
});
this.msg=''
},
hidenTool() {//隐藏选项和输入框
this.tabToolIndex = false;
}
}
};
</script>
<style scoped lang="scss">
.zfb-tk-send-tool {
background: #f7f7f7;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.zfb-tk-send-tool-c {
padding: 16rpx 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
border: 1px #ddd solid;
border-left: none;
border-right: none;
}
.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
transition: color 0.5s;
}
.zfb-tk-send-tool .zfb-tk-send-tool-input {
padding:0 24rpx;
box-sizing: border-box !important;
width: 100%;
background: #fff;
}
.zfb-tk-send-tool-text {
white-space: nowrap;
padding: 10rpx 24rpx;
border-radius: 12rpx;
border: 1px #ddd solid;
background: #f7f7f7;
color: #ddd;
}
.friendsCircle-content-item{
display: flex;
flex-direction: row;
padding:24rpx;
}
.friendsCircle-content-item-detail{
margin:0 24rpx;
border-radius: 8rpx;
margin-top: 24rpx;
padding-bottom: 0;
margin-bottom: 1px;
}
.friendsCircle-content-avatar{
border-radius: 10rpx;
width: 90rpx;
height: 90rpx;
min-width: 90rpx;
}
.friendsCircle-content-right{
display: flex;flex-direction: column;
padding-left: 18rpx;
flex: 1;
box-sizing: border-box;
}
.friendsCircle-content-nikeName{
font-size: 32rpx;
color: #5F698C;
margin-bottom: 10rpx;
}
.friendsCircle-content-text{
font-size: 32rpx;
color: #333;
}
.friendsCircle-content-imgs{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
margin-top: 24rpx;
}
.friendsCircle-content-img{
max-width: 100%;
}
.friendsCircle-content-img.fci1{
height: 550rpx;
max-width: 500rpx;
margin-right: 5px;
}
.friendsCircle-content-img.fci2{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci2:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci3{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci3:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci4{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci4:nth-child(2n){
margin-right: 185rpx;
}
.friendsCircle-content-img.fci5{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci5:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci6{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci6:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci7{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci7:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci8{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci8:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-img.fci9{
width: 185rpx;
height: 185rpx;
margin-right: 5rpx;
margin-bottom: 5rpx;
}
.friendsCircle-content-img.fci9:nth-child(3n){
margin-right: 0;
}
.friendsCircle-content-location{
font-size: 24rpx;
color: #5F698C;
margin-top: 12rpx;
}
.friendsCircle-content-time{
font-size: 24rpx;
color: #666666;
margin-right: auto;
}
.friendsCircle-content-tools{
margin-top: 24rpx;
display: flex;flex-direction: row;align-items: center;
}
.friendsCircle-content-tool{
padding:4rpx 16rpx;
border-radius: 10rpx;
background-color: #F8F8FA;
color: #63678C;
display: flex;flex-direction: row;
position: relative;
}
.tabon .friendsCircle-content-tool-absolute{
display: block;
}
.friendsCircle-content-tool-absolute{
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
display: none;
}
.friendsCircle-popup{
margin-right: 24rpx;
border-radius: 12rpx;
background-color: rgba(0,0,0,0.7);
height: 75rpx;
display: flex;flex-direction: row;align-items: center;
padding:0 24rpx;
}
.friendsCircle-popup-item{
color: #fff;
padding:0 25rpx;
height: 100%;
display: flex;flex-direction: row;align-items: center;
}
.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon{
font-size: 56rpx;
}
.friendsCircle-popup-icon{
font-size: 46rpx;
}
.friendsCircle-popup-text{
white-space: nowrap;
}
.friendsCircle-like{
display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
}
.friendsCircle-like-icon,.friendsCircle-like-text,.friendsCircle-comment-text{
color: #5F698C !important;
font-size: 24rpx;
}
.friendsCircle-comment-feedback .friendsCircle-comment-text{
margin:0 6rpx;
}
.friendsCircle-comment-feedback .friendsCircle-comment-text::after{
content: ":";
color: #333;
}
.friendsCircle-comment-item-name{
display: flex;flex-direction: row;
width: 100%;
}
.friendsCircle-comment-item-time{
margin-left: auto;
font-size: 24rpx;
color: #999;
}
.friendsCircle-like-icon,.friendsCircle-comment-icon{
width: 40rpx;
min-width: 40rpx;
height: 60rpx;
display: flex;flex-direction: row;align-items: center;justify-content: center;
font-size: 32rpx;
}
.friendsCircle-like-text{
margin-left: 4rpx;
}
.friendsCircle-like-text::after{
content: ",";
}
.friendsCircle-like-text:nth-last-child(1)::after{
content: "";
}
.friendsCircle-comment{
background-color: #F7F7F7;
border-radius: 8rpx;
flex: 1;
}
.friendsCircle-comment-item{
font-size: 28rpx;
padding: 12rpx;
white-space: pre-wrap;
display: flex;flex-direction: row;
}
.friendsCircle-comment-feedback{
display: inline-block;
}
.friendsCircle-comment-feedback text{
font-size: 28rpx;
color: #333;
}
.friendsCircle-comment-textx{
word-break: break-all;
}
.friendsCircle-like-img,.friendsCircle-comment-img{
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
margin-left: 10rpx;
margin-bottom: 12rpx;
}
.friendsCircle-comment-img{
margin-right: 12rpx;
margin-left: 0px;
}
.friendsCircle-content-item-detail-item{
display: flex;flex-direction: row;
padding: 12rpx;
padding-bottom: 0;
margin-bottom: 4rpx;
border-radius: 8rpx;
background-color: #F7F7F7;
}
.friendsCircle-comment-item-text{
flex: 1;
display: flex;flex-direction: column;
align-items:flex-start;
}
.friendsCircle-content-video{
height: 550rpx;
max-width: 400rpx;
position: relative;
margin-right: 14rpx;
margin-top: 24rpx;
}
.friendsCircle-content-video-img{
width: 100%;
height: 100%;
}
.friendsCircle-content-video-icon{
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
width: 60rpx !important;
height: 60rpx !important;
transform: translate(-50%,-50%);
}
.zfb-tk-send-tool-input-box{
overflow: auto;
width: 100%;
margin: 0 12rpx;
min-height: 75rpx;
background-color: #fff;
border-radius: 24rpx;
padding-top: 18rpx;
max-height: 225rpx;
box-sizing: border-box;
}
</style>