commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
271ec4b9c2e5292ca9356029db73f1caffffff66
im/pages/find/shake/chatting/zhuanfa_pop.vue
T
cansnow 271ec4b9c2 增加音乐,摇一摇,服务等页面
2026-02-15 19:41:13 +08:00

442 lines
15 KiB
Vue
Raw Blame History

<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 View Git Blame Copy Permalink