439 lines
9.9 KiB
Vue
439 lines
9.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-navbar title="互动消息" :border-bottom="false"></u-navbar>
|
||
|
|
<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" :is-scroll="false"
|
||
|
|
:active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }" :bar-style="{ background: '#3CB5FB' }"
|
||
|
|
@change="tabsChange"></u-tabs-swiper>
|
||
|
|
<scroll-view scroll-y="true" class="scroll">
|
||
|
|
<view class="flex-col list" v-if='list.length'>
|
||
|
|
<template v-for="(item, i) in list">
|
||
|
|
<view v-if='item.interType != 3' class="list-item flex-col section_4" :key="i">
|
||
|
|
<view class="image_2 flex-row view_14">
|
||
|
|
<u-avatar :src="$u.http.config.imgUrl + item.userHead"
|
||
|
|
@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
|
||
|
|
<view class="flex-col group_2">
|
||
|
|
<view class="flex-row group_3">
|
||
|
|
<text class="text_16">{{ item.interUserName }}</text>
|
||
|
|
<text class="text_18">{{ item.interDate }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="right-text-wrapper">
|
||
|
|
<text v-if="item.interType == 0">点赞了你的作品</text>
|
||
|
|
<text v-if="item.interType == 1">收藏了你的作品</text>
|
||
|
|
<text v-if="item.interType == 2">转发了你的作品</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom-section flex-row">
|
||
|
|
<image v-if='item.dynamicHead' :src="$u.http.config.imgUrl + item.dynamicHead.split(',')[0]"
|
||
|
|
class="image_4" />
|
||
|
|
<text v-if="item.interType == 0" class="text_6">{{ item.commentContent }}</text>
|
||
|
|
<text v-if="item.interType == 1" class="text_6">{{ item.dynamicTitle }}</text>
|
||
|
|
<text v-if="item.interType == 2" class="text_6">{{ item.dynamicTitle }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex-row group_4">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else class="list-item flex-col section_4">
|
||
|
|
<view class="top-group flex-row view_13">
|
||
|
|
<view class="image_2 flex-row view_14">
|
||
|
|
<u-avatar :src="$u.http.config.imgUrl + item.userHead"
|
||
|
|
@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
|
||
|
|
<view class="flex-col group_2">
|
||
|
|
<view class="flex-row group_3">
|
||
|
|
<text class="text_16">{{ item.interUserName }}</text>
|
||
|
|
<!-- <view class="flex-col items-center text-wrapper_1">
|
||
|
|
<text>{{ item.commentContent == '【我的评论】' ? '评论' : '回复' }}了</text>
|
||
|
|
</view> -->
|
||
|
|
<text class="text_18">{{ item.interDate }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="text_20">{{ item.commentContent == '【我的评论】' ? '评论' :
|
||
|
|
'回复' }}了你:{{ item.content }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="right-group flex-col items-center view_15">
|
||
|
|
<text class="top-group_2">回复</text>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="bottom-section flex-row">
|
||
|
|
<text v-if="item.commentContent == '【我的评论】'" class="text_6">{{ item.dynamicTitle }}</text>
|
||
|
|
<text v-else class="text_6">{{ item.commentContent }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex-row group_4">
|
||
|
|
<!-- <image
|
||
|
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/621c59e162a7d90011002985/16460348611151830106.png"
|
||
|
|
class="image_11" />
|
||
|
|
<text class="text_22">还有10条评论 ></text> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
<view v-else style='padding-top:30vh'>
|
||
|
|
<!-- <u-empty text="暂无消息列表" mode="message"></u-empty> -->
|
||
|
|
<no-data text="暂无消息列表"></no-data>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import NoData from 'components/NoData.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
NoData
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [],
|
||
|
|
tabList: [
|
||
|
|
{
|
||
|
|
name: "全部",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "评论",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "点赞",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "收藏",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "转发",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
current:0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getList(-1)
|
||
|
|
//接收互动消息
|
||
|
|
this.$connection.on("InteractMessage", (data, type) => {
|
||
|
|
if (this.route.indexOf('interactionList') >= 0) {
|
||
|
|
this.list.unshift(data.data)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (this.vuex_msgList) {
|
||
|
|
var msgList = this.vuex_msgList;
|
||
|
|
msgList = msgList.replace('InteractMessage,', '')
|
||
|
|
this.$u.vuex('vuex_msgList', msgList)
|
||
|
|
if (!msgList) {
|
||
|
|
var tab = this.vuex_tabbar;
|
||
|
|
tab[1].isDot = false;
|
||
|
|
this.$u.vuex('vuex_tabbar', tab);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// tabschange
|
||
|
|
tabsChange(i) {
|
||
|
|
// this.current 0=全部 1=评论 2=点赞 3=收藏 4=转发
|
||
|
|
if (this.current !== i) {
|
||
|
|
this.current = i;
|
||
|
|
if (this.current == 0) {
|
||
|
|
this.getList(-1)
|
||
|
|
} else if (this.current == 1) {
|
||
|
|
this.getList(3)
|
||
|
|
} else {
|
||
|
|
this.getList(this.current - 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//type 0=点赞 1=收藏 2=转发 3=评论
|
||
|
|
getList(type) {
|
||
|
|
this.$u.api.getinteractionList(type).then(res => {
|
||
|
|
this.list = res
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//返回上一级
|
||
|
|
router() {
|
||
|
|
uni.switchTab({
|
||
|
|
url: '../../message/msgList/msgList'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
toDetil(id) {
|
||
|
|
this.$u.route({
|
||
|
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.scroll {
|
||
|
|
background-color: rgb(246, 247, 250);
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 0.44rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
padding: 0 0.14rem 0.17rem;
|
||
|
|
background-color: rgb(255, 255, 255);
|
||
|
|
border-radius: 0.1rem;
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-group {
|
||
|
|
padding: 0.12rem 0 0.085rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-section {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
margin-right: 0.055rem;
|
||
|
|
padding: 0.07rem 0.025rem 0.08rem 0.14rem;
|
||
|
|
color: rgb(54, 54, 54);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
// letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color:#F6F8F9;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
// margin-left: 0.5rem;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image_2 {
|
||
|
|
margin-bottom: 0.025rem;
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.4rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-group {
|
||
|
|
// margin-left: 0.12rem;
|
||
|
|
// margin-top: 0.05rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image_4 {
|
||
|
|
width: 0.35rem;
|
||
|
|
height: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_6 {
|
||
|
|
margin-left: 0.025rem;
|
||
|
|
align-self: center;
|
||
|
|
overflow: hidden;
|
||
|
|
max-width: 84%;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-group_1 {
|
||
|
|
color: rgb(2, 2, 2);
|
||
|
|
font-size: 0.15rem;
|
||
|
|
line-height: 0.14rem;
|
||
|
|
letter-spacing: 0.015rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_4 {
|
||
|
|
margin-left: 0.02rem;
|
||
|
|
margin-top: 0.085rem;
|
||
|
|
color: rgb(177, 179, 182);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
line-height: 0.12rem;
|
||
|
|
letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_1 {
|
||
|
|
// margin: 0.02rem 0;
|
||
|
|
color: rgb(2, 2, 2);
|
||
|
|
font-size: 0.15rem;
|
||
|
|
// line-height: 0.14rem;
|
||
|
|
letter-spacing: 0.015rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-text-wrapper {
|
||
|
|
// margin-left: 0.015rem;
|
||
|
|
padding: 0.03rem 0 0.04rem;
|
||
|
|
// color: rgb(46, 155, 255);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
// line-height: 0.12rem;
|
||
|
|
// letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
// background-color: rgba(46, 155, 255, 0.1);
|
||
|
|
border-radius: 0.09rem;
|
||
|
|
// width: 0.65rem;
|
||
|
|
height: 0.18rem;
|
||
|
|
color: #000;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
padding: 0.14rem 0.14rem 0.14rem 0.15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view_2 {
|
||
|
|
color: initial;
|
||
|
|
font-size: initial;
|
||
|
|
line-height: initial;
|
||
|
|
letter-spacing: initial;
|
||
|
|
white-space: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-group {
|
||
|
|
padding: 0.12rem 0 0.085rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image_2 {
|
||
|
|
margin-bottom: 0.025rem;
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-group {
|
||
|
|
// margin-left: 0.12rem;
|
||
|
|
// margin-top: 0.05rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section_4 {
|
||
|
|
padding: 0.15rem 0.16rem 0;
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view_13 {
|
||
|
|
padding: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_20 {
|
||
|
|
margin-right: initial;
|
||
|
|
padding: initial;
|
||
|
|
align-self: initial;
|
||
|
|
background-color: initial;
|
||
|
|
// margin-left: 0.53rem;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
width: 80%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: rgba(0, 0, 0, 0.9);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-wrapper_2 {
|
||
|
|
margin-right: 0.05rem;
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
padding: 0.18rem 0 0.2rem;
|
||
|
|
color: rgb(54, 54, 54);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
line-height: 0.12rem;
|
||
|
|
letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color: rgb(246, 247, 250);
|
||
|
|
max-width: 84%;
|
||
|
|
min-width: 84%;
|
||
|
|
margin-left: 0.53rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.group_4 {
|
||
|
|
padding: 0.1rem 0.52rem 0.1rem;
|
||
|
|
color: rgb(177, 179, 182);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
line-height: 0.12rem;
|
||
|
|
letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view_14 {
|
||
|
|
margin-bottom: initial;
|
||
|
|
width: initial;
|
||
|
|
height: initial;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view_15 {
|
||
|
|
margin-left: 0.2rem;
|
||
|
|
margin-top: initial;
|
||
|
|
margin-right: 0.07rem;
|
||
|
|
padding: 0.07rem 0;
|
||
|
|
color: rgb(255, 255, 255);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
line-height: 0.12rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color: rgb(46, 155, 255);
|
||
|
|
border-radius: 0.13rem;
|
||
|
|
width: 0.56rem;
|
||
|
|
height: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view_15:active {
|
||
|
|
background: #fff;
|
||
|
|
color: rgb(46, 155, 255);
|
||
|
|
border: 1px solid rgb(46, 155, 255);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_21 {
|
||
|
|
margin-left: 0.14rem;
|
||
|
|
margin-right: 0.12rem;
|
||
|
|
max-width: 100%;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image_11 {
|
||
|
|
width: 0.2rem;
|
||
|
|
height: 0.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_22 {
|
||
|
|
margin: 0.05rem 0 0.04rem 0.09rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image_10 {
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.group_2 {
|
||
|
|
margin-left: 0.11rem;
|
||
|
|
margin-bottom: 0.045rem;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.group_3 {
|
||
|
|
padding-left: 0.01rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_18 {
|
||
|
|
// margin-top: 0.055rem;
|
||
|
|
color: rgb(177, 179, 182);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
// line-height: 0.12rem;
|
||
|
|
// letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_16 {
|
||
|
|
margin-bottom: 0.03rem;
|
||
|
|
color: rgb(2, 2, 2);
|
||
|
|
font-size:28rpx;
|
||
|
|
// line-height: 0.14rem;
|
||
|
|
// letter-spacing: 0.015rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-wrapper_1 {
|
||
|
|
margin-left: 0.04rem;
|
||
|
|
padding: 0.03rem 0 0.04rem;
|
||
|
|
color: rgb(46, 155, 255);
|
||
|
|
font-size: 0.12rem;
|
||
|
|
line-height: 0.12rem;
|
||
|
|
letter-spacing: 0.012rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color: rgba(46, 155, 255, 0.1);
|
||
|
|
border-radius: 0.09rem;
|
||
|
|
width: 0.65rem;
|
||
|
|
height: 0.18rem;
|
||
|
|
}
|
||
|
|
</style>
|