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