init admin
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
package-lock.json
|
||||
|
||||
|
||||
.hbuilderx
|
||||
uniCloud-aliyun
|
||||
|
||||
# plugin
|
||||
/nativeplugins
|
||||
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
/unpackage/cache
|
||||
/unpackage/debug
|
||||
/unpackage/dist
|
||||
/unpackage/resources
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# electron output
|
||||
/dist
|
||||
|
||||
# db
|
||||
OpenIM_*
|
||||
|
||||
# plugin
|
||||
/nativeplugins
|
||||
@@ -0,0 +1,2 @@
|
||||
/node_modules/
|
||||
/nativeplugins/
|
||||
+515
@@ -0,0 +1,515 @@
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import IMSDK, {
|
||||
IMMethods,
|
||||
MessageType,
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import config from "./common/config";
|
||||
import {
|
||||
getDbDir,
|
||||
toastWithCallback
|
||||
} from "@/util/common.js";
|
||||
import {
|
||||
conversationSort
|
||||
} from "@/util/imCommon";
|
||||
import {
|
||||
PageEvents,
|
||||
UpdateMessageTypes
|
||||
} from "@/constant";
|
||||
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log("App Launch");
|
||||
this.setGlobalIMlistener();
|
||||
this.tryLogin();
|
||||
// #ifdef H5
|
||||
console.error(
|
||||
`暂时不支持运行到 Web，如果需要移动端的 Web 项目，参考 [H5 demo](https://github.com/openimsdk/openim-h5-demo)`
|
||||
);
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
console.error(`暂时不支持运行到小程序端`);
|
||||
// #endif
|
||||
},
|
||||
onShow: function() {
|
||||
console.log("App Show");
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.SetAppBackgroundStatus, IMSDK.uuid(), false);
|
||||
},
|
||||
onHide: function() {
|
||||
console.log("App Hide");
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.SetAppBackgroundStatus, IMSDK.uuid(), true);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeConversationList",
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentUserID",
|
||||
"storeSelfInfo",
|
||||
"storeRecvFriendApplications",
|
||||
"storeRecvGroupApplications",
|
||||
"storeHistoryMessageList",
|
||||
"storeIsSyncing",
|
||||
"storeGroupList",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
|
||||
...mapActions("conversation", ["updateCurrentMemberInGroup"]),
|
||||
...mapActions("contact", [
|
||||
"updateFriendInfo",
|
||||
"pushNewFriend",
|
||||
"updateBlackInfo",
|
||||
"pushNewBlack",
|
||||
"pushNewGroup",
|
||||
"updateGroupInfo",
|
||||
"pushNewRecvFriendApplition",
|
||||
"updateRecvFriendApplition",
|
||||
"pushNewSentFriendApplition",
|
||||
"updateSentFriendApplition",
|
||||
"pushNewRecvGroupApplition",
|
||||
"updateRecvGroupApplition",
|
||||
"pushNewSentGroupApplition",
|
||||
"updateSentGroupApplition",
|
||||
]),
|
||||
setGlobalIMlistener() {
|
||||
console.log("setGlobalIMlistener");
|
||||
// init
|
||||
const kickHander = (message) => {
|
||||
toastWithCallback(message, () => {
|
||||
uni.removeStorage({
|
||||
key: "IMToken",
|
||||
});
|
||||
uni.removeStorage({
|
||||
key: "BusinessToken",
|
||||
});
|
||||
uni.$u.route("/pages/login/index");
|
||||
});
|
||||
};
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnKickedOffline, (data) => {
|
||||
kickHander("您的账号在其他设备登录，请重新登陆！");
|
||||
});
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnUserTokenExpired, (data) => {
|
||||
kickHander("您的登录已过期，请重新登陆！");
|
||||
});
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnUserTokenInvalid, (data) => {
|
||||
kickHander("您的登录已无效，请重新登陆！");
|
||||
});
|
||||
|
||||
// sync
|
||||
const syncStartHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.$store.commit("user/SET_IS_SYNCING", true);
|
||||
this.$store.commit("user/SET_REINSTALL", data);
|
||||
};
|
||||
const syncProgressHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.$store.commit("user/SET_PROGRESS", data);
|
||||
};
|
||||
const syncFinishHandler = () => {
|
||||
uni.hideLoading();
|
||||
this.$store.dispatch("conversation/getConversationList");
|
||||
this.$store.dispatch("contact/getFriendList");
|
||||
this.$store.dispatch("contact/getGrouplist");
|
||||
this.$store.dispatch("conversation/getUnReadCount");
|
||||
this.$store.commit("user/SET_IS_SYNCING", false);
|
||||
};
|
||||
const syncFailedHandler = () => {
|
||||
uni.hideLoading();
|
||||
uni.$u.toast("同步消息失败");
|
||||
this.$store.dispatch("conversation/getConversationList");
|
||||
this.$store.dispatch("conversation/getUnReadCount");
|
||||
this.$store.commit("user/SET_IS_SYNCING", false);
|
||||
};
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerStart, syncStartHandler);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerFinish, syncFinishHandler);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerFailed, syncFailedHandler);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerProgress, syncProgressHandler);
|
||||
|
||||
// self
|
||||
const selfInfoUpdateHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.$store.commit("user/SET_SELF_INFO", {
|
||||
...this.storeSelfInfo,
|
||||
...data,
|
||||
});
|
||||
};
|
||||
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnSelfInfoUpdated, selfInfoUpdateHandler);
|
||||
|
||||
// message
|
||||
const newMessagesHandler = ({
|
||||
data
|
||||
}) => {
|
||||
if (this.storeIsSyncing) {
|
||||
return;
|
||||
}
|
||||
data.forEach(this.handleNewMessage);
|
||||
};
|
||||
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnRecvNewMessages, newMessagesHandler);
|
||||
|
||||
// friend
|
||||
const friendInfoChangeHandler = ({
|
||||
data
|
||||
}) => {
|
||||
uni.$emit(IMSDK.IMEvents.OnFriendInfoChanged, {
|
||||
data
|
||||
});
|
||||
this.updateFriendInfo({
|
||||
friendInfo: data,
|
||||
});
|
||||
};
|
||||
const friendAddedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.pushNewFriend(data);
|
||||
};
|
||||
const friendDeletedHander = ({
|
||||
data
|
||||
}) => {
|
||||
this.updateFriendInfo({
|
||||
friendInfo: data,
|
||||
isRemove: true,
|
||||
});
|
||||
};
|
||||
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnFriendInfoChanged,
|
||||
friendInfoChangeHandler
|
||||
);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnFriendAdded, friendAddedHandler);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnFriendDeleted, friendDeletedHander);
|
||||
|
||||
// blacklist
|
||||
const blackAddedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.pushNewBlack(data);
|
||||
};
|
||||
const blackDeletedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.updateBlackInfo({
|
||||
blackInfo: data,
|
||||
isRemove: true,
|
||||
});
|
||||
};
|
||||
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnBlackAdded, blackAddedHandler);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnBlackDeleted, blackDeletedHandler);
|
||||
|
||||
// group
|
||||
const joinedGroupAddedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.pushNewGroup(data);
|
||||
};
|
||||
const joinedGroupDeletedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.updateGroupInfo({
|
||||
groupInfo: data,
|
||||
isRemove: true,
|
||||
});
|
||||
};
|
||||
const groupInfoChangedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
this.updateGroupInfo({
|
||||
groupInfo: data,
|
||||
});
|
||||
};
|
||||
const groupMemberInfoChangedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
uni.$emit(IMSDK.IMEvents.OnGroupMemberInfoChanged, {
|
||||
data
|
||||
});
|
||||
if (data.groupID === this.storeCurrentConversation?.groupID) {
|
||||
this.updateCurrentMemberInGroup(data);
|
||||
}
|
||||
};
|
||||
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnJoinedGroupAdded,
|
||||
joinedGroupAddedHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnJoinedGroupDeleted,
|
||||
joinedGroupDeletedHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnGroupInfoChanged,
|
||||
groupInfoChangedHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnGroupMemberInfoChanged,
|
||||
groupMemberInfoChangedHandler
|
||||
);
|
||||
|
||||
// application
|
||||
const friendApplicationNumHandler = ({
|
||||
data
|
||||
}) => {
|
||||
const isRecv = data.toUserID === this.storeCurrentUserID;
|
||||
if (isRecv) {
|
||||
this.pushNewRecvFriendApplition(data);
|
||||
} else {
|
||||
this.pushNewSentFriendApplition(data);
|
||||
}
|
||||
};
|
||||
const friendApplicationAccessHandler = ({
|
||||
data
|
||||
}) => {
|
||||
const isRecv = data.toUserID === this.storeCurrentUserID;
|
||||
if (isRecv) {
|
||||
this.updateRecvFriendApplition({
|
||||
application: data,
|
||||
});
|
||||
} else {
|
||||
this.updateSentFriendApplition({
|
||||
application: data,
|
||||
});
|
||||
}
|
||||
};
|
||||
const groupApplicationNumHandler = ({
|
||||
data
|
||||
}) => {
|
||||
const isRecv = data.userID !== this.storeCurrentUserID;
|
||||
if (isRecv) {
|
||||
this.pushNewRecvGroupApplition(data);
|
||||
} else {
|
||||
this.pushNewSentGroupApplition(data);
|
||||
}
|
||||
};
|
||||
const groupApplicationAccessHandler = ({
|
||||
data
|
||||
}) => {
|
||||
const isRecv = data.userID !== this.storeCurrentUserID;
|
||||
if (isRecv) {
|
||||
this.updateRecvGroupApplition({
|
||||
application: data,
|
||||
});
|
||||
} else {
|
||||
this.updateSentGroupApplition({
|
||||
application: data,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnFriendApplicationAdded,
|
||||
friendApplicationNumHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnFriendApplicationAccepted,
|
||||
friendApplicationAccessHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnFriendApplicationRejected,
|
||||
friendApplicationAccessHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnGroupApplicationAdded,
|
||||
groupApplicationNumHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnGroupApplicationAccepted,
|
||||
groupApplicationAccessHandler
|
||||
);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnGroupApplicationRejected,
|
||||
groupApplicationAccessHandler
|
||||
);
|
||||
|
||||
// conversation
|
||||
const totalUnreadCountChangedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
if (this.storeIsSyncing) {
|
||||
return;
|
||||
}
|
||||
this.$store.commit("conversation/SET_UNREAD_COUNT", data);
|
||||
};
|
||||
const newConversationHandler = ({
|
||||
data
|
||||
}) => {
|
||||
if (this.storeIsSyncing) {
|
||||
return;
|
||||
}
|
||||
const result = [...data, ...this.storeConversationList];
|
||||
this.$store.commit(
|
||||
"conversation/SET_CONVERSATION_LIST",
|
||||
conversationSort(result)
|
||||
);
|
||||
};
|
||||
const conversationChangedHandler = ({
|
||||
data
|
||||
}) => {
|
||||
if (this.storeIsSyncing) {
|
||||
return;
|
||||
}
|
||||
let filterArr = [];
|
||||
console.log(data);
|
||||
const chids = data.map((ch) => ch.conversationID);
|
||||
filterArr = this.storeConversationList.filter(
|
||||
(tc) => !chids.includes(tc.conversationID)
|
||||
);
|
||||
const idx = data.findIndex(
|
||||
(c) =>
|
||||
c.conversationID === this.storeCurrentConversation.conversationID
|
||||
);
|
||||
if (idx !== -1)
|
||||
this.$store.commit(
|
||||
"conversation/SET_CURRENT_CONVERSATION",
|
||||
data[idx]
|
||||
);
|
||||
const result = [...data, ...filterArr];
|
||||
this.$store.commit(
|
||||
"conversation/SET_CONVERSATION_LIST",
|
||||
conversationSort(result)
|
||||
);
|
||||
};
|
||||
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnTotalUnreadMessageCountChanged,
|
||||
totalUnreadCountChangedHandler
|
||||
);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnNewConversation, newConversationHandler);
|
||||
IMSDK.subscribe(
|
||||
IMSDK.IMEvents.OnConversationChanged,
|
||||
conversationChangedHandler
|
||||
);
|
||||
},
|
||||
|
||||
tryLogin() {
|
||||
const initStore = () => {
|
||||
this.$store.dispatch("user/getSelfInfo");
|
||||
this.$store.dispatch("conversation/getConversationList");
|
||||
this.$store.dispatch("conversation/getUnReadCount");
|
||||
this.$store.dispatch("contact/getBlacklist");
|
||||
this.$store.dispatch("contact/getRecvFriendApplications");
|
||||
this.$store.dispatch("contact/getSentFriendApplications");
|
||||
this.$store.dispatch("contact/getRecvGroupApplications");
|
||||
this.$store.dispatch("contact/getSentGroupApplications");
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index?isRedirect=true",
|
||||
});
|
||||
};
|
||||
getDbDir()
|
||||
.then(async (path) => {
|
||||
const flag = await IMSDK.asyncApi(IMMethods.InitSDK, IMSDK.uuid(), {
|
||||
systemType: "uni-app",
|
||||
apiAddr: config.getApiUrl(), // SDK的API接口地址。如：http://xxx:10002
|
||||
wsAddr: config.getWsUrl(), // SDK的websocket地址。如： ws://xxx:10001
|
||||
dataDir: path, // 数据存储路径
|
||||
logLevel: 6,
|
||||
logFilePath: path,
|
||||
isLogStandardOutput: true,
|
||||
isExternalExtensions: false,
|
||||
});
|
||||
if (!flag) {
|
||||
plus.navigator.closeSplashscreen();
|
||||
uni.$u.toast("初始化IMSDK失败！");
|
||||
return;
|
||||
}
|
||||
const status = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetLoginStatus,
|
||||
IMSDK.uuid()
|
||||
);
|
||||
if (status === 3) {
|
||||
initStore();
|
||||
return;
|
||||
}
|
||||
|
||||
const IMToken = uni.getStorageSync("IMToken");
|
||||
const IMUserID = uni.getStorageSync("IMUserID");
|
||||
if (IMToken && IMUserID) {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.Login, IMSDK.uuid(), {
|
||||
userID: IMUserID,
|
||||
token: IMToken,
|
||||
})
|
||||
.then(initStore)
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
uni.removeStorage({
|
||||
key: "IMToken",
|
||||
});
|
||||
uni.removeStorage({
|
||||
key: "BusinessToken",
|
||||
});
|
||||
plus.navigator.closeSplashscreen();
|
||||
});
|
||||
} else {
|
||||
plus.navigator.closeSplashscreen();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("get dir failed");
|
||||
console.log(err);
|
||||
plus.navigator.closeSplashscreen();
|
||||
});
|
||||
},
|
||||
handleNewMessage(newServerMsg) {
|
||||
if (this.inCurrentConversation(newServerMsg)) {
|
||||
if (
|
||||
newServerMsg.contentType !== MessageType.TypingMessage &&
|
||||
newServerMsg.contentType !== MessageType.RevokeMessage
|
||||
) {
|
||||
newServerMsg.isAppend = true;
|
||||
this.pushNewMessage(newServerMsg);
|
||||
setTimeout(() => uni.$emit(PageEvents.ScrollToBottom, true));
|
||||
uni.$u.debounce(this.markConversationAsRead, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
inCurrentConversation(newServerMsg) {
|
||||
switch (newServerMsg.sessionType) {
|
||||
case SessionType.Single:
|
||||
return (
|
||||
newServerMsg.sendID === this.storeCurrentConversation.userID ||
|
||||
(newServerMsg.sendID === this.storeCurrentUserID &&
|
||||
newServerMsg.recvID === this.storeCurrentConversation.userID)
|
||||
);
|
||||
case SessionType.WorkingGroup:
|
||||
return newServerMsg.groupID === this.storeCurrentConversation.groupID;
|
||||
case SessionType.Notification:
|
||||
return newServerMsg.sendID === this.storeCurrentConversation.userID;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
},
|
||||
markConversationAsRead() {
|
||||
IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.MarkConversationMessageAsRead,
|
||||
IMSDK.uuid(),
|
||||
this.storeCurrentConversation.conversationID
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "@/uni_modules/uview-ui/index.scss";
|
||||
@import "@/styles/login.scss";
|
||||
@import "@/styles/global.scss";
|
||||
|
||||
uni-page-body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-tabbar .uni-tabbar__icon {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
</style>
|
||||
+661
@@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
@@ -0,0 +1,230 @@
|
||||
<p align="center">
|
||||
<a href="https://openim.io">
|
||||
<img src="./docs/images/logo.jpg" width="60%" height="30%"/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# OpenIM Uniapp 💬💻
|
||||
|
||||
<p>
|
||||
<a href="https://docs.openim.io/">OpenIM Docs</a>
|
||||
•
|
||||
<a href="https://github.com/openimsdk/open-im-server">OpenIM Server</a>
|
||||
•
|
||||
<a href="https://github.com/openimsdk/open-im-sdk-uniapp">open-im-sdk-uniapp</a>
|
||||
•
|
||||
<a href="https://github.com/openimsdk/openim-sdk-core">openim-sdk-core</a>
|
||||
</p>
|
||||
OpenIM 为开发者提供开源即时通讯 SDK，作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM，开发者可以构建安全可靠的即时通讯应用，如 WeChat、Zoom、Slack 等。
|
||||
|
||||
本仓库基于开源版 OpenIM SDK 开发，提供了一款基于 uniapp 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目引用了 `openim-uniapp-polyfill`，可以构建安卓程序和 iOS 程序。
|
||||
|
||||
<p align="center">
|
||||
<img src="./docs/images/preview1.png" alt="Preview" width="32%"/>
|
||||
<span style="display: inline-block; width: 16px;"></span>
|
||||
<img src="./docs/images/preview2.png" alt="Preview" width="32%"/>
|
||||
</p>
|
||||
|
||||
## 授权许可 :page_facing_up:
|
||||
|
||||
本仓库采用 GNU Affero 通用公共许可证第 3 版 (AGPL-3.0) 进行许可，并受以下附加条款的约束。**不允许用于商业用途**。详情请参阅 [此处](./LICENSE)。
|
||||
|
||||
## 开发环境
|
||||
|
||||
在开始开发之前，请确保您的系统已安装以下软件：
|
||||
|
||||
- **HBuilderX**：最新版本
|
||||
- **Node.js**：版本 ≥ 16.x（[手动安装](https://nodejs.org/dist/latest-v20.x/) 或使用 [nvm](https://github.com/nvm-sh/nvm) 进行版本管理）
|
||||
- **npm**：版本 ≥ 6.x（随 Node.js 一起安装）
|
||||
- **Git**：用于代码版本控制
|
||||
|
||||
同时，您需要确保已经[部署](https://docs.openim.io/zh-Hans/guides/gettingStarted/dockerCompose)了最新版本的 OpenIM Server。接下来，您可以编译项目并连接自己的服务端进行测试。
|
||||
|
||||
## 运行环境
|
||||
|
||||
本应用支持以下操作系统版本：
|
||||
|
||||
| 浏览器/操作系统 | 版本 | 状态 |
|
||||
| --------------- | ----------------- | ---- |
|
||||
| **iOS** | 13.0 及以上 | ✅ |
|
||||
| **Android** | 24 及以上 | ✅ |
|
||||
|
||||
### 说明
|
||||
|
||||
- `只支持` Uniapp 打包成 Android/iOS 应用。并且 SDK 也暂未支持 UniappX （开发中）。
|
||||
- 暂时 `不支持` 运行到 Web，如果需要移动端的 Web 项目，参考 [H5 demo](https://github.com/openimsdk/openim-h5-demo)。
|
||||
- 暂时 `不支持` 运行到小程序端。
|
||||
- 暂时 `不支持` 一对一音视频。如果需要使用，可以运行其他仓库的项目。
|
||||
|
||||
## 快速开始
|
||||
|
||||
按照以下步骤设置本地开发环境：
|
||||
|
||||
1. 拉取代码
|
||||
|
||||
```bash
|
||||
git clone https://github.com/openimsdk/open-im-uniapp-demo.git
|
||||
cd open-im-uniapp-demo
|
||||
```
|
||||
|
||||
2. 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. 修改配置
|
||||
|
||||
- `common/config.js`
|
||||
|
||||
> 如果没有修改过服务端默认端口，则只需要修改`BASE_HOST`为您的服务器 ip 即可，如需配置域名和 https 访问，可以参考[nginx 配置](https://docs.openim.io/zh-Hans/guides/gettingStarted/nginxDomainConfig)，并采用最下方的配置项，并修改`BASE_DOMAIN`为您的域名。
|
||||
|
||||
```javascript
|
||||
const BASE_HOST = 'your-server-ip'
|
||||
const CHAT_URL = `http://${BASE_HOST}:10008`
|
||||
const API_URL = `http://${BASE_HOST}:10002`
|
||||
const WS_URL = `ws://${BASE_HOST}:10001`
|
||||
|
||||
// const BASE_DOMAIN = 'your-server-domain'
|
||||
// const CHAT_URL = `http://${BASE_DOMAIN}/chat`
|
||||
// const API_URL = `http://${BASE_DOMAIN}/api`
|
||||
// const WS_URL = `ws://${BASE_DOMAIN}/msg_gateway`
|
||||
```
|
||||
|
||||
4. 修改为您自己的 AppID
|
||||
|
||||
- 使用 Hbuilder 打开 manifest.json
|
||||
|
||||
|
||||
|
||||
5. 导入原生插件
|
||||
|
||||
- 使用 Hbuilder 打开 manifest.json
|
||||
|
||||
|
||||
|
||||
- 选择云插件需要选择您的项目 Appid 和输入 Android 包名称
|
||||
|
||||
|
||||
|
||||
6. 云打包自定义调试基座
|
||||
|
||||
- 菜单 -> 运行 -> 运行到手机或模拟器 -> 制作自定义调试基座 (使用自己的包名)
|
||||
|
||||
|
||||
|
||||
7. 在真实的机器或模拟器上运行 （ iOS 仅支持在真机调试 ）
|
||||
|
||||
- 菜单 -> 运行 -> 运行到手机或模拟器 -> 运行到Android App基座
|
||||
|
||||
|
||||
|
||||
8. 开始开发测试！ 🎉
|
||||
|
||||
## 音视频通话
|
||||
|
||||
一对一音视频通话，多人音视频通话、视频会议请联系邮箱 [contact@openim.io](mailto:contact@openim.io)
|
||||
|
||||
## 构建 🚀
|
||||
|
||||
### 使用原生App 云打包
|
||||
|
||||
- 菜单 -> 发行 -> 原生App-云打包
|
||||
|
||||
|
||||
|
||||
## 功能列表
|
||||
|
||||
### 说明
|
||||
|
||||
| 功能模块 | 功能项 | 状态 |
|
||||
| ------------------ | --------------------------------------------------------- | ---- |
|
||||
| **账号功能** | 手机号注册\邮箱注册\验证码登录 | ✅ |
|
||||
| | 个人信息查看\修改 | ✅ |
|
||||
| | 修改密码\忘记密码 | ✅ |
|
||||
| **好友功能** | 查找\申请\搜索\添加\删除好友 | ✅ |
|
||||
| | 同意\拒绝好友申请 | ✅ |
|
||||
| | 好友备注 | ✅ |
|
||||
| | 是否允许添加好友 | ✅ |
|
||||
| | 好友列表\好友资料实时同步 | ✅ |
|
||||
| **黑名单功能** | 限制消息 | ✅ |
|
||||
| | 黑名单列表实时同步 | ✅ |
|
||||
| | 添加\移出黑名单 | ✅ |
|
||||
| **群组功能** | 创建\解散群组 | ✅ |
|
||||
| | 申请加群\邀请加群\退出群组\移除群成员 | ✅ |
|
||||
| | 群名/群头像更改/群资料变更通知和实时同步 | ✅ |
|
||||
| | 群成员邀请进群 | ✅ |
|
||||
| | 群主转让 | ✅ |
|
||||
| | 群主、管理员同意进群申请 | ✅ |
|
||||
| | 搜索群成员 | ✅ |
|
||||
| **消息功能** | 离线消息 | ✅ |
|
||||
| | 漫游消息 | ✅ |
|
||||
| | 多端消息 | ✅ |
|
||||
| | 历史消息 | ✅ |
|
||||
| | 消息删除 | ✅ |
|
||||
| | 消息清空 | ✅ |
|
||||
| | 消息复制 | ✅ |
|
||||
| | 单聊正在输入 | ✅ |
|
||||
| | 新消息勿扰 | ✅ |
|
||||
| | 清空聊天记录 | ✅ |
|
||||
| | 新成员查看群聊历史消息 | ✅ |
|
||||
| | 新消息提示 | ✅ |
|
||||
| | 文本消息 | ✅ |
|
||||
| | 图片消息 | ✅ |
|
||||
| | 视频消息 | ✅ |
|
||||
| | 表情消息 | ✅ |
|
||||
| | 文件消息 | ✅ |
|
||||
| | 语音消息 | ✅ |
|
||||
| | 名片消息 | ✅ |
|
||||
| | 地理位置消息 | ✅ |
|
||||
| | 自定义消息 | ✅ |
|
||||
| **会话功能** | 置顶会话 | ✅ |
|
||||
| | 会话已读 | ✅ |
|
||||
| | 会话免打扰 | ✅ |
|
||||
| **REST API** | 认证管理 | ✅ |
|
||||
| | 用户管理 | ✅ |
|
||||
| | 关系链管理 | ✅ |
|
||||
| | 群组管理 | ✅ |
|
||||
| | 会话管理 | ✅ |
|
||||
| | 消息管理 | ✅ |
|
||||
| **Webhook** | 群组回调 | ✅ |
|
||||
| | 消息回调 | ✅ |
|
||||
| | 推送回调 | ✅ |
|
||||
| | 关系链回调 | ✅ |
|
||||
| | 用户回调 | ✅ |
|
||||
| **容量和性能** | 1 万好友 | ✅ |
|
||||
| | 10 万人大群 | ✅ |
|
||||
| | 秒级同步 | ✅ |
|
||||
| | 集群部署 | ✅ |
|
||||
| | 互踢策略 | ✅ |
|
||||
| **在线状态** | 所有平台不互踢 | ✅ |
|
||||
| | 每个平台各只能登录一个设备 | ✅ |
|
||||
| | PC 端、移动端、Pad 端、Web 端、小程序端各只能登录一个设备 | ✅ |
|
||||
| | PC 端不互踢，其他平台总计一个设备 | ✅ |
|
||||
| **文件类对象存储** | 支持私有化部署 minio | ✅ |
|
||||
| | 支持 COS、OSS、Kodo、S3 公有云 | ✅ |
|
||||
| **推送** | 消息在线实时推送 | ✅ |
|
||||
| | 消息离线推送，支持个推，Firebase | ✅ |
|
||||
|
||||
更多高级功能、音视频通话、视频会议 请联系邮箱 [contact@openim.io](mailto:contact@openim.io)
|
||||
|
||||
## 加入社区 :busts_in_silhouette:
|
||||
|
||||
- 🚀 [加入我们的 Slack 社区](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q)
|
||||
- :eyes: [加入我们的微信群](https://openim-1253691595.cos.ap-nanjing.myqcloud.com/WechatIMG20.jpeg)
|
||||
|
||||
## 常见问题
|
||||
|
||||
1. 直接运行无法使用？
|
||||
|
||||
答：必须严格按照文档操作，导入原生插件和制作自定义基座才能运行。
|
||||
|
||||
2. iOS 制作自定义基座失败？
|
||||
|
||||
答：插件源码不能经过其他操作系统。只能在 MacOS 环境下载插件、制作自定义基座和云打包。
|
||||
|
||||
3. 如何使用地图、定位?
|
||||
答： [参考文档](CONFIGKEY.md)
|
||||
|
||||
4. 如何使用离线推送?
|
||||
答： [参考文档](CONFIGKEY.md)
|
||||
@@ -0,0 +1,79 @@
|
||||
// 登录
|
||||
export const businessLogin = (params) =>
|
||||
uni.$u?.http.post("/account/login", JSON.stringify(params));
|
||||
export const businessSendSms = (params) =>
|
||||
uni.$u?.http.post("/account/code/send", JSON.stringify(params));
|
||||
export const businessVerifyCode = (params) =>
|
||||
uni.$u?.http.post("/account/code/verify", JSON.stringify(params));
|
||||
export const businessRegister = (params) =>
|
||||
uni.$u?.http.post("/account/register", JSON.stringify(params));
|
||||
export const businessReset = (params) =>
|
||||
uni.$u?.http.post("/account/password/reset", JSON.stringify(params));
|
||||
|
||||
export const businessModify = (params) =>
|
||||
uni.$u?.http.post(
|
||||
"/account/password/change",
|
||||
JSON.stringify({
|
||||
...params,
|
||||
}), {
|
||||
header: {
|
||||
token: uni.getStorageSync("BusinessToken"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// 用户信息
|
||||
export const businessInfoUpdate = (params) =>
|
||||
uni.$u?.http.post(
|
||||
"/user/update",
|
||||
JSON.stringify({
|
||||
...params,
|
||||
}), {
|
||||
header: {
|
||||
token: uni.getStorageSync("BusinessToken"),
|
||||
},
|
||||
}
|
||||
);
|
||||
export const businessGetUserInfo = (userID) =>
|
||||
uni.$u?.http.post(
|
||||
"/user/find/full",
|
||||
JSON.stringify({
|
||||
userIDs: [userID],
|
||||
}), {
|
||||
header: {
|
||||
token: uni.getStorageSync("BusinessToken"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export const businessSearchUserInfo = (keyword) =>
|
||||
uni.$u?.http.post(
|
||||
"/user/search/full",
|
||||
JSON.stringify({
|
||||
keyword,
|
||||
pagination: {
|
||||
pageNumber: 1,
|
||||
showNumber: 10,
|
||||
},
|
||||
}), {
|
||||
header: {
|
||||
token: uni.getStorageSync("BusinessToken"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export const businessSearchUser = (keyword) =>
|
||||
uni.$u?.http.post(
|
||||
"/friend/search",
|
||||
JSON.stringify({
|
||||
keyword,
|
||||
pagination: {
|
||||
pageNumber: 1,
|
||||
showNumber: 99,
|
||||
},
|
||||
}), {
|
||||
header: {
|
||||
token: uni.getStorageSync("BusinessToken"),
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,25 @@
|
||||
// const BASE_HOST = 'your-server-ip'
|
||||
// const CHAT_URL = `http://${BASE_HOST}:10008`
|
||||
// const API_URL = `http://${BASE_HOST}:10002`
|
||||
// const WS_URL = `ws://${BASE_HOST}:10001`
|
||||
|
||||
const BASE_DOMAIN = '110.42.52.196'
|
||||
// const CHAT_URL = `https://${BASE_DOMAIN}/chat`
|
||||
// const API_URL = `https://${BASE_DOMAIN}/api`
|
||||
// const WS_URL = `wss://${BASE_DOMAIN}/msg_gateway`
|
||||
const CHAT_URL = `http://${BASE_DOMAIN}:10008`
|
||||
const API_URL = `http://${BASE_DOMAIN}:10002`
|
||||
const WS_URL = `ws://${BASE_DOMAIN}:10001`
|
||||
|
||||
const version = 'Uniapp-Demo'
|
||||
|
||||
const getRegisterUrl = () => uni.getStorageSync("IMRegisteUrl") || CHAT_URL;
|
||||
const getApiUrl = () => uni.getStorageSync("IMApiUrl") || API_URL;
|
||||
const getWsUrl = () => uni.getStorageSync("IMWsUrl") || WS_URL;
|
||||
|
||||
module.exports = {
|
||||
version,
|
||||
getRegisterUrl,
|
||||
getApiUrl,
|
||||
getWsUrl,
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
.u-block {
|
||||
padding: 14px;
|
||||
&__section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__title {
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
color: $u-content-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
// 使用了cell组件的icon图片样式
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.u-page {
|
||||
padding: 15px 15px 40px 15px;
|
||||
}
|
||||
|
||||
.u-demo-block {
|
||||
flex: 1;
|
||||
margin-bottom: 23px;
|
||||
|
||||
&__content {
|
||||
@include flex(column);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
color: rgb(143, 156, 162);
|
||||
margin-bottom: 8px;
|
||||
@include flex;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
export const emojis = [
|
||||
"😀",
|
||||
"😃",
|
||||
"😄",
|
||||
"😁",
|
||||
"😆",
|
||||
"😅",
|
||||
"🤣",
|
||||
"😂",
|
||||
"🙂",
|
||||
"🙃",
|
||||
"😉",
|
||||
"😊",
|
||||
"😇",
|
||||
"🥰",
|
||||
"😍",
|
||||
"🤩",
|
||||
"😘",
|
||||
"😗",
|
||||
"😚",
|
||||
"😙",
|
||||
"😋",
|
||||
"😛",
|
||||
"😜",
|
||||
"🤪",
|
||||
"😝",
|
||||
"🤑",
|
||||
"🤗",
|
||||
"🤭",
|
||||
"🤫",
|
||||
"🤔",
|
||||
];
|
||||
|
||||
export default emojis;
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
uni.$u.props.gap.bgColor = "#f3f4f6";
|
||||
uni.$u.props.gap.height = "10";
|
||||
@@ -0,0 +1,120 @@
|
||||
export const areaCode = [
|
||||
{ label: "中国", value: "86" },
|
||||
{ label: "马来西亚", value: "60" },
|
||||
{ label: "印度尼西亚", value: "62" },
|
||||
{ label: "菲律宾", value: "63" },
|
||||
{ label: "新加坡", value: "65" },
|
||||
{ label: "泰国", value: "66" },
|
||||
{ label: "文莱", value: "673" },
|
||||
{ label: "日本", value: "81" },
|
||||
{ label: "韩国", value: "82" },
|
||||
{ label: "越南", value: "84" },
|
||||
{ label: "朝鲜", value: "850" },
|
||||
{ label: "香港(中国)", value: "852" },
|
||||
{ label: "澳门(中国)", value: "853" },
|
||||
{ label: "柬埔寨", value: "855" },
|
||||
{ label: "老挝", value: "856" },
|
||||
{ label: "台湾(中国)", value: "886" },
|
||||
{ label: "孟加拉国", value: "880" },
|
||||
{ label: "土耳其", value: "90" },
|
||||
{ label: "印度", value: "91" },
|
||||
{ label: "巴基斯坦", value: "92" },
|
||||
{ label: "阿富汗", value: "93" },
|
||||
{ label: "斯里兰卡", value: "94" },
|
||||
{ label: "缅甸", value: "95" },
|
||||
{ label: "马尔代夫", value: "960" },
|
||||
{ label: "黎巴嫩", value: "961" },
|
||||
{ label: "约旦", value: "962" },
|
||||
{ label: "叙利亚", value: "963" },
|
||||
{ label: "伊拉克", value: "964" },
|
||||
{ label: "科威特", value: "965" },
|
||||
{ label: "沙特阿拉伯", value: "966" },
|
||||
{ label: "阿曼", value: "968" },
|
||||
{ label: "以色列", value: "972" },
|
||||
{ label: "巴林", value: "973" },
|
||||
{ label: "卡塔尔", value: "974" },
|
||||
{ label: "不丹", value: "975" },
|
||||
{ label: "蒙古", value: "976" },
|
||||
{ label: "尼泊尔", value: "977" },
|
||||
{ label: "伊朗", value: "98" },
|
||||
{ label: "塞浦路斯", value: "357" },
|
||||
{ label: "巴勒斯坦", value: "970" },
|
||||
{ label: "阿联酋", value: "971" },
|
||||
{ label: "俄罗斯联邦", value: "7" },
|
||||
{ label: "希腊", value: "30" },
|
||||
{ label: "荷兰", value: "31" },
|
||||
{ label: "比利时", value: "32" },
|
||||
{ label: "法国", value: "33" },
|
||||
{ label: "西班牙", value: "34" },
|
||||
{ label: "直布罗陀", value: "350" },
|
||||
{ label: "葡萄牙", value: "351" },
|
||||
{ label: "卢森堡", value: "352" },
|
||||
{ label: "爱尔兰", value: "353" },
|
||||
{ label: "冰岛", value: "354" },
|
||||
{ label: "阿尔巴尼亚", value: "355" },
|
||||
{ label: "马耳他", value: "356" },
|
||||
{ label: "安道尔", value: "376" },
|
||||
{ label: "芬兰", value: "358" },
|
||||
{ label: "保加利亚", value: "359" },
|
||||
{ label: "匈牙利", value: "36" },
|
||||
{ label: "德国", value: "49" },
|
||||
{ label: "南斯拉夫", value: "381" },
|
||||
{ label: "意大利", value: "39" },
|
||||
{ label: "圣马力诺", value: "378" },
|
||||
{ label: "梵蒂冈", value: "3906698" },
|
||||
{ label: "罗马尼亚", value: "40" },
|
||||
{ label: "瑞士", value: "41" },
|
||||
{ label: "列支敦士登", value: "423" },
|
||||
{ label: "奥地利", value: "43" },
|
||||
{ label: "英国", value: "44" },
|
||||
{ label: "丹麦", value: "45" },
|
||||
{ label: "瑞典", value: "46" },
|
||||
{ label: "挪威", value: "47" },
|
||||
{ label: "波兰", value: "48" },
|
||||
{ label: "捷克", value: "420" },
|
||||
{ label: "斯洛伐克", value: "421" },
|
||||
{ label: "摩纳哥", value: "377" },
|
||||
{ label: "马其顿", value: "389" },
|
||||
{ label: "科罗地亚", value: "385" },
|
||||
{ label: "斯洛文尼亚", value: "386" },
|
||||
{ label: "波斯尼亚和塞哥维那", value: "387" },
|
||||
{ label: "亚美尼亚共和国", value: "374" },
|
||||
{ label: "白俄罗斯共和国", value: "375" },
|
||||
{ label: "格鲁吉亚共和国", value: "995" },
|
||||
{ label: "哈萨克斯坦共和国", value: "7" },
|
||||
{ label: "吉尔吉斯坦共和国", value: "996" },
|
||||
{ label: "乌兹别克斯坦共和国", value: "998" },
|
||||
{ label: "塔吉克斯坦共和国", value: "992" },
|
||||
{ label: "土库曼斯坦共和国", value: "993" },
|
||||
{ label: "乌克兰", value: "380" },
|
||||
{ label: "立陶宛", value: "370" },
|
||||
{ label: "拉脱维亚", value: "371" },
|
||||
{ label: "爱沙尼亚", value: "372" },
|
||||
{ label: "摩尔多瓦", value: "373" },
|
||||
{ label: "埃及", value: "20" },
|
||||
{ label: "摩洛哥", value: "212" },
|
||||
{ label: "阿尔及利亚", value: "213" },
|
||||
{ label: "突尼斯", value: "216" },
|
||||
{ label: "利比亚", value: "218" },
|
||||
{ label: "冈比亚", value: "220" },
|
||||
{ label: "塞内加尔", value: "221" },
|
||||
{ label: "毛里塔尼亚", value: "222" },
|
||||
{ label: "马里", value: "223" },
|
||||
{ label: "几内亚", value: "224" },
|
||||
{ label: "科特迪瓦", value: "225" },
|
||||
{ label: "布基拉法索", value: "226" },
|
||||
{ label: "尼日尔", value: "227" },
|
||||
{ label: "多哥", value: "228" },
|
||||
{ label: "贝宁", value: "229" },
|
||||
{ label: "毛里求斯", value: "230" },
|
||||
{ label: "利比里亚", value: "231" },
|
||||
{ label: "塞拉利昂", value: "232" },
|
||||
{ label: "加纳", value: "233" },
|
||||
{ label: "尼日利亚", value: "234" },
|
||||
{ label: "乍得", value: "235" },
|
||||
{ label: "中非", value: "236" },
|
||||
{ label: "喀麦隆", value: "237" },
|
||||
{ label: "佛得角", value: "238" },
|
||||
{ label: "圣多美", value: "239" },
|
||||
{ label: "普林西比", value: "239" },
|
||||
];
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<u-picker
|
||||
:show="show"
|
||||
:defaultIndex="defaultIndex"
|
||||
:columns="columns"
|
||||
keyName="label"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { areaCode } from "./areaCode";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
defaultIndex: [0],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.show = true;
|
||||
},
|
||||
confirm({ value }) {
|
||||
const item = value[0];
|
||||
this.$emit("chooseArea", item.value);
|
||||
this.show = false;
|
||||
},
|
||||
cancel() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
const list = areaCode.map((i) => {
|
||||
return { label: `${i.label} +${i.value}`, value: i.value };
|
||||
});
|
||||
return [list];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view class="selected_item">
|
||||
<view class="left_info">
|
||||
<my-avatar
|
||||
:src="source.faceURL"
|
||||
:desc="source.nickname || source.showName"
|
||||
:isGroup="Boolean(source.groupID)"
|
||||
size="42"
|
||||
/>
|
||||
<text>{{ source.nickname || source.groupName || source.showName }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="action" plain text="移除" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
source: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
action() {
|
||||
this.$emit("removeItem");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.source);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selected_item {
|
||||
@include btwBox();
|
||||
padding: 20rpx 0;
|
||||
|
||||
.left_info {
|
||||
@include vCenterBox();
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="member_checked_desc">
|
||||
<view @click="showSelected = true" class="left_info">
|
||||
<view class="select_num">
|
||||
<text class="text">{{ `已选择(${choosedData.length})` }}</text>
|
||||
<u-icon name="arrow-up" size="14" color="#007aff" />
|
||||
</view>
|
||||
<view class="select_list">{{ selectedStr }}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-button
|
||||
:loading="comfirmLoading"
|
||||
@click="clickComfirm"
|
||||
:disabled="choosedData.length === 0"
|
||||
type="primary"
|
||||
:text="
|
||||
isRemove
|
||||
? '移除'
|
||||
: `确定(${choosedData.length}${
|
||||
maxLength > 0 ? `/${maxLength}` : ``
|
||||
})`
|
||||
"
|
||||
/>
|
||||
<u-popup round="24" :show="showSelected" mode="bottom" @close="close">
|
||||
<view class="selected_container">
|
||||
<view class="top_desc">
|
||||
<text>{{ `已选择(${choosedData.length})` }}</text>
|
||||
<text @click="close" class="comfirm_text">确认</text>
|
||||
</view>
|
||||
<u-list class="selected_list">
|
||||
<u-list-item
|
||||
v-for="item in choosedData"
|
||||
:key="item.userID || item.groupID"
|
||||
>
|
||||
<selected-member @removeItem="removeItem(item)" :source="item" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectedMember from "./SelectedMember.vue";
|
||||
export default {
|
||||
name: "ChooseIndexFooter",
|
||||
components: {
|
||||
SelectedMember,
|
||||
},
|
||||
props: {
|
||||
isRemove: Boolean,
|
||||
choosedData: Array,
|
||||
comfirmLoading: Boolean,
|
||||
maxLength: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelected: false,
|
||||
showConfirmModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedStr() {
|
||||
return this.choosedData
|
||||
.map((item) => item.nickname || item.showName || item.groupName)
|
||||
.join("、");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.showSelected = false;
|
||||
},
|
||||
removeItem(item) {
|
||||
this.$emit("removeItem", item);
|
||||
},
|
||||
clickComfirm() {
|
||||
this.$emit("confirm");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member_checked_desc {
|
||||
@include btwBox();
|
||||
background-color: #fff;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 44rpx 0;
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.left_info {
|
||||
@include colBox(false);
|
||||
|
||||
.select_num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.select_list {
|
||||
font-size: 24rpx;
|
||||
color: #8e9ab0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
background-color: #0089ff;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected_container {
|
||||
padding: 44rpx;
|
||||
|
||||
.top_desc {
|
||||
@include btwBox();
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.comfirm_text {
|
||||
color: $uni-color-primary;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.selected_list {
|
||||
height: 60vh !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<u-index-list
|
||||
@scrolltolower="scrolltolower"
|
||||
class="user_list"
|
||||
:style="{ height: height }"
|
||||
:index-list="indexList"
|
||||
>
|
||||
<template v-for="(item, index) in itemArr">
|
||||
<u-index-item :key="index">
|
||||
<u-index-anchor
|
||||
class="user_anchor"
|
||||
:text="indexList[index]"
|
||||
></u-index-anchor>
|
||||
<user-item
|
||||
@itemClick="itemClick"
|
||||
@updateCheck="updateCheck"
|
||||
:checked="checkedIDList.includes(cell.userID)"
|
||||
:disabled="disabledIDList.includes(cell.userID)"
|
||||
:checkVisible="showCheck"
|
||||
v-for="cell in item"
|
||||
:item="cell"
|
||||
:key="cell.userID"
|
||||
/>
|
||||
</u-index-item>
|
||||
</template>
|
||||
</u-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserItem from "../UserItem/index.vue";
|
||||
export default {
|
||||
name: "ChooseIndexList",
|
||||
components: {
|
||||
UserItem,
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "0px",
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
itemArr: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
checkedIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
disabledIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showCheck: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit("itemClick", item);
|
||||
},
|
||||
updateCheck(item) {
|
||||
this.$emit("updateCheck", item);
|
||||
},
|
||||
scrolltolower() {
|
||||
this.$emit("scrolltolower");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user_list {
|
||||
flex: 1;
|
||||
::v-deep uni-scroll-view {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user_anchor {
|
||||
background-color: #f8f8f8 !important;
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<u-navbar :title="title" placeholder class="custom_nav_bar">
|
||||
<template slot="left">
|
||||
<slot name="left">
|
||||
<view class="u-nav-slot">
|
||||
<img
|
||||
@click="leftClick"
|
||||
class="back_icon"
|
||||
width="12"
|
||||
height="20"
|
||||
src="static/images/common_left_arrow.png"
|
||||
alt=""
|
||||
srcset=""
|
||||
/>
|
||||
</view>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<template slot="center">
|
||||
<slot name="center"></slot>
|
||||
</template>
|
||||
|
||||
<template slot="right">
|
||||
<slot name="more">
|
||||
<view @click="rightClick" v-if="more" class="u-nav-slot">
|
||||
<u-icon
|
||||
class="more_dot"
|
||||
name="more-dot-fill"
|
||||
size="23"
|
||||
color="#0C1C33"
|
||||
></u-icon>
|
||||
</view>
|
||||
</slot>
|
||||
</template>
|
||||
</u-navbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
more: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
route: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
if (this.route) {
|
||||
uni.navigateBack();
|
||||
}
|
||||
this.$emit("leftClick");
|
||||
},
|
||||
rightClick() {
|
||||
this.$emit("rightClick");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom_nav_bar {
|
||||
::v-deep .u-navbar__content__left {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content__right {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.back_icon {
|
||||
padding: 24rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.more_dot {
|
||||
padding: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<u-avatar
|
||||
@longpress="longpress"
|
||||
@click="click"
|
||||
@onError="errorHandle"
|
||||
:src="getAvatarUrl"
|
||||
:text="avatarText"
|
||||
bgColor="#0089FF"
|
||||
:defaultUrl="getDdefaultUrl"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
mode="aspectFill"
|
||||
font-size="14"
|
||||
>
|
||||
</u-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import defaultGroupIcon from "static/images/contact_my_group.png";
|
||||
import defaultNotifyIcon from "static/images/default_notify_icon.png";
|
||||
export default {
|
||||
name: "MyAvatar",
|
||||
props: {
|
||||
src: String,
|
||||
shape: {
|
||||
type: String,
|
||||
default: "square",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "40",
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isNotify: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
desc: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatarText: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getAvatarUrl() {
|
||||
if (this.src) {
|
||||
return this.src;
|
||||
}
|
||||
if (this.isGroup) {
|
||||
return defaultGroupIcon;
|
||||
}
|
||||
if (this.isNotify) {
|
||||
return defaultNotifyIcon;
|
||||
}
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
return "";
|
||||
},
|
||||
getDdefaultUrl() {
|
||||
return this.isGroup ? defaultGroupIcon : undefined;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
errorHandle() {
|
||||
this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
|
||||
},
|
||||
redirectShow() {
|
||||
if (this.avatarText) {
|
||||
this.avatarText = undefined;
|
||||
}
|
||||
},
|
||||
click() {
|
||||
this.$emit("click");
|
||||
},
|
||||
longpress() {
|
||||
this.$emit("longpress");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.redirectShow();
|
||||
},
|
||||
desc() {
|
||||
this.redirectShow();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view
|
||||
@click="onClick"
|
||||
class="setting_item"
|
||||
:class="{ setting_item_border: border }"
|
||||
>
|
||||
<text :style="{ color: danger ? '#FF381F' : '$uni-text-color' }">{{
|
||||
title
|
||||
}}</text>
|
||||
<u-switch
|
||||
:loading="loading"
|
||||
@change="onChange"
|
||||
:asyncChange="true"
|
||||
v-if="is_switch"
|
||||
size="20"
|
||||
:value="switchValue"
|
||||
/>
|
||||
<view v-else class="setting_right">
|
||||
<slot></slot>
|
||||
<u-icon v-if="arrow" name="arrow-right" color="#999" size="18" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
components: {},
|
||||
props: {
|
||||
title: String,
|
||||
danger: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
is_switch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
switchValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit("click");
|
||||
},
|
||||
onChange(value) {
|
||||
this.$emit("switch", value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting_item {
|
||||
@include btwBox();
|
||||
padding: 24rpx 36rpx;
|
||||
color: $uni-text-color;
|
||||
|
||||
.setting_right {
|
||||
@include vCenterBox();
|
||||
}
|
||||
|
||||
&_border {
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="user_item">
|
||||
<view
|
||||
v-if="checkVisible"
|
||||
class="check_wrap"
|
||||
:class="{ check_wrap_active: checked, check_wrap_disabled: disabled }"
|
||||
>
|
||||
<u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
|
||||
</view>
|
||||
|
||||
<my-avatar
|
||||
:src="item.faceURL"
|
||||
:desc="item.remark || item.nickname || item.showName"
|
||||
:isGroup="item.groupName !== undefined || isGroupConversation"
|
||||
size="42"
|
||||
/>
|
||||
<view class="user_item_details">
|
||||
<text class="user_name">{{
|
||||
item.remark || item.nickname || item.groupName || item.showName
|
||||
}}</text>
|
||||
<text v-if="item.roleLevel === 100" class="user_role">群主</text>
|
||||
<text v-if="item.roleLevel === 60" class="user_role admin_role"
|
||||
>管理员</text
|
||||
>
|
||||
<!-- <view class="bottom_line" /> -->
|
||||
</view>
|
||||
|
||||
<slot name="action"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import { SessionType } from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
name: "UserItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
checkVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
item: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
isGroupConversation() {
|
||||
return this.item.conversationType === SessionType.WorkingGroup;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
if (!this.disabled) {
|
||||
this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
position: relative;
|
||||
|
||||
.check_wrap {
|
||||
@include centerBox();
|
||||
box-sizing: border-box;
|
||||
width: 40rpx;
|
||||
min-width: 40rpx;
|
||||
height: 40rpx;
|
||||
min-height: 40rpx;
|
||||
border: 2px solid #979797;
|
||||
border-radius: 50%;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 24rpx;
|
||||
|
||||
&_active {
|
||||
background-color: #1d6bed;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&_disabled {
|
||||
background-color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
&_details {
|
||||
@include vCenterBox();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -44rpx;
|
||||
}
|
||||
|
||||
.user_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 60%;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.user_role {
|
||||
font-size: 34rpx;
|
||||
// background-color: #f4da9a;
|
||||
// color: #FF8C00;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-left: 24rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.admin_role {
|
||||
color: $u-tips-color;
|
||||
// background-color: #A2C9F8;
|
||||
// color: #2691ED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-list-item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<!-- '<audio/>' 组件不再维护，建议使用能力更强的 'uni.createInnerAudioContext' 接口 有时间再改-->
|
||||
<!--增加audio标签支持-->
|
||||
<audio
|
||||
:id="node.attr.id"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:src="node.attr.src"
|
||||
:loop="node.attr.loop"
|
||||
:poster="node.attr.poster"
|
||||
:name="node.attr.name"
|
||||
:author="node.attr.author"
|
||||
controls
|
||||
></audio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "wxParseAudio",
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<image
|
||||
:mode="node.attr.mode"
|
||||
:lazy-load="node.attr.lazyLoad"
|
||||
:class="node.classStr"
|
||||
:style="newStyleStr || node.styleStr"
|
||||
:data-src="node.attr.src"
|
||||
:src="node.attr.src"
|
||||
@tap="wxParseImgTap"
|
||||
@load="wxParseImgLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "wxParseImg",
|
||||
data() {
|
||||
return {
|
||||
newStyleStr: "",
|
||||
preview: false,
|
||||
};
|
||||
},
|
||||
inject: ["parseWidth"],
|
||||
mounted() {},
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
wxParseImgTap(e) {
|
||||
if (!this.preview) return;
|
||||
const { src } = e.currentTarget.dataset;
|
||||
if (!src) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
// TODO 遍历获取父节点执行方法
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.preview(src, e);
|
||||
},
|
||||
// 图片视觉宽高计算函数区
|
||||
wxParseImgLoad(e) {
|
||||
const { src } = e.currentTarget.dataset;
|
||||
if (!src) return;
|
||||
let { width, height } = e.mp.detail;
|
||||
|
||||
const recal = this.wxAutoImageCal(width, height);
|
||||
|
||||
const { imageheight, imageWidth } = recal;
|
||||
const { padding, mode } = this.node.attr; //删除padding
|
||||
// const { mode } = this.node.attr;
|
||||
|
||||
const { styleStr } = this.node;
|
||||
const imageHeightStyle =
|
||||
mode === "widthFix" ? "" : `height: ${imageheight}px;`;
|
||||
|
||||
this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`; //删除padding
|
||||
// this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px;`;
|
||||
},
|
||||
// 计算视觉优先的图片宽高
|
||||
wxAutoImageCal(originalWidth, originalHeight) {
|
||||
// 获取图片的原始长宽
|
||||
const windowWidth = this.parseWidth.value;
|
||||
const results = {};
|
||||
|
||||
if (originalWidth < 60 || originalHeight < 60) {
|
||||
const { src } = this.node.attr;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.removeImageUrl(src);
|
||||
this.preview = false;
|
||||
}
|
||||
|
||||
// 判断按照那种方式进行缩放
|
||||
if (originalWidth > windowWidth) {
|
||||
// 在图片width大于手机屏幕width时候
|
||||
results.imageWidth = windowWidth;
|
||||
results.imageheight = windowWidth * (originalHeight / originalWidth);
|
||||
} else {
|
||||
// 否则展示原来的数据
|
||||
results.imageWidth = originalWidth;
|
||||
results.imageheight = originalHeight;
|
||||
}
|
||||
return results;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="tablebox">
|
||||
<rich-text
|
||||
:nodes="nodes"
|
||||
:class="node.classStr"
|
||||
:style="'user-select:' + parseSelect"
|
||||
></rich-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "wxParseTable",
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
inject: ["parseSelect"],
|
||||
data() {
|
||||
return {
|
||||
nodes: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.nodes = this.loadNode([this.node]);
|
||||
},
|
||||
methods: {
|
||||
loadNode(node) {
|
||||
let obj = [];
|
||||
for (let children of node) {
|
||||
if (children.node == "element") {
|
||||
let t = {
|
||||
name: children.tag,
|
||||
attrs: {
|
||||
class: children.classStr,
|
||||
// style: children.styleStr,
|
||||
},
|
||||
children: children.nodes ? this.loadNode(children.nodes) : [],
|
||||
};
|
||||
|
||||
obj.push(t);
|
||||
} else if (children.node == "text") {
|
||||
obj.push({
|
||||
type: "text",
|
||||
text: children.text,
|
||||
});
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import url("../parse.css");
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-PLUS | H5
|
||||
import wxParseTemplate from "./wxParseTemplate0";
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
import wxParseTemplate from "./wxParseTemplate1";
|
||||
// #endif
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
// #ifdef APP-PLUS | H5
|
||||
name: "wxParseTemplate",
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
name: "wxParseTemplate0",
|
||||
// #endif
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset; // TODO currentTarget才有dataset
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
// TODO 遍历获取父节点执行方法
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate2";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate1",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate11";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate10",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<rich-text
|
||||
:nodes="node"
|
||||
:class="node.classStr"
|
||||
:style="'user-select:' + parseSelect"
|
||||
></rich-text>
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<rich-text
|
||||
:nodes="node"
|
||||
:class="node.classStr"
|
||||
:style="'user-select:' + parseSelect"
|
||||
></rich-text>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<rich-text
|
||||
:nodes="node"
|
||||
:class="node.classStr"
|
||||
:style="'user-select:' + parseSelect"
|
||||
></rich-text>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" />
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<rich-text
|
||||
:nodes="node"
|
||||
:class="node.classStr"
|
||||
:style="'user-select:' + parseSelect"
|
||||
></rich-text>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate11",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate3";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate2",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate4";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate3",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate5";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate4",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate6";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate5",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate7";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate6",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate8";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate7",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate9";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate8",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!--判断是否是标签节点-->
|
||||
<block v-if="node.node == 'element'">
|
||||
<!--button类型-->
|
||||
<button
|
||||
v-if="node.tag == 'button'"
|
||||
type="default"
|
||||
size="mini"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<wx-parse-template :node="node" />
|
||||
</button>
|
||||
|
||||
<!--a类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'a'"
|
||||
@click="wxParseATap(node.attr, $event)"
|
||||
:class="node.classStr"
|
||||
:data-href="node.attr.href"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--li类型-->
|
||||
<view
|
||||
v-else-if="node.tag == 'li'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
>
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--table类型-->
|
||||
<wx-parse-table
|
||||
v-else-if="node.tag == 'table'"
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
:node="node"
|
||||
/>
|
||||
|
||||
<!--br类型-->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-else-if="node.tag == 'br'">\n</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<br v-else-if="node.tag == 'br'" />
|
||||
<!-- #endif -->
|
||||
|
||||
<!--video类型-->
|
||||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
|
||||
|
||||
<!--audio类型-->
|
||||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
|
||||
|
||||
<!--img类型-->
|
||||
<wx-parse-img
|
||||
:node="node"
|
||||
v-else-if="node.tag == 'img'"
|
||||
:style="node.styleStr"
|
||||
/>
|
||||
|
||||
<!--其他标签-->
|
||||
<view v-else :class="node.classStr" :style="node.styleStr">
|
||||
<block v-for="(node, index) of node.nodes" :key="index">
|
||||
<wx-parse-template :node="node" />
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!--判断是否是文本节点-->
|
||||
<block v-else-if="node.node == 'text'">{{ node.text }}</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wxParseTemplate from "./wxParseTemplate10";
|
||||
import wxParseImg from "./wxParseImg";
|
||||
import wxParseVideo from "./wxParseVideo";
|
||||
import wxParseAudio from "./wxParseAudio";
|
||||
import wxParseTable from "./wxParseTable";
|
||||
|
||||
export default {
|
||||
name: "wxParseTemplate9",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
wxParseImg,
|
||||
wxParseVideo,
|
||||
wxParseAudio,
|
||||
wxParseTable,
|
||||
},
|
||||
methods: {
|
||||
wxParseATap(attr, e) {
|
||||
const { href } = e.currentTarget.dataset;
|
||||
if (!href) return;
|
||||
let parent = this.$parent;
|
||||
while (!parent.preview || typeof parent.preview !== "function") {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
parent.navigate(href, e, attr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<!--增加video标签支持，并循环添加-->
|
||||
<view :class="node.classStr" :style="node.styleStr">
|
||||
<video
|
||||
:class="node.classStr"
|
||||
:style="node.styleStr"
|
||||
class="video-video"
|
||||
:src="node.attr.src"
|
||||
></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "wxParseVideo",
|
||||
props: {
|
||||
node: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* html2Json 改造来自: https://github.com/Jxck/html2json
|
||||
*
|
||||
*
|
||||
* author: Di (微信小程序开发工程师)
|
||||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
|
||||
* 垂直微信小程序开发交流社区
|
||||
*
|
||||
* github地址: https://github.com/icindy/wxParse
|
||||
*
|
||||
* for: 微信小程序富文本解析
|
||||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
|
||||
*/
|
||||
|
||||
import wxDiscode from "./wxDiscode";
|
||||
import HTMLParser from "./htmlparser";
|
||||
|
||||
function makeMap(str) {
|
||||
const obj = {};
|
||||
const items = str.split(",");
|
||||
for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Block Elements - HTML 5
|
||||
const block = makeMap(
|
||||
"br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video",
|
||||
);
|
||||
|
||||
// Inline Elements - HTML 5
|
||||
const inline = makeMap(
|
||||
"a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var",
|
||||
);
|
||||
|
||||
// Elements that you can, intentionally, leave open
|
||||
// (and which close themselves)
|
||||
const closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
|
||||
|
||||
function removeDOCTYPE(html) {
|
||||
const isDocument = /<body.*>([^]*)<\/body>/.test(html);
|
||||
return isDocument ? RegExp.$1 : html;
|
||||
}
|
||||
|
||||
function trimHtml(html) {
|
||||
return html
|
||||
.replace(/<!--.*?-->/gi, "")
|
||||
.replace(/\/\*.*?\*\//gi, "")
|
||||
.replace(/[ ]+</gi, "<")
|
||||
.replace(/<script[^]*<\/script>/gi, "")
|
||||
.replace(/<style[^]*<\/style>/gi, "");
|
||||
}
|
||||
|
||||
function getScreenInfo() {
|
||||
const screen = {};
|
||||
wx.getSystemInfo({
|
||||
success: (res) => {
|
||||
screen.width = res.windowWidth;
|
||||
screen.height = res.windowHeight;
|
||||
},
|
||||
});
|
||||
return screen;
|
||||
}
|
||||
|
||||
function html2json(html, customHandler, imageProp, host) {
|
||||
// 处理字符串
|
||||
html = removeDOCTYPE(html);
|
||||
html = trimHtml(html);
|
||||
html = wxDiscode.strDiscode(html);
|
||||
// 生成node节点
|
||||
const bufArray = [];
|
||||
const results = {
|
||||
nodes: [],
|
||||
imageUrls: [],
|
||||
};
|
||||
|
||||
const screen = getScreenInfo();
|
||||
function Node(tag) {
|
||||
this.node = "element";
|
||||
this.tag = tag;
|
||||
|
||||
this.$screen = screen;
|
||||
}
|
||||
|
||||
HTMLParser(html, {
|
||||
start(tag, attrs, unary) {
|
||||
// node for this element
|
||||
const node = new Node(tag);
|
||||
|
||||
if (bufArray.length !== 0) {
|
||||
const parent = bufArray[0];
|
||||
if (parent.nodes === undefined) {
|
||||
parent.nodes = [];
|
||||
}
|
||||
}
|
||||
|
||||
if (block[tag]) {
|
||||
node.tagType = "block";
|
||||
} else if (inline[tag]) {
|
||||
node.tagType = "inline";
|
||||
} else if (closeSelf[tag]) {
|
||||
node.tagType = "closeSelf";
|
||||
}
|
||||
|
||||
node.attr = attrs.reduce((pre, attr) => {
|
||||
const { name } = attr;
|
||||
let { value } = attr;
|
||||
if (name === "class") {
|
||||
node.classStr = value;
|
||||
}
|
||||
// has multi attibutes
|
||||
// make it array of attribute
|
||||
if (name === "style") {
|
||||
node.styleStr = value;
|
||||
}
|
||||
if (value.match(/ /)) {
|
||||
value = value.split(" ");
|
||||
}
|
||||
|
||||
// if attr already exists
|
||||
// merge it
|
||||
if (pre[name]) {
|
||||
if (Array.isArray(pre[name])) {
|
||||
// already array, push to last
|
||||
pre[name].push(value);
|
||||
} else {
|
||||
// single value, make it array
|
||||
pre[name] = [pre[name], value];
|
||||
}
|
||||
} else {
|
||||
// not exist, put it
|
||||
pre[name] = value;
|
||||
}
|
||||
|
||||
return pre;
|
||||
}, {});
|
||||
|
||||
// 优化样式相关属性
|
||||
if (node.classStr) {
|
||||
node.classStr += ` ${node.tag}`;
|
||||
} else {
|
||||
node.classStr = node.tag;
|
||||
}
|
||||
if (node.tagType === "inline") {
|
||||
node.classStr += " inline";
|
||||
}
|
||||
|
||||
// 对img添加额外数据
|
||||
if (node.tag === "img") {
|
||||
let imgUrl = node.attr.src;
|
||||
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
|
||||
Object.assign(node.attr, imageProp, {
|
||||
src: imgUrl || "",
|
||||
});
|
||||
if (imgUrl) {
|
||||
results.imageUrls.push(imgUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理a标签属性
|
||||
if (node.tag === "a") {
|
||||
node.attr.href = node.attr.href || "";
|
||||
}
|
||||
|
||||
// 处理font标签样式属性
|
||||
if (node.tag === "font") {
|
||||
const fontSize = [
|
||||
"x-small",
|
||||
"small",
|
||||
"medium",
|
||||
"large",
|
||||
"x-large",
|
||||
"xx-large",
|
||||
"-webkit-xxx-large",
|
||||
];
|
||||
const styleAttrs = {
|
||||
color: "color",
|
||||
face: "font-family",
|
||||
size: "font-size",
|
||||
};
|
||||
if (!node.styleStr) node.styleStr = "";
|
||||
Object.keys(styleAttrs).forEach((key) => {
|
||||
if (node.attr[key]) {
|
||||
const value =
|
||||
key === "size" ? fontSize[node.attr[key] - 1] : node.attr[key];
|
||||
node.styleStr += `${styleAttrs[key]}: ${value};`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 临时记录source资源
|
||||
if (node.tag === "source") {
|
||||
results.source = node.attr.src;
|
||||
}
|
||||
|
||||
if (customHandler.start) {
|
||||
customHandler.start(node, results);
|
||||
}
|
||||
|
||||
if (unary) {
|
||||
// if this tag doesn't have end tag
|
||||
// like <img src="hoge.png"/>
|
||||
// add to parents
|
||||
const parent = bufArray[0] || results;
|
||||
if (parent.nodes === undefined) {
|
||||
parent.nodes = [];
|
||||
}
|
||||
parent.nodes.push(node);
|
||||
} else {
|
||||
bufArray.unshift(node);
|
||||
}
|
||||
},
|
||||
end(tag) {
|
||||
// merge into parent tag
|
||||
const node = bufArray.shift();
|
||||
if (node.tag !== tag) {
|
||||
console.error("invalid state: mismatch end tag");
|
||||
}
|
||||
|
||||
// 当有缓存source资源时于于video补上src资源
|
||||
if (node.tag === "video" && results.source) {
|
||||
node.attr.src = results.source;
|
||||
delete results.source;
|
||||
}
|
||||
|
||||
if (customHandler.end) {
|
||||
customHandler.end(node, results);
|
||||
}
|
||||
|
||||
if (bufArray.length === 0) {
|
||||
results.nodes.push(node);
|
||||
} else {
|
||||
const parent = bufArray[0];
|
||||
if (!parent.nodes) {
|
||||
parent.nodes = [];
|
||||
}
|
||||
parent.nodes.push(node);
|
||||
}
|
||||
},
|
||||
chars(text) {
|
||||
if (!text.trim()) return;
|
||||
|
||||
const node = {
|
||||
node: "text",
|
||||
text,
|
||||
};
|
||||
|
||||
if (customHandler.chars) {
|
||||
customHandler.chars(node, results);
|
||||
}
|
||||
|
||||
if (bufArray.length === 0) {
|
||||
results.nodes.push(node);
|
||||
} else {
|
||||
const parent = bufArray[0];
|
||||
if (parent.nodes === undefined) {
|
||||
parent.nodes = [];
|
||||
}
|
||||
parent.nodes.push(node);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
export default html2json;
|
||||
@@ -0,0 +1,170 @@
|
||||
/**
|
||||
*
|
||||
* htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
|
||||
*
|
||||
* author: Di (微信小程序开发工程师)
|
||||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
|
||||
* 垂直微信小程序开发交流社区
|
||||
*
|
||||
* github地址: https://github.com/icindy/wxParse
|
||||
*
|
||||
* for: 微信小程序富文本解析
|
||||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
|
||||
*/
|
||||
// Regular Expressions for parsing tags and attributes
|
||||
|
||||
const startTag =
|
||||
/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
|
||||
const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
|
||||
const attr =
|
||||
/([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
|
||||
|
||||
function makeMap(str) {
|
||||
const obj = {};
|
||||
const items = str.split(",");
|
||||
for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Empty Elements - HTML 5
|
||||
const empty = makeMap(
|
||||
"area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr",
|
||||
);
|
||||
|
||||
// Block Elements - HTML 5
|
||||
const block = makeMap(
|
||||
"address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video",
|
||||
);
|
||||
|
||||
// Inline Elements - HTML 5
|
||||
const inline = makeMap(
|
||||
"a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var",
|
||||
);
|
||||
|
||||
// Elements that you can, intentionally, leave open
|
||||
// (and which close themselves)
|
||||
const closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
|
||||
|
||||
// Attributes that have their values filled in disabled="disabled"
|
||||
const fillAttrs = makeMap(
|
||||
"checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected",
|
||||
);
|
||||
|
||||
function HTMLParser(html, handler) {
|
||||
let index;
|
||||
let chars;
|
||||
let match;
|
||||
let last = html;
|
||||
const stack = [];
|
||||
|
||||
stack.last = () => stack[stack.length - 1];
|
||||
|
||||
function parseEndTag(tag, tagName) {
|
||||
// If no tag name is provided, clean shop
|
||||
let pos;
|
||||
if (!tagName) {
|
||||
pos = 0;
|
||||
} else {
|
||||
// Find the closest opened tag of the same type
|
||||
tagName = tagName.toLowerCase();
|
||||
for (pos = stack.length - 1; pos >= 0; pos -= 1) {
|
||||
if (stack[pos] === tagName) break;
|
||||
}
|
||||
}
|
||||
if (pos >= 0) {
|
||||
// Close all the open elements, up the stack
|
||||
for (let i = stack.length - 1; i >= pos; i -= 1) {
|
||||
if (handler.end) handler.end(stack[i]);
|
||||
}
|
||||
|
||||
// Remove the open elements from the stack
|
||||
stack.length = pos;
|
||||
}
|
||||
}
|
||||
|
||||
function parseStartTag(tag, tagName, rest, unary) {
|
||||
tagName = tagName.toLowerCase();
|
||||
|
||||
if (block[tagName]) {
|
||||
while (stack.last() && inline[stack.last()]) {
|
||||
parseEndTag("", stack.last());
|
||||
}
|
||||
}
|
||||
|
||||
if (closeSelf[tagName] && stack.last() === tagName) {
|
||||
parseEndTag("", tagName);
|
||||
}
|
||||
|
||||
unary = empty[tagName] || !!unary;
|
||||
|
||||
if (!unary) stack.push(tagName);
|
||||
|
||||
if (handler.start) {
|
||||
const attrs = [];
|
||||
|
||||
rest.replace(attr, function genAttr(matches, name) {
|
||||
const value =
|
||||
arguments[2] ||
|
||||
arguments[3] ||
|
||||
arguments[4] ||
|
||||
(fillAttrs[name] ? name : "");
|
||||
|
||||
attrs.push({
|
||||
name,
|
||||
value,
|
||||
escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), // "
|
||||
});
|
||||
});
|
||||
|
||||
if (handler.start) {
|
||||
handler.start(tagName, attrs, unary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
while (html) {
|
||||
chars = true;
|
||||
|
||||
if (html.indexOf("</") === 0) {
|
||||
match = html.match(endTag);
|
||||
|
||||
if (match) {
|
||||
html = html.substring(match[0].length);
|
||||
match[0].replace(endTag, parseEndTag);
|
||||
chars = false;
|
||||
}
|
||||
|
||||
// start tag
|
||||
} else if (html.indexOf("<") === 0) {
|
||||
match = html.match(startTag);
|
||||
|
||||
if (match) {
|
||||
html = html.substring(match[0].length);
|
||||
match[0].replace(startTag, parseStartTag);
|
||||
chars = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (chars) {
|
||||
index = html.indexOf("<");
|
||||
let text = "";
|
||||
while (index === 0) {
|
||||
text += "<";
|
||||
html = html.substring(1);
|
||||
index = html.indexOf("<");
|
||||
}
|
||||
text += index < 0 ? html : html.substring(0, index);
|
||||
html = index < 0 ? "" : html.substring(index);
|
||||
|
||||
if (handler.chars) handler.chars(text);
|
||||
}
|
||||
|
||||
if (html === last) throw new Error(`Parse Error: ${html}`);
|
||||
last = html;
|
||||
}
|
||||
|
||||
// Clean up any remaining tags
|
||||
parseEndTag();
|
||||
}
|
||||
|
||||
export default HTMLParser;
|
||||
@@ -0,0 +1,227 @@
|
||||
// HTML 支持的数学符号
|
||||
function strNumDiscode(str) {
|
||||
str = str.replace(/∀|∀|∀/g, "∀");
|
||||
str = str.replace(/∂|∂|∂/g, "∂");
|
||||
str = str.replace(/∃|∃|∃/g, "∃");
|
||||
str = str.replace(/∅|∅|∅/g, "∅");
|
||||
str = str.replace(/∇|∇|∇/g, "∇");
|
||||
str = str.replace(/∈|∈|∈/g, "∈");
|
||||
str = str.replace(/∉|∉|∉/g, "∉");
|
||||
str = str.replace(/∋|∋|∋/g, "∋");
|
||||
str = str.replace(/∏|∏|∏/g, "∏");
|
||||
str = str.replace(/∑|∑|∑/g, "∑");
|
||||
str = str.replace(/−|−|−/g, "−");
|
||||
str = str.replace(/∗|∗|∗/g, "∗");
|
||||
str = str.replace(/√|√|√/g, "√");
|
||||
str = str.replace(/∝|∝|∝/g, "∝");
|
||||
str = str.replace(/∞|∞|∞/g, "∞");
|
||||
str = str.replace(/∠|∠|∠/g, "∠");
|
||||
str = str.replace(/∧|∧|∧/g, "∧");
|
||||
str = str.replace(/∨|∨|∨/g, "∨");
|
||||
str = str.replace(/∩|∩|∩/g, "∩");
|
||||
str = str.replace(/∪|∪|∪/g, "∪");
|
||||
str = str.replace(/∫|∫|∫/g, "∫");
|
||||
str = str.replace(/∴|∴|∴/g, "∴");
|
||||
str = str.replace(/∼|∼|∼/g, "∼");
|
||||
str = str.replace(/≅|≅|≅/g, "≅");
|
||||
str = str.replace(/≈|≈|≈/g, "≈");
|
||||
str = str.replace(/≠|≠|≠/g, "≠");
|
||||
str = str.replace(/≤|≤|≤/g, "≤");
|
||||
str = str.replace(/≥|≥|≥/g, "≥");
|
||||
str = str.replace(/⊂|⊂|⊂/g, "⊂");
|
||||
str = str.replace(/⊃|⊃|⊃/g, "⊃");
|
||||
str = str.replace(/⊄|⊄|⊄/g, "⊄");
|
||||
str = str.replace(/⊆|⊆|⊆/g, "⊆");
|
||||
str = str.replace(/⊇|⊇|⊇/g, "⊇");
|
||||
str = str.replace(/⊕|⊕|⊕/g, "⊕");
|
||||
str = str.replace(/⊗|⊗|⊗/g, "⊗");
|
||||
str = str.replace(/⊥|⊥|⊥/g, "⊥");
|
||||
str = str.replace(/⋅|⋅|⋅/g, "⋅");
|
||||
return str;
|
||||
}
|
||||
|
||||
// HTML 支持的希腊字母
|
||||
function strGreeceDiscode(str) {
|
||||
str = str.replace(/Α|Α|Α/g, "Α");
|
||||
str = str.replace(/Β|Β|Β/g, "Β");
|
||||
str = str.replace(/Γ|Γ|Γ/g, "Γ");
|
||||
str = str.replace(/Δ|Δ|Δ/g, "Δ");
|
||||
str = str.replace(/Ε|Ε|Ε/g, "Ε");
|
||||
str = str.replace(/Ζ|Ζ|Ζ/g, "Ζ");
|
||||
str = str.replace(/Η|Η|Η/g, "Η");
|
||||
str = str.replace(/Θ|Θ|Θ/g, "Θ");
|
||||
str = str.replace(/Ι|Ι|Ι/g, "Ι");
|
||||
str = str.replace(/Κ|Κ|Κ/g, "Κ");
|
||||
str = str.replace(/Λ|Λ|Λ/g, "Λ");
|
||||
str = str.replace(/Μ|Μ|Μ/g, "Μ");
|
||||
str = str.replace(/Ν|Ν|Ν/g, "Ν");
|
||||
str = str.replace(/Ξ|Ν|Ν/g, "Ν");
|
||||
str = str.replace(/Ο|Ο|Ο/g, "Ο");
|
||||
str = str.replace(/Π|Π|Π/g, "Π");
|
||||
str = str.replace(/Ρ|Ρ|Ρ/g, "Ρ");
|
||||
str = str.replace(/Σ|Σ|Σ/g, "Σ");
|
||||
str = str.replace(/Τ|Τ|Τ/g, "Τ");
|
||||
str = str.replace(/Υ|Υ|Υ/g, "Υ");
|
||||
str = str.replace(/Φ|Φ|Φ/g, "Φ");
|
||||
str = str.replace(/Χ|Χ|Χ/g, "Χ");
|
||||
str = str.replace(/Ψ|Ψ|Ψ/g, "Ψ");
|
||||
str = str.replace(/Ω|Ω|Ω/g, "Ω");
|
||||
|
||||
str = str.replace(/α|α|α/g, "α");
|
||||
str = str.replace(/β|β|β/g, "β");
|
||||
str = str.replace(/γ|γ|γ/g, "γ");
|
||||
str = str.replace(/δ|δ|δ/g, "δ");
|
||||
str = str.replace(/ε|ε|ε/g, "ε");
|
||||
str = str.replace(/ζ|ζ|ζ/g, "ζ");
|
||||
str = str.replace(/η|η|η/g, "η");
|
||||
str = str.replace(/θ|θ|θ/g, "θ");
|
||||
str = str.replace(/ι|ι|ι/g, "ι");
|
||||
str = str.replace(/κ|κ|κ/g, "κ");
|
||||
str = str.replace(/λ|λ|λ/g, "λ");
|
||||
str = str.replace(/μ|μ|μ/g, "μ");
|
||||
str = str.replace(/ν|ν|ν/g, "ν");
|
||||
str = str.replace(/ξ|ξ|ξ/g, "ξ");
|
||||
str = str.replace(/ο|ο|ο/g, "ο");
|
||||
str = str.replace(/π|π|π/g, "π");
|
||||
str = str.replace(/ρ|ρ|ρ/g, "ρ");
|
||||
str = str.replace(/ς|ς|ς/g, "ς");
|
||||
str = str.replace(/σ|σ|σ/g, "σ");
|
||||
str = str.replace(/τ|τ|τ/g, "τ");
|
||||
str = str.replace(/υ|υ|υ/g, "υ");
|
||||
str = str.replace(/φ|φ|φ/g, "φ");
|
||||
str = str.replace(/χ|χ|χ/g, "χ");
|
||||
str = str.replace(/ψ|ψ|ψ/g, "ψ");
|
||||
str = str.replace(/ω|ω|ω/g, "ω");
|
||||
str = str.replace(/ϑ|ϑ|ϑ/g, "ϑ");
|
||||
str = str.replace(/ϒ|ϒ|ϒ/g, "ϒ");
|
||||
str = str.replace(/ϖ|ϖ|ϖ/g, "ϖ");
|
||||
str = str.replace(/·|·|·/g, "·");
|
||||
return str;
|
||||
}
|
||||
|
||||
function strcharacterDiscode(str) {
|
||||
// 加入常用解析
|
||||
|
||||
// str = str.replace(/ | | /g, " ");
|
||||
// str = str.replace(/ | | /g, ' ');
|
||||
// str = str.replace(/　|　/g, '<span class=\'spaceshow\'> </span>');
|
||||
// str = str.replace(/ | | /g, ' ');
|
||||
// str = str.replace(/"|"|"/g, "\"");
|
||||
// str = str.replace(/'|'|'/g, "'");
|
||||
// str = str.replace(/´|´|´/g, "´");
|
||||
// str = str.replace(/×|×|×/g, "×");
|
||||
// str = str.replace(/÷|÷|÷/g, "÷");
|
||||
// str = str.replace(/&|&|&/g, '&');
|
||||
// str = str.replace(/<|<|</g, '<');
|
||||
// str = str.replace(/>|>|>/g, '>');
|
||||
|
||||
str = str.replace(/ | | /g, "<span class='spaceshow'> </span>");
|
||||
str = str.replace(
|
||||
/ | | /g,
|
||||
"<span class='spaceshow'> </span>",
|
||||
);
|
||||
str = str.replace(/　|　/g, "<span class='spaceshow'> </span>");
|
||||
str = str.replace(
|
||||
/ | | /g,
|
||||
"<span class='spaceshow'> </span>",
|
||||
);
|
||||
str = str.replace(/"|"|"/g, '"');
|
||||
str = str.replace(/"|'|'/g, "'");
|
||||
str = str.replace(/´|´|´/g, "´");
|
||||
str = str.replace(/×|×|×/g, "×");
|
||||
str = str.replace(/÷|÷|÷/g, "÷");
|
||||
str = str.replace(/&|&|&/g, "&");
|
||||
str = str.replace(/<|<|</g, "<");
|
||||
str = str.replace(/>|>|>/g, ">");
|
||||
return str;
|
||||
}
|
||||
|
||||
// HTML 支持的其他实体
|
||||
function strOtherDiscode(str) {
|
||||
str = str.replace(/Œ|Œ|Œ/g, "Œ");
|
||||
str = str.replace(/œ|œ|œ/g, "œ");
|
||||
str = str.replace(/Š|Š|Š/g, "Š");
|
||||
str = str.replace(/š|š|š/g, "š");
|
||||
str = str.replace(/Ÿ|Ÿ|Ÿ/g, "Ÿ");
|
||||
str = str.replace(/ƒ|ƒ|ƒ/g, "ƒ");
|
||||
str = str.replace(/ˆ|ˆ|ˆ/g, "ˆ");
|
||||
str = str.replace(/˜|˜|˜/g, "˜");
|
||||
str = str.replace(
|
||||
/ |$#8201;| /g,
|
||||
"<span class='spaceshow'> </span>",
|
||||
);
|
||||
str = str.replace(
|
||||
/‌|‌|‌/g,
|
||||
"<span class='spaceshow'></span>",
|
||||
);
|
||||
str = str.replace(
|
||||
/‍|$#8205;|‍/g,
|
||||
"<span class='spaceshow'></span>",
|
||||
);
|
||||
str = str.replace(
|
||||
/‎|$#8206;|‎/g,
|
||||
"<span class='spaceshow'></span>",
|
||||
);
|
||||
str = str.replace(
|
||||
/‏|‏|‏/g,
|
||||
"<span class='spaceshow'></span>",
|
||||
);
|
||||
str = str.replace(/–|–|–/g, "–");
|
||||
str = str.replace(/—|—|—/g, "—");
|
||||
str = str.replace(/‘|‘|‘/g, "‘");
|
||||
str = str.replace(/’|’|’/g, "’");
|
||||
str = str.replace(/‚|‚|‚/g, "‚");
|
||||
str = str.replace(/“|“|“/g, "“");
|
||||
str = str.replace(/”|”|”/g, "”");
|
||||
str = str.replace(/„|„|„/g, "„");
|
||||
str = str.replace(/†|†|†/g, "†");
|
||||
str = str.replace(/‡|‡|‡/g, "‡");
|
||||
str = str.replace(/•|•|•/g, "•");
|
||||
str = str.replace(/…|…|…/g, "…");
|
||||
str = str.replace(/‰|‰|‰/g, "‰");
|
||||
str = str.replace(/′|′|′/g, "′");
|
||||
str = str.replace(/″|″|″/g, "″");
|
||||
str = str.replace(/‹|‹|‹/g, "‹");
|
||||
str = str.replace(/›|›|›/g, "›");
|
||||
str = str.replace(/‾|‾|‾/g, "‾");
|
||||
str = str.replace(/€|€|€/g, "€");
|
||||
str = str.replace(/™|™|™/g, "™");
|
||||
str = str.replace(/←|←|←/g, "←");
|
||||
str = str.replace(/↑|↑|↑/g, "↑");
|
||||
str = str.replace(/→|→|→/g, "→");
|
||||
str = str.replace(/↓|↓|↓/g, "↓");
|
||||
str = str.replace(/↔|↔|↔/g, "↔");
|
||||
str = str.replace(/↵|↵|↵/g, "↵");
|
||||
str = str.replace(/⌈|⌈|⌈/g, "⌈");
|
||||
str = str.replace(/⌉|⌉|⌉/g, "⌉");
|
||||
str = str.replace(/⌊|⌊|⌊/g, "⌊");
|
||||
str = str.replace(/⌋|⌋|⌋/g, "⌋");
|
||||
str = str.replace(/◊|◊|◊/g, "◊");
|
||||
str = str.replace(/♠|♠|♠/g, "♠");
|
||||
str = str.replace(/♣|♣|♣/g, "♣");
|
||||
str = str.replace(/♥|♥|♥/g, "♥");
|
||||
str = str.replace(/♦|♦|♦/g, "♦");
|
||||
return str;
|
||||
}
|
||||
|
||||
function strDiscode(str) {
|
||||
str = strNumDiscode(str);
|
||||
str = strGreeceDiscode(str);
|
||||
str = strcharacterDiscode(str);
|
||||
str = strOtherDiscode(str);
|
||||
return str;
|
||||
}
|
||||
|
||||
function urlToHttpUrl(url, domain) {
|
||||
if (/^\/\//.test(url)) {
|
||||
return `https:${url}`;
|
||||
} else if (/^\//.test(url)) {
|
||||
return `https://${domain}${url}`;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
export default {
|
||||
strDiscode,
|
||||
urlToHttpUrl,
|
||||
};
|
||||
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* author: Di (微信小程序开发工程师)
|
||||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
|
||||
* 垂直微信小程序开发交流社区
|
||||
*
|
||||
* github地址: https://github.com/icindy/wxParse
|
||||
*
|
||||
* for: 微信小程序富文本解析
|
||||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
|
||||
*/
|
||||
/**
|
||||
* 请在全局下引入该文件，@import '/static/wxParse.css';
|
||||
*/
|
||||
.wxParse {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
font-family: Helvetica, "PingFangSC", "Microsoft Yahei", "微软雅黑", Arial,
|
||||
sans-serif;
|
||||
color: #0c1c33;
|
||||
line-height: 1.5;
|
||||
font-size: 1em;
|
||||
text-align: justify; /* //左右两端对齐 */
|
||||
}
|
||||
.wxParse view,
|
||||
.wxParse uni-view {
|
||||
word-break: break-word;
|
||||
}
|
||||
.wxParse .p {
|
||||
padding-bottom: 0.5em;
|
||||
clear: both;
|
||||
/* letter-spacing: 0;//字间距 */
|
||||
}
|
||||
.wxParse .inline {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wxParse .div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wxParse .h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1.2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.wxParse .h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
.wxParse .h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.wxParse .h4 {
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
.wxParse .h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
.wxParse .h6 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
.wxParse .h1,
|
||||
.wxParse .h2,
|
||||
.wxParse .h3,
|
||||
.wxParse .h4,
|
||||
.wxParse .h5,
|
||||
.wxParse .h6,
|
||||
.wxParse .b,
|
||||
.wxParse .strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.wxParse .i,
|
||||
.wxParse .cite,
|
||||
.wxParse .em,
|
||||
.wxParse .var,
|
||||
.wxParse .address {
|
||||
font-style: italic;
|
||||
}
|
||||
.wxParse .spaceshow {
|
||||
white-space: pre;
|
||||
}
|
||||
.wxParse .pre,
|
||||
.wxParse .tt,
|
||||
.wxParse .code,
|
||||
.wxParse .kbd,
|
||||
.wxParse .samp {
|
||||
font-family: monospace;
|
||||
}
|
||||
.wxParse .pre {
|
||||
overflow: auto;
|
||||
background: #f5f5f5;
|
||||
padding: 16upx;
|
||||
white-space: pre;
|
||||
margin: 1em 0upx;
|
||||
font-size: 24upx;
|
||||
}
|
||||
.wxParse .code {
|
||||
overflow: auto;
|
||||
padding: 16upx;
|
||||
white-space: pre;
|
||||
margin: 1em 0upx;
|
||||
background: #f5f5f5;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.wxParse .big {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
.wxParse .small,
|
||||
.wxParse .sub,
|
||||
.wxParse .sup {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
.wxParse .sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
.wxParse .sup {
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.wxParse .s,
|
||||
.wxParse .strike,
|
||||
.wxParse .del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.wxParse .strong,
|
||||
.wxParse .text,
|
||||
.wxParse .span,
|
||||
.wxParse .s {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wxParse .a {
|
||||
color: deepskyblue;
|
||||
}
|
||||
|
||||
.wxParse .video {
|
||||
text-align: center;
|
||||
margin: 22upx 0;
|
||||
}
|
||||
|
||||
.wxParse .video-video {
|
||||
width: 100%;
|
||||
}
|
||||
.wxParse .uni-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
.wxParse .img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0em; /* //与p标签底部padding同时修改 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wxParse .blockquote {
|
||||
margin: 10upx 0;
|
||||
padding: 22upx 0 22upx 22upx;
|
||||
font-family: Courier, Calibri, "宋体";
|
||||
background: #f5f5f5;
|
||||
border-left: 6upx solid #dbdbdb;
|
||||
}
|
||||
.wxParse .blockquote .p {
|
||||
margin: 0;
|
||||
}
|
||||
.wxParse .ul,
|
||||
.wxParse .ol {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
.wxParse .ol {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.wxParse .ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.wxParse .ol > weixin-parse-template,
|
||||
.wxParse .ul > weixin-parse-template {
|
||||
display: list-item;
|
||||
align-items: baseline;
|
||||
text-align: match-parent;
|
||||
}
|
||||
|
||||
.wxParse .ol > .li,
|
||||
.wxParse .ul > .li {
|
||||
display: list-item;
|
||||
align-items: baseline;
|
||||
text-align: match-parent;
|
||||
}
|
||||
.wxParse .ul .ul,
|
||||
.wxParse .ol .ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
.wxParse .ol .ol .ul,
|
||||
.wxParse .ol .ul .ul,
|
||||
.wxParse .ul .ol .ul,
|
||||
.wxParse .ul .ul .ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.wxParse .u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.wxParse .hide {
|
||||
display: none;
|
||||
}
|
||||
.wxParse .del {
|
||||
display: inline;
|
||||
}
|
||||
.wxParse .figure {
|
||||
overflow: hidden;
|
||||
}
|
||||
.wxParse .tablebox {
|
||||
overflow: auto;
|
||||
background-color: #f5f5f5;
|
||||
background: #f5f5f5;
|
||||
font-size: 13px;
|
||||
padding: 8px;
|
||||
}
|
||||
.wxParse .table .table,
|
||||
.wxParse .table {
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
/* 内边框 */
|
||||
/* width: 100%; */
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.wxParse .tbody {
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
/* 内边框 */
|
||||
border: 1px solid #dadada;
|
||||
}
|
||||
.wxParse .table .thead,
|
||||
.wxParse .table .tfoot,
|
||||
.wxParse .table .th {
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
background: #ececec;
|
||||
font-weight: 40;
|
||||
}
|
||||
.wxParse .table .tr {
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
/* border: 2px solid #F0AD4E; */
|
||||
overflow: auto;
|
||||
}
|
||||
.wxParse .table .th,
|
||||
.wxParse .table .td {
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
border: 2upx solid #dadada;
|
||||
overflow: auto;
|
||||
}
|
||||
.wxParse .audio,
|
||||
.wxParse .uni-audio-default {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
<!--**
|
||||
* forked from：https://github.com/F-loat/mpvue-wxParse
|
||||
*
|
||||
* github地址: https://github.com/dcloudio/uParse
|
||||
*
|
||||
* for: uni-app框架下 富文本解析
|
||||
*
|
||||
* 优化 by gaoyia@qq.com https://github.com/gaoyia/parse
|
||||
*/-->
|
||||
|
||||
<template>
|
||||
<!--基础元素-->
|
||||
<div class="wxParse" :class="className" :style="'user-select:' + userSelect">
|
||||
<block v-for="(node, index) of nodes" :key="index" v-if="!loading">
|
||||
<wxParseTemplate :node="node" />
|
||||
</block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HtmlToJson from "./libs/html2json";
|
||||
import wxParseTemplate from "./components/wxParseTemplate0";
|
||||
|
||||
export default {
|
||||
name: "wxParse",
|
||||
props: {
|
||||
// user-select:none;
|
||||
userSelect: {
|
||||
type: String,
|
||||
default: "text", //none |text| all | element
|
||||
},
|
||||
imgOptions: {
|
||||
type: [Object, Boolean],
|
||||
default: function () {
|
||||
return {
|
||||
loop: false,
|
||||
indicator: "number",
|
||||
longPressActions: false,
|
||||
// longPressActions: {
|
||||
// itemList: ['发送给朋友', '保存图片', '收藏'],
|
||||
// success: function (res) {
|
||||
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
||||
// },
|
||||
// fail: function (res) {
|
||||
// console.log(res.errMsg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
};
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
noData: {
|
||||
type: String,
|
||||
default: '<div style="color: red;">数据不能为空</div>',
|
||||
},
|
||||
startHandler: {
|
||||
type: Function,
|
||||
default() {
|
||||
return (node) => {
|
||||
node.attr.class = null;
|
||||
node.attr.style = null;
|
||||
};
|
||||
},
|
||||
},
|
||||
endHandler: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
charsHandler: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
imageProp: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
mode: "aspectFit",
|
||||
padding: 0,
|
||||
lazyLoad: false,
|
||||
domain: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
wxParseTemplate,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodes: {},
|
||||
imageUrls: [],
|
||||
wxParseWidth: {
|
||||
value: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.setHtml();
|
||||
},
|
||||
methods: {
|
||||
setHtml() {
|
||||
this.getWidth().then((data) => {
|
||||
this.wxParseWidth.value = data;
|
||||
});
|
||||
let {
|
||||
content,
|
||||
noData,
|
||||
imageProp,
|
||||
startHandler,
|
||||
endHandler,
|
||||
charsHandler,
|
||||
} = this;
|
||||
let parseData = content || noData;
|
||||
let customHandler = {
|
||||
start: startHandler,
|
||||
end: endHandler,
|
||||
chars: charsHandler,
|
||||
};
|
||||
let results = HtmlToJson(parseData, customHandler, imageProp, this);
|
||||
|
||||
this.imageUrls = results.imageUrls;
|
||||
// this.nodes = results.nodes;
|
||||
|
||||
this.nodes = [];
|
||||
results.nodes.forEach((item) => {
|
||||
setTimeout(() => {
|
||||
this.nodes.push(item);
|
||||
}, 0);
|
||||
});
|
||||
},
|
||||
getWidth() {
|
||||
return new Promise((res, rej) => {
|
||||
// #ifndef MP-ALIPAY || MP-BAIDU
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(".wxParse")
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
scrollOffset: true,
|
||||
},
|
||||
(data) => {
|
||||
res(data.width);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
const query = swan.createSelectorQuery();
|
||||
query.select(".wxParse").boundingClientRect();
|
||||
query.exec((obj) => {
|
||||
const rect = obj[0];
|
||||
if (rect) {
|
||||
res(rect.width);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.createSelectorQuery()
|
||||
.select(".wxParse")
|
||||
.boundingClientRect()
|
||||
.exec((ret) => {
|
||||
res(ret[0].width);
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
navigate(href, $event, attr) {
|
||||
console.log(href, attr);
|
||||
this.$emit("navigate", href, $event);
|
||||
},
|
||||
preview(src, $event) {
|
||||
// if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {
|
||||
// } else {
|
||||
// uni.previewImage({
|
||||
// current: src,
|
||||
// urls: this.imageUrls,
|
||||
// loop: this.imgOptions.loop,
|
||||
// indicator: this.imgOptions.indicator,
|
||||
// longPressActions: this.imgOptions.longPressActions
|
||||
// });
|
||||
// }
|
||||
// this.$emit('preview', src, $event);
|
||||
},
|
||||
removeImageUrl(src) {
|
||||
const { imageUrls } = this;
|
||||
imageUrls.splice(imageUrls.indexOf(src), 1);
|
||||
},
|
||||
},
|
||||
// 父组件中提供
|
||||
provide() {
|
||||
return {
|
||||
parseWidth: this.wxParseWidth,
|
||||
parseSelect: this.userSelect,
|
||||
// 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
content() {
|
||||
this.setHtml();
|
||||
},
|
||||
// content: {
|
||||
// handler: function(newVal, oldVal) {
|
||||
// if (newVal !== oldVal) {
|
||||
//
|
||||
// }
|
||||
// },
|
||||
// deep: true
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
export const ChatingFooterActionTypes = {
|
||||
Album: "Album",
|
||||
};
|
||||
|
||||
export const ContactMenuTypes = {
|
||||
NewFriend: "NewFriend",
|
||||
NewGroup: "NewGroup",
|
||||
MyFriend: "MyFriend",
|
||||
MyGroup: "MyGroup",
|
||||
};
|
||||
|
||||
export const GroupMemberListTypes = {
|
||||
Preview: "Preview",
|
||||
Transfer: "Transfer",
|
||||
Kickout: "Kickout",
|
||||
};
|
||||
|
||||
export const ContactChooseTypes = {
|
||||
Invite: "Invite",
|
||||
GetList: "GetList",
|
||||
};
|
||||
|
||||
export const UpdateMessageTypes = {
|
||||
Overall: "Overall",
|
||||
KeyWords: "KeyWords",
|
||||
};
|
||||
|
||||
export const SmsUserFor = {
|
||||
Register: 1,
|
||||
Reset: 2,
|
||||
Login: 3,
|
||||
};
|
||||
|
||||
export const CustomMessageStatus = {
|
||||
Success: "success",
|
||||
Cancel: "cancel",
|
||||
Canceled: "canceled",
|
||||
Refuse: "refuse",
|
||||
Refused: "refused",
|
||||
Timeout: "timeout",
|
||||
AccessByOther: "accessByOther",
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export const PageEvents = {
|
||||
GlobalToast: "GlobalToast",
|
||||
ScrollToBottom: "ScrollToBottom",
|
||||
RtcCall: "RtcCall"
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import { MessageType } from "openim-uniapp-polyfill";
|
||||
|
||||
export const CustomType = {
|
||||
VideoCall: "c100",
|
||||
VoiceCall: "c101",
|
||||
Call: 901,
|
||||
MassMsg: 903,
|
||||
};
|
||||
|
||||
export const Platform = {
|
||||
1: 'iOS',
|
||||
2: 'Android',
|
||||
3: 'PC',
|
||||
4: 'PC',
|
||||
5: 'Web'
|
||||
};
|
||||
|
||||
export const noticeMessageTypes = [
|
||||
MessageType.RevokeMessage,
|
||||
MessageType.FriendAdded,
|
||||
MessageType.GroupCreated,
|
||||
MessageType.GroupInfoUpdated,
|
||||
MessageType.MemberQuit,
|
||||
MessageType.GroupOwnerTransferred,
|
||||
MessageType.MemberKicked,
|
||||
MessageType.MemberInvited,
|
||||
MessageType.MemberEnter,
|
||||
MessageType.GroupDismissed,
|
||||
MessageType.GroupMemberMuted,
|
||||
MessageType.GroupMuted,
|
||||
MessageType.GroupCancelMuted,
|
||||
MessageType.GroupMemberCancelMuted,
|
||||
MessageType.GroupNameUpdated,
|
||||
MessageType.BurnMessageChange,
|
||||
];
|
||||
|
||||
export const GroupSystemMessageTypes = [
|
||||
MessageType.GroupCreated,
|
||||
MessageType.GroupInfoUpdated,
|
||||
MessageType.MemberQuit,
|
||||
MessageType.GroupOwnerTransferred,
|
||||
MessageType.MemberKicked,
|
||||
MessageType.MemberInvited,
|
||||
MessageType.MemberEnter,
|
||||
MessageType.GroupDismissed,
|
||||
MessageType.GroupMemberMuted,
|
||||
MessageType.GroupMuted,
|
||||
MessageType.GroupCancelMuted,
|
||||
MessageType.GroupMemberCancelMuted,
|
||||
MessageType.GroupNameUpdated
|
||||
];
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from "./im";
|
||||
export * from "./comp";
|
||||
export * from "./event";
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport =
|
||||
"CSS" in window &&
|
||||
typeof CSS.supports === "function" &&
|
||||
(CSS.supports("top: env(a)") || CSS.supports("top: constant(a)"));
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ", viewport-fit=cover" : "") +
|
||||
'" />',
|
||||
);
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
import App from "./App";
|
||||
import Vue from "vue";
|
||||
|
||||
// vuex
|
||||
import store from "./store";
|
||||
|
||||
// 引入全局uView
|
||||
import uView from "@/uni_modules/uview-ui";
|
||||
Vue.use(uView);
|
||||
|
||||
Vue.prototype.$store = store;
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
App.mpType = "app";
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App,
|
||||
});
|
||||
|
||||
// 引入请求封装
|
||||
require("./util/request/index")(app);
|
||||
|
||||
app.$mount();
|
||||
@@ -0,0 +1,178 @@
|
||||
{
|
||||
"name" : "IM-UCB",
|
||||
"appid" : "__UNI__F0A946D",
|
||||
"description" : "",
|
||||
"versionName" : "3.3.4",
|
||||
"versionCode" : 334,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"bounce" : "none",
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : false,
|
||||
"waiting" : true,
|
||||
"autoclose" : false,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {
|
||||
"VideoPlayer" : {},
|
||||
"Camera" : {},
|
||||
"Record" : {},
|
||||
"Geolocation" : {},
|
||||
"Maps" : {}
|
||||
},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ],
|
||||
"minSdkVersion" : 21
|
||||
},
|
||||
"ios" : {
|
||||
"dSYMs" : false,
|
||||
"privacyDescription" : {
|
||||
"NSPhotoLibraryUsageDescription" : "请求获取读取相册权限",
|
||||
"NSPhotoLibraryAddUsageDescription" : "请求获取存入相册权限",
|
||||
"NSCameraUsageDescription" : "请求获取摄像头权限",
|
||||
"NSMicrophoneUsageDescription" : "请求获取麦克风权限",
|
||||
"NSLocationWhenInUseUsageDescription" : "请求获取位置权限",
|
||||
"NSLocationAlwaysAndWhenInUseUsageDescription" : "请求获取位置权限",
|
||||
"NSLocationAlwaysUsageDescription" : "请求获取位置权限",
|
||||
"NSBluetoothAlwaysUsageDescription" : "请求获取蓝牙权限"
|
||||
}
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"ad" : {},
|
||||
"geolocation" : {},
|
||||
"maps" : {},
|
||||
"share" : {},
|
||||
"statics" : {},
|
||||
"speech" : {}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "default",
|
||||
"iosStyle" : "common",
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/cover/480_762.9.png",
|
||||
"xhdpi" : "unpackage/res/cover/720_1242.9.png",
|
||||
"xxhdpi" : "unpackage/res/cover/1080_1882.9.png"
|
||||
}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"nativePlugins" : {
|
||||
"Tuoyun-OpenIMSDK" : {
|
||||
"__plugin_info__" : {
|
||||
"name" : "OpenIM SDK",
|
||||
"description" : "OpenIM：由IM技术专家打造的基于 Go 实现的即时通讯（IM）项目，从服务端到客户端SDK开源即时通讯（IM）整体解决方案，可以轻松替代第三方IM云服务，打造具备聊天、社交功能的app。",
|
||||
"platforms" : "Android,iOS",
|
||||
"url" : "https://ext.dcloud.net.cn/plugin?id=6577",
|
||||
"android_package_name" : "",
|
||||
"ios_bundle_id" : "com.tuoyun.uni",
|
||||
"isCloud" : true,
|
||||
"bought" : 1,
|
||||
"pid" : "6577",
|
||||
"parameters" : {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false,
|
||||
"version" : "2"
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"h5" : {
|
||||
"template" : "",
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
},
|
||||
"devServer" : {
|
||||
"port" : 8080, //端口号
|
||||
"disableHostCheck" : true,
|
||||
"proxy" : {
|
||||
"/apiv2" : {
|
||||
"target" : "https://www.pgyer.com/", //目标接口域名
|
||||
"changeOrigin" : true, //是否跨域
|
||||
"secure" : true // 设置支持https协议的代理
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"date-fns": "^2.30.0",
|
||||
"dayjs": "^1.11.6",
|
||||
"image-tools": "^1.4.0",
|
||||
"md5": "^2.3.0",
|
||||
"@openim/client-sdk": "^0.0.11-ahpha.1",
|
||||
"openim-uniapp-polyfill": "^1.4.1",
|
||||
"uuid": "^9.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
{
|
||||
"pages": [
|
||||
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/login/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/login/registerOrForget/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/login/setSelfInfo/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/login/setPassword/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/login/verifyCode/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/index/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/conversationList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"disableScroll": true,
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/chating/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/singleSettings/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/groupSettings/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/groupManage/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/groupMemberList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/userCard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/searchUserOrGroup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/groupCard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/userCardMore/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/markOrIDPage/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/detailsFileds/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/contactChoose/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/createGroup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/contactAdd/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/switchJoinGroup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/friendList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/groupList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/searchUserOrGroup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/applicationList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/applicationListDetails/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/contact/applicationDetails/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/selfInfo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/accountSetting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/blockList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/conversation/updateGroupOrNickname/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/sendAddRequest/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/webviewWrapper/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/about/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/workbench/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#8E9AB0",
|
||||
"selectedColor": "#0089FF",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"height": "55px",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/conversation/conversationList/index",
|
||||
"iconPath": "./static/images/tabbar_conversation.png",
|
||||
"selectedIconPath": "static/images/tabbar_conversation_active.png",
|
||||
"text": "OpenIM"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/contact/index/index",
|
||||
"iconPath": "./static/images/tabbar_contacts.png",
|
||||
"selectedIconPath": "static/images/tabbar_contacts_active.png",
|
||||
"text": "通讯录"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/workbench/index/index",
|
||||
"iconPath": "./static/images/tabbar_workbench.png",
|
||||
"selectedIconPath": "static/images/tabbar_workbench_active.png",
|
||||
"text": "发现"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/profile/index/index",
|
||||
"iconPath": "./static/images/tabbar_profile.png",
|
||||
"selectedIconPath": "static/images/tabbar_profile_active.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="contact_choose_container">
|
||||
<custom-nav-bar title="联系人" />
|
||||
|
||||
<view class="search_bar_wrap">
|
||||
<u-search
|
||||
shape="square"
|
||||
placeholder="搜索"
|
||||
:showAction="false"
|
||||
v-model="keyword"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="tab_container">
|
||||
<template v-if="activeTab === 0">
|
||||
<setting-item
|
||||
@click="tabChange(tabs[0].idx)"
|
||||
:title="tabs[0].title"
|
||||
:border="false"
|
||||
/>
|
||||
|
||||
<view class="tab_pane"></view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view class="tab_pane" v-show="activeTab === 1">
|
||||
<choose-index-list
|
||||
@updateCheck="updateCheckedUser"
|
||||
:indexList="getChooseData.indexList"
|
||||
:itemArr="getChooseData.dataList"
|
||||
:checkedIDList="checkedUserIDList"
|
||||
:disabledIDList="disabledUserIDList"
|
||||
:showCheck="true"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<choose-index-footer
|
||||
:comfirmLoading="comfirmLoading"
|
||||
@removeItem="updateCheckedUserOrGroup"
|
||||
@confirm="confirm"
|
||||
:choosedData="getCheckedInfo"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { ContactChooseTypes } from "@/constant";
|
||||
import { formatChooseData, toastWithCallback } from "@/util/common";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import UserItem from "@/components/UserItem/index.vue";
|
||||
import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
|
||||
import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
UserItem,
|
||||
ChooseIndexList,
|
||||
ChooseIndexFooter,
|
||||
SettingItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
type: ContactChooseTypes.Card,
|
||||
activeTab: 0,
|
||||
groupID: "",
|
||||
checkedUserIDList: [],
|
||||
disabledUserIDList: [],
|
||||
comfirmLoading: false,
|
||||
tabs: [
|
||||
{
|
||||
idx: 1,
|
||||
title: "我的好友",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeFriendList",
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentUserID",
|
||||
"storeConversationList",
|
||||
]),
|
||||
getChooseData() {
|
||||
if (this.keyword) {
|
||||
return {
|
||||
indexList: ["#"],
|
||||
dataList: [
|
||||
this.storeFriendList.filter(
|
||||
(friend) =>
|
||||
friend.nickname.includes(this.keyword) ||
|
||||
friend.remark.includes(this.keyword)
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
return formatChooseData(this.storeFriendList);
|
||||
},
|
||||
getCheckedInfo() {
|
||||
const tmpUserIDList = [...this.checkedUserIDList];
|
||||
const checkedFriends = this.storeFriendList.filter((friend) => {
|
||||
const idx = tmpUserIDList.findIndex(
|
||||
(userID) => userID === friend.userID
|
||||
);
|
||||
if (idx > -1) {
|
||||
tmpUserIDList.splice(idx, 1);
|
||||
}
|
||||
return idx > -1;
|
||||
});
|
||||
return [...checkedFriends];
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
groupID,
|
||||
type,
|
||||
checkedUserIDList,
|
||||
} = options;
|
||||
this.type = type;
|
||||
this.groupID = groupID;
|
||||
this.checkedUserIDList = checkedUserIDList
|
||||
? JSON.parse(checkedUserIDList)
|
||||
: [];
|
||||
if (this.type === ContactChooseTypes.Invite) {
|
||||
this.checkDisabledUser();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkDisabledUser() {
|
||||
const friendIDList = this.storeFriendList.map((friend) => friend.userID);
|
||||
IMSDK.asyncApi("getUsersInGroup", IMSDK.uuid(), {
|
||||
groupID: this.groupID,
|
||||
userIDList: friendIDList,
|
||||
}).then(({ data }) => {
|
||||
this.disabledUserIDList = data;
|
||||
});
|
||||
},
|
||||
tabChange(idx) {
|
||||
this.keyword = "";
|
||||
this.activeTab = idx;
|
||||
},
|
||||
updateCheckedUserOrGroup(item) {
|
||||
if (item.userID) {
|
||||
this.updateCheckedUser(item);
|
||||
}
|
||||
},
|
||||
updateCheckedUser({ userID }) {
|
||||
if (this.checkedUserIDList.includes(userID)) {
|
||||
const idx = this.checkedUserIDList.findIndex((item) => item === userID);
|
||||
const tmpArr = [...this.checkedUserIDList];
|
||||
tmpArr.splice(idx, 1);
|
||||
this.checkedUserIDList = [...tmpArr];
|
||||
} else {
|
||||
this.checkedUserIDList = [...this.checkedUserIDList, userID];
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
if (this.activeTab) {
|
||||
this.activeTab = 0;
|
||||
return;
|
||||
}
|
||||
this.comfirmLoading = true;
|
||||
if (this.type === ContactChooseTypes.GetList) {
|
||||
let pages = getCurrentPages();
|
||||
let prevPage = pages[pages.length - 2];
|
||||
prevPage.$vm.getCheckedUsers(this.getCheckedInfo);
|
||||
this.comfirmLoading = false;
|
||||
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.type === ContactChooseTypes.Invite) {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.InviteUserToGroup, IMSDK.uuid(), {
|
||||
groupID: this.groupID,
|
||||
reason: "",
|
||||
userIDList: this.getCheckedInfo.map((user) => user.userID),
|
||||
})
|
||||
.then(() => {
|
||||
toastWithCallback("操作成功", () => uni.navigateBack());
|
||||
this.comfirmLoading = false;
|
||||
})
|
||||
.catch(() => toastWithCallback("操作失败"));
|
||||
return;
|
||||
}
|
||||
|
||||
this.comfirmLoading = false;
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.activeTab) {
|
||||
this.activeTab = 0;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.u-popup {
|
||||
flex: none;
|
||||
}
|
||||
.contact_choose_container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
}
|
||||
|
||||
.tab_container {
|
||||
@include colBox(false);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.setting_item {
|
||||
padding: 32rpx 36rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
// padding: 16rpx 8rpx;
|
||||
background: #f8f9fa;
|
||||
color: #8e9ab0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.tabs_bar {
|
||||
@include vCenterBox();
|
||||
justify-content: space-evenly;
|
||||
|
||||
.tab_item {
|
||||
@include colBox(false);
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab_pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.member_list {
|
||||
flex: 1;
|
||||
height: 80% !important;
|
||||
::v-deepuni-scroll-view {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user_list {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.member_anchor {
|
||||
background-color: #f8f8f8 !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="create_group_container">
|
||||
<custom-nav-bar title="发起群聊" />
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="main">
|
||||
<view class="group_base_info">
|
||||
<my-avatar
|
||||
@click="chooseImage"
|
||||
:isGroup="true"
|
||||
:src="groupFaceUrl"
|
||||
size="44"
|
||||
/>
|
||||
<u--input
|
||||
placeholder="取个群名称方便后续搜索"
|
||||
border="none"
|
||||
maxlength="16"
|
||||
v-model="groupName"
|
||||
></u--input>
|
||||
</view>
|
||||
|
||||
<view class="member_row" @click="toChooseMember">
|
||||
<view class="desc_title">
|
||||
<text>群成员</text>
|
||||
<text>{{ `${checkedMemberList.length}人` }}</text>
|
||||
</view>
|
||||
<view class="member_list">
|
||||
<view
|
||||
v-for="member in checkedMemberList.slice(0, 5)"
|
||||
:key="member.userID"
|
||||
class="member_item"
|
||||
>
|
||||
<my-avatar :src="member.userID" :desc="member.nickname" size="42" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action_bar">
|
||||
<u-button
|
||||
:loading="createLoading"
|
||||
:disabled="disabledCreate"
|
||||
@click="complateCreate"
|
||||
type="primary"
|
||||
text="完成创建"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ContactChooseTypes } from "@/constant";
|
||||
import IMSDK, {
|
||||
GroupType,
|
||||
IMMethods,
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import { navigateToDesignatedConversation } from "@/util/imCommon";
|
||||
import { getPurePath, toastWithCallback } from "@/util/common";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupName: "",
|
||||
groupFaceUrl: "",
|
||||
checkedMemberList: [],
|
||||
fileList: [],
|
||||
createLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
disabledCreate() {
|
||||
return !this.groupName || this.checkedMemberList.length === 0;
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { checkedMemberList } = options;
|
||||
this.checkedMemberList = checkedMemberList
|
||||
? JSON.parse(checkedMemberList)
|
||||
: [];
|
||||
},
|
||||
methods: {
|
||||
toChooseMember() {
|
||||
const checkedIDList = this.checkedMemberList.map(
|
||||
(member) => member.userID,
|
||||
);
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${
|
||||
ContactChooseTypes.GetList
|
||||
}&checkedUserIDList=${JSON.stringify(checkedIDList)}`,
|
||||
});
|
||||
},
|
||||
complateCreate() {
|
||||
this.createLoading = true;
|
||||
const options = {
|
||||
adminUserIDs: [],
|
||||
memberUserIDs: this.checkedMemberList.map((member) => member.userID),
|
||||
groupInfo: {
|
||||
groupType: GroupType.WorkingGroup,
|
||||
groupName: this.groupName,
|
||||
faceURL: this.groupFaceUrl,
|
||||
},
|
||||
};
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.CreateGroup, IMSDK.uuid(), options)
|
||||
.then(({ data }) => {
|
||||
toastWithCallback("创建成功", () =>
|
||||
navigateToDesignatedConversation(
|
||||
data.groupID,
|
||||
SessionType.WorkingGroup,
|
||||
true,
|
||||
),
|
||||
);
|
||||
})
|
||||
.finally(() => (this.createLoading = false));
|
||||
},
|
||||
getCheckedUsers(list) {
|
||||
this.checkedMemberList = [...list];
|
||||
},
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["compressed"],
|
||||
success: async ({ tempFilePaths }) => {
|
||||
const path = tempFilePaths[0];
|
||||
const nameIdx = path.lastIndexOf("/") + 1;
|
||||
const typeIdx = path.lastIndexOf(".") + 1;
|
||||
const fileName = path.slice(nameIdx);
|
||||
const fileType = path.slice(typeIdx);
|
||||
|
||||
try {
|
||||
const {
|
||||
data: { url },
|
||||
} = await IMSDK.asyncApi(IMMethods.UploadFile, IMSDK.uuid(), {
|
||||
filepath: getPurePath(tempFilePaths[0]),
|
||||
name: fileName,
|
||||
contentType: fileType,
|
||||
uuid: IMSDK.uuid(),
|
||||
});
|
||||
this.groupFaceUrl = url;
|
||||
} catch (error) {
|
||||
uni.$u.toast("上传失败");
|
||||
}
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.$u.toast("上传失败");
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.create_group_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.group_base_info {
|
||||
@include vCenterBox();
|
||||
padding: 44rpx;
|
||||
background-color: #fff;
|
||||
margin: 36rpx 0;
|
||||
|
||||
.u-input {
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member_row {
|
||||
padding: 44rpx;
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
|
||||
.desc_title {
|
||||
@include vCenterBox();
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.member_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.member_item {
|
||||
@include colBox(false);
|
||||
align-items: center;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.member_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 42px;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action_bar {
|
||||
background-color: #fff;
|
||||
padding: 44rpx 44rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="details_container">
|
||||
<custom-nav-bar title="个人资料" />
|
||||
|
||||
<view class="info_list">
|
||||
<user-info-row-item class="info_item" lable="头像" arrow>
|
||||
<my-avatar
|
||||
:src="sourceInfo.faceURL"
|
||||
:desc="sourceInfo.nickname"
|
||||
size="26"
|
||||
/>
|
||||
</user-info-row-item>
|
||||
<user-info-row-item class="info_item" lable="昵称" arrow>
|
||||
<text class="right_content">{{ sourceInfo.nickname }}</text>
|
||||
</user-info-row-item>
|
||||
<user-info-row-item class="info_item" lable="性别" arrow>
|
||||
<text class="right_content">{{ getGender }}</text>
|
||||
</user-info-row-item>
|
||||
<user-info-row-item class="info_item" lable="生日" arrow>
|
||||
<text class="right_content">{{ getBirthStr }}</text>
|
||||
</user-info-row-item>
|
||||
</view>
|
||||
|
||||
<view class="info_list">
|
||||
<user-info-row-item class="info_item" lable="手机号码" arrow>
|
||||
<text class="right_content">{{ sourceInfo.phoneNumber || "-" }}</text>
|
||||
</user-info-row-item>
|
||||
<user-info-row-item class="info_item" lable="邮箱" arrow>
|
||||
<text class="right_content">{{ sourceInfo.email || "-" }}</text>
|
||||
</user-info-row-item>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
UserInfoRowItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sourceInfo: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getGender() {
|
||||
if (this.sourceInfo.gender === 1) {
|
||||
return "男";
|
||||
}
|
||||
if (this.sourceInfo.gender === 2) {
|
||||
return "女";
|
||||
}
|
||||
return "保密";
|
||||
},
|
||||
getBirthStr() {
|
||||
const birth = this.sourceInfo.birth ?? 0;
|
||||
return dayjs(birth).format("YYYY-MM-DD");
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { sourceInfo } = options;
|
||||
this.sourceInfo = JSON.parse(sourceInfo);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.details_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.info_list {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 24rpx;
|
||||
|
||||
.info_item {
|
||||
background-color: #fff;
|
||||
// border-bottom: 1px solid rgba(153, 153, 153, 0.3);
|
||||
|
||||
.right_content {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="group_card_container">
|
||||
<custom-nav-bar title="" />
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
|
||||
<view class="main">
|
||||
<view class="base_info">
|
||||
<my-avatar :src="sourceGroupInfo.faceURL" :isGroup="true" size="48" />
|
||||
<view>
|
||||
<view class="group_name">
|
||||
<text>{{ sourceGroupInfo.groupName }}</text>
|
||||
<text v-if="!!sourceGroupInfo.memberCount"
|
||||
>（{{ sourceGroupInfo.memberCount }}）</text
|
||||
>
|
||||
</view>
|
||||
<view class="create_time">
|
||||
<u-icon name="clock" color="#999" size="14"></u-icon>
|
||||
<text>{{ getCreateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="!!sourceGroupInfo.memberCount"
|
||||
@click="toMemberList"
|
||||
class="member_row info_row"
|
||||
>
|
||||
<view class="member_desc">
|
||||
<text>群成员</text>
|
||||
<text class="member_count">{{
|
||||
`${sourceGroupInfo.memberCount}人`
|
||||
}}</text>
|
||||
<u-icon name="arrow-right" color="#999" size="18"></u-icon>
|
||||
</view>
|
||||
<view class="member_list">
|
||||
<my-avatar
|
||||
v-for="member in getRenderMemberList"
|
||||
:key="member.userID"
|
||||
class="member_item"
|
||||
size="42"
|
||||
:src="member.faceURL"
|
||||
:desc="member.nickname"
|
||||
></my-avatar>
|
||||
<u-avatar
|
||||
bgColor="#5496EB"
|
||||
icon="more-dot-fill"
|
||||
shape="square"
|
||||
size="42"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info_row">
|
||||
<user-info-row-item lable="群ID号" :content="sourceGroupInfo.groupID" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action_row">
|
||||
<u-button type="primary" v-if="!isJoinedGroup" @click="joinGroup"
|
||||
>申请加入该群</u-button
|
||||
>
|
||||
<u-button type="primary" v-else @click="chatingInGroup">发消息</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupMemberListTypes } from "@/constant";
|
||||
import { navigateToDesignatedConversation } from "@/util/imCommon";
|
||||
import IMSDK, {
|
||||
GroupVerificationType,
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import dayjs from "dayjs";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
|
||||
|
||||
import userIcon from "static/images/contact_my_friend.png";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
UserInfoRowItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sourceID: "",
|
||||
isScan: false,
|
||||
sourceGroupInfo: {},
|
||||
groupMemberList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isJoinedGroup() {
|
||||
return (
|
||||
this.$store.getters.storeGroupList.findIndex(
|
||||
(group) => group.groupID === this.sourceID,
|
||||
) !== -1
|
||||
);
|
||||
},
|
||||
getCreateTime() {
|
||||
return dayjs(this.sourceGroupInfo.createTime).format("YYYY-MM-DD");
|
||||
},
|
||||
getRenderMemberList() {
|
||||
if (this.isJoinedGroup) {
|
||||
this.groupMemberList;
|
||||
return this.groupMemberList;
|
||||
}
|
||||
const memberCount = this.sourceGroupInfo.memberCount ?? 0;
|
||||
return new Array(memberCount >= 6 ? 6 : memberCount)
|
||||
.fill(1)
|
||||
.map((item, idx) => ({
|
||||
userID: idx,
|
||||
src: userIcon,
|
||||
}));
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { sourceID, sourceInfo, isScan } = options;
|
||||
this.isScan = !!isScan;
|
||||
if (sourceID) {
|
||||
this.sourceID = sourceID;
|
||||
this.getSourceGroupInfo();
|
||||
} else {
|
||||
const info = JSON.parse(sourceInfo);
|
||||
this.sourceID = info.groupID;
|
||||
this.sourceGroupInfo = {
|
||||
...info,
|
||||
};
|
||||
}
|
||||
this.getGroupMemberList();
|
||||
},
|
||||
methods: {
|
||||
toMemberList() {
|
||||
if (this.isJoinedGroup) {
|
||||
this.$store.dispatch("conversation/getCurrentGroup", this.sourceID);
|
||||
this.$store.dispatch(
|
||||
"conversation/getCurrentMemberInGroup",
|
||||
this.sourceID,
|
||||
);
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.sourceID}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
joinGroup() {
|
||||
uni.$u.route("/pages/common/sendAddRequest/index", {
|
||||
isGroup: true,
|
||||
sourceID: this.sourceID,
|
||||
isScan: this.isScan,
|
||||
notNeedVerification:
|
||||
this.sourceGroupInfo.needVerification ===
|
||||
GroupVerificationType.AllNot,
|
||||
sessionType: SessionType.WorkingGroup,
|
||||
});
|
||||
},
|
||||
chatingInGroup() {
|
||||
navigateToDesignatedConversation(
|
||||
this.sourceID,
|
||||
SessionType.WorkingGroup,
|
||||
).catch(() => this.showToast("获取会话信息失败"));
|
||||
},
|
||||
async getSourceGroupInfo() {
|
||||
let info = null;
|
||||
if (this.isJoinedGroup) {
|
||||
info = this.$store.getters.storeGroupList.find(
|
||||
(group) => group.groupID === this.sourceID,
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
const { data } = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetSpecifiedGroupsInfo,
|
||||
IMSDK.uuid(),
|
||||
[this.sourceID],
|
||||
);
|
||||
info = data[0] ?? {};
|
||||
} catch (e) {
|
||||
info = {};
|
||||
}
|
||||
}
|
||||
this.sourceGroupInfo = {
|
||||
...info,
|
||||
};
|
||||
},
|
||||
getGroupMemberList() {
|
||||
if (this.isJoinedGroup) {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
|
||||
groupID: this.sourceID,
|
||||
filter: 0,
|
||||
offset: 0,
|
||||
count: 6,
|
||||
}).then(({ data }) => {
|
||||
this.groupMemberList = [...data];
|
||||
});
|
||||
}
|
||||
},
|
||||
showToast(message) {
|
||||
this.$refs.uToast.show({
|
||||
message,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_card_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.base_info {
|
||||
@include vCenterBox();
|
||||
background-color: #fff;
|
||||
padding: 44rpx;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.group_name {
|
||||
display: flex;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.create_time {
|
||||
@include vCenterBox();
|
||||
justify-content: center;
|
||||
color: #adadad;
|
||||
font-size: 26rpx;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member_row {
|
||||
padding: 24rpx 44rpx;
|
||||
|
||||
.member_desc {
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
|
||||
.member_count {
|
||||
font-size: 28rpx;
|
||||
color: #adadad;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.member_list {
|
||||
display: flex;
|
||||
|
||||
.member_item {
|
||||
margin-right: 12rpx;
|
||||
|
||||
&:nth-child(7) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_row {
|
||||
background-color: #fff;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
::v-deep .content {
|
||||
color: #adadad;
|
||||
}
|
||||
}
|
||||
|
||||
.action_row {
|
||||
background-color: #fff;
|
||||
padding: 44rpx 44rpx;
|
||||
}
|
||||
|
||||
.online_state {
|
||||
@include vCenterBox();
|
||||
margin-left: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.dot {
|
||||
background-color: #10cc64;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view class="mark_id_container">
|
||||
<custom-nav-bar :title="getTitle">
|
||||
<view class="nav_right_action" slot="more">
|
||||
<text v-show="!loading" @click="saveOrCopy">{{ getConfirmText }}</text>
|
||||
<u-loading-icon v-show="loading" />
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
<view class="content_row">
|
||||
<u-input
|
||||
:disabled="!isRemark && !isSelfNickname"
|
||||
v-model="content"
|
||||
disabledColor="transparent"
|
||||
maxlength="16"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import { businessInfoUpdate } from "@/api/login";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
isRemark: false,
|
||||
isSelfNickname: false,
|
||||
sourceInfo: {},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
if (this.isRemark) {
|
||||
return "设置备注";
|
||||
}
|
||||
if (this.isSelfNickname) {
|
||||
return "我的姓名";
|
||||
}
|
||||
return "ID号";
|
||||
},
|
||||
getConfirmText() {
|
||||
return this.isRemark || this.isSelfNickname ? "保存" : "复制";
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { isRemark, isSelfNickname, sourceInfo } = options;
|
||||
this.sourceInfo = JSON.parse(sourceInfo);
|
||||
this.isRemark = !!isRemark;
|
||||
if (this.isRemark) {
|
||||
this.content = this.sourceInfo.remark;
|
||||
}
|
||||
this.isSelfNickname = !!isSelfNickname;
|
||||
if (this.isSelfNickname) {
|
||||
this.content = this.sourceInfo.nickname;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async saveOrCopy() {
|
||||
if (this.isRemark) {
|
||||
this.loading = true;
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.SetFriendRemark, IMSDK.uuid(), {
|
||||
toUserID: this.sourceInfo.userID,
|
||||
remark: this.content,
|
||||
})
|
||||
.then(() => {
|
||||
uni.$u.toast("设置成功");
|
||||
setTimeout(() => uni.navigateBack(), 1000);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
uni.$u.toast("设置失败");
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
} else if (this.isSelfNickname) {
|
||||
this.loading = true;
|
||||
try {
|
||||
await businessInfoUpdate({
|
||||
userID: this.sourceInfo.userID,
|
||||
nickname: this.content,
|
||||
});
|
||||
await this.$store.dispatch("user/updateBusinessInfo");
|
||||
uni.$u.toast("修改成功");
|
||||
setTimeout(() => uni.navigateBack(), 1000);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
uni.$u.toast("修改失败");
|
||||
}
|
||||
this.loading = false;
|
||||
} else {
|
||||
uni.setClipboardData({
|
||||
data: this.sourceInfo.userID,
|
||||
success: () => {
|
||||
uni.hideToast();
|
||||
this.$nextTick(() => {
|
||||
uni.$u.toast("复制成功");
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mark_id_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
|
||||
.nav_right_action {
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.content_row {
|
||||
margin-top: 96rpx;
|
||||
margin: 72rpx 44rpx 0;
|
||||
|
||||
.u-input {
|
||||
background-color: #e8eaef;
|
||||
}
|
||||
|
||||
.u-button {
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<view class="search_container">
|
||||
<custom-nav-bar :route="false">
|
||||
<view slot="left"> </view>
|
||||
<view class="search_bar" slot="center">
|
||||
<u-search
|
||||
actionText="取消"
|
||||
@change="keywordChange"
|
||||
@custom="cancel"
|
||||
@search="startSearch"
|
||||
shape="square"
|
||||
:placeholder="getPlaceholder"
|
||||
v-model="keyword"
|
||||
/>
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
<view v-show="!empty && !searching" @click="startSearch(keyword)" class="result_row">
|
||||
<image class="icon" :src="getIcon" alt="" />
|
||||
<view class="">
|
||||
<text>查找：</text>
|
||||
<text>{{ keyword }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show="searching && !empty" class="result_row result_row_empty">
|
||||
<u-loading-icon></u-loading-icon>
|
||||
</view>
|
||||
|
||||
<view v-show="empty" class="result_row result_row_empty">
|
||||
<text>未搜索到相关结果</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
|
||||
import searchGroup from "static/images/contact_add_join_group_fill.png";
|
||||
import searchUser from "static/images/contact_add_search_user_fill.png";
|
||||
import { businessSearchUserInfo } from "@/api/login";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
searching: false,
|
||||
empty: false,
|
||||
isSearchGroup: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return this.isSearchGroup ? searchGroup : searchUser;
|
||||
},
|
||||
getPlaceholder() {
|
||||
return this.isSearchGroup ? "请输入群聊ID" : "搜索ID或手机号添加好友";
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { isSearchGroup } = options;
|
||||
this.isSearchGroup = JSON.parse(isSearchGroup);
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
console.log("cancel");
|
||||
uni.navigateBack();
|
||||
},
|
||||
keywordChange() {
|
||||
if (this.empty) {
|
||||
this.empty = !this.empty;
|
||||
}
|
||||
},
|
||||
async startSearch(value) {
|
||||
if (!value) return;
|
||||
this.searching = true;
|
||||
try {
|
||||
if (this.isSearchGroup) {
|
||||
let info = this.$store.getters.storeGroupList.find(
|
||||
(item) => item.groupID === value,
|
||||
);
|
||||
if (!info) {
|
||||
const { data } = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetSpecifiedGroupsInfo,
|
||||
IMSDK.uuid(),
|
||||
[value],
|
||||
);
|
||||
info = data[0];
|
||||
}
|
||||
if (info) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/groupCard/index?sourceInfo=${JSON.stringify(
|
||||
info,
|
||||
)}`,
|
||||
});
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
} else {
|
||||
let info = this.$store.getters.storeFriendList.find(
|
||||
(item) => item.userID === value,
|
||||
);
|
||||
if (!info) {
|
||||
const { total, users } = await businessSearchUserInfo(value);
|
||||
if (total > 0) {
|
||||
const { data } = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetUsersInfo,
|
||||
IMSDK.uuid(),
|
||||
[users[0].userID],
|
||||
);
|
||||
const imData = data[0];
|
||||
|
||||
info = {
|
||||
...imData,
|
||||
...users[0],
|
||||
};
|
||||
}
|
||||
}
|
||||
if (info) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userCard/index?sourceInfo=${JSON.stringify(
|
||||
info,
|
||||
)}`,
|
||||
});
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.searching = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search_container {
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.search_bar {
|
||||
width: 100%;
|
||||
padding: 0 44rpx;
|
||||
}
|
||||
|
||||
.result_row {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
background-color: #fff;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&_empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="request_join_container">
|
||||
<custom-nav-bar :title="isGroup ? '群聊验证' : '好友验证'">
|
||||
<view class="top_right_btn" slot="more">
|
||||
<u-button @click="sendRequest" text="发送" type="primary"></u-button>
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
<text class="title">{{ `发送${isGroup ? "入群" : "好友"}申请` }}</text>
|
||||
|
||||
<view class="input_container">
|
||||
<u--textarea
|
||||
height="120"
|
||||
v-model="reason"
|
||||
border="none"
|
||||
placeholder="请输入内容"
|
||||
maxlength="20"
|
||||
count
|
||||
>
|
||||
</u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IMSDK, { GroupJoinSource } from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import { navigateToDesignatedConversation } from "@/util/imCommon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
reason: "",
|
||||
sourceID: "",
|
||||
isGroup: false,
|
||||
isScan: false,
|
||||
notNeedVerification: false,
|
||||
sessionType: 0,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
const { isGroup, sourceID, isScan, notNeedVerification, sessionType } =
|
||||
options;
|
||||
this.isGroup = JSON.parse(isGroup);
|
||||
this.isScan = JSON.parse(isScan);
|
||||
this.sourceID = sourceID;
|
||||
this.notNeedVerification = JSON.parse(notNeedVerification);
|
||||
this.sessionType = sessionType ?? 0;
|
||||
},
|
||||
methods: {
|
||||
sendRequest() {
|
||||
let func;
|
||||
if (this.isGroup) {
|
||||
const joinSource = this.isScan
|
||||
? GroupJoinSource.QrCode
|
||||
: GroupJoinSource.Search;
|
||||
func = IMSDK.asyncApi(IMSDK.IMMethods.JoinGroup, IMSDK.uuid(), {
|
||||
groupID: this.sourceID,
|
||||
reqMsg: this.reason,
|
||||
joinSource,
|
||||
});
|
||||
} else {
|
||||
func = IMSDK.asyncApi(IMSDK.IMMethods.AddFriend, IMSDK.uuid(), {
|
||||
toUserID: this.sourceID,
|
||||
reqMsg: this.reason,
|
||||
});
|
||||
}
|
||||
func
|
||||
.then(() => {
|
||||
uni.$u.toast(this.notNeedVerification ? "你已加入该群" : "发送成功");
|
||||
setTimeout(() => {
|
||||
if (this.notNeedVerification) {
|
||||
navigateToDesignatedConversation(
|
||||
this.sourceID,
|
||||
Number(this.sessionType),
|
||||
).catch(() => this.showToast("获取会话信息失败"));
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
uni.$u.toast("发送失败");
|
||||
});
|
||||
},
|
||||
showToast(message) {
|
||||
this.$refs.uToast.show({
|
||||
message,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.request_join_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.top_right_btn {
|
||||
margin-right: 44rpx;
|
||||
|
||||
.u-button {
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin: 24rpx 44rpx;
|
||||
}
|
||||
|
||||
.input_container {
|
||||
::v-deep.u-textarea {
|
||||
padding: 24rpx 44rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view @click="click" class="row_item" :class="{ arrow_right: arrow }">
|
||||
<view class="title">
|
||||
<text>{{ lable }}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<text>{{ content }}</text>
|
||||
</view>
|
||||
<slot>
|
||||
<u-icon v-if="arrow" name="arrow-right" color="#999" size="20"></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
components: {},
|
||||
props: {
|
||||
lable: String,
|
||||
content: String,
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit("click");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.arrow_right {
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<view class="user_card_container">
|
||||
<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
|
||||
<custom-nav-bar title="" />
|
||||
|
||||
<view v-if="!isLoading" style="flex: 1;display: flex;flex-direction: column;">
|
||||
<view class="base_info">
|
||||
<my-avatar :desc="sourceUserInfo.remark || sourceUserInfo.nickname" :src="sourceUserInfo.faceURL" size="46" />
|
||||
<view class="user_name">
|
||||
<text class="text">{{ getShowName }}</text>
|
||||
<text class="id" @click="copy(sourceUserInfo.userID)">{{sourceUserInfo.userID}}</text>
|
||||
</view>
|
||||
<view class="add_btn" @click="toAddFriend" v-if="trySendRequest">
|
||||
<u-button type="primary" icon="man-add" text="添加"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isFriend" class="info_row">
|
||||
<user-info-row-item @click="toMoreInfo" lable="个人资料" arrow />
|
||||
</view>
|
||||
|
||||
<view class="action_row" v-if="!isSelf">
|
||||
<view @click="toDesignatedConversation" class="action_item">
|
||||
<img src="static/images/user_card_message.png" alt="" />
|
||||
<text>发消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
navigateToDesignatedConversation
|
||||
} from "@/util/imCommon";
|
||||
import IMSDK, {
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import UserInfoRowItem from "./components/UserInfoRowItem.vue";
|
||||
import {
|
||||
businessSearchUserInfo
|
||||
} from "@/api/login";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
UserInfoRowItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
sourceID: "",
|
||||
sourceUserInfo: {},
|
||||
switchLoading: false,
|
||||
showSetRole: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeFriendList",
|
||||
"storeSelfInfo",
|
||||
]),
|
||||
isFriend() {
|
||||
return (
|
||||
this.storeFriendList.findIndex(
|
||||
(friend) => friend.userID === this.sourceID,
|
||||
) !== -1
|
||||
);
|
||||
},
|
||||
trySendRequest() {
|
||||
return !this.isFriend && !this.isSelf
|
||||
},
|
||||
isSelf() {
|
||||
return this.sourceID === this.storeSelfInfo.userID;
|
||||
},
|
||||
getShowName() {
|
||||
let suffix = "";
|
||||
if (this.sourceUserInfo.remark) {
|
||||
suffix = `(${this.sourceUserInfo.remark})`;
|
||||
}
|
||||
return this.sourceUserInfo.nickname + suffix;
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
sourceID,
|
||||
sourceInfo
|
||||
} = options;
|
||||
if (sourceID) {
|
||||
this.sourceID = sourceID;
|
||||
} else {
|
||||
const info = JSON.parse(sourceInfo);
|
||||
this.sourceID = info.userID;
|
||||
}
|
||||
this.getSourceUserInfo();
|
||||
},
|
||||
methods: {
|
||||
copy(userID) {
|
||||
uni.setClipboardData({
|
||||
showToast: false,
|
||||
data: userID,
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "复制成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
async getSourceUserInfo() {
|
||||
let info = {};
|
||||
const friendInfo = this.storeFriendList.find((item) => item.userID === this.sourceID);
|
||||
if (friendInfo) {
|
||||
info = {
|
||||
...friendInfo
|
||||
};
|
||||
} else {
|
||||
const {
|
||||
data
|
||||
} = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetUsersInfo,
|
||||
IMSDK.uuid(),
|
||||
[this.sourceID],
|
||||
);
|
||||
info = {
|
||||
...(data[0] ?? {})
|
||||
};
|
||||
}
|
||||
this.isLoading = true
|
||||
try {
|
||||
const {
|
||||
total,
|
||||
users
|
||||
} = await businessSearchUserInfo(this.sourceID);
|
||||
if (total > 0) {
|
||||
const {
|
||||
data
|
||||
} = await IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.GetUsersInfo,
|
||||
IMSDK.uuid(),
|
||||
[this.sourceID],
|
||||
);
|
||||
const imData = data[0]?.friendInfo ?? data[0]?.publicInfo ?? {};
|
||||
info = {
|
||||
...imData,
|
||||
...users[0],
|
||||
};
|
||||
console.log(info)
|
||||
}
|
||||
} catch (e) {
|
||||
info = {};
|
||||
}
|
||||
this.isLoading = false
|
||||
this.sourceUserInfo = {
|
||||
...info,
|
||||
};
|
||||
},
|
||||
toAddFriend() {
|
||||
uni.$u.route("/pages/common/sendAddRequest/index", {
|
||||
isGroup: false,
|
||||
sourceID: this.sourceID,
|
||||
isScan: false,
|
||||
notNeedVerification: false,
|
||||
});
|
||||
},
|
||||
toDesignatedConversation() {
|
||||
navigateToDesignatedConversation(
|
||||
this.sourceID,
|
||||
SessionType.Single,
|
||||
false,
|
||||
).catch(() => uni.$u.toast("获取会话信息失败"));
|
||||
},
|
||||
toMoreInfo() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userCardMore/index?sourceInfo=${JSON.stringify(this.sourceUserInfo,)}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user_card_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.base_info {
|
||||
@include vCenterBox();
|
||||
background-color: #fff;
|
||||
padding: 44rpx;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.add_btn {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
margin-left: auto;
|
||||
|
||||
.u-button {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.user_name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
height: 46px;
|
||||
|
||||
.text {
|
||||
@include nomalEllipsis();
|
||||
max-width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.company {
|
||||
font-size: 28rpx;
|
||||
color: $u-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.info_row {
|
||||
background-color: #fff;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.mute_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.company_row {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.desc_title {
|
||||
padding-left: 44rpx;
|
||||
}
|
||||
|
||||
::v-deep.title {
|
||||
width: 200rpx;
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.action_row {
|
||||
@include vCenterBox();
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
margin: 44rpx;
|
||||
flex: 1;
|
||||
|
||||
.action_item {
|
||||
width: 100%;
|
||||
@include colBox(true);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 22rpx 0;
|
||||
background: $u-primary;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
img {
|
||||
margin-right: 16rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.id {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.online_state {
|
||||
@include vCenterBox();
|
||||
margin-left: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.dot {
|
||||
background-color: #10cc64;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.online_str {
|
||||
@include nomalEllipsis();
|
||||
max-width: 280rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view class="user_more_container">
|
||||
<custom-nav-bar title="好友设置" />
|
||||
|
||||
<view class="info_row">
|
||||
<user-info-row-item @click="toMark" lable="设置备注" arrow />
|
||||
<user-info-row-item @click="toMore" lable="个人资料" arrow />
|
||||
</view>
|
||||
|
||||
<view class="info_row">
|
||||
<user-info-row-item lable="加入黑名单" arrow>
|
||||
<u-switch
|
||||
asyncChange
|
||||
:loading="blackLoading"
|
||||
size="20"
|
||||
:value="isBlacked"
|
||||
@change="change"
|
||||
></u-switch>
|
||||
</user-info-row-item>
|
||||
</view>
|
||||
|
||||
<view v-if="isFriend" class="info_row">
|
||||
<u-button
|
||||
@click="() => (showConfirm = true)"
|
||||
type="error"
|
||||
plain
|
||||
text="解除好友关系"
|
||||
></u-button>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-modal
|
||||
:content="`确定要解除与${sourceInfo.nickname}的好友关系吗？`"
|
||||
asyncClose
|
||||
:show="showConfirm"
|
||||
showCancelButton
|
||||
@confirm="confirmRemove"
|
||||
@cancel="() => (showConfirm = false)"
|
||||
></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
|
||||
import { ContactChooseTypes } from "@/constant";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
UserInfoRowItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blackLoading: false,
|
||||
sourceInfo: {},
|
||||
showConfirm: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFriend() {
|
||||
return (
|
||||
this.$store.getters.storeFriendList.findIndex(
|
||||
(friend) => friend.userID === this.sourceInfo.userID,
|
||||
) !== -1
|
||||
);
|
||||
},
|
||||
isBlacked() {
|
||||
return (
|
||||
this.$store.getters.storeBlackList.findIndex(
|
||||
(black) => black.userID === this.sourceInfo.userID,
|
||||
) !== -1
|
||||
);
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { sourceInfo } = options;
|
||||
this.sourceInfo = JSON.parse(sourceInfo);
|
||||
},
|
||||
methods: {
|
||||
change(isBlack) {
|
||||
this.blackLoading = true;
|
||||
if (isBlack) {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.AddBlack, IMSDK.uuid(), {
|
||||
toUserID: this.sourceInfo.userID,
|
||||
ex: "",
|
||||
})
|
||||
.catch(() => this.showToast("操作失败"))
|
||||
.finally(() => (this.blackLoading = false));
|
||||
return;
|
||||
}
|
||||
IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.RemoveBlack,
|
||||
IMSDK.uuid(),
|
||||
this.sourceInfo.userID
|
||||
)
|
||||
.catch(() => this.showToast("操作失败"))
|
||||
.finally(() => (this.blackLoading = false));
|
||||
},
|
||||
confirmRemove() {
|
||||
IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.DeleteFriend,
|
||||
IMSDK.uuid(),
|
||||
this.sourceInfo.userID,
|
||||
)
|
||||
.then(() => this.showToast("操作成功"))
|
||||
.catch(() => this.showToast("操作失败"))
|
||||
.finally(() => (this.showConfirm = false));
|
||||
},
|
||||
toMore() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/detailsFileds/index?sourceInfo=${JSON.stringify(
|
||||
this.sourceInfo,
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
toMark() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/markOrIDPage/index?isRemark=true&sourceInfo=${JSON.stringify(
|
||||
this.sourceInfo,
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
toShare() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${
|
||||
ContactChooseTypes.ShareCard
|
||||
}&cardInfo=${JSON.stringify(this.sourceInfo)}`,
|
||||
});
|
||||
},
|
||||
showToast(message) {
|
||||
this.$refs.uToast.show({
|
||||
message,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user_more_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.info_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.u-button {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<web-view :src="url"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.url = decodeURIComponent(options.url);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="page_container">
|
||||
<custom-nav-bar :title="isGroupApplication ? '群通知' : '好友请求'" />
|
||||
|
||||
<view class="application_item">
|
||||
<view class="base_info_row">
|
||||
<view class="base_info_left" @click="toSourceDetails">
|
||||
<my-avatar :src="getSourceFaceURL" :desc="getSourceName" />
|
||||
<view class="base_info_details">
|
||||
<text class="nickname">{{ getSourceName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-icon name="arrow-right" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="request_message">
|
||||
<view v-if="isGroupApplication" class="title">
|
||||
<text>申请加入 </text>
|
||||
<text class="group_name">{{ currentApplication.groupName }}</text>
|
||||
</view>
|
||||
<text v-else>{{ `${getSourceName}：` }}</text>
|
||||
<text>{{ currentApplication.reqMsg }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="action_row">
|
||||
<u-button
|
||||
:loading="loadingState.accept"
|
||||
@click="acceptAplication"
|
||||
type="primary"
|
||||
:plain="true"
|
||||
:text="`通过${isGroupApplication ? '入群' : '好友'}申请`"
|
||||
></u-button>
|
||||
</view>
|
||||
|
||||
<view class="action_row">
|
||||
<u-button
|
||||
:loading="loadingState.refuse"
|
||||
@click="refuseAplication"
|
||||
type="primary"
|
||||
:plain="true"
|
||||
:text="`拒绝${isGroupApplication ? '入群' : '好友'}申请`"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import IMSDK, { GroupJoinSource } from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentApplication: {},
|
||||
isOnline: false,
|
||||
loadingState: {
|
||||
accept: false,
|
||||
refuse: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeSelfInfo"]),
|
||||
isGroupApplication() {
|
||||
return this.currentApplication.groupID !== undefined;
|
||||
},
|
||||
getSourceID() {
|
||||
return (
|
||||
this.currentApplication.fromUserID ?? this.currentApplication.userID
|
||||
);
|
||||
},
|
||||
getSourceName() {
|
||||
return (
|
||||
this.currentApplication.fromNickname ?? this.currentApplication.nickname
|
||||
);
|
||||
},
|
||||
getSourceFaceURL() {
|
||||
return (
|
||||
this.currentApplication.fromFaceURL ?? this.currentApplication.faceURL
|
||||
);
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { application } = options;
|
||||
this.currentApplication = JSON.parse(application);
|
||||
},
|
||||
methods: {
|
||||
toSourceDetails() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userCard/index?sourceID=${this.getSourceID}`,
|
||||
});
|
||||
},
|
||||
acceptAplication() {
|
||||
this.loadingState.accept = true;
|
||||
let func;
|
||||
if (this.isGroupApplication) {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptGroupApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
groupID: this.currentApplication.groupID,
|
||||
fromUserID: this.currentApplication.userID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
} else {
|
||||
console.log(this.currentApplication);
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptFriendApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
toUserID: this.currentApplication.fromUserID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
}
|
||||
func
|
||||
.then(() => {
|
||||
uni.$u.toast("操作成功");
|
||||
setTimeout(() => uni.navigateBack(), 500);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
uni.$u.toast("操作失败");
|
||||
})
|
||||
.finally(() => (this.loadingState.accept = false));
|
||||
},
|
||||
refuseAplication() {
|
||||
this.loadingState.refuse = true;
|
||||
let func;
|
||||
if (this.isGroupApplication) {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.RefuseGroupApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
groupID: this.currentApplication.groupID,
|
||||
fromUserID: this.currentApplication.userID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
} else {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.RefuseFriendApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
toUserID: this.currentApplication.fromUserID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
}
|
||||
func
|
||||
.then(() => {
|
||||
uni.$u.toast("操作成功");
|
||||
setTimeout(() => uni.navigateBack(), 250);
|
||||
})
|
||||
.catch(() => uni.$u.toast("操作失败"))
|
||||
.finally(() => (this.loadingState.refuse = false));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page_container {
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.application_item {
|
||||
padding: 72rpx 44rpx 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.base_info_row {
|
||||
@include btwBox();
|
||||
|
||||
.base_info_left {
|
||||
@include vCenterBox();
|
||||
}
|
||||
|
||||
.base_info_details {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.nickname {
|
||||
@include nomalEllipsis();
|
||||
max-width: 600rpx;
|
||||
}
|
||||
|
||||
.online_state {
|
||||
@include vCenterBox();
|
||||
flex-direction: row;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
|
||||
.dot {
|
||||
background-color: #10cc64;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.request_message {
|
||||
background-color: #eee;
|
||||
margin-top: 48rpx;
|
||||
padding: 24rpx 36rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
min-height: 240rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 12rpx;
|
||||
color: $uni-text-color;
|
||||
|
||||
.group_name {
|
||||
@nomalEllipsis();
|
||||
max-width: 400rpx;
|
||||
color: $uni-color-primary;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.join_source {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.action_row {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.u-button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.u-button {
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="application_item">
|
||||
<my-avatar
|
||||
:src="getAvatarUrl"
|
||||
:isGroup="isGroupApplication"
|
||||
:desc="application[isRecv ? 'fromNickname' : 'toNickname']"
|
||||
size="42"
|
||||
/>
|
||||
<view class="application_item_details">
|
||||
<view class="content">
|
||||
<text class="user_name">{{ getShowName }}</text>
|
||||
|
||||
<view v-if="isGroupApplication" class="title">
|
||||
申请加入
|
||||
<text class="group_name">{{ application.groupName }}</text>
|
||||
</view>
|
||||
<text class="req_message">{{ application.reqMsg }}</text>
|
||||
</view>
|
||||
|
||||
<view class="application_action">
|
||||
<text v-if="showStateStr" class="status_tip">{{ getStateStr }}</text>
|
||||
<text v-if="showGreet" @tap.stop="greetToUser" class="status_tip greet"
|
||||
>打招呼</text
|
||||
>
|
||||
<button
|
||||
:loading="accessLoading"
|
||||
v-if="showAccept"
|
||||
class="access_btn"
|
||||
@tap.stop="acceptApplication"
|
||||
type="primary"
|
||||
:plain="true"
|
||||
size="mini"
|
||||
>
|
||||
{{ isGroupApplication ? "同意" : "接受" }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="bottom_line"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { navigateToDesignatedConversation } from "@/util/imCommon";
|
||||
import IMSDK, { SessionType } from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "ApplicationItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
application: Object,
|
||||
isRecv: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
accessLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isGroupApplication() {
|
||||
return this.application.groupID !== undefined;
|
||||
},
|
||||
getShowName() {
|
||||
if (this.isRecv) {
|
||||
return this.application[
|
||||
this.isGroupApplication ? "nickname" : "fromNickname"
|
||||
];
|
||||
}
|
||||
return this.application[
|
||||
this.isGroupApplication ? "groupName" : "toNickname"
|
||||
];
|
||||
},
|
||||
showGreet() {
|
||||
return !this.isGroupApplication && this.application.handleResult === 1;
|
||||
},
|
||||
showStateStr() {
|
||||
if (
|
||||
(this.isRecv && this.application.handleResult === 0) ||
|
||||
this.showGreet
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
showAccept() {
|
||||
return this.application.handleResult === 0 && this.isRecv;
|
||||
},
|
||||
getStateStr() {
|
||||
if (this.application.handleResult === -1) {
|
||||
return "已拒绝";
|
||||
}
|
||||
if (this.application.handleResult === 0) {
|
||||
return "等待验证";
|
||||
}
|
||||
return "已同意";
|
||||
},
|
||||
getAvatarUrl() {
|
||||
if (this.isGroupApplication) {
|
||||
return this.application.groupFaceURL;
|
||||
}
|
||||
return this.application[this.isRecv ? "fromFaceURL" : "toFaceURL"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
if (this.showAccept) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/contact/applicationDetails/index?application=${JSON.stringify(
|
||||
this.application,
|
||||
)}`,
|
||||
});
|
||||
} else {
|
||||
let sourceID =
|
||||
this.application.groupID ??
|
||||
(this.isRecv
|
||||
? this.application.fromUserID
|
||||
: this.application.toUserID);
|
||||
let cardType = this.isGroupApplication ? "groupCard" : "userCard";
|
||||
const url = `/pages/common/${cardType}/index?sourceID=${sourceID}`;
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
acceptApplication() {
|
||||
this.accessLoading = true;
|
||||
let func;
|
||||
if (this.isGroupApplication) {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptGroupApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
groupID: this.application.groupID,
|
||||
fromUserID: this.application.userID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
} else {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptFriendApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
toUserID: this.application.fromUserID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
}
|
||||
func
|
||||
.then(() => uni.$u.toast("操作成功"))
|
||||
.catch(() => uni.$u.toast("操作失败"))
|
||||
.finally(() => (this.accessLoading = false));
|
||||
},
|
||||
greetToUser() {
|
||||
navigateToDesignatedConversation(
|
||||
this.application[this.isRecv ? "fromUserID" : "toUserID"],
|
||||
SessionType.Single,
|
||||
).catch(() => uni.$u.toast("获取会话信息失败"));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.application_item {
|
||||
// @include vCenterBox();
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
background-color: #fff;
|
||||
|
||||
&_details {
|
||||
@include vCenterBox();
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
@include colBox(false);
|
||||
font-size: 26rpx;
|
||||
width: 100%;
|
||||
|
||||
.user_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.req_message {
|
||||
@include ellipsisWithLine(2);
|
||||
max-width: 80%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rpx;
|
||||
word-break: break-all;
|
||||
width: 75%;
|
||||
|
||||
.group_name {
|
||||
margin-left: 12rpx;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application_action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
.status_tip {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.access_btn {
|
||||
padding: 0 12rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.greet {
|
||||
color: #418ae5;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-list-item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="application_list_container">
|
||||
<custom-nav-bar :title="isGroupApplication ? '新的群聊' : '新的好友'" />
|
||||
<view
|
||||
class="pane_row"
|
||||
:style="{ transform: `translateX(${isRecv ? '0' : '-100%'})` }"
|
||||
>
|
||||
<view class="pane_content">
|
||||
<u-list v-if="getRecvRenderData.length > 0" class="application_list">
|
||||
<u-list-item
|
||||
v-for="application in getRecvRenderData"
|
||||
:key="
|
||||
application[!isGroupApplication ? 'fromUserID' : 'userID'] +
|
||||
application.groupID
|
||||
"
|
||||
>
|
||||
<application-item :isRecv="true" :application="application" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<u-list
|
||||
v-else-if="getSendRenderData.length > 0"
|
||||
class="application_list"
|
||||
>
|
||||
<u-list-item
|
||||
v-for="application in getSendRenderData"
|
||||
:key="application[!isGroupApplication ? 'toUserID' : 'groupID']"
|
||||
>
|
||||
<application-item :application="application" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<view v-else class="empty">
|
||||
<image src="@/static/images/block_empty.png"></image>
|
||||
<text class="empty_text">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { ContactMenuTypes } from "@/constant";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ApplicationItem from "./ApplicationItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ApplicationItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
isRecv: true,
|
||||
isGroupApplication: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeRecvFriendApplications",
|
||||
"storeSentFriendApplications",
|
||||
"storeRecvGroupApplications",
|
||||
"storeSentGroupApplications",
|
||||
]),
|
||||
getRecvRenderData() {
|
||||
const tmpList = this.isGroupApplication
|
||||
? this.storeRecvGroupApplications
|
||||
: this.storeRecvFriendApplications;
|
||||
tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
|
||||
return tmpList.slice(0, 4);
|
||||
},
|
||||
getSendRenderData() {
|
||||
const tmpList = this.isGroupApplication
|
||||
? this.storeSentGroupApplications
|
||||
: this.storeSentFriendApplications;
|
||||
tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
|
||||
return tmpList.slice(0, 4);
|
||||
},
|
||||
tabList() {
|
||||
return [
|
||||
{
|
||||
name: this.isGroupApplication ? "入群申请" : "好友请求",
|
||||
},
|
||||
{
|
||||
name: "我的请求",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
onLoad(params) {
|
||||
const { applicationType } = params;
|
||||
this.isGroupApplication = applicationType === ContactMenuTypes.NewGroup;
|
||||
},
|
||||
methods: {
|
||||
clickTab({ index }) {
|
||||
this.isRecv = index === 0;
|
||||
},
|
||||
previewAll() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/contact/applicationListDetails/index?isGroupApplication=${this.isGroupApplication}&isRecv=${this.isRecv}`,
|
||||
});
|
||||
},
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${this.isGroupApplication}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty {
|
||||
@include centerBox();
|
||||
flex-direction: column;
|
||||
margin-top: 25vh !important;
|
||||
|
||||
&_text {
|
||||
margin-top: 26rpx;
|
||||
color: #8e9ab0;
|
||||
}
|
||||
image {
|
||||
width: 237rpx;
|
||||
height: 244rpx;
|
||||
}
|
||||
}
|
||||
.application_list_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
overflow-x: hidden;
|
||||
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.u-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pane_row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
transition: all 0.3s ease 0s !important;
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.pane_content {
|
||||
@include colBox(false);
|
||||
height: 100%;
|
||||
flex: 0 0 100%;
|
||||
|
||||
.pane_title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding: 12rpx 44rpx;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.application_list {
|
||||
flex: 1;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view_all {
|
||||
background-color: #fff;
|
||||
padding: 44rpx 44rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="application_list_container">
|
||||
<custom-nav-bar :title="getTitle" />
|
||||
|
||||
<u-list class="application_list">
|
||||
<u-list-item
|
||||
v-for="application in getRenderData"
|
||||
:key="getKey(application)"
|
||||
>
|
||||
<application-item :isRecv="isRecv" :application="application" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ApplicationItem from "../applicationList/ApplicationItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ApplicationItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isGroupApplication: false,
|
||||
isRecv: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getRenderData() {
|
||||
let getterKey = this.isRecv
|
||||
? "storeRecvFriendApplications"
|
||||
: "storeSentFriendApplications";
|
||||
if (this.isGroupApplication) {
|
||||
getterKey = this.isRecv
|
||||
? "storeRecvGroupApplications"
|
||||
: "storeSentGroupApplications";
|
||||
}
|
||||
return [...this.$store.getters[getterKey]].sort((a, b) =>
|
||||
a.handleResult === 0 ? -1 : 1,
|
||||
);
|
||||
},
|
||||
getKey() {
|
||||
return (application) => {
|
||||
if (this.isGroupApplication) {
|
||||
return this.isRecv
|
||||
? application.userID + application.groupID
|
||||
: application.groupID;
|
||||
}
|
||||
return application[this.isRecv ? "fromUserID" : "toUserID"];
|
||||
};
|
||||
},
|
||||
getTitle() {
|
||||
if (!this.isRecv) {
|
||||
return "我的申请";
|
||||
}
|
||||
return this.isGroupApplication ? "群通知" : "好友请求";
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const { isGroupApplication, isRecv } = options;
|
||||
this.isGroupApplication = JSON.parse(isGroupApplication);
|
||||
this.isRecv = JSON.parse(isRecv);
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.application_list_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.application_list {
|
||||
margin-top: 24rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view class="action_item" @click="onClick">
|
||||
<slot name="icon">
|
||||
<view class="action_icon">
|
||||
<image :src="action.icon" mode=""></image>
|
||||
</view>
|
||||
</slot>
|
||||
|
||||
<view class="action_details">
|
||||
<text class="title">{{ action.title }}</text>
|
||||
<text class="desc">{{ action.desc }}</text>
|
||||
<view class="bottom_line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
action: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit("click", this.action);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.action_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
|
||||
.action_icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.action_details {
|
||||
@include colBox(false);
|
||||
margin-left: 48rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="contact_add_container">
|
||||
<custom-nav-bar title="添加" />
|
||||
|
||||
<view class="action_row">
|
||||
<action-item
|
||||
@click="friendAction(item)"
|
||||
v-for="item in friendActionMenus"
|
||||
:action="item"
|
||||
:key="item.idx"
|
||||
/>
|
||||
<action-item
|
||||
@click="groupAction(item)"
|
||||
v-for="item in groupActionMenus"
|
||||
:action="item"
|
||||
:key="item.idx"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ActionItem from "./ActionItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ActionItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupActionMenus: [
|
||||
{
|
||||
idx: 0,
|
||||
title: "创建群聊",
|
||||
desc: "创建群聊，全面使用OpenIM",
|
||||
icon: require("static/images/contact_add_create_group.png"),
|
||||
},
|
||||
{
|
||||
idx: 1,
|
||||
title: "添加群聊",
|
||||
desc: "向管理员或团队成员询问ID",
|
||||
icon: require("static/images/contact_add_join_group.png"),
|
||||
},
|
||||
],
|
||||
friendActionMenus: [
|
||||
{
|
||||
idx: 0,
|
||||
title: "添加好友",
|
||||
desc: "通过手机号/ID号/搜索添加",
|
||||
icon: require("static/images/contact_add_search_user.png"),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
groupAction({ idx }) {
|
||||
if (idx === 0) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/createGroup/index`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/contact/switchJoinGroup/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
friendAction({ idx }) {
|
||||
if (!idx) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/searchUserOrGroup/index?isSearchGroup=false",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact_add_container {
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.desc_title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 24rpx 44rpx;
|
||||
}
|
||||
|
||||
.action_row {
|
||||
margin-top: 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.action_item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="friend_list_container">
|
||||
<custom-nav-bar title="我的好友" />
|
||||
<view class="search_bar_wrap">
|
||||
<u-search
|
||||
class="search_bar"
|
||||
shape="square"
|
||||
placeholder="搜索"
|
||||
:showAction="false"
|
||||
disabled
|
||||
/>
|
||||
</view>
|
||||
|
||||
<choose-index-list
|
||||
v-if="getIndexData.dataList.length > 0"
|
||||
@itemClick="userClick"
|
||||
:height="`${listHeight}px`"
|
||||
:indexList="getIndexData.indexList"
|
||||
:itemArr="getIndexData.dataList"
|
||||
/>
|
||||
<u-empty v-else mode="list" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { formatChooseData } from "@/util/common";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ChooseIndexList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
listHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeFriendList"]),
|
||||
getIndexData() {
|
||||
return formatChooseData(this.storeFriendList);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getListHeight();
|
||||
},
|
||||
methods: {
|
||||
userClick(friend) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userCard/index?sourceID=${friend.userID}`,
|
||||
});
|
||||
},
|
||||
async getListHeight() {
|
||||
const windowInfo = uni.getWindowInfo();
|
||||
const data = await this.getEl(".search_bar_wrap");
|
||||
const searchBarHeight = Number(data.height.toFixed());
|
||||
this.listHeight =
|
||||
windowInfo.windowHeight -
|
||||
windowInfo.statusBarHeight -
|
||||
44 -
|
||||
searchBarHeight;
|
||||
},
|
||||
getEl(el) {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(el)
|
||||
.boundingClientRect((data) => {
|
||||
// 存在data，且存在宽和高，视为渲染完毕
|
||||
resolve(data);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.friend_list_container {
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
}
|
||||
|
||||
.u-empty {
|
||||
margin-top: 25vh !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view @click="toGroupCard" class="group_item">
|
||||
<my-avatar :src="groupInfo.faceURL" :isGroup="true" size="42" />
|
||||
<view class="group_info">
|
||||
<text class="group_name">{{ groupInfo.groupName }}</text>
|
||||
<view class="group_details">
|
||||
<text>{{ `${groupInfo.memberCount}人` }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
groupInfo: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
toGroupCard() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/groupCard/index?sourceID=${this.groupInfo.groupID}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_item {
|
||||
@include vCenterBox();
|
||||
padding: 24rpx 44rpx;
|
||||
|
||||
.group_info {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.group_name {
|
||||
@include nomalEllipsis() ;
|
||||
max-width: 400rpx;
|
||||
}
|
||||
|
||||
.group_details {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="group_list_container">
|
||||
<custom-nav-bar title="我的群组">
|
||||
|
||||
</custom-nav-bar>
|
||||
<view class="search_bar_wrap">
|
||||
<u-search
|
||||
class="search_bar"
|
||||
shape="square"
|
||||
placeholder="搜索"
|
||||
disabled
|
||||
:showAction="false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<u-tabs :scrollable="false" :list="tabList" @click="clickTab"></u-tabs>
|
||||
|
||||
<view
|
||||
class="pane_row"
|
||||
:style="{ transform: `translateX(${isMyCreate ? '0' : '-100%'})` }"
|
||||
>
|
||||
<view class="pane_content">
|
||||
<u-list
|
||||
v-if="getMyCreateGroupList.length > 0"
|
||||
class="group_list"
|
||||
:height="`${getListHeight}px`"
|
||||
>
|
||||
<u-list-item
|
||||
v-for="group in getMyCreateGroupList"
|
||||
:key="group.groupID"
|
||||
>
|
||||
<group-item :groupInfo="group" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<u-empty v-else mode="list" />
|
||||
</view>
|
||||
|
||||
<view class="pane_content">
|
||||
<u-list
|
||||
v-if="getMyJoinedGroupList.length > 0"
|
||||
class="group_list"
|
||||
:height="`${getListHeight}px`"
|
||||
>
|
||||
<u-list-item
|
||||
v-for="group in getMyJoinedGroupList"
|
||||
:key="group.groupID"
|
||||
>
|
||||
<group-item :groupInfo="group" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<u-empty v-else mode="list" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import GroupItem from "./GroupItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
GroupItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
tabList: [
|
||||
{
|
||||
name: "我创建的",
|
||||
},
|
||||
{
|
||||
name: "我加入的",
|
||||
},
|
||||
],
|
||||
isMyCreate: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeGroupList", "storeCurrentUserID"]),
|
||||
getMyCreateGroupList() {
|
||||
return this.storeGroupList.filter(
|
||||
(group) => group.ownerUserID === this.storeCurrentUserID,
|
||||
);
|
||||
},
|
||||
getListHeight() {
|
||||
const statusBar = uni.getWindowInfo().statusBarHeight;
|
||||
const searchBar = 58;
|
||||
const tabAndNavBar = 44 * 2;
|
||||
const titleBar = 32;
|
||||
return (
|
||||
uni.getWindowInfo().safeArea.height -
|
||||
statusBar -
|
||||
searchBar -
|
||||
tabAndNavBar -
|
||||
titleBar
|
||||
);
|
||||
},
|
||||
getMyJoinedGroupList() {
|
||||
// console.log(this.storeGroupList.filter(group => group.ownerUserID !== this.storeCurrentUserID));
|
||||
return this.storeGroupList.filter(
|
||||
(group) => group.ownerUserID !== this.storeCurrentUserID,
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
clickTab({ index }) {
|
||||
this.isMyCreate = index === 0;
|
||||
},
|
||||
toCreateGroup() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/createGroup/index`,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_list_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
.nav_right_action {
|
||||
padding-right: 44rpx;
|
||||
}
|
||||
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
}
|
||||
|
||||
.pane_row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
transition: all 0.3s ease 0s !important;
|
||||
border-top: 2rpx solid #e8eaef;
|
||||
// overflow-x: hidden;
|
||||
|
||||
.pane_content {
|
||||
@include colBox(false);
|
||||
height: 100%;
|
||||
flex: 0 0 100%;
|
||||
|
||||
.pane_title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 6px 22px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="menu_list">
|
||||
<view
|
||||
@click="menuClick(item)"
|
||||
v-for="item in getMenus"
|
||||
:key="item.idx"
|
||||
class="menu_list_item"
|
||||
>
|
||||
<image class="menu_icon" :src="item.icon" mode=""></image>
|
||||
<view class="item_content">
|
||||
<text class="title">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<view class="icon">
|
||||
<u-icon name="arrow-right" color="#999" size="18" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu_list">
|
||||
<view
|
||||
@click="menuClick(item)"
|
||||
v-for="item in getFriendsMenus"
|
||||
:key="item.idx"
|
||||
class="menu_list_item"
|
||||
>
|
||||
<image class="menu_icon" :src="item.icon" mode=""></image>
|
||||
<view class="item_content">
|
||||
<text class="title">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<view class="icon">
|
||||
<u-icon name="arrow-right" color="#999" size="18" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { ContactMenuTypes } from "@/constant";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
getMenus() {
|
||||
return [
|
||||
{
|
||||
idx: 0,
|
||||
type: ContactMenuTypes.NewFriend,
|
||||
title: "新的好友",
|
||||
icon: require("static/images/contact_new_friend.png"),
|
||||
},
|
||||
{
|
||||
idx: 1,
|
||||
type: ContactMenuTypes.NewGroup,
|
||||
title: "新的群组",
|
||||
icon: require("static/images/contact_new_group.png"),
|
||||
},
|
||||
];
|
||||
},
|
||||
getFriendsMenus() {
|
||||
return [
|
||||
{
|
||||
idx: 2,
|
||||
type: ContactMenuTypes.MyFriend,
|
||||
title: "我的好友",
|
||||
icon: require("static/images/contact_my_friend.png"),
|
||||
badge: 0,
|
||||
},
|
||||
{
|
||||
idx: 3,
|
||||
type: ContactMenuTypes.MyGroup,
|
||||
title: "我的群组",
|
||||
icon: require("static/images/contact_my_group.png"),
|
||||
badge: 0,
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
menuClick({ type }) {
|
||||
switch (type) {
|
||||
case ContactMenuTypes.NewFriend:
|
||||
case ContactMenuTypes.NewGroup:
|
||||
uni.navigateTo({
|
||||
url: `/pages/contact/applicationList/index?applicationType=${type}`,
|
||||
});
|
||||
break;
|
||||
case ContactMenuTypes.MyFriend:
|
||||
uni.navigateTo({
|
||||
url: "/pages/contact/friendList/index",
|
||||
});
|
||||
break;
|
||||
case ContactMenuTypes.MyGroup:
|
||||
uni.navigateTo({
|
||||
url: "/pages/contact/groupList/index",
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu_list {
|
||||
margin-bottom: 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&_item {
|
||||
@include vCenterBox();
|
||||
margin: 0 44rpx;
|
||||
padding: 24rpx 0;
|
||||
color: #0c1c33;
|
||||
|
||||
.menu_icon {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.item_content {
|
||||
@include btwBox();
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
|
||||
.u-badge {
|
||||
width: fit-content;
|
||||
padding: 8rpx 12rpx;
|
||||
line-height: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="contact_container">
|
||||
<custom-nav-bar>
|
||||
<view class="contact_title" slot="left">
|
||||
<text>通讯录</text>
|
||||
</view>
|
||||
<view class="contact_action" slot="more">
|
||||
<view @click="contactAddClick" class="search_icon">
|
||||
<image src="@/static/images/common_add.png" alt="" srcset="" />
|
||||
</view>
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
<contact-menus />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ContactMenus from "./components/ContactMenus.vue";
|
||||
import UserItem from "@/components/UserItem/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ContactMenus,
|
||||
UserItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
frequentContacts: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
contactAddClick() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/contact/contactAdd/index",
|
||||
});
|
||||
},
|
||||
userClick(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userCard/index?sourceID=${item.userID}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.contact_title {
|
||||
padding-left: 44rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #0c1c33;
|
||||
}
|
||||
|
||||
.contact_action {
|
||||
padding-right: 36rpx;
|
||||
display: flex;
|
||||
|
||||
.search_icon {
|
||||
margin: 0 16rpx;
|
||||
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 44rpx;
|
||||
}
|
||||
|
||||
.user_list {
|
||||
flex: 1;
|
||||
margin-top: 24rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="search_group_container">
|
||||
<custom-nav-bar title="搜索群组" />
|
||||
<view class="search_bar_wrap">
|
||||
<u-search
|
||||
class="search_bar"
|
||||
shape="square"
|
||||
placeholder="搜索群组"
|
||||
:showAction="false"
|
||||
v-model="keyword"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="search_results">
|
||||
<u-empty mode="search" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import GroupItem from "../groupList/GroupItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
GroupItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
userClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search_group_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
}
|
||||
|
||||
.search_results {
|
||||
flex: 1;
|
||||
.group_list {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="switch_join_container">
|
||||
<custom-nav-bar title="加入群聊" />
|
||||
|
||||
<view class="action_row">
|
||||
<action-item
|
||||
@click="actionClick(item)"
|
||||
v-for="item in joinGroupMenus"
|
||||
:action="item"
|
||||
:key="item.idx"
|
||||
>
|
||||
<view
|
||||
class="custom_icon"
|
||||
:class="{ custom_icon_id: item.idx === 1 }"
|
||||
slot="icon"
|
||||
>
|
||||
<image :src="item.icon" mode=""> </image>
|
||||
</view>
|
||||
</action-item>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ActionItem from "../contactAdd/ActionItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ActionItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
joinGroupMenus: [
|
||||
{
|
||||
idx: 1,
|
||||
title: "群ID号加入",
|
||||
desc: "向管理员或团队成员询问ID",
|
||||
icon: require("static/images/switch_join_id.png"),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
actionClick({ idx }) {
|
||||
if (idx) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/searchUserOrGroup/index?isSearchGroup=true",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.switch_join_container {
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.desc_title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 24rpx 44rpx;
|
||||
}
|
||||
|
||||
.action_row {
|
||||
background-color: #fff;
|
||||
|
||||
.custom_icon {
|
||||
@include centerBox();
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background-color: #5496eb;
|
||||
|
||||
image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&_id {
|
||||
background-color: #ffc563;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .action_item {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.action_item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="chat_action_bar">
|
||||
<u-row class="action_row">
|
||||
<u-col
|
||||
v-for="item in actionList"
|
||||
:key="item.idx"
|
||||
@click="actionClick(item)"
|
||||
span="3"
|
||||
>
|
||||
<view class="action_item">
|
||||
<image :src="item.icon" alt="" srcset="" />
|
||||
<text class="action_item_title">{{ item.title }}</text>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChatingFooterActionTypes,
|
||||
} from "@/constant";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
actionList: [
|
||||
{
|
||||
idx: 0,
|
||||
type: ChatingFooterActionTypes.Album,
|
||||
title: "相册",
|
||||
icon: require("static/images/chating_action_image.png"),
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async actionClick(action) {
|
||||
switch (action.type) {
|
||||
case ChatingFooterActionTypes.Album:
|
||||
this.$emit("prepareMediaMessage", action.type);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat_action_bar {
|
||||
position: relative;
|
||||
background: #f0f2f6;
|
||||
padding: 24rpx 36rpx;
|
||||
|
||||
.action_row {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.action_item {
|
||||
@include centerBox();
|
||||
flex-direction: column;
|
||||
margin-top: 24rpx;
|
||||
|
||||
image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
&_title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="editor_wrap">
|
||||
<editor :placeholder="placeholder" id="editor2" @ready="editorReady" @focus="editorFocus" @blur="editorBlur"
|
||||
@input="editorInput" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
html2Text
|
||||
} from "@/util/common";
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editorCtx: null,
|
||||
lastStr: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
editorReady() {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#editor2")
|
||||
.context((res) => {
|
||||
this.$emit("ready", res);
|
||||
this.editorCtx = res.context;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
editorFocus() {
|
||||
this.$emit("focus");
|
||||
},
|
||||
editorBlur() {
|
||||
this.$emit("blur");
|
||||
},
|
||||
editorInput(e) {
|
||||
let str = e.detail.html;
|
||||
const oldArr = (this.lastStr ?? '').split("");
|
||||
let contentStr = str;
|
||||
oldArr.forEach((str) => {
|
||||
contentStr = contentStr.replace(str, "");
|
||||
});
|
||||
contentStr = html2Text(contentStr);
|
||||
this.$emit("input", e);
|
||||
this.lastStr = e.detail.html;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editor_wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#editor2 {
|
||||
background-color: #fff;
|
||||
min-height: 30px;
|
||||
max-height: 120px;
|
||||
height: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
::v-deep.ql-editor {
|
||||
img {
|
||||
vertical-align: sub !important;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas_container {
|
||||
position: fixed;
|
||||
bottom: -99px;
|
||||
z-index: -100;
|
||||
|
||||
&_name {
|
||||
max-width: 480rpx;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#atCanvas {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.convas_container_name {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<view class="chat_footer">
|
||||
<view class="input_content">
|
||||
<CustomEditor class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
|
||||
@blur="editorBlur" @input="editorInput" />
|
||||
</view>
|
||||
|
||||
<view class="footer_action_area">
|
||||
<image v-show="!hasContent" @click.prevent="updateActionBar"
|
||||
src="@/static/images/chating_footer_add.png" alt="" srcset="" />
|
||||
<image v-show="hasContent" @touchend.prevent="sendTextMessage" src="@/static/images/send_btn.png"
|
||||
alt="" srcset="" />
|
||||
</view>
|
||||
</view>
|
||||
<chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
|
||||
v-show="actionBarVisible" />
|
||||
<u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
|
||||
:closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
|
||||
@close="showActionSheet = false">
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import {
|
||||
getPurePath,
|
||||
html2Text
|
||||
} from "@/util/common";
|
||||
import {
|
||||
offlinePushInfo
|
||||
} from "@/util/imCommon";
|
||||
import {
|
||||
ChatingFooterActionTypes,
|
||||
UpdateMessageTypes,
|
||||
} from "@/constant";
|
||||
import IMSDK, {
|
||||
IMMethods,
|
||||
MessageStatus,
|
||||
MessageType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import UParse from "@/components/gaoyia-parse/parse.vue";
|
||||
import CustomEditor from "./CustomEditor.vue";
|
||||
import ChatingActionBar from "./ChatingActionBar.vue";
|
||||
|
||||
const needClearTypes = [MessageType.TextMessage];
|
||||
|
||||
const albumChoose = [{
|
||||
name: "图片",
|
||||
type: ChatingFooterActionTypes.Album,
|
||||
idx: 0,
|
||||
},
|
||||
{
|
||||
name: "拍照",
|
||||
type: ChatingFooterActionTypes.Camera,
|
||||
idx: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomEditor,
|
||||
ChatingActionBar,
|
||||
UParse,
|
||||
},
|
||||
props: {
|
||||
footerOutsideFlag: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customEditorCtx: null,
|
||||
inputHtml: "",
|
||||
actionBarVisible: false,
|
||||
isInputFocus: false,
|
||||
actionSheetMenu: [],
|
||||
showActionSheet: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentGroup",
|
||||
"storeBlackList",
|
||||
]),
|
||||
hasContent() {
|
||||
return html2Text(this.inputHtml) !== "";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
footerOutsideFlag(newVal) {
|
||||
this.onClickActionBarOutside();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setKeyboardListener();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.disposeKeyboardListener();
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
|
||||
async createTextMessage() {
|
||||
let message = "";
|
||||
const text = html2Text(this.inputHtml);
|
||||
message = await IMSDK.asyncApi(
|
||||
IMMethods.CreateTextMessage,
|
||||
IMSDK.uuid(),
|
||||
text
|
||||
);
|
||||
console.log(message);
|
||||
return message;
|
||||
},
|
||||
async sendTextMessage() {
|
||||
if (!this.hasContent) return;
|
||||
const message = await this.createTextMessage();
|
||||
this.sendMessage(message);
|
||||
},
|
||||
sendMessage(message) {
|
||||
this.pushNewMessage(message);
|
||||
if (needClearTypes.includes(message.contentType)) {
|
||||
this.customEditorCtx.clear();
|
||||
}
|
||||
this.$emit("scrollToBottom");
|
||||
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
|
||||
recvID: this.storeCurrentConversation.userID,
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
message,
|
||||
offlinePushInfo,
|
||||
})
|
||||
.then(({
|
||||
data
|
||||
}) => {
|
||||
this.updateOneMessage({
|
||||
message: data,
|
||||
isSuccess: true,
|
||||
});
|
||||
})
|
||||
.catch(({
|
||||
data,
|
||||
errCode,
|
||||
errMsg
|
||||
}) => {
|
||||
this.updateOneMessage({
|
||||
message: data,
|
||||
type: UpdateMessageTypes.KeyWords,
|
||||
keyWords: [{
|
||||
key: "status",
|
||||
value: MessageStatus.Failed,
|
||||
},
|
||||
{
|
||||
key: "errCode",
|
||||
value: errCode,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// action
|
||||
onClickActionBarOutside() {
|
||||
if (this.actionBarVisible) {
|
||||
this.actionBarVisible = false;
|
||||
}
|
||||
},
|
||||
updateActionBar() {
|
||||
this.actionBarVisible = !this.actionBarVisible;
|
||||
},
|
||||
editorReady(e) {
|
||||
this.customEditorCtx = e.context;
|
||||
this.customEditorCtx.clear();
|
||||
},
|
||||
editorFocus() {
|
||||
this.isInputFocus = true;
|
||||
this.$emit("scrollToBottom");
|
||||
},
|
||||
editorBlur() {
|
||||
this.isInputFocus = false;
|
||||
},
|
||||
editorInput(e) {
|
||||
this.inputHtml = e.detail.html;
|
||||
},
|
||||
prepareMediaMessage(type) {
|
||||
if (type === ChatingFooterActionTypes.Album) {
|
||||
this.actionSheetMenu = [...albumChoose];
|
||||
}
|
||||
this.showActionSheet = true;
|
||||
},
|
||||
|
||||
// from comp
|
||||
batchCreateImageMesage(paths) {
|
||||
paths.forEach(async (path) => {
|
||||
const message = await IMSDK.asyncApi(
|
||||
IMMethods.CreateImageMessageFromFullPath,
|
||||
IMSDK.uuid(),
|
||||
getPurePath(path)
|
||||
);
|
||||
this.sendMessage(message);
|
||||
});
|
||||
},
|
||||
selectClick({
|
||||
idx
|
||||
}) {
|
||||
if (idx === 0) {
|
||||
this.chooseOrShotImage(["album"]).then((paths) =>
|
||||
this.batchCreateImageMesage(paths)
|
||||
);
|
||||
} else {
|
||||
this.chooseOrShotImage(["camera"]).then((paths) =>
|
||||
this.batchCreateImageMesage(paths)
|
||||
);
|
||||
}
|
||||
},
|
||||
chooseOrShotImage(sourceType) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sizeType: ["compressed"],
|
||||
sourceType,
|
||||
success: function({
|
||||
tempFilePaths
|
||||
}) {
|
||||
resolve(tempFilePaths);
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err);
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// keyboard
|
||||
keyboardChangeHander({
|
||||
height
|
||||
}) {
|
||||
if (height > 0) {
|
||||
if (this.actionBarVisible) {
|
||||
this.actionBarVisible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
setKeyboardListener() {
|
||||
uni.onKeyboardHeightChange(this.keyboardChangeHander);
|
||||
},
|
||||
disposeKeyboardListener() {
|
||||
uni.offKeyboardHeightChange(this.keyboardChangeHander);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom_editor {
|
||||
img {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
.forbidden_footer {
|
||||
width: 100%;
|
||||
height: 112rpx;
|
||||
color: #8e9ab0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f0f2f6;
|
||||
}
|
||||
|
||||
.chat_footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-color: #e9f4ff;
|
||||
background: #f0f2f6;
|
||||
// height: 50px;
|
||||
max-height: 120px;
|
||||
padding: 24rpx 20rpx;
|
||||
|
||||
.input_content {
|
||||
flex: 1;
|
||||
min-height: 30px;
|
||||
max-height: 120px;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
|
||||
.record_btn {
|
||||
// background-color: #3c9cff;
|
||||
background: #fff;
|
||||
color: black;
|
||||
height: 30px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quote_message {
|
||||
@include vCenterBox();
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
padding: 8rpx;
|
||||
// padding-top: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
|
||||
.content {
|
||||
::v-deep uni-view {
|
||||
@include ellipsisWithLine(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer_action_area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.emoji_action {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.send_btn {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #4a9cfc;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<u-navbar @click="click" placeholder class="chating_header">
|
||||
<view @click="routeBack" class="u-nav-slot" slot="left">
|
||||
<img class="back_icon" width="12" height="20" src="static/images/common_left_arrow.png" alt="" srcset="" />
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="center">
|
||||
<view class="chating_info" :class="{ chating_info_single: isSingle }">
|
||||
<view class="conversation_info">
|
||||
<view class="title">{{ storeCurrentConversation.showName }}</view>
|
||||
<view v-if="!isSingle && !isNotify" class="sub_title">{{ groupMemberCount }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="right">
|
||||
<view class="right_action">
|
||||
<u-icon @click="goSetting" class="action_item" name="more-dot-fill" size="23" color="#0C1C33">
|
||||
</u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
SessionType
|
||||
} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
|
||||
export default {
|
||||
name: "ChatingHeader",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMoreMember: false,
|
||||
joinLock: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentGroup",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeSelfInfo",
|
||||
]),
|
||||
isSingle() {
|
||||
return (
|
||||
this.storeCurrentConversation.conversationType === SessionType.Single
|
||||
);
|
||||
},
|
||||
isNotify() {
|
||||
return (
|
||||
this.storeCurrentConversation.conversationType ===
|
||||
SessionType.Notification
|
||||
);
|
||||
},
|
||||
groupMemberCount() {
|
||||
return `(${this.storeCurrentGroup?.memberCount ?? 0})`;
|
||||
},
|
||||
canGoSetting() {
|
||||
if (this.isSingle) {
|
||||
return true;
|
||||
}
|
||||
return (
|
||||
this.storeCurrentMemberInGroup.groupID ===
|
||||
this.storeCurrentConversation.groupID
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
click(e) {
|
||||
this.$emit("click", e);
|
||||
},
|
||||
routeBack() {
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
});
|
||||
},
|
||||
goSetting() {
|
||||
const url = this.isSingle ?
|
||||
"/pages/conversation/singleSettings/index" :
|
||||
"/pages/conversation/groupSettings/index";
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chating_header {
|
||||
border: 2rpx solid #e8eaef;
|
||||
|
||||
::v-deep .u-navbar__content__left {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.back_icon {
|
||||
padding: 24rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.chating_info {
|
||||
@include vCenterBox();
|
||||
flex-direction: column;
|
||||
|
||||
&_single {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.conversation_info {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@include vCenterBox();
|
||||
|
||||
.title {
|
||||
@include nomalEllipsis();
|
||||
max-width: 280rpx;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub_title {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.online_state {
|
||||
@include vCenterBox();
|
||||
flex-direction: row;
|
||||
margin-top: 6rpx;
|
||||
// position: absolute;
|
||||
// top: 2px;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
|
||||
.dot {
|
||||
background-color: #10cc64;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.online_str {
|
||||
@include nomalEllipsis();
|
||||
max-width: 280rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content__right {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right_action {
|
||||
@include vCenterBox();
|
||||
flex-direction: row;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.action_item {
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group_announcement_tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
left: 6%;
|
||||
// bottom: -44px;
|
||||
margin-top: 40rpx;
|
||||
padding: 14rpx 32rpx;
|
||||
background-color: #f0f6ff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.announcement_header {
|
||||
@include vCenterBox();
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&_left {
|
||||
@include vCenterBox();
|
||||
}
|
||||
}
|
||||
|
||||
.announcement_content {
|
||||
@include ellipsisWithLine(2);
|
||||
margin: 0 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #617183;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.group_calling_tab {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
margin-top: 12px;
|
||||
margin-left: 5%;
|
||||
padding: 24rpx;
|
||||
background-color: #f4f9ff;
|
||||
border-radius: 8rpx;
|
||||
color: #5496eb;
|
||||
font-size: 24rpx;
|
||||
|
||||
.base_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 9px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member_row {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-top: 24rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid rgba(151, 151, 151, 0.16);
|
||||
border-top-left-radius: 8rpx;
|
||||
border-top-right-radius: 8rpx;
|
||||
|
||||
.u-avatar {
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:not(:nth-child(6n)) {
|
||||
margin-right: calc(6% / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action_row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24rpx;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<scroll-view :scroll-with-animation="withAnimation" @click="click" id="scroll_view" :style="{
|
||||
height: '1px'
|
||||
}" @scroll="throttleScroll" :scroll-top="scrollTop" scroll-y :scroll-into-view="scrollIntoView"
|
||||
upper-threshold="250" @scrolltoupper="scrolltoupper">
|
||||
<view id="scroll_wrap">
|
||||
<u-loadmore nomoreText="" :status="loadMoreStatus" />
|
||||
<view v-for="item in storeHistoryMessageList" :key="item.clientMsgID">
|
||||
<message-item-render @messageItemRender="messageItemRender" :source="item"
|
||||
:isSender="item.sendID === storeCurrentUserID" />
|
||||
</view>
|
||||
<view style="visibility: hidden; height: 12px" id="auchormessage_bottom_item"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import MessageItemRender from "./MessageItem/index.vue";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MessageItemRender,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
scrollIntoView: "",
|
||||
scrollWithAnimation: false,
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
},
|
||||
initFlag: true,
|
||||
isOverflow: false,
|
||||
needScoll: true,
|
||||
withAnimation: false,
|
||||
messageLoadState: {
|
||||
loading: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeHistoryMessageList",
|
||||
"storeHasMoreMessage",
|
||||
"storeCurrentUserID",
|
||||
"storeSelfInfo",
|
||||
]),
|
||||
loadMoreStatus() {
|
||||
if (!this.storeHasMoreMessage) {
|
||||
return "nomore";
|
||||
}
|
||||
return this.messageLoadState.loading ? "loading" : "loadmore";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadMessageList();
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["getHistoryMesageList"]),
|
||||
messageItemRender(clientMsgID) {
|
||||
if (
|
||||
this.initFlag &&
|
||||
clientMsgID ===
|
||||
this.storeHistoryMessageList[this.storeHistoryMessageList.length - 1]
|
||||
.clientMsgID
|
||||
) {
|
||||
this.initFlag = false;
|
||||
setTimeout(() => this.scrollToBottom(true), 200);
|
||||
this.checkInitHeight();
|
||||
}
|
||||
},
|
||||
async loadMessageList(isLoadMore = false) {
|
||||
this.messageLoadState.loading = true;
|
||||
const lastMsgID = this.storeHistoryMessageList[0]?.clientMsgID;
|
||||
const options = {
|
||||
conversationID: this.storeCurrentConversation.conversationID,
|
||||
count: 20,
|
||||
startClientMsgID: this.storeHistoryMessageList[0]?.clientMsgID ?? "",
|
||||
viewType: 0,
|
||||
};
|
||||
try {
|
||||
const {
|
||||
emptyFlag
|
||||
} =
|
||||
await this.getHistoryMesageList(options);
|
||||
if (emptyFlag) {
|
||||
this.$emit("initSuccess");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.$nextTick(function() {
|
||||
if (isLoadMore && lastMsgID) {
|
||||
this.scrollToAnchor(`auchor${lastMsgID}`);
|
||||
}
|
||||
this.messageLoadState.loading = false;
|
||||
});
|
||||
},
|
||||
click(e) {
|
||||
this.$emit("click", e);
|
||||
},
|
||||
onScroll(event) {
|
||||
const {
|
||||
scrollHeight,
|
||||
scrollTop
|
||||
} = event.target;
|
||||
this.old.scrollTop = scrollTop
|
||||
this.needScoll =
|
||||
scrollHeight - scrollTop < uni.getWindowInfo().windowHeight * 1.2;
|
||||
},
|
||||
throttleScroll(event) {
|
||||
uni.$u.throttle(() => this.onScroll(event), 150);
|
||||
},
|
||||
scrolltoupper() {
|
||||
if (!this.messageLoadState.loading && this.storeHasMoreMessage) {
|
||||
this.loadMessageList(true);
|
||||
}
|
||||
},
|
||||
scrollToBottom(isInit = false, isRecv = false) {
|
||||
if (isRecv && !this.needScoll) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isInit) {
|
||||
this.withAnimation = true;
|
||||
setTimeout(() => (this.withAnimation = false), 100);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select("#scroll_wrap")
|
||||
.boundingClientRect((res) => {
|
||||
// let top = res.height - this.scrollViewHeight;
|
||||
// if (top > 0) {
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(() => this.scrollTop = res.height);
|
||||
if (isInit) {
|
||||
this.$emit("initSuccess");
|
||||
}
|
||||
// }
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
scrollToAnchor(auchor) {
|
||||
this.$nextTick(function() {
|
||||
this.scrollIntoView = auchor;
|
||||
});
|
||||
},
|
||||
checkInitHeight() {
|
||||
this.getEl("#scroll_view").then(({
|
||||
height
|
||||
}) => {
|
||||
this.bgHeight = `${height}px`;
|
||||
});
|
||||
},
|
||||
getEl(el) {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(el)
|
||||
.boundingClientRect((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#scroll_view {
|
||||
flex: 1;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.watermark-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
font-size: 16px;
|
||||
/* 水印文字大小 */
|
||||
color: #f0f2f6;
|
||||
/* 水印文字颜色，使用透明度控制可见度 */
|
||||
position: absolute;
|
||||
/* 水印相对定位 */
|
||||
transform: rotate(-45deg);
|
||||
pointer-events: none;
|
||||
/* 防止水印文字干扰交互 */
|
||||
}
|
||||
|
||||
.uni-scroll-view {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.new_message_flag {
|
||||
position: sticky;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: fit-content;
|
||||
font-size: 24rpx;
|
||||
color: #006aff;
|
||||
}
|
||||
|
||||
.time_gap_line {
|
||||
position: relative;
|
||||
padding: 0 10vw 12rpx;
|
||||
text-align: center;
|
||||
// font-size: 24rpx;
|
||||
font-size: 0.93rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.fade-leave,
|
||||
.fade-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-leave-active,
|
||||
.fade-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-leave-to,
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="text_message_container bg_container">
|
||||
<view> [暂未支持的消息类型] </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ErrorMessagegRender",
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="media_message_container" @click="clickMediaItem">
|
||||
<u--image
|
||||
@load="onLoaded"
|
||||
:showLoading="true"
|
||||
width="120"
|
||||
:height="maxHeight"
|
||||
mode="widthFix"
|
||||
:src="getImgUrl"
|
||||
@click="clickMediaItem"
|
||||
>
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="red"></u-loading-icon>
|
||||
</template>
|
||||
</u--image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
message: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingWidth: "120px",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getImgUrl() {
|
||||
return (
|
||||
this.message.pictureElem.snapshotPicture?.url ??
|
||||
this.message.pictureElem.sourcePath
|
||||
);
|
||||
},
|
||||
maxHeight() {
|
||||
const imageHeight = this.message.pictureElem.sourcePicture.height;
|
||||
const imageWidth = this.message.pictureElem.sourcePicture.width;
|
||||
const aspectRatio = imageHeight / imageWidth;
|
||||
return 120 * aspectRatio;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickMediaItem() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: [this.message.pictureElem.sourcePicture.url],
|
||||
indicator: "none",
|
||||
});
|
||||
},
|
||||
onLoaded() {
|
||||
this.loadingWidth = "auto";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.media_message_container {
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.play_icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.video_duration {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
right: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view class="text_message_container bg_container">
|
||||
<mp-html
|
||||
:previewImg="false"
|
||||
:showImgMenu="false"
|
||||
:lazyLoad="false"
|
||||
:content="getContent"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseBr } from "@/util/common";
|
||||
|
||||
export default {
|
||||
name: "TextMessageRender",
|
||||
components: {},
|
||||
props: {
|
||||
message: Object,
|
||||
},
|
||||
computed: {
|
||||
getContent() {
|
||||
return parseBr(this.message.textElem?.content);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view v-if="!getNoticeContent" :id="`auchor${source.clientMsgID}`" class="message_item"
|
||||
:class="{ message_item_self: isSender, message_item_active: isActive }">
|
||||
<my-avatar size="42" :desc="source.senderNickname" :src="source.senderFaceUrl" @click="viewDetail" />
|
||||
<view class="message_container">
|
||||
<view class="message_sender" :style="{ 'flex-direction': !isSender ? 'row-reverse' : 'row' }">
|
||||
<text>{{ formattedMessageTime }}</text>
|
||||
<text style="margin-left: 2rpx; margin-right: 2rpx">{{ "" }}</text>
|
||||
<text v-if="!isSingle">{{ source.senderNickname }}</text>
|
||||
</view>
|
||||
<view class="message_send_state_box">
|
||||
<view style="height: 100%;display: flex;justify-items: center;align-items: center;">
|
||||
<view class="message_send_state">
|
||||
<u-loading-icon v-if="showSending && !isPreview" />
|
||||
<image v-if="isFailedMessage && !isPreview" src="@/static/images/chating_message_failed.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="message_content_wrap message_content_wrap_shadow">
|
||||
<text-message-render v-if="showTextRender" :message="source" />
|
||||
<media-message-render v-else-if="showMediaRender" :message="source" />
|
||||
<error-message-render v-else />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="notice_message_container" :id="`auchor${source.clientMsgID}`">
|
||||
<text>{{ getNoticeContent }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
MessageStatus,
|
||||
MessageType,
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import TextMessageRender from "./TextMessageRender.vue";
|
||||
import MediaMessageRender from "./MediaMessageRender.vue";
|
||||
import ErrorMessageRender from "./ErrorMessageRender.vue";
|
||||
import {
|
||||
noticeMessageTypes
|
||||
} from "@/constant";
|
||||
import {
|
||||
tipMessaggeFormat,
|
||||
formatMessageTime
|
||||
} from "@/util/imCommon";
|
||||
|
||||
const textRenderTypes = [MessageType.TextMessage];
|
||||
|
||||
const mediaRenderTypes = [MessageType.PictureMessage];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyAvatar,
|
||||
TextMessageRender,
|
||||
MediaMessageRender,
|
||||
ErrorMessageRender,
|
||||
},
|
||||
props: {
|
||||
source: Object,
|
||||
isSender: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isPreview: Boolean,
|
||||
isActive: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeSelfInfo",
|
||||
]),
|
||||
isSingle() {
|
||||
return (
|
||||
this.storeCurrentConversation.conversationType === SessionType.Single
|
||||
);
|
||||
},
|
||||
formattedMessageTime() {
|
||||
return formatMessageTime(this.source.sendTime);
|
||||
},
|
||||
showTextRender() {
|
||||
return textRenderTypes.includes(this.source.contentType);
|
||||
},
|
||||
showMediaRender() {
|
||||
return mediaRenderTypes.includes(this.source.contentType);
|
||||
},
|
||||
getNoticeContent() {
|
||||
const isNoticeMessage = noticeMessageTypes.includes(
|
||||
this.source.contentType
|
||||
);
|
||||
return !isNoticeMessage ?
|
||||
"" :
|
||||
tipMessaggeFormat(
|
||||
this.source,
|
||||
this.$store.getters.storeCurrentUserID
|
||||
);
|
||||
},
|
||||
isSuccessMessage() {
|
||||
return this.source.status === MessageStatus.Succeed;
|
||||
},
|
||||
isFailedMessage() {
|
||||
return this.source.status === MessageStatus.Failed;
|
||||
},
|
||||
showSending() {
|
||||
return this.source.status === MessageStatus.Sending && !this.sendingDelay;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$emit("messageItemRender", this.source.clientMsgID);
|
||||
this.setSendingDelay();
|
||||
},
|
||||
methods: {
|
||||
viewDetail(){
|
||||
if(this.isSender){
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:"/pages/common/userCard/index?sourceID="+this.source.sendID
|
||||
})
|
||||
}
|
||||
},
|
||||
setSendingDelay() {
|
||||
if (this.source.status === MessageStatus.Sending) {
|
||||
setTimeout(() => {
|
||||
this.sendingDelay = false;
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16rpx 44rpx;
|
||||
// padding-top: 48rpx;
|
||||
position: relative;
|
||||
|
||||
.check_wrap {
|
||||
@include centerBox();
|
||||
box-sizing: border-box;
|
||||
width: 40rpx;
|
||||
min-width: 40rpx;
|
||||
height: 40rpx;
|
||||
min-height: 40rpx;
|
||||
border: 2px solid #979797;
|
||||
border-radius: 50%;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 24rpx;
|
||||
|
||||
&_active {
|
||||
background-color: #1d6bed;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&_disabled {
|
||||
background-color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
.message_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 20rpx;
|
||||
// text-align: start;
|
||||
max-width: 80%;
|
||||
position: relative;
|
||||
|
||||
.message_sender {
|
||||
@include nomalEllipsis();
|
||||
display: flex;
|
||||
max-width: 480rpx;
|
||||
// font-size: 24rpx;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.message_content_wrap {
|
||||
@include vCenterBox();
|
||||
text-align: start;
|
||||
// font-size: 14px;
|
||||
color: $uni-text-color;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
.bg_container {
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 0rpx 12rpx 12rpx 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message_send_state_box {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message_send_state {
|
||||
@include centerBox();
|
||||
margin-left: 12rpx;
|
||||
// margin-top: 48rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
|
||||
.read_limit_count {
|
||||
// font-size: 24rpx;
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.emoji_display {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
&_self {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.check_wrap {
|
||||
margin-right: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.message_container {
|
||||
margin-left: 0;
|
||||
margin-right: 20rpx;
|
||||
// text-align: end;
|
||||
align-items: flex-end;
|
||||
|
||||
.message_content_wrap {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.bg_container {
|
||||
border-radius: 12rpx 0 12rpx 12rpx;
|
||||
background-color: #dcebfe !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message_send_state_box {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.message_send_state {
|
||||
margin-left: 0rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_active {
|
||||
background-color: #fdf5e9;
|
||||
}
|
||||
}
|
||||
|
||||
.notice_message_container {
|
||||
@include ellipsisWithLine(2);
|
||||
text-align: center;
|
||||
margin: 24rpx 48rpx;
|
||||
// font-size: 24rpx;
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fade-leave,
|
||||
.fade-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-leave-active,
|
||||
.fade-enter-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.fade-leave-to,
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view :style="{ backgroundColor: '#f8f8f8' }" class="chating_container">
|
||||
<chating-header @click="pageClick" ref="chatingHeaderRef" />
|
||||
<chating-list @click="pageClick" ref="chatingListRef" @initSuccess="initSuccess" />
|
||||
<chating-footer ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
|
||||
@scrollToBottom="scrollToBottom" />
|
||||
<u-loading-page :loading="initLoading"></u-loading-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import {
|
||||
PageEvents,
|
||||
} from "@/constant";
|
||||
import ChatingHeader from "./components/ChatingHeader.vue";
|
||||
import ChatingFooter from "./components/ChatingFooter/index.vue";
|
||||
import ChatingList from "./components/ChatingList.vue";
|
||||
import {
|
||||
markConversationAsRead
|
||||
} from "@/util/imCommon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChatingHeader,
|
||||
ChatingFooter,
|
||||
ChatingList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listHeight: 0,
|
||||
footerOutsideFlag: 0,
|
||||
initLoading: true,
|
||||
back2Tab: false,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("onload");
|
||||
this.setPageListener();
|
||||
if (options?.back2Tab) {
|
||||
this.back2Tab = JSON.parse(options.back2Tab);
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
console.log("unload");
|
||||
this.disposePageListener();
|
||||
markConversationAsRead({
|
||||
...this.$store.getters.storeCurrentConversation,
|
||||
},
|
||||
true
|
||||
);
|
||||
this.resetConversationState();
|
||||
this.resetMessageState();
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["resetMessageState", "deleteMessages"]),
|
||||
...mapActions("conversation", ["resetConversationState"]),
|
||||
scrollToBottom(isRecv = false) {
|
||||
this.$refs.chatingListRef.scrollToBottom(false, isRecv);
|
||||
},
|
||||
pageClick(e) {
|
||||
this.footerOutsideFlag += 1;
|
||||
},
|
||||
initSuccess() {
|
||||
console.log("initSuccess");
|
||||
this.initLoading = false;
|
||||
},
|
||||
|
||||
// page event
|
||||
setPageListener() {
|
||||
uni.$on(PageEvents.ScrollToBottom, this.scrollToBottom);
|
||||
},
|
||||
disposePageListener() {
|
||||
uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
});
|
||||
return true;
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chating_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #fff !important;
|
||||
position: relative;
|
||||
|
||||
.watermark {
|
||||
font-size: 16px;
|
||||
/* 水印文字大小 */
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
/* 水印文字颜色，使用透明度控制可见度 */
|
||||
position: absolute;
|
||||
/* 水印相对定位 */
|
||||
transform: rotate(-45deg);
|
||||
pointer-events: none;
|
||||
/* 防止水印文字干扰交互 */
|
||||
|
||||
/* 为不同的水印元素设置不同的偏移，以避免重叠 */
|
||||
// transform-origin: top right;
|
||||
// margin-top: 20px;
|
||||
// margin-right: 20px;
|
||||
}
|
||||
|
||||
// ::before {
|
||||
// content: "Your Watermark Text"; /* 替换为你想要的水印文字 */
|
||||
// font-size: 16px; /* 水印文字大小 */
|
||||
// color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
|
||||
// position: absolute; /* 水印相对定位 */
|
||||
// top: 20px; /* 距离顶部的距离 */
|
||||
// right: 20px; /* 距离右侧的距离 */
|
||||
// transform: rotate(-45deg); /* 将水印旋转为倾斜状态 */
|
||||
// pointer-events: none; /* 防止水印文字干扰交互 */
|
||||
// z-index: -1; /* 将水印置于底层 */
|
||||
// }
|
||||
|
||||
.mutiple_action_container {
|
||||
display: flex;
|
||||
border-top: 1px solid #eaebed;
|
||||
background: #f0f2f6;
|
||||
justify-content: space-evenly;
|
||||
padding: 12px 24px;
|
||||
|
||||
.action_item {
|
||||
@include centerBox();
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="chat_header">
|
||||
<view class="self_info">
|
||||
<my-avatar
|
||||
:src="storeSelfInfo.faceURL"
|
||||
:desc="storeSelfInfo.nickname"
|
||||
size="46"
|
||||
/>
|
||||
<view class="self_info_desc">
|
||||
<view class="user_state">
|
||||
<text class="nickname">{{ storeSelfInfo.nickname }}</text>
|
||||
<view v-if="!storeReinstall">
|
||||
<view class="tag" v-if="storeIsSyncing">
|
||||
<img
|
||||
class="loading"
|
||||
style="height: 24rpx; width: 24rpx"
|
||||
src="static/images/loading.png"
|
||||
alt=""
|
||||
/>
|
||||
<text class="status">同步中</text>
|
||||
</view>
|
||||
<view class="tag" v-if="connectStart == 0">
|
||||
<img
|
||||
class="loading"
|
||||
style="height: 24rpx; width: 24rpx"
|
||||
src="static/images/loading.png"
|
||||
alt=""
|
||||
/>
|
||||
<text class="status">连接中</text>
|
||||
</view>
|
||||
<view class="err-tag" v-if="connectStart == -1">
|
||||
<img
|
||||
style="height: 24rpx; width: 24rpx"
|
||||
src="static/images/sync_error.png"
|
||||
alt=""
|
||||
/>
|
||||
<text class="status">连接失败</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right_action">
|
||||
<view class="call_icon"> </view>
|
||||
<view @click="showMore" class="more_icon">
|
||||
<image src="@/static/images/common_circle_add.png"></image>
|
||||
</view>
|
||||
<u-overlay
|
||||
:show="moreMenuVisible"
|
||||
@click="moreMenuVisible = false"
|
||||
opacity="0"
|
||||
>
|
||||
<view
|
||||
:style="{ top: popMenuPosition.top, right: popMenuPosition.right }"
|
||||
class="more_menu"
|
||||
>
|
||||
<view
|
||||
@click="clickMenu(item)"
|
||||
v-for="item in moreMenus"
|
||||
:key="item.idx"
|
||||
class="menu_item"
|
||||
>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
name: "ChatHeader",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
connectStart: -2,
|
||||
moreMenuVisible: false,
|
||||
popMenuPosition: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
},
|
||||
moreMenus: [
|
||||
{
|
||||
idx: 1,
|
||||
title: "添加好友",
|
||||
icon: require("static/images/more_add_friend.png"),
|
||||
},
|
||||
{
|
||||
idx: 2,
|
||||
title: "添加群聊",
|
||||
icon: require("static/images/more_add_group.png"),
|
||||
},
|
||||
{
|
||||
idx: 3,
|
||||
title: "创建群聊",
|
||||
icon: require("static/images/more_create_group.png"),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeSelfInfo", "storeIsSyncing", "storeReinstall"]),
|
||||
},
|
||||
mounted() {
|
||||
this.subscribeAll();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unsubscribeAll();
|
||||
},
|
||||
methods: {
|
||||
setStateStart() {
|
||||
this.connectStart = 0;
|
||||
},
|
||||
setStateSuccess() {
|
||||
this.connectStart = 1;
|
||||
},
|
||||
setStateError() {
|
||||
this.connectStart = -1;
|
||||
},
|
||||
subscribeAll() {
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
|
||||
IMSDK.subscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
|
||||
},
|
||||
unsubscribeAll() {
|
||||
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
|
||||
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
|
||||
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
|
||||
},
|
||||
clickMenu({ idx }) {
|
||||
switch (idx) {
|
||||
case 1:
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${
|
||||
idx === 2
|
||||
}`,
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/createGroup/index`,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
async showMore() {
|
||||
const { right, bottom } = await this.getEl(".more_icon");
|
||||
this.popMenuPosition.right =
|
||||
uni.getWindowInfo().windowWidth - right + "px";
|
||||
this.popMenuPosition.top = bottom + "px";
|
||||
this.moreMenuVisible = true;
|
||||
},
|
||||
getEl(el) {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(el)
|
||||
.boundingClientRect((data) => {
|
||||
// 存在data，且存在宽和高，视为渲染完毕
|
||||
resolve(data);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.chat_header {
|
||||
@include btwBox();
|
||||
padding: 36rpx 44rpx;
|
||||
margin-top: var(--status-bar-height);
|
||||
|
||||
.self_info {
|
||||
@include btwBox();
|
||||
|
||||
&_desc {
|
||||
@include colBox(true);
|
||||
margin-left: 24rpx;
|
||||
color: $uni-text-color;
|
||||
|
||||
.company {
|
||||
@include nomalEllipsis();
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
|
||||
.user_state {
|
||||
@include vCenterBox();
|
||||
|
||||
.nickname {
|
||||
@include nomalEllipsis();
|
||||
font-size: 26rpx;
|
||||
max-width: 240rpx;
|
||||
}
|
||||
|
||||
.err-tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 152rpx;
|
||||
height: 44rpx;
|
||||
background: #ffe1dd;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
margin-left: 8rpx;
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
font-weight: 400;
|
||||
color: #ff381f;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 152rpx;
|
||||
height: 44rpx;
|
||||
background: #f2f8ff;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
margin-left: 8rpx;
|
||||
|
||||
.loading {
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
font-weight: 400;
|
||||
color: #0089ff;
|
||||
}
|
||||
}
|
||||
|
||||
.online_state {
|
||||
@include vCenterBox();
|
||||
margin-left: 24rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.dot {
|
||||
background-color: #10cc64;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_action {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.call_icon {
|
||||
margin-right: 24rpx;
|
||||
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.more_icon {
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 100%;
|
||||
z-index: 999;
|
||||
// transform: translate(-100%, 100%);
|
||||
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
|
||||
width: max-content;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.menu_item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view @tap.prevent="clickConversationItem" class="conversation_item">
|
||||
<view class="pinned" v-if="source.isPinned"></view>
|
||||
<view class="left_info">
|
||||
<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName"
|
||||
size="46" />
|
||||
<view class="details">
|
||||
<text class="conversation_name">{{ source.showName }}</text>
|
||||
<view class="lastest_msg_wrap">
|
||||
<text class="lastest_msg_content">{{ latestMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right_desc">
|
||||
<text class="send_time">{{ latestMessageTime }}</text>
|
||||
<u-badge max="99" :value="source.unreadCount"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
SessionType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import UParse from "@/components/gaoyia-parse/parse.vue";
|
||||
import {
|
||||
getConversationContent,
|
||||
formatConversionTime,
|
||||
prepareConversationState,
|
||||
} from "@/util/imCommon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyAvatar,
|
||||
UParse,
|
||||
},
|
||||
props: {
|
||||
source: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
latestMessage() {
|
||||
if (this.source.latestMsg === "") return "";
|
||||
let parsedMessage;
|
||||
try {
|
||||
parsedMessage = JSON.parse(this.source.latestMsg);
|
||||
} catch (e) {}
|
||||
if (!parsedMessage) return "";
|
||||
return getConversationContent(parsedMessage);
|
||||
},
|
||||
latestMessageTime() {
|
||||
return this.source.latestMsgSendTime ?
|
||||
formatConversionTime(this.source.latestMsgSendTime) :
|
||||
"";
|
||||
},
|
||||
isGroup() {
|
||||
return this.source.conversationType === SessionType.WorkingGroup;
|
||||
},
|
||||
isNotify() {
|
||||
return this.source.conversationType === SessionType.Notification;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
clickConversationItem() {
|
||||
console.log(this.source);
|
||||
prepareConversationState(this.source);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.conversation_item {
|
||||
@include btwBox();
|
||||
flex-direction: row;
|
||||
padding: 12rpx 44rpx 20rpx;
|
||||
position: relative;
|
||||
|
||||
&_active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.left_info {
|
||||
@include btwBox();
|
||||
|
||||
.details {
|
||||
@include colBox(true);
|
||||
margin-left: 24rpx;
|
||||
height: 46px;
|
||||
color: $uni-text-color;
|
||||
|
||||
.conversation_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 40vw;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.lastest_msg_wrap {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
color: #666;
|
||||
|
||||
.lastest_msg_prefix {
|
||||
margin-right: 6rpx;
|
||||
|
||||
&_active {
|
||||
color: $u-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.lastest_msg_content {
|
||||
flex: 1;
|
||||
margin-right: 160rpx;
|
||||
// ::v-deepuni-view {
|
||||
@include ellipsisWithLine(1);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_desc {
|
||||
@include colBox(true);
|
||||
align-items: flex-end;
|
||||
width: max-content;
|
||||
justify-content: space-between;
|
||||
height: 46px;
|
||||
|
||||
.send_time {
|
||||
width: max-content;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 24rpx;
|
||||
width: 17rpx;
|
||||
height: 17rpx;
|
||||
background-image: linear-gradient(to bottom left, #314ffe 50%, white 50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="conversation_container">
|
||||
<chat-header ref="chatHeaderRef" />
|
||||
<scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll" @refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore" @scrolltolower="scrolltolower">
|
||||
<conversation-item v-for="item in storeConversationList" :key="item.conversationID" :source="item"
|
||||
ref="conversationItem" />
|
||||
</scroll-view>
|
||||
<view class="loading_wrap" v-if="storeProgress > 0 && storeProgress < 100">
|
||||
<u-loading-icon :vertical="true" :text="storeProgress + '%'"></u-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import ChatHeader from "./components/ChatHeader.vue";
|
||||
import ConversationItem from "./components/ConversationItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChatHeader,
|
||||
ConversationItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0,
|
||||
},
|
||||
doubleClick: 0,
|
||||
triggered: false,
|
||||
refreshing: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => plus.navigator.closeSplashscreen());
|
||||
},
|
||||
onLoad() {
|
||||
this._freshing = false;
|
||||
this.triggered = true;
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {
|
||||
this.old.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
onRefresh() {
|
||||
if (this._freshing) return;
|
||||
this._freshing = true;
|
||||
this.queryList(true);
|
||||
},
|
||||
onRestore() {
|
||||
this.triggered = "restore";
|
||||
console.log("onRestore");
|
||||
},
|
||||
scrolltolower() {
|
||||
this.queryList();
|
||||
},
|
||||
async queryList(isFirstPage = false) {
|
||||
await this.$store.dispatch(
|
||||
"conversation/getConversationList",
|
||||
isFirstPage
|
||||
);
|
||||
this.triggered = false;
|
||||
this._freshing = false;
|
||||
},
|
||||
closeAllSwipe() {
|
||||
this.$refs.swipeWrapperRef.closeAll();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.conversation_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.conversation_search {
|
||||
padding: 0 44rpx 24rpx;
|
||||
}
|
||||
|
||||
.z-paging-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.swipe_wrapper {
|
||||
@include colBox(false);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.loading_wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
::v-deep.u-swipe-action-item__right__button__wrapper__text {
|
||||
-webkit-line-clamp: 2 !important;
|
||||
max-width: 32px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="group_settings_container">
|
||||
<custom-nav-bar title="群管理" />
|
||||
<view class="setting_row">
|
||||
<setting-item
|
||||
@click="toTransfer"
|
||||
title="群主管理权转让"
|
||||
:border="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { GroupMemberListTypes } from "@/constant";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
SettingItem,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
toTransfer() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Transfer}&groupID=${this.storeCurrentGroup.groupID}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_settings_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.setting_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx 24rpx 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user