/** * @name: useShare * @author: kahu4 * @date: 2023-11-10 09:45 * @description:useShare * @update: 2023-11-10 09:45 * */ import { ref, unref } from "vue"; import { useRouter } from "@/hooks/useRouter"; import { VUE_H5_DOMAIN_NAME, VUE_SHARE_TITLE } from "@/config"; import { h5InWeChat } from "@/utils"; import { useShearPlate } from "@/hooks/useShearPlate"; import { useInterface } from "@/hooks/useInterface"; import stringify from "@/utils/querystring"; import { getUrlQuery } from "@/utils/utils"; // 聚合处理的分享页面 const SHARE_INDEX = 'pages/share/index' const {setData} = useShearPlate(); const {toast} = useInterface() // 分享key export const SharePathKey = { HOME: 'h',// 首页 GOODS_DETAIL: 'g', // 商品分享 DISTRIBUTION_GOODS: 'dg', // 分销商品分享 INVITATION_USER: 'u', // 邀请用户 DISTRIBUTION_USER: 'd', // 邀请分销商 GROUP_BY: 'gb' // 拼团 } // 分享页面路径 export const SharePathMap = { [SharePathKey.HOME]: '/pages/home/home', [SharePathKey.GOODS_DETAIL]: '/pages/goodsDetail/goodsDetail', [SharePathKey.DISTRIBUTION_GOODS]: '/pages/goodsDetail/goodsDetail', [SharePathKey.INVITATION_USER]: '/pages/login/index', [SharePathKey.DISTRIBUTION_USER]: '/views/distribution/center/index', [SharePathKey.GROUP_BY]: '/views/activity/groupBy/detail' } /** * 分享hooks * 只需要在需要分享的页面use此hooks,会自动生成shareAppMessage、shareTimeline * 1.在此工具方法内部分享聚合模块添加方法,聚合分享内容,参数需要使用packageParameter封装 * 2.在useShareInner模块的analysisParameter方法内部case聚合key,做相应的跳转,默认是跳转packageParameter封装的url内容,参数是packageParameter的data * 3.微信分享:页面中调用步骤1封装的聚合方法,将shareAppMessage、shareTimeline丢入钩子函数即可 * 4.h5分享:页面中调用步骤1封装的聚合方法,然后调用本hook中的shareH5方法 * -h5分享在微信内部可以拉起微信分享、外部只能复制链接 * 5.若要使用shareInfo的path和query去生成拉起小程序的二维码,请严格使用SharePathKey配合SharePathMap传参,注意参数长度,参数名称尽量简短。 */ export function useShare() { const shareInfo = ref({ title: VUE_SHARE_TITLE, path: SHARE_INDEX, imageUrl: '', query: '', // 参数 pathQuery: SHARE_INDEX }) /** * 设置设置参数 * @param query packageParameter */ const setQuery = (query) => { shareInfo.value.query = query shareInfo.value.pathQuery = `${ shareInfo.value.path }?${ query }` } const shareAppMessage = () => Promise.resolve({ title: shareInfo.value.title, path: shareInfo.value.pathQuery, imageUrl: shareInfo.value.imageUrl }) const shareTimeline = () => ({ title: shareInfo.value.title, path: shareInfo.value.pathQuery, imageUrl: shareInfo.value.imageUrl }) /** * H5分享 * @param type 1微信好友 2微信朋友圈 */ const shareH5 = (type = 1) => { // h5InWeChat() // 判断是否再微信环境 if (h5InWeChat()) { _h5WechatShare(shareInfo.value) } else { _h5WechatShare(shareInfo.value) // _h5WechatShare(shareInfo.value) } } /** * 封装参数 * @param type SharePathKey * @param data 跳转的参数 */ const packageParameter = (type, data) => { const queryString = stringify({ t: type, ...data }) console.log(queryString) return `${ queryString }` } //========================= 分享聚合 ================================== /** * 默认分享 */ const defaultShare = () => { unref(shareInfo).title = VUE_SHARE_TITLE unref(shareInfo).imageUrl = '' setQuery(packageParameter(SharePathKey.HOME, {})) } /** * 商品分享 * @param goods */ const goodsDetailShare = (goods) => { unref(shareInfo).title = goods.storeName unref(shareInfo).imageUrl = goods.image console.log(shareInfo) setQuery(packageParameter(SharePathKey.GOODS_DETAIL, {id: goods.id})) } /** * 分销商品分享 * @param goods * @param distributorId 分销商ID */ const distributionGoodsDetailShare = (goods, distributorId) => { unref(shareInfo).title = goods.storeName unref(shareInfo).imageUrl = goods.image setQuery(packageParameter(SharePathKey.DISTRIBUTION_GOODS, {id: goods.id, uid: distributorId})) } /** * 分享下级 * @param id */ const distributionShare = (id) => { unref(shareInfo).title = '您的好友邀请您使用YShop' unref(shareInfo).imageUrl = 'https://b2c-pro-static-dev.zkthink.com/static/icon/logo.png' setQuery(packageParameter(SharePathKey.DISTRIBUTION_USER, {id})) return shareInfo.value } /** * 用户分享 * @param invitationCode 邀请人的邀请码 */ const userInvitationShare = (invitationCode) => { unref(shareInfo).title = '您的好友邀请您使用YShop' unref(shareInfo).imageUrl = 'https://b2c-pro-static-dev.zkthink.com/static/icon/logo.png' setQuery(packageParameter(SharePathKey.INVITATION_USER, {code: invitationCode})) return shareInfo.value } /** * 拼团邀请 * @param orderInfoData */ const groupByInvitationShare = (orderInfoData) => { //teamworkId const img = orderInfoData?.cartInfo?.[0]?.productInfo?.image || 'https://b2c-pro-static-dev.zkthink.com/static/icon/logo.png' unref(shareInfo).title = '您的好友邀请您参与拼团' unref(shareInfo).imageUrl = img setQuery(packageParameter(SharePathKey.GROUP_BY, {id: orderInfoData.teamworkId})) return shareInfo.value } return { shareInfo, shareH5, setQuery, shareAppMessage, shareTimeline, packageParameter, defaultShare, goodsDetailShare, distributionGoodsDetailShare, distributionShare, userInvitationShare, groupByInvitationShare } } export const useShareInner = () => { const {push, pushToTab} = useRouter() const params = ref({ t: "" }) /** * 处理share参数 * @param options */ async function analysisParams(options) { console.log('分享参数----', options) // 从小程序二维码扫码进入 if (options.scene) { params.value = getUrlQuery(decodeURIComponent(options.scene)); } else { params.value = options } await analysisParameter() } /** * 解析参数 */ async function analysisParameter() { switch (unref(params).t) { case SharePathKey.GOODS_DETAIL: case SharePathKey.INVITATION_USER: case SharePathKey.DISTRIBUTION_GOODS: case SharePathKey.DISTRIBUTION_USER: case SharePathKey.GROUP_BY: toSkip() break; default: pushToTab({url: '/root/index/index'}) } } /** * 跳转 */ function toSkip() { const path = SharePathMap[unref(params).t] if (path) { push({ url: path, }, { data: unref(params), type: 'redirectTo' }) } } return { params, analysisParams } } /** * 微信内H5分享 * @param shareInfo * @param type * @private */ const _h5InWechatShare = (shareInfo, type = 1) => { const res = {} // todo 从后端拿 jweixin.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.appId, // 必填,公众号的唯一标识 timestamp: res.timeStamp, // 必填,生成签名的时间戳 nonceStr: res.nonceStr, // 必填,生成签名的随机串 signature: res.paySign, // 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); jweixin.ready(() => { if (type === 1) { // 好友 jweixin.updateAppMessageShareData({ title: shareInfo.title, // 分享标题 desc: shareInfo.title, // 分享描述 link: shareInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareInfo.imageUrl, // 分享图标 }) } else { // 朋友圈 jweixin.updateTimelineShareData({ title: shareInfo.title, // 分享标题 link: shareInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareInfo.imageUrl, // 分享图标 }) } }) } /** * 微信外h5分享 h5外部直接生成链接 * @param shareInfo * @param type * @private */ const _h5WechatShare = async (shareInfo, type = 1) => { const link = `${ VUE_H5_DOMAIN_NAME }${ shareInfo.pathQuery }` await setData(link) toast({title: '已复制,快去分享链接分享给小伙伴吧~'}) }