153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<template>
|
|
<view class="chat_setting">
|
|
<view class="user_list border_bottom">
|
|
<view
|
|
class="user_item"
|
|
v-for="(item, index) in getOnlineUser"
|
|
:key="index"
|
|
>
|
|
<image class="user_img" :src="item.img"></image>
|
|
<view class="user_name">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-list class="border_bottom">
|
|
<uni-list-item
|
|
title="群聊名称"
|
|
:rightText="UserInfo.room"
|
|
></uni-list-item>
|
|
<uni-list-item
|
|
title="群昵称"
|
|
link
|
|
to="/pages/editName/editName"
|
|
:rightText="UserInfo.name"
|
|
></uni-list-item>
|
|
</uni-list>
|
|
|
|
<uni-list class="border_bottom">
|
|
<uni-list-item
|
|
title="显示群成员昵称"
|
|
:showSwitch="true"
|
|
:switchChecked="status"
|
|
@switchChange="showChange"
|
|
></uni-list-item>
|
|
</uni-list>
|
|
|
|
<view class="action_list">
|
|
<view class="action_list_item" @click="clear">清空聊天记录</view>
|
|
<view class="action_list_item" @click="exitChat">删除并退出</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapGetters } from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
UserInfo: {}, // 用户登录信息
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.UserInfo = uni.getStorageSync("UserInfo");
|
|
},
|
|
created() {
|
|
console.log("getOnlineUser === : ", this.getOnlineUser);
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
saveChatRecord: "SetChatRecord",
|
|
setUserName: "SetIsShowUserName",
|
|
}),
|
|
showChange(e) {
|
|
this.setUserName(e.value);
|
|
console.log("status === ", this.status);
|
|
},
|
|
exitChat() {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定退出当前群聊吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this._.socket.emit("UserDisconnect", this.UserInfo);
|
|
plus.runtime.quit();
|
|
}
|
|
},
|
|
});
|
|
},
|
|
clear() {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定清除所有聊天记录吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log("用户点击确定");
|
|
this.saveChatRecord("clear");
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "清除成功",
|
|
duration: 1000,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
getOnlineUser: "GetOnLineUser",
|
|
status: "GetIsShowUserName",
|
|
}),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.chat_setting {
|
|
/deep/ .uni-switch-input-checked {
|
|
border-color: #fea575 !important;
|
|
background-color: #fea575 !important;
|
|
}
|
|
.border_bottom {
|
|
border-bottom: 15.972rpx solid #ededed;
|
|
}
|
|
.user_list {
|
|
padding: 36rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.user_item {
|
|
width: 20%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-bottom: 38rpx;
|
|
.user_img {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
margin-bottom: 14.58rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
.user_name {
|
|
color: #b0b0b0;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
.action_list {
|
|
.action_list_item {
|
|
height: 103rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ef5852;
|
|
&:first-child {
|
|
border: 1rpx solid #e5e5e5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|