增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<view class="message-item-container"
|
||||
:class="checkBoxFlag?'u-flex u-row-left u-col-center':''">
|
||||
<view v-if="checkBoxFlag">
|
||||
<template v-if="item.messageType!=0">
|
||||
<u-checkbox :size="46" v-model="item.checked"
|
||||
shape="circle" active-color="#19be6b" @click.native="checkChange(item)"></u-checkbox>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-p-b-20 u-p-t-20" style="width: 100%;">
|
||||
<!-- 系统信息-->
|
||||
<view v-if="item.messageType==0">
|
||||
<view v-if="item.showTimeFlag" style="text-align: center;color:#aaaaaa;font-size: 28rpx;margin-top: 20rpx;">
|
||||
<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
|
||||
{{item.formatTimeStr}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.createTime.substring(10,16)}}
|
||||
</text>
|
||||
</view>
|
||||
<view style="text-align: center;color:#aaaaaa;font-size: 30rpx;margin-top: 20rpx;">
|
||||
{{parseSYSContent(item)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="chat-time">
|
||||
<text v-if="item.showTimeFlag">
|
||||
<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
|
||||
{{item.formatTimeStr}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.createTime.length>10?item.createTime.substring(10,16):item.createTime}}
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.meFlag}">
|
||||
<view class="chat-icon-container u-flex u-row-center u-col-center"
|
||||
@click="toYYYPerson(item)">
|
||||
<view hover-class="my-hover-class"
|
||||
class="u-flex u-row-center u-col-center">
|
||||
<u-image :class="{'chat-icon':true,'chat-icon-me':item.meFlag}"
|
||||
:src="item.userAvatar" width="80rpx" height="80rpx"
|
||||
mode="aspectFill">
|
||||
<view slot="error"
|
||||
class="u-flex u-row-center u-col-center u-p-t-10"
|
||||
style="width: 80rpx;height: 80rpx;border-radius: 12rpx;">
|
||||
<view>
|
||||
<image src="/static/image/default/default-user/default-user.png"
|
||||
style="width: 50rpx;height:50rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-content-container u-p-t-10">
|
||||
<!-- 文本信息 -->
|
||||
<view v-if="item.contentType == messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE">
|
||||
<zb-tooltip placement="top" :visible.sync="toolTipFlag" color="#4c4c4c">
|
||||
<view slot="content" style="width: 550rpx;"
|
||||
class="u-flex u-flex-wrap u-row-left u-col-center">
|
||||
<view v-for="(item,index) in toolTipData" :key="index"
|
||||
style="text-align: center;padding: 20rpx 30rpx;">
|
||||
<view class="u-flex u-row-center u-col-center" @click="handleMessage(item)">
|
||||
<view>
|
||||
<u-image :src="item.icon" :width="36" :height="36"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="font-size:26rpx;margin-top: 6rpx;">
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @longpress="toolTipFlag=!toolTipFlag"
|
||||
:class="{'chat-text-container':true,'chat-text-container-me u-text-reserve':item.meFlag}">
|
||||
<u-parse :html="parseTextContent(item)"
|
||||
:tag-style="tagStyle">
|
||||
</u-parse>
|
||||
</view>
|
||||
</zb-tooltip>
|
||||
</view>
|
||||
<!-- 图片信息 -->
|
||||
<view v-if="item.contentType == messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE">
|
||||
<view class="content contentType3" @tap="showPic(item)">
|
||||
<u-image :width="item.content.width*2" :height="item.content.height*2"
|
||||
:lazy-load="true" mode="widthFix" :src="parseImageSrc(item)">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var previewSrcArr = [];
|
||||
export default {
|
||||
name: "message-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
"id": "",
|
||||
"chatGroupId": "",
|
||||
"userId": 0,
|
||||
"meFlag": true,
|
||||
"userName": '',
|
||||
"userAvatar": "",
|
||||
'messageType': "",
|
||||
"contentType": "",
|
||||
"content": {},
|
||||
"timestamp": "",
|
||||
"createTime": "",
|
||||
"platFrom": this.messageApi.msgPlat,
|
||||
}
|
||||
}
|
||||
},
|
||||
checkBoxFlag:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolTipFlag: false,
|
||||
toolTipData: [{
|
||||
id: 1,
|
||||
icon: '/static/image/wx/handle-msg/copy.jpg',
|
||||
title: '复制',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/static/image/wx/handle-msg/zhuanfa.jpg',
|
||||
title: '转发', //转发
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/static/image/wx/handle-msg/shoucang.jpg',
|
||||
title: '收藏',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '/static/image/wx/handle-msg/shanchu.jpg',
|
||||
title: '删除',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: '/static/image/wx/handle-msg/duoxuan.jpg',
|
||||
title: '多选',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: '/static/image/wx/handle-msg/yinyong.jpg',
|
||||
title: '引用',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
icon: '/static/image/wx/handle-msg/tixing.jpg',
|
||||
title: '提醒',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
icon: '/static/image/wx/handle-msg/souyisou.jpg',
|
||||
title: '搜一搜',
|
||||
disabled: false
|
||||
},
|
||||
],
|
||||
tagStyle:{
|
||||
img:'width:22px;height:22px;position:relative;top:10rpx;',
|
||||
span:'margin:0px;padding:0px;font-size:30rpx',
|
||||
},
|
||||
previewVideoFlag:false, //播放视频控制器
|
||||
previewVideoSrc:'',
|
||||
redbagPopFlag:false,
|
||||
maskCustomStyle:{
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
currentRedBagInfo:null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseSYSContent:function(item){
|
||||
let that=this;
|
||||
let contentType = item.contentType;
|
||||
let contentObj=item.content;
|
||||
if (contentType == 1) {
|
||||
let msgStr = contentObj.text;
|
||||
console.log("transText",msgStr);
|
||||
return msgStr;
|
||||
}
|
||||
},
|
||||
//内容格式化
|
||||
parseTextContent: function(item) {
|
||||
let that=this;
|
||||
let contentType = item.contentType;
|
||||
let contentObj=item.content;
|
||||
let msgStr = contentObj.text;
|
||||
let sysType = contentObj.contentType; //内容类型
|
||||
let optionType = contentObj.optionType;
|
||||
let transText = this.transform(msgStr,'','',contentObj.linkName);
|
||||
return transText;
|
||||
},
|
||||
|
||||
//预览图片
|
||||
showPic:function(item){
|
||||
let url= item.content.fullPath;
|
||||
let target= item.content.fileSaveTarget;
|
||||
if(target=="local"){
|
||||
url= this.$u.api.multipartAddress.getFileByPath+url;
|
||||
}
|
||||
uni.previewImage({
|
||||
urls: previewSrcArr.length > 0 ? previewSrcArr : [url],
|
||||
current: url,
|
||||
loop: false,
|
||||
});
|
||||
},
|
||||
|
||||
parseImageSrc:function(item){
|
||||
let that=this;
|
||||
let msgId= item.id;
|
||||
let localSrc= uni.getStorageSync("image"+msgId);
|
||||
if(localSrc){
|
||||
return localSrc;
|
||||
}
|
||||
let contentObj=item.content;
|
||||
let url= contentObj.fullPath;
|
||||
let target= contentObj.fileSaveTarget;
|
||||
if(target=="local"){
|
||||
let fileName= contentObj.fileName;
|
||||
url=this.$u.api.multipartAddress.showFile+fileName;
|
||||
}
|
||||
that.setImageLocalSrc(url,msgId);
|
||||
return url;
|
||||
},
|
||||
parseImgSize: function(item, type) {
|
||||
let contentObj=item.content;
|
||||
let height = contentObj.height;
|
||||
let width = contentObj.width;
|
||||
if (type == "h") {
|
||||
if (height == null || height == undefined) {
|
||||
return "auto";
|
||||
} else {
|
||||
return height * 2;
|
||||
}
|
||||
} else {
|
||||
if (width == null || width == undefined) {
|
||||
return 300;
|
||||
} else {
|
||||
return width * 2;
|
||||
}
|
||||
}
|
||||
},
|
||||
setImageLocalSrc(url,msgId){
|
||||
let that=this;
|
||||
that.messageApi.setImageLocalSrc(url,msgId);
|
||||
},
|
||||
toYYYPerson:function(item){
|
||||
let that=this;
|
||||
if(item.meFlag==false){
|
||||
that.$emit("toYYYPerson",item);
|
||||
}
|
||||
},
|
||||
checkChange:function(msg){
|
||||
let that=this;
|
||||
that.$emit("checkChange",msg);
|
||||
},
|
||||
handleMessage:function(menuItem){
|
||||
this.toolTipFlag=false;
|
||||
this.$emit("handleMessage",menuItem,this.item);
|
||||
},
|
||||
transform (content, fileSize, fileSuffix,linkName) {
|
||||
if (fileSize === undefined) {
|
||||
fileSize = '';
|
||||
}
|
||||
if (fileSuffix === undefined) {
|
||||
fileSuffix = '';
|
||||
}
|
||||
let html = function(end) {
|
||||
return new RegExp('\\n*\\[' + (end || '') +
|
||||
'(code|pre|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)]\\n*',
|
||||
'g');
|
||||
};
|
||||
if (content)
|
||||
{
|
||||
content = content.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/"/g, '"') // XSS
|
||||
.replace(html(), '<$1 $2>')
|
||||
.replace(html('/'), '</$1>') // 转移HTML代码
|
||||
.replace(/\n/g, '<br>'); // 转义换行
|
||||
content=getUrl(content);
|
||||
content=content.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||||
let alt = face.replace(/^face/g, '');
|
||||
let fa =faceUtil.emojiMap;
|
||||
let srcPrefix=faceUtil.emojiUrl;
|
||||
let imageSrc=srcPrefix+ fa[alt];
|
||||
//console.log("表情",imageSrc);
|
||||
let imgContent= '<img class="emoji" src="' +imageSrc+ '"/>';
|
||||
return imgContent;
|
||||
})
|
||||
// 转义图片
|
||||
.replace(/img\[([^\s]+?)]/g, function(img) {
|
||||
let href = img.replace(/(^img\[)|(]$)/g, '');
|
||||
return '<img class="message-img" src="' + href + '" alt="消息图片不能加载">';
|
||||
})
|
||||
// 转义文件
|
||||
.replace(/file\([\s\S]+?\)\[[\s\S]*?]/g, function(str) {
|
||||
let href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1];
|
||||
let text = (str.match(/\)\[([\s\S]*?)]/) || [])[1];
|
||||
if (!href) return str;
|
||||
return '<div class="flex"><i class="iconfont icon-xiazai-yun"></i><a class="message-file" href="' +
|
||||
href + '">' + (text || href) + '</a><span>' + fileSize + '</span></div>'
|
||||
})
|
||||
// 转义音频
|
||||
.replace(/audio\[([^\s]+?)]/g, function(audio) {
|
||||
return '<div class="message-audio" data-src="' + audio.replace(/(^audio\[)|(]$)/g, '') +
|
||||
'"><i class="layui-icon"></i><p>音频消息</p></div>';
|
||||
})
|
||||
// 转义视频
|
||||
.replace(/video\[([^\s]+?)]/g, function(video) {
|
||||
return '<div class="message-video" data-src="' + video.replace(/(^video\[)|(]$)/g, '') +
|
||||
'"><i class="layui-icon"></i></div>';
|
||||
})
|
||||
// 转义链接
|
||||
.replace(/a\([\s\S]+?\)\[[\s\S]*?]/g, function(str) {
|
||||
let href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1];
|
||||
let text = (str.match(/\)\[([\s\S]*?)]/) || [])[1];
|
||||
if (!href) return str;
|
||||
if(linkName&&linkName.length>0){
|
||||
return '<a href="' + href + '" target="_blank">' + linkName + '</a>';
|
||||
};
|
||||
return '<a href="' + href + '" target="_blank">' + (text || href) + '</a>';
|
||||
})
|
||||
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-item-container {
|
||||
padding:0rpx 20rpx;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
padding: 4rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
justify-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chat-location-me {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chat-icon-me {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.chat-icon-container {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.chat-content-container {
|
||||
margin: 0rpx 15rpx;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.chat-user-name {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.chat-text-container {
|
||||
//word-break: break-all;
|
||||
word-wrap:break-word;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 20rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chat-text-container-me {
|
||||
background-color: #95ec69;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
position: relative;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
//语音信息样式
|
||||
.content-audio-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx 20rpx;
|
||||
margin-top: 5rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.voice_icon {
|
||||
height: 34rpx;
|
||||
width: 34rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.voice_icon_right {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_left {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_right_an {
|
||||
animation: voiceAn_right 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
.voice_icon_left_an {
|
||||
animation: voiceAn_left 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes voiceAn_right {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voiceAn_left {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//我的语音信息样式
|
||||
.chat-audio-container-me {
|
||||
background-color: #95ec69;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
//文件信息样式
|
||||
.contentType-file {
|
||||
width: 450rpx;
|
||||
padding: 0;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
//红包
|
||||
.contentType-redbag {
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f29100;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
//位置
|
||||
.contentType-location {
|
||||
width: 500rpx;
|
||||
padding: 0rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
//组合信息
|
||||
.contentType-fixed {
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
word-break: break-word;
|
||||
padding: 20rpx;
|
||||
background-color: #95ec69 !important;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
max-width: 400rpx;
|
||||
|
||||
.img {
|
||||
width: 200rpx;
|
||||
height: auto;
|
||||
max-width: 300rpx;
|
||||
max-height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-flex-reserve {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.u-text-reserve {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="zhuanfa-container">
|
||||
<template v-if="moreFlag==false">
|
||||
<view>
|
||||
<u-navbar :is-back="false"
|
||||
back-icon-color="#333333"
|
||||
title=""
|
||||
:border-bottom="false"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
z-index="1001">
|
||||
<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
|
||||
<view @click="goback()">
|
||||
<text>关闭</text>
|
||||
</view>
|
||||
<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
|
||||
<text>选择一个聊天</text>
|
||||
</view>
|
||||
<view @click="changeMoreFlag(1)">
|
||||
<text>多选</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
<view style="background-color: #f0f0f0;" class="u-p-30">
|
||||
<view class="u-flex u-row-center u-col-center"
|
||||
style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
|
||||
</view>
|
||||
<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
|
||||
</view>
|
||||
<view class="u-m-t-40 u-p-b-20" v-if="latestZhuanFa.length>0">
|
||||
<view style="font-size: 30rpx;font-weight: bold;">
|
||||
<text>最近转发</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
|
||||
<view class="u-m-r-40" v-for="(lastestItem,index) in latestZhuanFa" :key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view style="height: 100rpx;width: 100rpx;">
|
||||
<u-image :src="lastestItem.avatar"
|
||||
:width="100" :height="100" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-line-2 u-tips-color"
|
||||
style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding:8rpx;">
|
||||
<text>{{lastestItem.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30" style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-font-30">
|
||||
<view style="color: #000000;font-weight: bold;">
|
||||
<text>最近聊天</text>
|
||||
</view>
|
||||
<view style="color:#36648b;">
|
||||
<text>创建聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="lastestChatUsers.length>0" class="u-m-t-30">
|
||||
<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex"
|
||||
class="u-flex u-row-left u-col-center u-p-t-16 u-p-b-16">
|
||||
<view style="width:90rpx;" class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 600rpx;"
|
||||
class="u-flex u-row-between u-col-center u-p-20 u-border-bottom">
|
||||
<view style="text-align: left;">
|
||||
<view class="u-line-1" style="font-size: 32rpx;color: #000000;">
|
||||
<text>{{user.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="moreFlag==true">
|
||||
<view>
|
||||
<u-navbar :is-back="false"
|
||||
back-icon-color="#333333"
|
||||
title=""
|
||||
:border-bottom="false"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
z-index="1001">
|
||||
<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
|
||||
<view @click="changeMoreFlag(0)">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
|
||||
<text>选择多个聊天</text>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="checkedUsers.length<1" style="border-radius: 10rpx;background-color: #dddddd;color: #909399;padding: 10rpx 20rpx;">
|
||||
<text>完成</text>
|
||||
</view>
|
||||
<view v-if="checkedUsers.length>0"
|
||||
@click="openZhuanFa()"
|
||||
style="border-radius: 10rpx;background-color: #19be6b;color: #ffffff;padding: 10rpx 20rpx;">
|
||||
<text>完成({{checkedUsers.length}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view style="background-color: #f0f0f0;">
|
||||
<view v-if="checkedUsers.length<1" class="u-p-30">
|
||||
<view class="u-flex u-row-center u-col-center"
|
||||
style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
|
||||
</view>
|
||||
<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="u-p-30">
|
||||
<view class="u-flex u-row-left u-col-center"
|
||||
style="background-color: #ffffff;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-p-20" style="width: 400rpx;">
|
||||
<scroll-view class="hidden-scroll-bar"
|
||||
:scroll-into-view="scrollIntoViewId"
|
||||
:scroll-with-animation="true"
|
||||
:scroll-y="false" :scroll-x="true" style="width:400rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-l-20"
|
||||
v-for="(checkeItem,index) in checkedUsers"
|
||||
:key="index">
|
||||
<view :id="'u-'+checkeItem.chatNumber"
|
||||
class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="checkeItem.avatar"
|
||||
:width="80" :height="80" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-l-30" v-if="checkedUsers.length<4" style="color: #909399;font-size: 34rpx;">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="checkedUsers.length>=4" class="u-p-l-30" style="color: #909399;font-size: 34rpx;" >
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30" v-if="latestZhuanFa.length>0">
|
||||
<view style="font-size: 30rpx;font-weight: bold;">
|
||||
<text>最近转发</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
|
||||
<view class="u-m-r-40" v-for="(lastestItem,index) in latestZhuanFa" :key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="lastestItem.avatar"
|
||||
:width="100" :height="100" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-line-2 u-tips-color"
|
||||
style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding: 8rpx;">
|
||||
<text>{{lastestItem.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-font-30">
|
||||
<view style="color: #000000;font-weight: bold;">
|
||||
<text>最近聊天</text>
|
||||
</view>
|
||||
<view style="color:#36648b;">
|
||||
<text>从通讯录选择</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="lastestChatUsers.length>0" class="u-m-t-30">
|
||||
<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex"
|
||||
class="u-flex u-row-left u-col-center u-m-b-20">
|
||||
<view>
|
||||
<u-checkbox :size="46" v-model="user.checked" @click.native="checkChange(user)"
|
||||
shape="circle" active-color="#19be6b"></u-checkbox>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-p-b-20">
|
||||
<view style="width:90rpx;" class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-20 u-border-bottom">
|
||||
<view style="text-align: left;">
|
||||
<view class="u-line-1" style="font-size: 32rpx;color: #000000;width: 480rpx;">
|
||||
<text>{{user.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<u-popup v-model="openZhuanFaFlag" mode="center" border-radius="16"
|
||||
:mask-close-able="false"
|
||||
width="625rpx" :height="checkedUsers.length>3?'600rpx':'520rpx'">
|
||||
<view class="u-p-30">
|
||||
<view style="font-size: 34rpx;font-weight: bold;">
|
||||
<text>分别发送给:</text>
|
||||
</view>
|
||||
<view class="u-m-t-30">
|
||||
<view class="u-flex u-flex-wrap u-row-left u-col-center">
|
||||
<view v-for="(checkeItem,index) in checkedUsers" class="u-m-r-16 u-m-t-10"
|
||||
:key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="checkeItem.avatar"
|
||||
:width="80" :height="80" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-m-t-30 u-p-t-30 u-p-b-10 u-tips-color u-border-top">
|
||||
<view>
|
||||
<text>[逐条转发]共{{selectedMessages.length>0?selectedMessages.length:2}}条信息</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-b-20">
|
||||
<view style="background-color: #f7f7f7;width: 550rpx;padding:16rpx 20rpx;text-align: left;color: #909399;font-size: 30rpx;">
|
||||
<text>给朋友留言</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="position: absolute;width: 560rpx;bottom:30rpx;"
|
||||
class="u-flex u-row-between u-col-center u-font-34 u-p-t-30 u-border-top">
|
||||
<view style="color: #000000;text-align: center;width: 50%;">
|
||||
<view @click="cancelZhuanFa()">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #36648b;text-align: center;width: 50%;">
|
||||
<view @click="confirmSend()">
|
||||
<text>发送({{checkedUsers.length}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup v-model="maxLengthFlag" mode="center" border-radius="16"
|
||||
:mask-close-able="false" height="300rpx"
|
||||
width="620rpx">
|
||||
<view style="text-align: center;font-weight: bold;font-size: 34rpx;">
|
||||
<view class="u-flex u-row-center u-col-center" style="width: 100%; height: 200rpx;">
|
||||
<view>
|
||||
<text>最多只能选择9个聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="maxLengthFlag=false"
|
||||
style="color: #36648b;padding-top:30rpx;padding-bottom: 30rpx; width: 100%;" class="u-border-top">
|
||||
<text>我知道了</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
moreFlag:false,
|
||||
scrollHidden:false,
|
||||
checkNum:0,
|
||||
latestZhuanFa:[],
|
||||
checkedUsers:[],
|
||||
scrollIntoViewId:"",
|
||||
lastestChatUsers:[],
|
||||
openZhuanFaFlag:false,
|
||||
maxLengthFlag:false,
|
||||
selectedMessages:[],
|
||||
};
|
||||
},
|
||||
onPageScroll:function(e){
|
||||
let top= e.scrollTop;
|
||||
let pageHeight= this.$u.sys().windowHeight;
|
||||
if((top/pageHeight)>0.25){
|
||||
console.log("隐藏");
|
||||
this.scrollHidden=true;
|
||||
}else{
|
||||
this.scrollHidden=false;
|
||||
}
|
||||
},
|
||||
onLoad:function(option){
|
||||
if(option.checkedMessages){
|
||||
this.selectedMessages=JSON.parse(decodeURIComponent(option.checkedMessages));
|
||||
this.selectedMessages[0].showTimeFlag=true;
|
||||
};
|
||||
this.checkedUsers=[];
|
||||
this.latestZhuanFa=this.vuex_lastestZhuanFaUsers;
|
||||
this.latestZhuanFa.map(function(item){
|
||||
item.checked=false;
|
||||
});
|
||||
this.lastestChatUsers=this.vuex_yyyFriendList.concat(this.latestZhuanFa);
|
||||
this.lastestChatUsers.map(function(item){
|
||||
item.checked=false;
|
||||
});
|
||||
},
|
||||
|
||||
methods:{
|
||||
goback:function(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
changeMoreFlag:function(value){
|
||||
this.moreFlag=value;
|
||||
},
|
||||
checkChange:function(user){
|
||||
let that=this;
|
||||
let isExist = this.checkedUsers.some(item=>item.chatNumber===user.chatNumber);
|
||||
if(!isExist){
|
||||
if(that.checkedUsers.length>=9){
|
||||
this.maxLengthFlag=true;
|
||||
return;
|
||||
};
|
||||
this.checkedUsers.push(user);
|
||||
this.$nextTick(function(){
|
||||
that.scrollIntoViewId="u-"+user.chatNumber;
|
||||
})
|
||||
}else{
|
||||
this.checkedUsers = this.checkedUsers.filter(function(item) {
|
||||
return item.chatNumber!=user.chatNumber
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
openZhuanFa:function(){
|
||||
this.openZhuanFaFlag=true;
|
||||
},
|
||||
confirmSend:function(){
|
||||
let that=this;
|
||||
console.log("===选择的用户===",that.checkedUsers);
|
||||
console.log("===转发的信息===",that.selectedMessages);
|
||||
let lastMsg=that.selectedMessages[that.selectedMessages.length-1];
|
||||
let friendList=that.vuex_yyyFriendList;
|
||||
for (var i = 0; i < friendList.length; i++) {
|
||||
let friend= friendList[i];
|
||||
friend.checked=false;
|
||||
let isExist = that.checkedUsers.some(item=>item.chatNumber===friend.chatNumber);
|
||||
if(isExist){
|
||||
that.setLastMsgContent(friend,lastMsg,that.selectedMessages)
|
||||
}
|
||||
};
|
||||
that.$nextTick(function(){
|
||||
that.$u.vuex("vuex_yyyFriendList",friendList);
|
||||
that.openZhuanFaFlag=false;
|
||||
uni.navigateBack();
|
||||
});
|
||||
},
|
||||
cancelZhuanFa:function(){
|
||||
this.openZhuanFaFlag=false;
|
||||
},
|
||||
|
||||
setLastMsgContent:function(friend,message){
|
||||
let that=this;
|
||||
let formatContent="";
|
||||
let contentType=message.contentType;
|
||||
let contentObj=message.content;
|
||||
switch (contentType+""){
|
||||
case "1":
|
||||
formatContent=contentObj.text;
|
||||
formatContent=formatContent.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||||
return face.replace(/^face/g, '')
|
||||
});
|
||||
break;
|
||||
case "2":
|
||||
formatContent="[图片]";
|
||||
break;
|
||||
case "3":
|
||||
formatContent="[视频]";
|
||||
break;
|
||||
case "4":
|
||||
formatContent="[语音]";
|
||||
break;
|
||||
case "7":
|
||||
formatContent="[红包]";
|
||||
break;
|
||||
case "10":
|
||||
formatContent="[聊天记录]";
|
||||
break;
|
||||
case "11":
|
||||
formatContent="[图文]";
|
||||
break;
|
||||
case "12":
|
||||
formatContent="[视频文字]";
|
||||
break;
|
||||
default:
|
||||
formatContent="[其他]";
|
||||
break;
|
||||
};
|
||||
console.log("最后一条信息",formatContent);
|
||||
console.log("群号",friend.chatNumber);
|
||||
if(friend.chatNumber=="000000"){
|
||||
let obj={
|
||||
"lastMsgContent":formatContent,
|
||||
"messageList":that.selectedMessages,
|
||||
"lastMsgTime":message.createTime,
|
||||
};
|
||||
this.$u.vuex("vuex_fileAssist",obj);
|
||||
}else{
|
||||
friend.lastMsgContent=formatContent;
|
||||
friend.sendTimeStr=message.createTime;
|
||||
friend.messageList=that.selectedMessages;
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user