YingXingAI/pages/message/msgList/msgList copy.vue

939 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<u-navbar :is-back="false" title="">
<view class="slot-wrap">
<u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
:active-item-style="{ color: '#3CB5FB', fontSize: '0.18rem' }"
:bar-style="{ background: '#3CB5FB' }" @change="tabsChange"></u-tabs-swiper>
</view>
</u-navbar>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
style="height: calc(100vh - 0.95rem); width: 100%">
<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
style="height: calc(100vh - 0.95rem); width: 100%">
<scroll-view scroll-y="true" style="height: calc(100vh - 0.95rem); width: 100%"
@scrolltolower="onreachBottom">
<!-- 消息 -->
<view class="msg" v-if="index == 0">
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&&false">
<view class="flex-col section_4">
<view class="flex-row section_5">
<text class="text_3">待认证,请先完成认证~</text>
<text class="text_4" @click="onAuto">去认证 >></text>
</view>
</view>
<view class="flex-col group_3">
<view class="flex-col">
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
</view>
<text class="text_5">暂无数据,请尽快认证补充资料~</text>
</view>
</view>
<view class="flex-col group_2">
<view class="flex-col list">
<navigator url="../adminList/adminList" class="list-item flex-row"
style='box-shadow: 0px 0.005rem #eaeaea;' v-if='vuex_user.isAttestationGLY'>
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('admin')>=0" sex-icon=""
size="0.4rem" sex-bg-color="red" mode="circle"
src="/static/common/img/adminHeaderImg.png">
</u-avatar>
<view class="right-section flex-col">
<view class="top-group justify-between">
<text class="text_2">管理列表</text>
<!-- <text class="text_4">8:52</text> -->
</view>
<text class="text_6" v-if="vuex_msgList.indexOf('admin')>=0">你有新通知</text>
<text class="text_6" v-else>暂无新通知</text>
</view>
</navigator>
<navigator v-if='interInfo' url="../interactionList/interactionList"
class="list-item flex-row" style='box-shadow: 0px 0.005rem #eaeaea;'>
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('InteractMessage')>=0"
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
src="/static/common/img/interactionhiderimg.png"></u-avatar>
<view class="right-section flex-col">
<view class="top-group justify-between">
<text class="text_2">互动消息</text>
<view style='display:none'>
{{interInfo.interDate?interInfo.interDate = interInfo.interDate.replace(/-/g, "/"):''}}
</view>
<text
v-if='new Date(interInfo.interDate) - 0 + (3600000*24)> new Date()&&new Date(interInfo.interDate).getDate()==new Date().getDate()'
class="text_4">{{interInfo.interDate.slice(10,16)}}</text>
<text v-else class="text_4">{{ interInfo.interDate.slice(5,10)}}</text>
<!-- <text class="text_4">{{interInfo.interDate}}</text> -->
</view>
<text v-if='interInfo.interType==0'
class="text_4 text_15">{{interInfo.interUserName+' 点赞了 '+interInfo.dynamicTitle}}</text>
<text v-if='interInfo.interType==1'
class="text_4 text_15">{{interInfo.interUserName+' 收藏了 '+interInfo.dynamicTitle}}</text>
<text v-if='interInfo.interType==2'
class="text_4 text_15">{{interInfo.interUserName+' 转发了 '+interInfo.dynamicTitle}}</text>
<text v-if='interInfo.interType==3'
class="text_4 text_15">{{interInfo.interUserName+' 评论了 '+interInfo.dynamicTitle}}</text>
</view>
</navigator>
<navigator v-if='sysInfo' url="../sysList/sysList" class="list-item flex-row group_4">
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('SystemMessage')>=0"
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
src="/static/common/img/systemHeaderimg.png">
</u-avatar>
<view class="right-section flex-col view_2">
<view class="top-group justify-between view_3">
<text class="text_2 text_8">系统消息</text>
<view style='display:none'>
{{sysInfo.messageDate?sysInfo.messageDate = sysInfo.messageDate.replace(/-/g, "/"):''}}
</view>
<text
v-if='new Date(sysInfo.messageDate) - 0 + (3600000*24)> new Date()&&new Date(sysInfo.messageDate).getDate()==new Date().getDate()'
class="text_6 text_16">{{ sysInfo.messageDate.slice(10,16)}}</text>
<text v-else class="text_6 text_16">{{
sysInfo.messageDate.slice(5,10)}}</text>
</view>
<text class="text_4 text_15">{{sysInfo.title}} </text>
</view>
</navigator>
<view v-if="!sysInfo" style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;" >
<image src="/static/common/img/empty.png" class="image" />
<view style="color:grey;margin-top: -5vh;">暂无消息</view>
</view>
<template v-for="(v, i) in UserMsgList">
<view class="list-item flex-row group_5" :key="i"
@click="GoChat(v.userId,v.chatType,v.userHead)">
<u-avatar v-if='v.chatType==0' class="image_1"
:show-sex="vuex_msgList.indexOf(v.userId+',')>=0" sex-icon="" size="0.4rem"
sex-bg-color="red" mode="circle" :src="$u.http.config.imgUrl+v.userHead">
</u-avatar>
<u-avatar v-else class="image_1" :show-sex="vuex_msgList.indexOf('admin,')>=0"
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
:src="$u.http.config.imgUrl+v.userHead">
</u-avatar>
<view class="right-section justify-between view_4">
<view class="top-group flex-col view_5">
<view class="text_2 flex-row view_6">
<text class="text_11">{{v.userNetName}}</text>
<view class="right-text-wrapper flex-col items-end">
<text class="text_13">{{ v.userSchoolName }}</text>
</view>
</view>
<text class="text_4 text_15">{{v.message}}</text>
</view>
<view style='display:none'>
{{v.sendDate?v.sendDate = v.sendDate.replace(/-/g, "/"):''}}</view>
<text
v-if='new Date(v.sendDate) - 0 + (3600000*24)> new Date()&&new Date(v.sendDate).getDate()==new Date().getDate()'
class="text_6 text_16">{{ v.sendDate.slice(10,16)}}</text>
<text v-else class="text_6 text_16">{{ v.sendDate.slice(5,10)}}</text>
</view>
</view>
</template>
</view>
</view>
</view>
<!-- 关注 -->
<view class="guanzhu" v-else>
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&&false">
<view class="flex-col section_4">
<view class="flex-row section_5">
<text class="text_3">待认证,请先完成认证~</text>
<text class="text_4" @click="onAuto">去认证 >></text>
</view>
</view>
<view class="flex-col group_3">
<view class="flex-col">
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
</view>
<text class="text_5">暂无数据,请尽快认证补充资料~</text>
</view>
</view>
<view class="flex-col group_2">
<view class="flex-col list">
<!-- <view class="list-item flex-row group_3">
<view class="flex-col items-end text-wrapper text_3">
<text class="text_2">浙</text>
</view>
<view class="bottom-text-wrapper justify-between view_1">
<text class="text_5 text_7">学校管理员</text>
<view class="center-text-wrapper flex-col items-end">
<text class="text_8">浙江大学</text>
</view>
</view>
</view> -->
<view class="list-item flex-row group_3" v-for="(item,index) in UserFollowList"
:key='index' @click='toDetail(item.carewUserId,item.userRole,item.carewUserHead)'>
<u-avatar :src="$u.http.config.imgUrl+item.carewUserHead" class="text_3 image_1"></u-avatar>
<view class="bottom-text-wrapper justify-between view_1">
<view class="">
<text
class="text_5 text_7"><text>{{item.carewUserName}}</text><text>{{"("+item.carewName+")"}}</text></text>
<view class="center-text-wrapper flex-col items-end">
<text class="text_8">{{item.school}}</text>
</view>
</view>
<view v-if='item.carewType==2&&item.carewName!="管理员"'
class="right-text-wrapper flex-col items-center">
<text class="text_10">互相关注</text>
</view>
<view v-if='item.carewType==1&&item.carewName!="管理员"'
class="right-text-wrapper flex-col items-center view_21">
<text class="text_10">已关注</text>
</view>
</view>
</view>
<view v-if="!UserFollowList.length" style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;" >
<image src="/static/common/img/empty.png" class="image" />
<view style="color:grey;margin-top: -5vh;">暂无关注</view>
</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<u-tabbar :list="vuex_tabbar" :class="{phone:vuex_iPhone}"></u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
tabbar: "",
swiperCurrent: 0,
current: 0,
UserMsgList: [],
UserFollowList: [],
navList: [{
name: "消息",
},
{
name: "关注",
},
],
interInfo: '',
sysInfo: '',
};
},
watch: {
current() {
this.getList();
},
},
created() {
// 和onShow 重复
// this.getList()
},
onLoad() {
//接收数据
this.$connection.on("ReceiveMessage", (user, message) => {
this.getList()
});
this.$connection.on("InteractMessage", (data, type) => {
this.getList()
});
this.$connection.on("SystemMessage", (title, content, time) => {
this.getList()
});
},
onShow() {
this.getList()
},
methods: {
toDetail(id, role, head) {
if (role == 0) {
this.$u.route({
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=0'
})
} else {
uni.navigateTo({
url: "../dialogBox/dialogBox?id=" + id + '&chatType=1&type=0&head=' + head,
});
}
},
getList() {
if (this.current == 0) {
this.charList();
} else {
this.FollowList();
}
},
onAuto() {
this.$u.route({
url: "pages/my/ShoolList/ShoolList"
})
},
charList() {
const data = {
id: this.vuex_user.id,
userRole: this.vuex_user.isAttestationGLY ? 1 : 0
}
this.$u.api.getcharList(data).then(res => {
this.UserMsgList = res
})
this.$u.api.getinteractionList().then(res => {
this.interInfo = res[0]
})
this.$u.api.getSysList().then(res => {
this.sysInfo = res[0]
})
},
FollowList() {
this.$u.api.getFollowList().then(res => {
this.UserFollowList = res
})
},
// 去聊天
GoChat(id, chatType, head) {
uni.navigateTo({
url: "../dialogBox/dialogBox?id=" + id + '&chatType=' + chatType + '&type=0&head=' + head,
});
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper-item左右移动通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问速切题快换swiper不会触发dx的连续变化需要在结束时重置状态
// swiper滑动结束分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {},
},
};
</script>
<style lang="scss" scoped>
::v-deep .u-avatar__sex {
width: 0.1rem !important;
height: 0.1rem !important;
border: none;
}
.msg {
.list-item {
padding-left: 0.2rem;
}
.image_1 {
align-self: center;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
.right-section {
margin-left: 0.15rem;
padding: 0.14rem 0 0.18rem;
flex: 1 1 auto;
height: 0.66rem;
}
.top-group {
margin-right: 0.1rem;
}
.text_6 {
margin-top: 0.09rem;
color: rgb(180, 182, 189);
font-size: 0.12rem;
line-height: 0.12rem;
letter-spacing: 0.012rem;
white-space: nowrap;
}
.text_2 {
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
}
.text_4 {
margin-bottom: 0.05rem;
color: rgb(193, 196, 204);
font-size: 0.12rem;
line-height: 0.095rem;
letter-spacing: 0.012rem;
white-space: nowrap;
}
.text_11 {
margin-bottom: 0.03rem;
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
max-width: 1rem;
overflow: hidden;
text-overflow: ellipsis;
}
.right-text-wrapper {
padding: 0.035rem 0.08rem;
color: rgb(115, 129, 255);
margin-left: 0.1rem;
font-size: 0.11rem;
line-height: 0.11rem;
letter-spacing: 0.011rem;
white-space: nowrap;
background-color: rgba(115, 129, 255, 0.1);
border-radius: 0.09rem;
height: 0.18rem;
}
.text_13 {
margin-right: 0.03rem;
}
// .group_2 {
// padding-bottom: 0.15rem;
// flex: 1 1 auto;
// overflow-y: auto;
// }
.group_4 {
padding: 0 0.01rem;
padding-left: 0.2rem;
box-shadow: 0px 0.005rem #eaeaea;
}
.group_5 {
padding-left: 0.2rem;
margin-top: 0.015rem;
box-shadow: 0px 0.005rem #eaeaea;
}
.group_4:active,
.group_5:active {
background: #efefef;
}
.group_8 {
padding-left: initial;
}
.view_2 {
margin-left: 0.15rem;
padding: 0.15rem 0 0.14rem;
height: 0.67rem;
}
.view_4 {
margin-left: 0.16rem;
padding: 0.15rem 0 0.14rem;
height: 0.67rem;
}
.view_3 {
margin-right: initial;
}
.view_5 {
margin-right: initial;
}
.text_16 {
margin-top: 0.0rem;
color: rgb(193, 196, 204);
line-height: 0.095rem;
margin-right: 0.095rem;
}
.text_28 {
margin-top: initial;
position: absolute;
left: 0;
bottom: 0.17rem;
}
.text_8 {
line-height: 0.14rem;
}
.text_9 {
margin-right: 0.025rem;
}
.view_6 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
}
.text_15 {
margin-bottom: initial;
color: rgb(180, 182, 189);
line-height: 1.2;
margin-top: 0.08rem;
width: 50%;
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
.view_19 {
margin-left: 0.045rem;
}
}
.guanzhu {
.list-item {
padding: 0.14rem 0 0.1rem;
align-self: flex-end;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
width: 3.02rem;
position: relative;
}
.text_3 {
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
}
.bottom-text-wrapper {
margin-top: 0.1rem;
padding: 0.035rem 0;
color: rgb(115, 129, 255);
font-size: 0.11rem;
line-height: 0.11rem;
letter-spacing: 0.011rem;
white-space: nowrap;
background-color: rgba(115, 129, 255, 0.1);
border-radius: 0.09rem;
}
.text_5 {
margin-left: 0.1rem;
margin-right: 0.03rem;
}
.center-text-wrapper {
padding: 0.035rem 0.08rem;
color: rgb(115, 129, 255);
font-size: 0.11rem;
line-height: 0.11rem;
letter-spacing: 0.011rem;
white-space: nowrap;
background-color: rgba(115, 129, 255, 0.1);
border-radius: 0.09rem;
display: inline-block;
margin-top: 0.1rem;
}
.right-text-wrapper {
margin-right: 0.06rem;
margin-top: 0.03rem;
margin-left: 0.06rem;
padding: 0.085rem 0.08rem;
color: rgb(255, 255, 255);
font-size: 0.14rem;
line-height: 0.13rem;
white-space: nowrap;
background-color: rgb(46, 155, 255);
border-radius: 0.15rem;
width: 0.85rem;
height: 0.3rem;
position: relative;
}
.text_8 {
margin-right: 0.03rem;
}
.text_10 {
text-transform: uppercase;
}
.text_12 {
margin-left: 0.05rem;
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
}
.text_14 {
margin-left: 0.1rem;
margin-right: 0.03rem;
}
.group_2 {
// padding: 0.11rem 0 4.94rem;
// flex: 1 1 auto;
// overflow-y: auto;
position: relative;
}
.text-wrapper {
// margin-left: 0.17rem;
padding: 0.11rem 0 0.12rem;
color: rgb(255, 255, 255);
font-size: 0.18rem;
line-height: 0.17rem;
letter-spacing: 0.018rem;
white-space: nowrap;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 0.4rem;
height: 0.4rem;
margin-top: 0.08rem;
background: #6574fc;
border-radius: 50%;
text {
display: inline-block;
width: 100%;
text-align: center;
}
}
.list {}
.text_2 {
color: #fff;
}
.group_3 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
box-shadow: 0px 0.005rem #eaeaea;
padding-left: 0.2rem;
}
.group_4 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
margin-top: 0.015rem;
}
.group_5 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
}
.group_6 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
}
.group_7 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
}
.group_8 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
}
.group_9 {
padding: initial;
align-self: initial;
box-shadow: initial;
width: initial;
position: initial;
}
.image_1 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
overflow: hidden;
margin-top: 0.12rem;
}
.view_1 {
margin-top: initial;
padding: 0.1rem 0;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.12rem;
margin-right: 0.04rem;
flex: 1 1 auto;
position: relative;
}
.image_2 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
align-self: center;
width: 0.4rem;
height: 0.4rem;
}
.view_4 {
margin-top: initial;
padding: 0.14rem 0 0.1rem;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.12rem;
flex: 1 1 auto;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
}
.image_3 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
align-self: center;
width: 0.4rem;
height: 0.4rem;
}
.view_8 {
margin-top: initial;
padding: 0.15rem 0 0.14rem;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.13rem;
flex: 1 1 auto;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
}
.image_4 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
align-self: center;
width: 0.4rem;
height: 0.4rem;
}
.view_12 {
margin-top: initial;
padding: 0.17rem 0 0.08rem;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.12rem;
flex: 1 1 auto;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
}
.image_5 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
align-self: center;
width: 0.4rem;
height: 0.4rem;
}
.view_16 {
margin-top: initial;
padding: 0.15rem 0 0.11rem;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.16rem;
flex: 1 1 auto;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
height: 0.67rem;
}
.image_6 {
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
align-self: center;
width: 0.4rem;
height: 0.4rem;
}
.view_19 {
margin-top: initial;
padding: 0.18rem 0 0.18rem;
color: initial;
font-size: initial;
line-height: initial;
letter-spacing: initial;
white-space: initial;
background-color: initial;
border-radius: initial;
margin-left: 0.16rem;
flex: 1 1 auto;
box-shadow: 0px 0.005rem rgb(234, 234, 234);
height: 0.67rem;
position: relative;
}
.text_7 {
margin-left: initial;
margin-right: initial;
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
display: block;
text:nth-child(1) {
display: inline-block;
white-space: nowrap;
max-width: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
}
.text_26 {
margin-left: initial;
margin-right: initial;
color: rgb(2, 2, 2);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.015rem;
white-space: nowrap;
}
.view_20 {
left: -0.03rem;
bottom: 0.075rem;
}
.view_21 {
margin-right: 0.06rem;
margin-top: initial;
padding: 0.09rem 0 0.06rem;
color: rgb(73, 76, 87);
background-color: initial;
border: solid 0.01rem rgb(185, 185, 185);
}
}
.renzheng {
padding-bottom: 0rem;
.section_4 {
padding: 0.33rem 0 0.34rem;
background-color: rgb(255, 255, 255);
.section_5 {
margin-left: 0.18rem;
margin-right: 0.24rem;
padding: 0.2rem 0.18rem 0.18rem 0.24rem;
background-color: rgb(246, 247, 250);
justify-between: space-between;
.text_3 {
color: rgb(160, 162, 172);
font-size: 0.15rem;
line-height: 0.15rem;
letter-spacing: 0.015rem;
white-space: nowrap;
}
.text_4 {
margin-left: 0.05rem;
color: rgb(46, 155, 255);
font-size: 0.15rem;
line-height: 0.15rem;
white-space: nowrap;
text-transform: uppercase;
}
}
}
.group_3 {
margin-top: 0.76rem;
padding-left: 0.8rem;
padding-right: 0.69rem;
color: rgb(163, 182, 202);
font-size: 0.15rem;
line-height: 0.15rem;
white-space: nowrap;
.text_5 {
margin-left: 0.02rem;
margin-top: 0.13rem;
}
.image_1 {
margin-right: 0.14rem;
width: 2.12rem;
height: 1.89rem;
}
}
}
</style>