2
@@ -1,45 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
/node_modules/
|
|
||||||
/nativeplugins/
|
|
||||||
@@ -1,515 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,661 +0,0 @@
|
|||||||
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/>.
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
<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)
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
// 登录
|
|
||||||
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"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
// 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 = '156.238.245.175'
|
|
||||||
// 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,
|
|
||||||
};
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
export const emojis = [
|
|
||||||
"😀",
|
|
||||||
"😃",
|
|
||||||
"😄",
|
|
||||||
"😁",
|
|
||||||
"😆",
|
|
||||||
"😅",
|
|
||||||
"🤣",
|
|
||||||
"😂",
|
|
||||||
"🙂",
|
|
||||||
"🙃",
|
|
||||||
"😉",
|
|
||||||
"😊",
|
|
||||||
"😇",
|
|
||||||
"🥰",
|
|
||||||
"😍",
|
|
||||||
"🤩",
|
|
||||||
"😘",
|
|
||||||
"😗",
|
|
||||||
"😚",
|
|
||||||
"😙",
|
|
||||||
"😋",
|
|
||||||
"😛",
|
|
||||||
"😜",
|
|
||||||
"🤪",
|
|
||||||
"😝",
|
|
||||||
"🤑",
|
|
||||||
"🤗",
|
|
||||||
"🤭",
|
|
||||||
"🤫",
|
|
||||||
"🤔",
|
|
||||||
];
|
|
||||||
|
|
||||||
export default emojis;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
uni.$u.props.gap.bgColor = "#f3f4f6";
|
|
||||||
uni.$u.props.gap.height = "10";
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
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" },
|
|
||||||
];
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,143 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,95 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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;
|
|
||||||
@@ -1,170 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* 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;
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
// 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,
|
|
||||||
};
|
|
||||||
@@ -1,271 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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;
|
|
||||||
}
|
|
||||||
@@ -1,226 +0,0 @@
|
|||||||
<!--**
|
|
||||||
* 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>
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
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",
|
|
||||||
};
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export const PageEvents = {
|
|
||||||
GlobalToast: "GlobalToast",
|
|
||||||
ScrollToBottom: "ScrollToBottom",
|
|
||||||
RtcCall: "RtcCall"
|
|
||||||
};
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
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
|
|
||||||
];
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export * from "./im";
|
|
||||||
export * from "./comp";
|
|
||||||
export * from "./event";
|
|
||||||
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 496 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
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();
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
{
|
|
||||||
"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协议的代理
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,289 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,309 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,311 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,256 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,246 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,173 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,342 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,285 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,298 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,329 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
<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>
|
|
||||||