update
This commit is contained in:
parent
d7ac260202
commit
f0ceec5404
@ -1,67 +1,111 @@
|
||||
import wx from 'weixin-js-sdk'
|
||||
import store from '@/store'
|
||||
// import { $toastText } from '@/config/toast'
|
||||
|
||||
const base = {}
|
||||
|
||||
base.install = function(Vue, options) {
|
||||
// 初始化微信配置（只执行一次）
|
||||
Vue.prototype.$initWechatConfig = function() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const configData = store.state.app.configData
|
||||
if (!configData) {
|
||||
console.error('微信配置数据为空')
|
||||
reject('微信配置数据为空')
|
||||
return
|
||||
}
|
||||
|
||||
wx.config(configData)
|
||||
|
||||
wx.ready(() => {
|
||||
console.log('微信 JS-SDK 配置成功')
|
||||
resolve()
|
||||
})
|
||||
|
||||
wx.error((err) => {
|
||||
console.error('微信 JS-SDK 配置失败:', err)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 分享配置方法
|
||||
Vue.prototype.$shareList = function(imgUrl, link, desc, title) {
|
||||
// 分享
|
||||
let share_title = ``
|
||||
if (!localStorage.getItem('from_openid') || (localStorage.getItem('from_openid') && localStorage.getItem('from_openid').length < 20)) {
|
||||
share_title = ''
|
||||
} else if (store.state.app.info.nickname && store.state.app.info.nickname.length > 4) {
|
||||
share_title = store.state.app.info.nickname.substring(0, 4) + '..推送'
|
||||
} else {
|
||||
share_title = store.state.app.info.nickname + '推送'
|
||||
// 检查 wx 是否已配置
|
||||
if (!wx) {
|
||||
console.error('微信 JS-SDK 未加载')
|
||||
return
|
||||
}
|
||||
wx.config(store.state.app.configData)
|
||||
wx.ready(function() {
|
||||
wx.hideMenuItems({
|
||||
menuList: [] // 屏蔽复制链接
|
||||
})
|
||||
wx.updateAppMessageShareData({
|
||||
title: desc !== '欢迎和我预约' ? share_title + '《' + title + '》' : `【${title}】商家预约`, // 分享标题
|
||||
desc: desc, // 分享描述
|
||||
link: link, // 分享链接
|
||||
imgUrl: imgUrl, // 分享图标
|
||||
success: function() {
|
||||
console.log('分享成功')
|
||||
},
|
||||
cancel: function() {
|
||||
console.log('分享失败')
|
||||
|
||||
let share_title = ''
|
||||
const fromOpenid = localStorage.getItem('from_openid')
|
||||
const storeInfo = store.state.app.info
|
||||
|
||||
if (!fromOpenid || fromOpenid.length < 20) {
|
||||
share_title = ''
|
||||
} else if (storeInfo && storeInfo.nickname && storeInfo.nickname.length > 4) {
|
||||
share_title = storeInfo.nickname.substring(0, 4) + '..推送'
|
||||
} else if (storeInfo && storeInfo.nickname) {
|
||||
share_title = storeInfo.nickname + '推送'
|
||||
} else {
|
||||
share_title = ''
|
||||
}
|
||||
|
||||
// 确保在 wx.ready 中执行分享配置
|
||||
if (wx && typeof wx.ready === 'function') {
|
||||
wx.ready(() => {
|
||||
console.log('开始配置分享参数', { title, desc, link, imgUrl })
|
||||
|
||||
// 隐藏菜单项（可选）
|
||||
wx.hideMenuItems({
|
||||
menuList: [] // 为空表示不隐藏任何菜单
|
||||
})
|
||||
|
||||
// 分享给朋友
|
||||
wx.updateAppMessageShareData({
|
||||
title: desc !== '欢迎和我预约' ? share_title + '《' + title + '》' : `【${title}】商家预约`,
|
||||
desc: desc,
|
||||
link: link,
|
||||
imgUrl: imgUrl,
|
||||
success: function() {
|
||||
console.log('分享给朋友成功')
|
||||
},
|
||||
cancel: function() {
|
||||
console.log('分享给朋友取消')
|
||||
}
|
||||
})
|
||||
|
||||
// 分享到朋友圈
|
||||
wx.updateTimelineShareData({
|
||||
title: share_title + '《' + title + '》',
|
||||
link: link,
|
||||
imgUrl: imgUrl,
|
||||
success: function() {
|
||||
console.log('分享到朋友圈成功')
|
||||
},
|
||||
cancel: function() {
|
||||
console.log('分享到朋友圈取消')
|
||||
}
|
||||
})
|
||||
|
||||
// 兼容旧版本（可选）
|
||||
if (wx.onMenuShareAppMessage) {
|
||||
wx.onMenuShareAppMessage({
|
||||
title: share_title + '《' + title + '》',
|
||||
desc: desc,
|
||||
link: link,
|
||||
imgUrl: imgUrl,
|
||||
success: function() {
|
||||
console.log('分享成功-旧版')
|
||||
},
|
||||
cancel: function() {
|
||||
console.log('分享取消-旧版')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// 微信分享菜单测试
|
||||
wx.updateTimelineShareData({
|
||||
title: share_title + '《' + title + '》', // 分享标题
|
||||
desc: desc, // 分享描述
|
||||
link: link, // 分享链接
|
||||
imgUrl: imgUrl, // 分享图标
|
||||
success: function() {
|
||||
console.log('分享成功')
|
||||
},
|
||||
cancel: function() {
|
||||
console.log('分享失败')
|
||||
}
|
||||
})
|
||||
wx.onMenuShareAppMessage({
|
||||
title: share_title + '《' + title + '》', // 分享标题
|
||||
desc: desc, // 分享描述
|
||||
link: link, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
|
||||
imgUrl: imgUrl, // 分享图标
|
||||
success: function() {
|
||||
console.log('分享成功-企业') // 用户确认分享后执行的回调函数
|
||||
},
|
||||
cancel: function() {
|
||||
// 用户取消分享后执行的回调函数
|
||||
}
|
||||
})
|
||||
})
|
||||
wx.error(function(err) {
|
||||
// $toastText('网络异常，请稍后重试')
|
||||
console.log(JSON.stringify(err), '7777777777777')
|
||||
// alert(JSON.stringify(err))
|
||||
})
|
||||
} else {
|
||||
console.error('wx.ready 不可用，请确保微信 JS-SDK 已正确加载')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="poster-generator-container">
|
||||
|
||||
|
||||
<div class="input-card">
|
||||
<div class="card-header">
|
||||
<span class="header-icon">📋</span>
|
||||
@ -106,7 +107,7 @@
|
||||
|
||||
import html2canvas from 'html2canvas'
|
||||
import { ImagePreview } from 'vant'
|
||||
import { $toastText, $toastSuccess, $toastLoading, $toastClear } from '@/config/toast'
|
||||
import { $toastClear, $toastLoading, $toastSuccess, $toastText } from '@/config/toast'
|
||||
import requestApp from '@/utils/request'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
@ -125,14 +126,20 @@ export default {
|
||||
showActivityPicker: false,
|
||||
listLoading: false,
|
||||
listFinished: true,
|
||||
openId: ''
|
||||
openId: '',
|
||||
wxConfigInitialized: false
|
||||
// 注意：qrcodeCanvas 作为 DOM 引用，通常在 mounted 中通过 this.$refs 访问
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 替代 onMounted
|
||||
async mounted() {
|
||||
this.detectWeChatEnv()
|
||||
this.getData()
|
||||
|
||||
// 如果在微信环境，先初始化微信配置
|
||||
if (this.isWeChatEnv) {
|
||||
await this.initWechatShare()
|
||||
}
|
||||
|
||||
await this.getData()
|
||||
console.log('33')
|
||||
},
|
||||
computed: {
|
||||
@ -146,17 +153,29 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 格式化标题：切割 · 符号，取最后一个
|
||||
// formatTitle(title) {
|
||||
// if (!title) return ''
|
||||
// // 按 · 分割，取最后一部分，并去除首尾空格
|
||||
// debugger
|
||||
// const parts = title.split('·')
|
||||
// console.log(parts)
|
||||
// debugger
|
||||
// const lastPart = parts[parts.length - 1].trim()
|
||||
// return lastPart
|
||||
// },
|
||||
// 初始化微信分享
|
||||
async initWechatShare() {
|
||||
try {
|
||||
// 等待 store 中的 configData 加载完成
|
||||
if (!this.$store.state.app.configData) {
|
||||
console.log('等待微信配置数据加载...')
|
||||
// 可以设置一个延时等待，或者监听 store 变化
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
}
|
||||
|
||||
// 调用初始化方法
|
||||
if (this.$initWechatConfig) {
|
||||
await this.$initWechatConfig()
|
||||
this.wxConfigInitialized = true
|
||||
console.log('微信分享配置初始化成功')
|
||||
} else {
|
||||
console.error('$initWechatConfig 方法不存在')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('微信分享配置初始化失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 替代 script setup 中的函数
|
||||
async getData() {
|
||||
@ -164,20 +183,27 @@ export default {
|
||||
const vm = this
|
||||
|
||||
this.listLoading = true
|
||||
// 确保微信配置已初始化后再设置分享（可选）
|
||||
if (this.isWeChatEnv && !this.wxConfigInitialized) {
|
||||
await this.initWechatShare()
|
||||
}
|
||||
|
||||
// 设置微信分享（在数据加载完成后）
|
||||
this.setupWechatShare()
|
||||
// 注意：weXinShare 需要确保在 Vue 2 实例上下文中可用
|
||||
vm.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// if (vm.$store.state.app.configData) {
|
||||
const urls = `${vm.$shareCallback}/api/official/live/wechat/FamilyAuth?from_openid=${localStorage.getItem('openid')}&merchant_id=${vm.$store.state.app.merchant_id}&spread_merchant_id=${vm.$store.state.app.spread_merchant_id}&url=` + encodeURIComponent(`${vm.$shareCallback}/pu/#/activityPoster`)
|
||||
vm.$shareList(
|
||||
'https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png?x-oss-process=image/resize,w_200,h_200',
|
||||
urls,
|
||||
'查看详情',
|
||||
'活动海报生成「saas」'
|
||||
)
|
||||
// }
|
||||
}, 300)
|
||||
})
|
||||
// vm.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// // if (vm.$store.state.app.configData) {
|
||||
// const urls = `${vm.$shareCallback}/api/official/live/wechat/FamilyAuth?from_openid=${localStorage.getItem('openid')}&merchant_id=${vm.$store.state.app.merchant_id}&spread_merchant_id=${vm.$store.state.app.spread_merchant_id}&url=` + encodeURIComponent(`${vm.$shareCallback}/pu/#/activityPoster`)
|
||||
// vm.$shareList(
|
||||
// 'https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png?x-oss-process=image/resize,w_200,h_200',
|
||||
// urls,
|
||||
// '查看详情',
|
||||
// '活动海报生成「saas」'
|
||||
// )
|
||||
// // }
|
||||
// }, 300)
|
||||
// })
|
||||
// vm.$shareList('https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png',
|
||||
// `https://health.ufutx.cn/go_html/role_apply#/activityPoster`,
|
||||
// '查看详情', '活动海报生成「saas」')
|
||||
@ -204,6 +230,22 @@ export default {
|
||||
$toastClear()
|
||||
}
|
||||
},
|
||||
// 设置微信分享内容
|
||||
setupWechatShare() {
|
||||
if (!this.isWeChatEnv) return
|
||||
|
||||
const shareUrl = `${this.$shareCallback}/api/official/live/wechat/FamilyAuth?from_openid=${localStorage.getItem('openid')}&merchant_id=${this.$store.state.app.merchant_id}&spread_merchant_id=${this.$store.state.app.spread_merchant_id}&url=` + encodeURIComponent(`${this.$shareCallback}/pu/#/activityPoster`)
|
||||
|
||||
// 延迟执行，确保 wx 已配置
|
||||
setTimeout(() => {
|
||||
this.$shareList(
|
||||
'https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png?x-oss-process=image/resize,w_200,h_200',
|
||||
shareUrl,
|
||||
'查看详情',
|
||||
'活动海报生成「saas」'
|
||||
)
|
||||
}, 300)
|
||||
},
|
||||
|
||||
detectWeChatEnv() {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
@ -413,6 +455,7 @@ img {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.poster-subtitle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -439,12 +482,12 @@ img {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sponsor-name {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 446px;
|
||||
width: 100%;
|
||||
letter-spacing: 0.8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
@ -453,6 +496,8 @@ img {
|
||||
.sponsor-name .name {
|
||||
font-size: 14px;
|
||||
color: #0e2965;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.poster-qrcode {
|
||||
@ -489,7 +534,6 @@ img {
|
||||
font-weight: 500;
|
||||
color: #0e2866;
|
||||
}
|
||||
|
||||
.poster-time {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
@ -548,7 +592,6 @@ img {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 输入卡片 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user