yshop-pro-uniapp/hooks/useShare.js

/**
 * @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: '已复制，快去分享链接分享给小伙伴吧~'})
}