1352 lines
35 KiB
Vue
1352 lines
35 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :border-bottom="false" back-text="" title="">
|
|
<view slot="" class="navbar-center">
|
|
<view class="info">
|
|
<text class="name">{{ userInfo.name }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="navbar-right" slot="right">
|
|
<u-button v-if='userInfo.carewState && userInfo.carewState != "admin"' @click='InsertOrDelFollow()'
|
|
size="mini" class='btn' :plain="userInfo.carewState.indexOf('未关注') < 0" type="primary">{{
|
|
userInfo.carewState }}</u-button>
|
|
</view> -->
|
|
</u-navbar>
|
|
<view v-if="userInfo.carewState.indexOf('未关注') && showAttention" style="width: 100%;background-color: #fff;">
|
|
<view class="attention-box">
|
|
<view>关注方便以后常联系</view>
|
|
<view class="attention-right">
|
|
<view class="attention-btn" @click='InsertOrDelFollow()'>关注</view>
|
|
<image src="/static/common/img/close.png" @click="() => showAttention = false"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 认证用户 -->
|
|
<view id="messagesList"></view>
|
|
<view v-if="false" class="quick Tips">
|
|
<view class="justify-center section_2">
|
|
<text>关注他，方便以后常聊</text>
|
|
<image class="image_2" src="/static/common/img/msgclose.png"/>
|
|
</view>
|
|
</view>
|
|
<!-- 未认证yonghu -->
|
|
<view :style="{ height: errShow ? '0.16rem' : '0' }" class="errTips">
|
|
<view class="flex-row group_3">
|
|
<image class="image_2" src="/static/common/img/16462770928974838161.png"/>
|
|
<text class="text_5">该用户尚未进行认证，请注意信息的甄别，保护个人信息！</text>
|
|
</view>
|
|
</view>
|
|
<view :class="[{ emoji: emoji }, { msg: CommonWords }, { text: inputShow }]" class="msgList" @mousedown="close">
|
|
<scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" class="scroll" scroll-y="true"
|
|
@refresherrefresh=''>
|
|
<!-- <scroll-view scroll-y="true" class="scroll" @refresherrefresh='' :scroll-top="scrollTop"
|
|
:scroll-with-animation="true" :refresher-enabled='true' refresher-background='#f6f7fa'
|
|
refresher-default-style="black"> -->
|
|
<template v-for="(v, i) in MsgList">
|
|
<view style='display:none'>{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}</view>
|
|
<!-- 提示消息（时间） -->
|
|
<view v-if='new Date(v.sendDate) - new Date(MsgList[i > 1 ? i - 1 : 0].sendDate) > 30000'
|
|
class="tis">
|
|
<text
|
|
v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
|
|
class="text">{{ v.sendDate.slice(10, 16) }}
|
|
</text>
|
|
<text v-else class="text">{{ v.sendDate }}</text>
|
|
</view>
|
|
<!-- 系统提示对方基本信息 -->
|
|
<view v-if='v.istips && v.type == 0' class="systis">
|
|
<view>
|
|
<view class="flex-col section_2">
|
|
<view class="flex-row group_2">
|
|
<text>姓名：{{ v.Name }}</text>
|
|
</view>
|
|
<view class="flex-row group_2">
|
|
<text>年龄：{{ v.Age }}</text>
|
|
</view>
|
|
<view class="flex-row group_2">
|
|
<text>班级：{{ v.School }}</text>
|
|
</view>
|
|
<view class="flex-row group_2">
|
|
<text>现居地（区）：{{ v.Address }}</text>
|
|
</view>
|
|
<view class="flex-row group_2">
|
|
<text>手机号码:{{ v.Phone }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if='v.istips && v.type == 1' class="tis">
|
|
<text class="text">{{ v.title }}</text>
|
|
</view>
|
|
<template v-if='!v.mymsg && !v.hemsg && !v.istips'>
|
|
<!-- 我方的消息 -->
|
|
<view v-if='v.fromUserId == vuex_user.id' class="mymsg">
|
|
<view class="justify-end group_5">
|
|
<view class="flex-col items-center text-wrapper">
|
|
<text>{{ v.message }}</text>
|
|
</view>
|
|
<!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
|
|
<u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_1"></u-avatar>
|
|
</view>
|
|
</view>
|
|
<!-- 对方消息 -->
|
|
<view v-else class="hemsg">
|
|
<view class="flex-row group">
|
|
<u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_3 image_11"
|
|
@click='toDeatil'></u-avatar>
|
|
<view class="right-text-wrapper_1 flex-col items-center">
|
|
<text>{{ v.message }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 我方交换信息 -->
|
|
<template v-else>
|
|
<view v-if='v.mymsg' class="mymsg">
|
|
<view class="justify-end group_5">
|
|
<view class="exchange">
|
|
<view class="top-group justify-center">
|
|
<view class="flex-col section_3">
|
|
<text class="text_11 text_12">请求交换信息</text>
|
|
<!-- <view class="bottom-group flex-row view_1">
|
|
<view @click='InfoExchange(v.type,false)' class="left-text-wrapper flex-col items-center">
|
|
<text>拒绝</text>
|
|
</view>
|
|
<view @click='InfoExchange(v.type,true)' class="right-text-wrapper flex-col items-center">
|
|
<text>同意</text>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
|
|
<u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_3"></u-avatar>
|
|
</view>
|
|
</view>
|
|
<!-- 对方交换信息 -->
|
|
<view v-if='v.hemsg' class="hemsg">
|
|
<view class="flex-row group">
|
|
<!-- <image @click='toDeatil' :src="$u.http.config.imgUrl+userInfo.head" class="image_3 image_11" /> -->
|
|
<u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_1"
|
|
@click='toDeatil'></u-avatar>
|
|
<view class="exchange">
|
|
<view class="top-group justify-center">
|
|
<view class="flex-col section_3">
|
|
<text class="text_11 text_12">请求交换信息</text>
|
|
<view class="bottom-group flex-row view_1" style='justify-content: center;'>
|
|
<view v-if='v.type == 0' class="left-text-wrapper flex-col items-center"
|
|
@click='InfoExchange(false, i)'>
|
|
<text>拒绝</text>
|
|
</view>
|
|
<view v-if='v.type == 0' class="right-text-wrapper flex-col items-center"
|
|
@click='InfoExchange(true, i)'>
|
|
<text>同意</text>
|
|
</view>
|
|
<view v-if='v.type == 1'
|
|
class="left-text-wrapper flex-col items-center">
|
|
<text>已同意</text>
|
|
</view>
|
|
<view v-if='v.type == 2'
|
|
class="left-text-wrapper flex-col items-center">
|
|
<text>已拒绝</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="msgbox">
|
|
<view v-if='chatType != 1' :style="[{ background: quick ? '#fff' : 'none' }]" class="quick">
|
|
<view v-if="quick" class="justify-between section_7">
|
|
<view class="flex-row" style='transform: translateX(-50%);'>
|
|
<view class="flex-col items-center text-wrapper_2" @click='exchangeInfo(1)'>
|
|
<text class="text">交换信息</text>
|
|
</view>
|
|
<!-- <view @click='exchangeInfo(0)' class="flex-col items-end text-wrapper_3">
|
|
<text class="text">交换联系方式</text>
|
|
</view> -->
|
|
</view>
|
|
<image class="image_13" src="/static/common/img/msgclose.png" @click="quick = false"/>
|
|
</view>
|
|
<!-- <view style="display: flex; justify-content: flex-end" v-else>
|
|
<image style="margin: 0.08rem; width: 0.2rem; height: 0.2rem" @click="quick = true"
|
|
src="/static/common/img/msgopen.png" class="image_13" />
|
|
</view> -->
|
|
</view>
|
|
<view class="flex-row section_1">
|
|
<view class="input-box">
|
|
<!-- <text class="text" @click="CommonWords = !CommonWords; emoji = false;">常用语</text> -->
|
|
<u-input v-model="message" :auto-height="true" :type="'textarea'" class="input" @blur="inputBlur"
|
|
@click="shuru" @focus="inputFocus"/>
|
|
<view class="icon" @click="emoji = !emoji; CommonWords = false; emojicurrent = 0;">
|
|
<image class="image" src="/static/common/img/icon-happy-face.png"/>
|
|
</view>
|
|
<view v-if="message != ''" class="btn">
|
|
<u-button class="sendOut" size="mini" @click="SendMessage">发送</u-button>
|
|
</view>
|
|
<view v-else class="icon" @click="expandBox = !expandBox">
|
|
<image class="image" src="/static/common/img/add-circle.png"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 常用语 -->
|
|
<view class="CommonWords">
|
|
<scroll-view :class="CommonWords ? 'open' : ''" scroll-y="true"
|
|
style="transition: all 0.3s; height: 0rem">
|
|
<text v-for="(v, i) in CommonlyMsg" :key="i" @click="choice(v)">{{ v }}</text>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- emoji 表情 -->
|
|
<swiper :class="emoji ? 'emojishow' : ''" :current="emojicurrent" class="slider">
|
|
<swiper-item v-for="(item, key) in emojiData" :key="key" :class="[key == emojiData.length - 1 ? 'lastbox' : '']"
|
|
class="slider-emoji">
|
|
<text v-for="(emoji, index) in item" :key="index" class="slider-emoji-icon"
|
|
@click="selemoji(emoji)">{{
|
|
emoji
|
|
}}
|
|
</text>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 点击加号 -->
|
|
<view class="expandBox">
|
|
<view :class="expandBox ? 'open' : ''" style="transition: all 0.3s; height: 0rem">
|
|
<view class="expand-content">
|
|
<view v-for="i in expandList" class="expand-item" @click="expandFn(i.type)">
|
|
<image :src="i.img"></image>
|
|
<text class="expand-text">{{ i.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast"/>
|
|
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import emoji from "../../../static/common/js/emoji";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 常用语
|
|
CommonlyMsg: ['您好，很高兴认识你！', '您好，有空聊一聊吗？', '嗨，你好呀！', '好的，我知道了。', '我们下次再聊，拜拜。'],
|
|
CommonWords: false, // 常用语 显示隐藏
|
|
quick: false, // 交换信息 显示隐藏
|
|
message: "", // 交换信息 显示隐藏
|
|
emojiData: [],
|
|
emoji: false,
|
|
inputShow: false,
|
|
scrollTop: 999999999999,
|
|
emojicurrent: 0,
|
|
userId: '',
|
|
userInfo: '',
|
|
MsgList: [],
|
|
errShow: false,
|
|
chatType: -1,
|
|
id: '',
|
|
type: 0,
|
|
connectionId: '',
|
|
state: false,
|
|
role: 0,
|
|
showAttention: true,
|
|
expandBox: false, // 点击加号展开
|
|
expandList: [
|
|
/* {
|
|
text: '拍照',
|
|
img: '/static/common/img/changeCard.png',
|
|
type:0
|
|
}, {
|
|
text: '相册',
|
|
img: '/static/common/img/changePhone.png',
|
|
type:1
|
|
}, {
|
|
text: '位置',
|
|
img: '/static/common/img/changeAddress.png',
|
|
type:2
|
|
}, */
|
|
{
|
|
text: '交换名片',
|
|
img: '/static/common/img/changeCard.png',
|
|
type: 3
|
|
}]
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
|
|
// 管理员对用户
|
|
if (e.id == 'admin') {
|
|
this.type = 2;
|
|
this.chatType = 1;
|
|
this.userId = e.fromid;
|
|
this.role = 1,
|
|
this.getList()
|
|
|
|
this.emojiInit();
|
|
this.LinkChar();
|
|
this.goBottom()
|
|
this.toBind()
|
|
return
|
|
}
|
|
|
|
// 判断聊天类型
|
|
if (e.chatType == undefined) {
|
|
uni.switchTab({
|
|
url: "../../message/msgList/msgList",
|
|
});
|
|
return;
|
|
}
|
|
this.type = e.type
|
|
this.id = e.id
|
|
this.chatType = e.chatType
|
|
|
|
// 用户对管理员
|
|
if (e.chatType == 1) {
|
|
this.userInfo = {
|
|
name: '管理员',
|
|
head: e.head,
|
|
carewState: 'admin'
|
|
}
|
|
this.getList()
|
|
}
|
|
// 用户和用户
|
|
if (e.chatType == 0) {
|
|
if (!e.id) {
|
|
uni.switchTab({
|
|
url: "../../main/index/index",
|
|
});
|
|
return;
|
|
}
|
|
this.userId = e.id;
|
|
this.getList()
|
|
this.getDetail();
|
|
}
|
|
|
|
if (this.errShow) {
|
|
setTimeout(() => {
|
|
this.errShow = false
|
|
}, 3000)
|
|
}
|
|
this.goBottom()
|
|
this.emojiInit();
|
|
this.LinkChar();
|
|
},
|
|
onShow() {
|
|
|
|
if (this.vuex_msgList) {
|
|
var msgList = this.vuex_msgList;
|
|
if (this.chatType == 1) {
|
|
if (this.type = 2) {
|
|
msgList = msgList.replace((this.userId + 'user,'), '')
|
|
} else {
|
|
msgList = msgList.replace('admin,', '')
|
|
}
|
|
} else {
|
|
msgList = msgList.replace((this.userId + ','), '')
|
|
}
|
|
this.$u.vuex('vuex_msgList', msgList)
|
|
if (!msgList || msgList.indexOf(',') < 0) {
|
|
this.$u.vuex('vuex_msgList', '')
|
|
var tab = this.vuex_tabbar;
|
|
tab[1].isDot = false;
|
|
this.$u.vuex('vuex_tabbar', tab);
|
|
}
|
|
}
|
|
this.goBottom()
|
|
this.getDetail();
|
|
},
|
|
onHide() {
|
|
if (this.chatType == 1) {
|
|
this.colseBind()
|
|
}
|
|
},
|
|
onUnload() {
|
|
if (this.chatType == 1) {
|
|
this.colseBind()
|
|
}
|
|
},
|
|
methods: {
|
|
expandFn(type) {
|
|
switch (type) {
|
|
case 3:
|
|
this.exchangeInfo()
|
|
break;
|
|
}
|
|
},
|
|
//管理员聊天绑定
|
|
toBind() {
|
|
let data = {
|
|
manageUser: this.vuex_user.id,
|
|
lockUser: this.userId
|
|
}
|
|
this.$u.api.toBind(data).then(res => {
|
|
})
|
|
},
|
|
//管理员聊天取消绑定
|
|
colseBind() {
|
|
let data = {
|
|
lockUser: this.userId
|
|
}
|
|
this.$u.api.colseBind(data).then(res => {
|
|
})
|
|
},
|
|
// 回应交换信息
|
|
InfoExchange(bool, index) {
|
|
this.$connection
|
|
.invoke("whetherAgreeExchange", this.vuex_user.id, this.userId, bool)
|
|
.then((res) => {
|
|
this.MsgList[index].type = bool ? 1 : 2;
|
|
this.goBottom()
|
|
})
|
|
},
|
|
//请求交换信息
|
|
exchangeInfo() {
|
|
this.$connection
|
|
.invoke("exchangeInfo", this.vuex_user.id, this.userId)
|
|
.then((res) => {
|
|
this.MsgList.push({
|
|
fromUserId: this.vuex_user.id,
|
|
mymsg: true,
|
|
type: 0,
|
|
sendDate: this.getIsTime()
|
|
})
|
|
this.goBottom()
|
|
this.quick = false
|
|
})
|
|
},
|
|
// 获取当前时间
|
|
getIsTime() {
|
|
const year = new Date().getFullYear();
|
|
const Month = new Date().getMonth() + 1;
|
|
const day = new Date().getDate();
|
|
const Hours = new Date().getHours();
|
|
const Minut = new Date().getMinutes();
|
|
const second = new Date().getSeconds();
|
|
|
|
//小于10的拼接上0字符串
|
|
function addZero(s) {
|
|
return s < 10 ? ('0' + s) : s;
|
|
}
|
|
|
|
return year + '-' + addZero(Month) + '-' + addZero(day) + ' ' + addZero(Hours) + ':' + addZero(Minut) +
|
|
':' + addZero(second)
|
|
},
|
|
|
|
// 获取聊天记录
|
|
getList(id) {
|
|
const data = {
|
|
getUserId: this.vuex_user.id,
|
|
userId: this.userId,
|
|
chatType: this.chatType
|
|
}
|
|
if (id) {
|
|
data.getUserId = id;
|
|
}
|
|
this.$u.api.getChatRecord(data).then(res => {
|
|
this.MsgList = res
|
|
})
|
|
},
|
|
// 查看用户主页
|
|
toDeatil() {
|
|
if (this.chatType == 0) {
|
|
this.$u.route({
|
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + this.userId + '&type=1'
|
|
})
|
|
}
|
|
},
|
|
// 关注
|
|
InsertOrDelFollow() {
|
|
const data = {
|
|
userId: this.vuex_user.id,
|
|
carewId: this.userId,
|
|
}
|
|
this.$u.apiList.InsertOrDelFollow(data).then(res => {
|
|
console.log(res, '关注成功');
|
|
if (res.succeed) {
|
|
// this.$tips('关注成功!', 'success')
|
|
this.$refs.uToast.show({
|
|
title: '关注成功',
|
|
type: 'success',
|
|
})
|
|
this.showAttention = false
|
|
}
|
|
// this.getDetail()
|
|
})
|
|
},
|
|
//获取用户信息
|
|
getDetail() {
|
|
this.$u.api.getUserInfo({
|
|
userId: this.userId
|
|
}).then((res) => {
|
|
this.userInfo = {
|
|
name: res.baseData.userName,
|
|
head: res.baseData.head,
|
|
carewState: res.carewState
|
|
}
|
|
if (res.carewState.includes('未关注')) {
|
|
this.showAttention = true
|
|
} else {
|
|
this.showAttention = false
|
|
}
|
|
});
|
|
},
|
|
//链接聊天
|
|
LinkChar() {
|
|
// 聊天限制提示3条后不能发送消息
|
|
this.$connection.on("FailInSend", (user, msg) => {
|
|
if (type == false) {
|
|
this.MsgList.push({
|
|
title: msg,
|
|
sendDate: this.getIsTime(),
|
|
istips: true,
|
|
type: 1,
|
|
})
|
|
this.goBottom()
|
|
}
|
|
})
|
|
|
|
//交换信息对方选择
|
|
this.$connection.on("whetherAgreeExchange", (user, type) => {
|
|
if (type == false) {
|
|
this.MsgList.push({
|
|
title: '对方已拒绝您的交换请求',
|
|
sendDate: this.getIsTime(),
|
|
istips: true,
|
|
type: 1,
|
|
})
|
|
this.goBottom()
|
|
}
|
|
})
|
|
|
|
//交换信息
|
|
this.$connection.on("ExchangeInfo", (user, type) => {
|
|
this.MsgList.push({
|
|
fromUserId: user,
|
|
hemsg: true,
|
|
type: 0,
|
|
sendDate: this.getIsTime()
|
|
})
|
|
this.goBottom()
|
|
})
|
|
// 显示
|
|
this.$connection.on("ShowUserInfo", (user, message) => {
|
|
// console.log(user, message);
|
|
const data = JSON.parse(message)
|
|
this.MsgList.push({
|
|
Name: data.Name,
|
|
sendDate: this.getIsTime(),
|
|
istips: true,
|
|
type: 0,
|
|
Phone: data.Phone,
|
|
Age: data.Age,
|
|
Address: data.Address,
|
|
School: data.School
|
|
})
|
|
this.goBottom()
|
|
});
|
|
//接收数据
|
|
this.$connection.on("ReceiveMessage", (user, message, type) => {
|
|
// console.log(user, message, type, this.chatType)
|
|
if (this.route.indexOf('dialogBox') >= 0) {
|
|
if (type <= 2 && this.chatType == 0 || type >= 3 && this.chatType == 1) {
|
|
if (user == this.userId || (this.userId == '' && type == 4)) {
|
|
this.MsgList.push({
|
|
fromUserId: user,
|
|
message: message,
|
|
sendDate: this.getIsTime(),
|
|
toUserId: this.vuex_user.id,
|
|
})
|
|
this.goBottom()
|
|
} else {
|
|
this.AddTisp(user, type)
|
|
}
|
|
} else {
|
|
this.AddTisp(user, type)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 添加提示
|
|
AddTisp(user, type) {
|
|
var tab = this.vuex_tabbar;
|
|
tab[1].isDot = true;
|
|
this.$u.vuex('vuex_tabbar', tab);
|
|
var msgList = this.vuex_tabbar
|
|
var msgList = this.vuex_msgList
|
|
// 管理员对普通用户
|
|
if (type == 4) {
|
|
user = 'admin'
|
|
}
|
|
if (type == 3) {
|
|
user += 'user'
|
|
}
|
|
if (msgList.indexOf(user) < 0) {
|
|
msgList += (user + ',');
|
|
}
|
|
this.$u.vuex('vuex_msgList', msgList)
|
|
},
|
|
charLink() {
|
|
var that = this;
|
|
(function start(ms, that) {
|
|
setTimeout(() => {
|
|
try {
|
|
that.$connection
|
|
.start()
|
|
.then(() => {
|
|
that.connectionId = that.$connection.connection.transport.url.split(
|
|
"=")[1]
|
|
that.CharLogin()
|
|
if (that.state) {
|
|
this.SendMessage()
|
|
that.state = false
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
//重试
|
|
// console.log("websocket连接失败", e);
|
|
return start(500, that);
|
|
});
|
|
} catch (e) {
|
|
//重试
|
|
// console.log("websocket连接失败", e);
|
|
return start(500, that);
|
|
}
|
|
}, ms);
|
|
})(0, that)
|
|
},
|
|
CharLogin() {
|
|
//绑定用户账号和connectionId
|
|
if (this.vuex_user.id) {
|
|
this.$connection
|
|
.invoke("login", this.connectionId, this.vuex_user.id)
|
|
.then((res) => {
|
|
// console.log("登录成功", res);
|
|
})
|
|
.catch((err) => {
|
|
// console.log("登录失败", err);;
|
|
});
|
|
} else {
|
|
setTimeout(() => {
|
|
this.CharLogin()
|
|
}, 1000)
|
|
}
|
|
},
|
|
// 发送消息
|
|
async SendMessage() {
|
|
// 判断当前学校是否认证，未认证不可聊天
|
|
|
|
const req = {
|
|
userId: this.vuex_user.id,
|
|
}
|
|
const res = await this.$u.apiList.MyPage(req)
|
|
console.log(JSON.parse(JSON.stringify(res)), 'res')
|
|
const edcationList = res.edcationList
|
|
if (!edcationList.length) {
|
|
return this.$refs.uToast.show({
|
|
title: '认证后可进行聊天操作',
|
|
type: 'warning',
|
|
})
|
|
|
|
}
|
|
const findRow = edcationList.find(x => x.isSelected === true);
|
|
if ([0, 2].includes(findRow.certifyStatus)) {
|
|
return this.$refs.uToast.show({
|
|
title: '认证后可进行聊天操作',
|
|
type: 'warning',
|
|
})
|
|
|
|
}
|
|
this.$connection
|
|
.invoke("sendMessage", this.vuex_user.id, this.userId, this.message, parseInt(this.chatType), this
|
|
.role)
|
|
.then((res) => {
|
|
this.MsgList.push({
|
|
fromUserId: this.vuex_user.id,
|
|
message: this.message,
|
|
sendDate: this.getIsTime(),
|
|
toUserId: this.userId,
|
|
})
|
|
this.state = true
|
|
this.close()
|
|
this.goBottom()
|
|
this.message = ''
|
|
}).catch((err) => {
|
|
this.charLink()
|
|
});
|
|
},
|
|
// 退出连接
|
|
closeChar() {
|
|
this.$connection.invoke("signOut", this.vuex_user.id).then((res) => {
|
|
;
|
|
});
|
|
// this.$connection.onclose(function (data) { //去掉斜杠
|
|
// console.log("websocket连接断开");
|
|
// //重试
|
|
// this.LinkChar()
|
|
// })
|
|
},
|
|
// 表情
|
|
emojiInit() {
|
|
var number = 60;
|
|
var page = Math.ceil(emoji.length / number);
|
|
for (let i = 0; i < page; i++) {
|
|
this.emojiData[i] = [];
|
|
for (let k = 0; k < number; k++) {
|
|
emoji[i * number + k] ?
|
|
this.emojiData[i].push(emoji[i * number + k]) : "";
|
|
}
|
|
}
|
|
},
|
|
inputFocus() {
|
|
this.CommonWords = false;
|
|
this.emoji = false;
|
|
this.goBottom();
|
|
},
|
|
inputBlur() {
|
|
;
|
|
},
|
|
shuru() {
|
|
this.goBottom()
|
|
},
|
|
choice(txt) {
|
|
this.message = txt;
|
|
},
|
|
close() {
|
|
this.CommonWords = false;
|
|
this.emoji = false;
|
|
},
|
|
sendOut() {
|
|
this.close();
|
|
},
|
|
selemoji(m) {
|
|
this.message += m;
|
|
},
|
|
goBottom() {
|
|
setTimeout(() => {
|
|
this.scrollTop += 1;
|
|
}, 200);
|
|
},
|
|
//返回上一级
|
|
router() {
|
|
if (this.type == 2) {
|
|
this.$u.route({
|
|
url: '/pages/message/adminList/adminList'
|
|
});
|
|
return
|
|
}
|
|
if (this.type == 0) {
|
|
uni.switchTab({
|
|
url: '../../message/msgList/msgList'
|
|
})
|
|
} else {
|
|
this.$u.route({
|
|
url: 'pages/AlumniCircle/userDetail/userDetail?id=' + this.id + '&type=3'
|
|
});
|
|
}
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.msgList.emoji,
|
|
.msgList.msg {
|
|
position: relative;
|
|
bottom: 3rem;
|
|
}
|
|
|
|
.errTips {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
width: 100%;
|
|
background: #fff;
|
|
height: 0.16rem;
|
|
overflow: hidden;
|
|
transition: all 1s;
|
|
|
|
.group_3 {
|
|
color: rgb(255, 117, 134);
|
|
font-size: 0.11rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.011rem;
|
|
white-space: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image_2 {
|
|
width: 0.16rem;
|
|
height: 0.14rem;
|
|
}
|
|
|
|
.text_5 {
|
|
margin-left: 0.085rem;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.emojishow {
|
|
height: 3rem !important;
|
|
}
|
|
|
|
.slider {
|
|
background: #fff;
|
|
width: 7.75rem;
|
|
height: 0rem;
|
|
transition: all 0.3s;
|
|
|
|
.slider-emoji {
|
|
overflow-y: scroll;
|
|
width: 100vw !important;
|
|
}
|
|
|
|
&-emoji {
|
|
width: 6.75rem;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
&-icon {
|
|
font-size: 0.265rem;
|
|
display: inline-block;
|
|
width: 10%;
|
|
text-align: center;
|
|
padding: 0.05rem 0;
|
|
border-radius: 0.1rem;
|
|
// border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
&-icon:active {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lastbox {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.msgList {
|
|
.scroll {
|
|
height: calc(100vh - 1rem);
|
|
background: #fff;
|
|
padding: 0 0.17rem;
|
|
box-sizing: border-box;
|
|
|
|
::v-deep .uni-scroll-view-content {
|
|
height: auto;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
}
|
|
|
|
> view {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.systis {
|
|
width: 80%;
|
|
background-color: #f1f1f5;
|
|
margin: 0.15rem auto;
|
|
margin-top: 0.2rem;
|
|
border-radius: 0.1rem;
|
|
|
|
.section_2 {
|
|
margin-right: 0.02rem;
|
|
margin-top: 0.15rem;
|
|
padding: 0.13rem 0.075rem 0.13rem 0.18rem;
|
|
border-radius: 0.087rem 0.087rem 0.087rem 0.087rem;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.group_2 {
|
|
color: rgb(160, 162, 172);
|
|
font-size: 0.12rem;
|
|
line-height: 0.2rem;
|
|
letter-spacing: 0.012rem;
|
|
|
|
text {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.text_6 {
|
|
margin-top: 0.08rem;
|
|
color: rgb(160, 162, 172);
|
|
font-size: 0.12rem;
|
|
line-height: 0.16rem;
|
|
letter-spacing: 0.012rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.group_3 {
|
|
margin-top: 0.095rem;
|
|
color: rgb(160, 162, 172);
|
|
font-size: 0.12rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.012rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.group_4 {
|
|
margin-top: 0.095rem;
|
|
padding-left: 0.005rem;
|
|
}
|
|
|
|
.text_5 {
|
|
margin-top: 0.07rem;
|
|
}
|
|
|
|
.text_8 {
|
|
margin-left: 0.04rem;
|
|
}
|
|
|
|
.text_9 {
|
|
align-self: center;
|
|
color: rgb(160, 162, 172);
|
|
font-size: 0.12rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.012rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text_10 {
|
|
color: rgb(46, 155, 255);
|
|
font-size: 0.12rem;
|
|
line-height: 0.16rem;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.exchange {
|
|
.top-group {
|
|
margin-left: 0.15rem;
|
|
margin-top: 0.085rem;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
.left-text-wrapper {
|
|
padding: 0.065rem 0 0.055rem;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 0.03rem;
|
|
width: 0.65rem;
|
|
height: 0.25rem;
|
|
border: solid 0.01rem rgb(255, 255, 255);
|
|
}
|
|
|
|
.right-text-wrapper {
|
|
margin-left: 0.24rem;
|
|
padding: 0.06rem 0;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 0.03rem;
|
|
width: 0.65rem;
|
|
height: 0.25rem;
|
|
border: solid 0.01rem rgb(255, 255, 255);
|
|
}
|
|
|
|
.text_11 {
|
|
color: rgb(255, 255, 255);
|
|
font-size: 0.15rem;
|
|
line-height: 0.14rem;
|
|
letter-spacing: 0.015rem;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.bottom-group {
|
|
color: rgb(115, 129, 255);
|
|
font-size: 0.12rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.012rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.right {
|
|
margin-left: 0.14rem;
|
|
}
|
|
|
|
.section_3 {
|
|
margin-top: 0.06rem;
|
|
padding: 0.15rem 0.33rem;
|
|
border-radius: 0.075rem 0.075rem 0.075rem 0.075rem;
|
|
background-image: url("~@/static/common/img/exchangeBjImg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.text_12 {
|
|
}
|
|
|
|
.view_1 {
|
|
margin-top: 0.21rem;
|
|
}
|
|
}
|
|
|
|
.hemsg {
|
|
margin-top: 0.15rem;
|
|
|
|
.image_3 {
|
|
width: 0.4rem !important;
|
|
height: 0.4rem !important;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
flex: 0 0 0.4rem !important;
|
|
}
|
|
|
|
.right-text-wrapper_1 {
|
|
margin-left: 0.15rem;
|
|
margin-top: 0.085rem;
|
|
padding: 0.1rem;
|
|
background-color: #f6f8fa;
|
|
border-radius: 0.1rem;
|
|
// border-top-left-radius: 0;
|
|
max-width: 65%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.group {
|
|
color: rgb(0, 0, 0);
|
|
font-size: 0.15rem;
|
|
line-height: 0.16rem;
|
|
letter-spacing: 0.015rem;
|
|
// white-space: nowrap;
|
|
}
|
|
|
|
.image_11 {
|
|
margin-bottom: 0.035rem;
|
|
}
|
|
}
|
|
|
|
.tis {
|
|
margin-top: 0.15rem;
|
|
|
|
.text {
|
|
display: block;
|
|
text-align: center;
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.11rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.011rem;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.mymsg {
|
|
margin-top: 0.1rem;
|
|
|
|
.image_3 {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.text-wrapper {
|
|
margin-right: 0.14rem;
|
|
margin-top: 0.085rem;
|
|
padding: 0.1rem 0.1rem 0.09rem;
|
|
border-radius: 0.1rem;
|
|
// border-top-right-radius: 0;
|
|
background: #3CB5FB;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
max-width: 65%;
|
|
word-break: break-all;
|
|
|
|
}
|
|
|
|
.group_5 {
|
|
margin-top: 0.025rem;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 0.15rem;
|
|
line-height: 0.16rem;
|
|
letter-spacing: 0.015rem;
|
|
white-space: wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Tips {
|
|
position: absolute;
|
|
z-index: 9;
|
|
top: 0.44rem;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.navbar-center {
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
text {
|
|
display: block;
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.name {
|
|
line-height: 0.15rem;
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.shool {
|
|
font-size: 0.11rem;
|
|
color: #cacaca;
|
|
}
|
|
}
|
|
|
|
.navbar-right {
|
|
.btn {
|
|
// height: 0.3rem;
|
|
background-color: #2e9bff;
|
|
border-radius: 0.05rem;
|
|
font-size: 0.15rem;
|
|
line-height: 0.15rem;
|
|
color: #ffffff;
|
|
margin-right: 0.22rem;
|
|
}
|
|
}
|
|
|
|
.quick {
|
|
.section_2 {
|
|
padding: 0.08rem 0.095rem 0.06rem;
|
|
color: rgb(46, 155, 255);
|
|
font-size: 0.11rem;
|
|
line-height: 0.12rem;
|
|
letter-spacing: 0.011rem;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.image_2 {
|
|
position: absolute;
|
|
right: 0.095rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
|
|
.info {
|
|
font-size: 0.11rem;
|
|
line-height: 0.18rem;
|
|
letter-spacing: 0.01rem;
|
|
color: #2e9bff;
|
|
}
|
|
|
|
.text {
|
|
text-transform: uppercase;
|
|
color: #fff !important;
|
|
line-height: 0.25rem !important;
|
|
}
|
|
|
|
.section_7 {
|
|
padding: 0.055rem 0.095rem 0.045rem 50%;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 0.12rem;
|
|
line-height: 0.12rem;
|
|
white-space: nowrap;
|
|
background-color: rgba(46, 155, 255, 0.1);
|
|
}
|
|
|
|
.image_13 {
|
|
margin: 0.04rem 0 0.025rem;
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
|
|
.text-wrapper_2 {
|
|
background-color: rgb(115, 129, 255);
|
|
border-radius: 0.05rem;
|
|
width: 0.97rem;
|
|
height: 0.25rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-wrapper_3 {
|
|
margin-left: 0.14rem;
|
|
background-color: rgb(115, 129, 255);
|
|
border-radius: 0.05rem;
|
|
height: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.msgbox {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
.section_1 {
|
|
// height: 0.52rem;
|
|
background-color: #fff;
|
|
border: solid 0.01rem #eeeeee;
|
|
padding: 0.11rem 0.1rem 0.11rem 0.1rem;
|
|
|
|
.input-box {
|
|
display: flex;
|
|
width: 100%;
|
|
background: #f6f8f9;
|
|
padding: 6rpx;
|
|
border-radius: 20rpx;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
font-size: 0.14rem;
|
|
line-height: 0.15rem;
|
|
color: #505051;
|
|
margin: 0 0.1rem;
|
|
line-height: 0.36rem;
|
|
}
|
|
|
|
.input {
|
|
width: 80%;
|
|
min-height: 0.36rem !important;
|
|
line-height: 0.36rem;
|
|
// background-color: #f7f7f7;
|
|
border-radius: 0.1rem;
|
|
font-size: 0.14rem;
|
|
padding-right: 0.1rem !important;
|
|
|
|
::v-deep .u-input__input {
|
|
padding: 0.05rem;
|
|
min-height: 0.16rem !important;
|
|
transform: translateY(0.03rem);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 0.05rem;
|
|
// padding: 0.03rem 0;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.03rem 0;
|
|
|
|
.sendOut {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 90rpx;
|
|
margin-left: 0.05rem;
|
|
background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);;
|
|
color: #ffffff;
|
|
|
|
}
|
|
}
|
|
|
|
.image {
|
|
width: 0.26rem;
|
|
height: 0.26rem;
|
|
}
|
|
|
|
.CommonWords {
|
|
width: 100%;
|
|
background-color: #f6f7fa;
|
|
|
|
text {
|
|
transition: all 0.3s;
|
|
display: block;
|
|
padding: 0.1rem 0 0.1rem 0.2rem;
|
|
font-size: 0.14rem;
|
|
line-height: 0.2rem;
|
|
height: 0.4rem;
|
|
overflow: hidden;
|
|
color: #505051;
|
|
}
|
|
|
|
text:active {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
|
|
.open {
|
|
height: 3rem !important;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.expandBox {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
|
|
.expand-content {
|
|
width: 100%;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.expand-item {
|
|
width: 140rpx;
|
|
text-align: center;
|
|
color: #999999;
|
|
}
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.open {
|
|
width: 100%;
|
|
height: 1.5rem !important;
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
|
|
.attention-box {
|
|
width: 686rpx;
|
|
height: 100rpx;
|
|
background: #F6F8F9;
|
|
box-shadow: 0rpx 2rpx 10rpx -2rpx rgba(0, 0, 0, 0.06), 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.04), 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.02);
|
|
border-radius: 24rpx;
|
|
margin: 0 auto;
|
|
padding: 0 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.attention-right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.attention-btn {
|
|
width: 120rpx;
|
|
height: 48rpx;
|
|
text-align: center;
|
|
line-height: 48rpx;
|
|
background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);
|
|
border-radius: 64rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
margin-right: 20rpx;
|
|
}
|
|
</style>
|