fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/sharePanel/index.vue

@@ -0,0 +1,476 @@
+<template>
+	<div id="share">
+		<!-- 微信、APP分享 -->
+		<template v-if="sourceWx === 'isApp' || sourceWx === 'isWx' || isExample">
+			<div v-if="shareMask" class="share-sign" @click="handleCancel">
+				<img :src="imgType[language]" alt="" :class="[isMiniprogram ? 'mr60' : '']" />
+				<slot />
+			</div>
+			<SheetPanel :is-show="showSheetPanel" :title="$t('mystore.mystore.177j43')" :showTitle="showTitle" :targetDom="targetDom" :share-text="shareData.text" :options="options" @close="handleCancel" @select="handleSelect">
+				<template #post>
+					<slot name="post"></slot>
+				</template>
+				<template #close>
+					<slot name="close"></slot>
+				</template>
+			</SheetPanel>
+		</template>
+
+		<!-- 企微分享 -->
+		<template v-else-if="sourceWx === 'isQyWx'">
+			<div v-if="shareMask" class="share-sign" @click="handleCancel">
+				<img :src="imgType[language]" />
+				<slot />
+			</div>
+			<!-- 九宫格图片分享 -->
+			<van-image-preview v-model="shareMaskImg" :images="images" :closeable="true" @onClose="shareMaskImg = false">
+				<template v-slot:cover>
+					<div v-if="showCopy" class="pd12 flex-start img-preview-bottom">
+						<i class="iconfont icon-dianxuangouxuan ft16 pr6 c-39cc52" />
+						<span class="c-ffffff">{{ $t("componentsfile.qyweixinpanel.860j35") }}{{ text }}</span>
+					</div>
+				</template>
+			</van-image-preview>
+		</template>
+	</div>
+</template>
+
+<script>
+import wxApi from "../../assets/js/wxapi";
+import { getStorage } from "../../assets/js/storage";
+import { getSystemName } from "../../assets/js/func";
+import shareWay, { AbroadShareWay, shareGuide } from "./utils/shareWay";
+import props from "./props";
+import QyWxShareMixin from "./utils/QyWxShareMixin";
+
+export default {
+	name: "SharePanel",
+	mixins: [ QyWxShareMixin],
+	components: {
+		SheetPanel: () => import("./SheetPanel"),
+	},
+    props: {
+        // 微信分享显隐控制
+        showShare: {
+            type: Boolean, // 要求父组件数据传输类型
+            required: true // 必传
+        },
+        // 是否展示指引遮罩层
+        showMask: {
+            type: Boolean,
+            default: true
+        },
+        // 遮罩展示时间，为0时不会自动消失，需手动取消
+        maskDuration: {
+            type: Number,
+            default: 5000
+        },
+        // 微信分享方式 分享方式的索引集合
+        shareMethods: {
+            type: Array,
+            default: () => [0, 1]
+        },
+        // 引入页面是否隐藏右上角菜单
+        isHideOptionMenu: {
+            type: Boolean,
+            default: true
+        },
+        // 分享结束回调方法名
+        callbackName: {
+            type: String,
+            default: ''
+        },
+        // 微信分享api签名等业务接口所需外部参数
+        // 微信分享需要 => firUrl, saasId, appId
+        // 企微分享需要 => firUrl, saasId || corpId, agentId
+        otherParam: {
+            type: Object,
+            default: () => {
+                return {
+                    lang: '',
+                    firUrl: '',
+                    saasId: '',
+                    appId: '',
+                    agentId: '',
+                    corpId: ''
+                }
+            }
+        },
+        targetDom: {
+            type: String,
+            default:''
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        // 下载图片自定义前置方法，方法接收resolve，并需要在结束时调用
+        beforeDownload: Function
+    },
+	model: {
+		prop: "showShare",
+		event: "close",
+	},
+	data() {
+		return {
+			sourceWx: this.$globalData.isQYWeiXin ? "isQyWx" : this.$globalData.isWeiXin ? "isWx" : this.$globalData.isApp ? "isApp" : "",
+			language: this.otherParam.lang || (getStorage({ key: getSystemName() + "language" }) || {}).content || "zh_CN",
+			shareMask: false, // 微信指引面板
+			showSheetPanel: false, // app分享面板
+			options: [], // 展示的分享方式配置数据
+			abroadShareType: [], // 海外分享类型
+			imgType: shareGuide, // 指引多语言图片静态资源
+			shareImgType: ["poster", "img", "code", "image"], // 分享数据类型 - 图片
+			shareData: {
+				type: "", // 类型（海报，文字，图文，音视频，其他en）
+				text: "", // 文案
+				desc: "", // 文字内容描述
+				title: "", // 标题
+				link: "", // （物料内容分享的url）
+				imgUrl: "", // （分享的小图标url）
+				flag: "", // （0 朋友圈 ，1微信，2 企业微信）
+				other: "", // 扩展字段可以为空
+			},
+			closeTimer: null,
+			isExample: false, // 组件文档网页端演示用，仅用于pc端展示分享弹窗
+		};
+	},
+	computed: {
+		isShowSheetPanel() {
+			return this.showShare;
+		},
+		isMiniprogram() {
+			return wx && wx.miniProgram && window.__wxjs_environment === "miniprogram";
+		},
+	},
+	watch: {
+		// 监听控制显隐源头 prop => showShare
+		showShare() {
+			if (this.$globalData.isWeiXin || this.$globalData.isQYWeiXin) {
+				this.shareMask = this.showShare && this.showMask;
+            } else if (this.$globalData.isApp || this.isExample) {
+                this.showSheetPanel = this.showShare;
+            }
+			// if (this.shareData.type === 'img' && this.showShare) {
+			//     this.shareSudokuImg();
+			// } else { ...
+		},
+		// 监听遮罩显隐
+		shareMask(val) {
+			if (val) {
+				this.copyText(this.shareData.text);
+				if (this.maskDuration) {
+					this.closeTimer && clearTimeout(this.closeTimer);
+					this.closeTimer = setTimeout(() => {
+						this.handleCancel();
+					}, this.maskDuration);
+				}
+			}
+		},
+		shareMethods() {
+			this.setOptions();
+		},
+	},
+	created() {
+		console.log("分享环境", this.sourceWx);
+		this.createdHandle();
+	},
+	methods: {
+		// 初始化分享
+		async createdHandle() {
+			this.setOptions();
+			if (this.$globalData.isQYWeiXin) {
+				await this.createdQYHandle(this.isHideOptionMenu);
+			} else if (this.$globalData.isWeiXin) {
+				await wxApi.wxShare({ ...this.otherParam, isHideOptionMenu: this.isHideOptionMenu });
+			}
+			// 事件 - 分享、微信分享等初始化完成后
+			this.$emit("afterInit");
+		},
+		// 设置分享方式
+		setOptions() {
+			const optionsAll = shareWay();
+			this.options = this.shareMethods.reduce((prev, item) => {
+				const option = optionsAll.find((o, i) => i === item);
+				option && prev.push(option);
+				return prev;
+			}, []);
+			// 获取海外分享类型集合
+			this.abroadShareType = AbroadShareWay().map((item) => item.type);
+		},
+		// 设置微信分享参数
+		setShareData(option = {}) {
+			// let { type } = this.shareData;
+			let { type } = option;
+			const typearr = ["activetopic"];
+			if (typearr.includes(type)) {
+				type = "article";
+			}
+			this.shareData = {
+				text: "", // 文案
+				desc: "", // 文字内容描述
+				title: "", // 标题
+				link: "", // （物料内容分享的url）
+				imgUrl: "", // （分享的小图标url）
+				flag: "", // （0 朋友圈 ，1微信，2 企业微信）
+				other: "", // 扩展字段可以为空
+				fileExtension: "",
+				// ...this.shareData,
+				type,
+				...option,
+			};
+		},
+		async handleSelect(option) {
+			console.log("handleSelect: this.shareData", this.shareData);
+			if (this.abroadShareType.includes(option.type)) {
+				// 海外分享
+				const shareText = ["text", "article", "video", "formActivity"];
+				const fileName = this.shareData.link || "";
+				const urlNameArr = (fileName.split("/").pop() || "").split(".");
+				const fileFormat = this.shareData.fileExtension || urlNameArr.length > 1 ? urlNameArr.pop() : "";
+				const fileType = ["png", "jpg", "jpeg", "gif"];
+				if (this.shareImgType.includes(this.shareData.type) || (this.shareData.type === "package" && fileType.includes(fileFormat))) {
+					// 图片类型
+					const url = fileName;
+					if (this.$globalData.isApp && this.$globalData.isIOS) {
+						if (window.webkit && window.webkit.messageHandlers.JSToAppImgActivityVC) {
+							window.webkit.messageHandlers.JSToAppImgActivityVC.postMessage(JSON.stringify({ url: url }));
+						}
+					} else if (this.$globalData.isAndroid && window.android) {
+						// 获取到图片的名称和后缀数组
+						const urlNameArr = (url.split("/").pop() || "").split(".");
+						const params = {
+							isText: false,
+							fileDownloadUrl: url,
+							fileName: urlNameArr.shift() || "",
+							fileExtension: fileFormat ? "." + fileFormat : ".png", // 没有后缀给一个默认的后缀
+							type: option.AppType,
+						};
+						window.android.jsToAppForShareWhatsApp(JSON.stringify(params));
+					}
+				} else if (this.shareData.type === "package") {
+					const url = this.shareData.link || "";
+					if (this.$globalData.isApp && this.$globalData.isIOS) {
+						if (window.webkit && window.webkit.messageHandlers.JSToAppRequestActivityVC) {
+							window.webkit.messageHandlers.JSToAppRequestActivityVC.postMessage(JSON.stringify({ path: url, name: this.shareData.title || "" }));
+						}
+					} else if (this.$globalData.isAndroid && window.android) {
+						// 获取到图片的名称和后缀数组
+						const urlNameArr = (url.split("/").pop() || "").split(".");
+						const params = {
+							isText: false,
+							fileDownloadUrl: url,
+							fileName: urlNameArr.shift() || "",
+							fileExtension: "." + fileFormat,
+							type: option.AppType,
+						};
+						if (fileFormat) {
+							window.android.jsToAppForShareWhatsApp(JSON.stringify(params));
+						} else {
+							console.error(`取不到后缀，需要传入this.shareData.fileExtension`);
+						}
+					}
+				} else {
+					// } else if (shareText.includes(this.shareData.type)) {
+					try {
+						// 文本类型
+						const t = this.shareData.title || ""; // 标题
+						const d = this.shareData.desc || ""; // 描述信息
+						const i = this.shareData.imgUrl || ""; // 分享图片
+						const u = this.shareData.link || ""; // 分享只是分享文案，在whatsapp里的卡片展示是在分享的链接目标页面里面处理<mate>标签写og协议
+						const res = await axios.post(`/funapi/cbsmh/mh/mhThirdService/setSheareMate`, {
+							title: t, // 写入mate标签的title属性的content值 <meta property="og:title" content="">
+							description: d, // 写入mate标签的description属性的content值 <meta property="og:description" content="">
+							image: i, // 写入mate标签的image属性的content值 <meta property="og:image" content="">
+							url: u, // 重定向的原分享页面
+						});
+						// 接口存参数，返回id值，通过id值可以取到参数值
+						if (res.status === "SUCCESS") {
+							const whatsAppId = res.id || ""; // 分享出去的链接，返回一个只含meta标签和一段跳转原分享页面的 页面链接
+							const GATEWAY_PREFIX = process.env.VUE_APP_ENV_CONFIG === "scp" ? `/${process.env.VUE_APP_NAME}` : "";
+							const shareUrl = `${location.origin + GATEWAY_PREFIX}/funapi/cbsmh/mh/mhThirdService/getSheareMate/${whatsAppId}`; // 接口地址 返回一个只含meta标签和一段跳转原分享页面的脚本内容
+							const text = `标题：${t}\n\n描述：${d}\n\n链接：${shareUrl}`;
+							if (this.$globalData.isApp && this.$globalData.isIOS) {
+								if (window.webkit && window.webkit.messageHandlers.jsToAppShareWSApp) {
+									window.webkit.messageHandlers.jsToAppShareWSApp.postMessage(JSON.stringify({ text: text }));
+								}
+							} else if (this.$globalData.isAndroid && window.android) {
+								const params = {
+									isText: true,
+									content: text,
+									type: option.AppType,
+								};
+								window.android.jsToAppForShareWhatsApp(JSON.stringify(params));
+							}
+						} else {
+							this.$toast(this.$t("mystore.mystore.wmtyv4"));
+						}
+					} catch (error) {
+						this.$toast(this.$t("mystore.mystore.wmtyv4"));
+					}
+				}
+			} else if (option.type.includes("AppDownload")) {
+                // 下载图片前
+                const downloadUrl = this.beforeDownload && await new Promise(resolve => {
+                    this.beforeDownload(resolve);
+                })
+				// 图片下载
+				// poster, img, code
+				if (this.shareImgType.includes(this.shareData.type) || downloadUrl || this.shareData.codeLink || this.shareData.imgLink) {
+					const url = downloadUrl ? downloadUrl : 
+                        option.type === "AppDownloadCode" && this.shareData.codeLink ? this.shareData.codeLink : 
+                        this.shareData.imgLink ? this.shareData.imgLink : this.shareData.link;
+					this.downLoadPicDown(url);
+				} else {
+					this.$toast(this.$t("componentsfile.sharemediapanel.7l8t53"));
+				}
+			} else if (option.type === "QyAppMessage") {
+				// 企微分享
+				if (this.$globalData.isIOS && window.webkit && window.webkit.messageHandlers) {
+					const data = {
+						title: this.shareData.title || "",
+						desc: this.shareData.desc || "",
+						imgUrl: this.shareData.imgUrl || "",
+						link: this.shareData.link || "",
+						text: this.shareData.text || "",
+					};
+					window.webkit.messageHandlers.WWKShare.postMessage(data);
+				} else if (this.$globalData.isAndroid && window.android) {
+					const data = {
+						title: this.shareData.title,
+						description: this.shareData.desc,
+						thumbUrl: this.shareData.imgUrl,
+						webPageUrl: this.shareData.link,
+						shareType: "link", // //标记，用来区分分享的类型,text,image,file,video,link,program
+					};
+					window.android.jsToAppForShareWeWork(JSON.stringify(data));
+				}
+			} else if (option.type === "AppMessage" || option.type === "Timeline") {
+				// 微信、朋友圈分享
+				if (this.$globalData.isIOS && window.webkit && window.webkit.messageHandlers) {
+					this.setShareData({ flag: option.flag });
+					window.AppToJSShareSuccess = function () {};
+					window.AppToJsStopScreenSharing = function () {};
+					window.webkit.messageHandlers.share.postMessage(this.shareData);
+				} else if (this.$globalData.isAndroid && window.android) {
+					if (this.shareImgType.includes(this.shareData.type)) {
+						// 分享海报或者分享图片
+						const data = {
+							flag: option.flag,
+							type: "img",
+							link: this.shareData.link,
+							text: this.shareData.text,
+						};
+						window.android.share(JSON.stringify(data));
+					} else {
+						const shareFn = option.type === "AppMessage" ? "goShardWxFriends" : "goShardWxCircle";
+						window.android[shareFn](this.shareData.link, this.shareData.desc, this.shareData.title, this.shareData.imgUrl, this.shareData.text);
+					}
+				} else if (this.isMiniprogram) {
+					// 小程序
+					this.shareMask = true;
+				}
+			} else if (option.type === "link") {
+				if (!this.shareData.link) {
+					return this.$toast(this.$t("componentsfile.sharepanel.2fe9j3"));
+				}
+				this.$copyText(this.shareData.link)
+					.then(() => this.$toast(this.$t("componentsfile.sharepanel.1e92j5")))
+					.catch(() => this.$toast(this.$t("componentsfile.sharepanel.3l8g6c")));
+			}
+			// 关闭分享弹窗
+			if (this.callbackName) {
+				this.$emit(this.callbackName, option);
+			}
+			this.handleCancel();
+		},
+		wxRegister(option = {}) {
+			const { isHideOptionMenu = false } = option;
+			option = { ...this.shareData, ...option, isHideOptionMenu };
+			wxApi.wxRegister(option);
+		},
+		wxHideMenu() {
+			if (this.$globalData.isQYWeiXin) {
+				this.qyWxHideMenu();
+			} else {
+				wxApi.wxHideMenu();
+			}
+		},
+		copyText(str) {
+			if (!str) return;
+			// 复制文案
+			this.$copyText(str)
+				.then(() => this.$toast(this.$t("utils.sharemixins.u31ln7")))
+				.catch(() => this.$toast(this.$t("applyprocess.examine.320980")));
+		},
+		handleCancel() {
+			this.closeTimer && clearTimeout(this.closeTimer);
+			this.$emit("close", false);
+		},
+		/**
+		 * app下载图片的方法
+		 * @param urlList 图片地址的数组，单图允许传字符串
+		 * @param completeCallaBack 下载完成的回调
+		 */
+		downLoadPicDown(urlList, completeCallaBack) {
+			if (!Array.isArray(urlList)) {
+				urlList = [urlList];
+			}
+			const url = urlList.join(",");
+			if (!this.$globalData.isQyWeiXin && this.$globalData.isApp) {
+				// 下载完成的回调
+				window.AppToJsPicDownComplete = function () {
+					if (completeCallaBack) {
+						completeCallaBack();
+					} else {
+						if (this.$globalData.isIOS) {
+							this.$toast(this.$t("insuranceai.questionassistant.xk5841"));
+						}
+					}
+				};
+				if (this.$globalData.isIOS && window.webkit) {
+					console.log("ios:===", `^jstoios^JSToPicDown^${url}`);
+					window.location = `^jstoios^JSToPicDown^${url}`;
+				} else if (this.$globalData.isAndroid && window.android) {
+					if (urlList.length > 1) {
+						console.log("android:==", JSON.stringify({ images: urlList }));
+						const list = urlList.map((item) => ({ imgUrl: item }));
+						window.android.jsToAppForDownloadMoreImages(JSON.stringify({ images: list }));
+					} else {
+						console.log("android:==", JSON.stringify({ url }));
+						window.android.downLoadosterP(JSON.stringify({ url }));
+					}
+				}
+			}
+		},
+	},
+};
+</script>
+
+<style scoped lang="less">
+#share {
+	/deep/ .van-image-preview__cover {
+		width: 100%;
+	}
+}
+.share-sign {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 3101;
+	text-align: right;
+	top: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.3);
+}
+.share-sign img {
+	width: 200px;
+	float: right;
+}
+.img-preview-bottom {
+	position: absolute;
+	top: 50px;
+}
+</style>

package/packages/sharePanel/props.js

@@ -0,0 +1,58 @@
+export default {
+    props: {
+        // 微信分享显隐控制
+        showShare: {
+            type: Boolean, // 要求父组件数据传输类型
+            required: true // 必传
+        },
+        // 是否展示指引遮罩层
+        showMask: {
+            type: Boolean,
+            default: true
+        },
+        // 遮罩展示时间，为0时不会自动消失，需手动取消
+        maskDuration: {
+            type: Number,
+            default: 5000
+        },
+        // 微信分享方式 分享方式的索引集合
+        shareMethods: {
+            type: Array,
+            default: () => [0, 1]
+        },
+        // 引入页面是否隐藏右上角菜单
+        isHideOptionMenu: {
+            type: Boolean,
+            default: true
+        },
+        // 分享结束回调方法名
+        callbackName: {
+            type: String,
+            default: ''
+        },
+        // 微信分享api签名等业务接口所需外部参数
+        // 微信分享需要 => firUrl, saasId, appId
+        // 企微分享需要 => firUrl, saasId || corpId, agentId
+        otherParam: {
+            type: Object,
+            default: () => {
+                return {
+                    lang: '',
+                    firUrl: '',
+                    saasId: '',
+                    appId: '',
+                    agentId: '',
+                    corpId: ''
+                }
+            }
+        },
+        targetDom: {
+            type: String,
+            default:''
+        },
+        showTitle: {
+            type: Boolean,
+            default:true
+        }
+    }
+}

package/packages/sharePanel/utils/QyWxShareMixin.js

@@ -0,0 +1,93 @@
+import i18n from '../../../assets/vantLang';
+import qyWxApi from '../../../assets/js/qywxapi';
+
+export default {
+    data() {
+        return {
+            shareMaskImg: false, // 九宫格面板
+            images: [], // 九宫格图片
+            showCopy: false,
+            text: i18n.t('componentsfile.qyweixinpanel.xlf8eg')
+        };
+    },
+    methods: {
+        // 企微分享初始化
+        createdQYHandle(isHideOptionMenu = false) {
+            const param = { ...this.otherParam, isHideOptionMenu };
+            return qyWxApi.getQwSignature(param);
+        },
+        // 企业微信分享通用方法
+        async qyWxShare(option = {}) {
+            const qwEntry = await this.getContext();
+            if (qwEntry === 'normal') {
+            // if (qwEntry === 'normal' || (qwEntry === 'chat_attachment' && this.$globalData.isAndroid)) {
+                this.qwShareFromWorkBench(option);
+            } else if (qwEntry !== 'normal') {
+                this.qwShareFromChatTool(option);
+            }
+        },
+        // 在企业微信工具栏或者附件栏 向当前会话发送消息
+        qwShareFromChatTool(option = {}) { // initQyWxConfig
+            option = { ...this.shareData, ...option };
+            let { type = 'news', enterChat = true, mediaid, success } = option;
+            qyWxApi.wxRegister({
+                msgtype: type === 'img' || type === 'image' ? 'image' : type === 'text' ? 'text' : 'news',
+                enterChat,
+                image: { mediaid },
+                text: { content: option.text },
+                news: {
+                    link: option.link, //H5消息页面url 必填
+                    title: option.title, //H5消息标题
+                    desc: option.desc, //H5消息摘要
+                    imgUrl: option.imgUrl //H5消息封面图片URL
+                },
+                success: res => {
+                    // 成功回调
+                    success(res);
+                }
+            });
+        },
+        // 工作台进入的环境 发起分享
+        qwShareFromWorkBench(option = {}) { // initQyToOther
+            option = { ...this.shareData, ...option };
+            if (option.type === 'img' || option.type === 'image') {
+                if (this.$globalData.isApp) {
+                    // 工作台移动端
+                    this.text = this.$t(i18n.t('componentsfile.qyweixinpanel.5cpn1w'));
+                } else {
+                    // 工作台PC端
+                    this.text = this.$t(i18n.t('componentsfile.qyweixinpanel.xlf8eg'));
+                }
+                // 如果是图片的企微工作台分享就起九宫格历史
+                option.text && this.$copyText(option.text).then(() => { this.showCopy = true; }).catch(() => { this.$toast(i18n.t('mystore.mystore.wmtyv4')); });
+                let imgUrl = [];
+                if (option.imgUrl instanceof Array) {
+                    imgUrl = option.imgUrl;
+                } else {
+                    imgUrl = [option.imgUrl];
+                }
+                this.images = imgUrl.reduce((prev, item) => {
+                    item && prev.push(item);
+                    return prev;
+                }, []);
+                this.shareMaskImg = true;
+            } else {
+                qyWxApi.qwShareToOther(option);
+            }
+        },
+        // 群发给客户
+        qywxGroup(option) {
+            option = { ...this.shareData, ...option };
+            qyWxApi.qywxGroup(option);
+        },
+        launchMiniprogram(option) {
+            qyWxApi.launchMiniprogram(option);
+        },
+        getContext() {
+            return qyWxApi.getContext();
+        },
+        qyWxHideMenu() {
+            qyWxApi.wxHideMenu();
+        }
+    }
+}