forked from angelo/web-retail-h5
502 lines
14 KiB
Vue
502 lines
14 KiB
Vue
<template>
|
||
<view ref="specialSharePage" class="special-share-page">
|
||
<!-- 特殊场景背景图片 -->
|
||
<image
|
||
class="share-bg-image"
|
||
:src="specialBackgroundImage"
|
||
mode="scaleToFill"
|
||
crossorigin="anonymous"
|
||
@load="onBackgroundImageLoad"
|
||
@error="onBackgroundImageError"
|
||
v-if="specialBackgroundImage"
|
||
></image>
|
||
|
||
<!-- 加载状态 -->
|
||
<view
|
||
class="loading-container"
|
||
v-if="!specialBackgroundImage || isLoadingBackground"
|
||
>
|
||
<view class="loader"></view>
|
||
<text class="loading-text">{{
|
||
isLoadingBackground ? '正在获取背景图片...' : '正在加载分享背景...'
|
||
}}</text>
|
||
</view>
|
||
|
||
<view
|
||
class="share-wrapper"
|
||
v-if="specialBackgroundImage && !isLoadingBackground"
|
||
>
|
||
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
|
||
<view class="qr-code-outer special-qr-style">
|
||
<image
|
||
class="qr-code"
|
||
:src="qrCodeImage"
|
||
mode="aspectFit"
|
||
v-if="qrCodeImage"
|
||
></image>
|
||
<view v-else class="qr-code-placeholder">
|
||
<view class="loader"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<text
|
||
class="member-code-text special-member-code-style"
|
||
style="
|
||
font-size: 30rpx;
|
||
color: #005bac;
|
||
font-weight: bold;
|
||
margin-top: 20rpx;
|
||
"
|
||
>{{ desensitization(userInfo.memberCode) }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { snapdom } from '@zumer/snapdom'
|
||
import html2canvas from 'html2canvas'
|
||
import { getSharedImg } from '@/config/login'
|
||
export default {
|
||
name: 'SpecialSharePage',
|
||
props: {
|
||
qrCodeImage: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
userInfo: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
isWechat: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
isLoaded: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 移除specialBackgroundImage prop，改为接口获取
|
||
// 调试用：跳过图片验证
|
||
skipImageVerification: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
backgroundImageLoaded: false,
|
||
imageLoadRetryCount: 0,
|
||
maxRetryCount: 3,
|
||
specialBackgroundImage: '', // 存储接口返回的背景图
|
||
isLoadingBackground: false, // 是否正在加载背景图
|
||
}
|
||
},
|
||
created() {
|
||
this.getBackgroundImage()
|
||
},
|
||
methods: {
|
||
desensitization(str) {
|
||
if (!str) return ''
|
||
if (str.length <= 8) return str.slice(0, 4) + '****'
|
||
const len = str.length - 6
|
||
const placeholder = '*'.repeat(len)
|
||
return str.slice(0, 4) + placeholder + str.slice(-2)
|
||
},
|
||
|
||
// 背景图片加载成功
|
||
onBackgroundImageLoad() {
|
||
this.backgroundImageLoaded = true
|
||
console.log('特殊场景背景图片加载成功')
|
||
},
|
||
|
||
// 背景图片加载失败
|
||
onBackgroundImageError(e) {
|
||
console.error('特殊场景背景图片加载失败:', e)
|
||
this.backgroundImageLoaded = false
|
||
this.imageLoadRetryCount++
|
||
|
||
// 如果重试次数未达到上限，可以通知父组件重试
|
||
if (this.imageLoadRetryCount < this.maxRetryCount) {
|
||
console.log(
|
||
`图片加载失败，重试中 (${this.imageLoadRetryCount}/${this.maxRetryCount})`
|
||
)
|
||
this.$emit('background-image-retry', this.imageLoadRetryCount)
|
||
} else {
|
||
this.$emit('background-image-error', e)
|
||
}
|
||
},
|
||
|
||
// 获取特殊场景背景图片
|
||
async getBackgroundImage() {
|
||
if (this.skipImageVerification) {
|
||
this.specialBackgroundImage = '' // 跳过验证时清空背景图
|
||
this.backgroundImageLoaded = true
|
||
return
|
||
}
|
||
|
||
if (this.specialBackgroundImage) {
|
||
// 如果背景图已加载，则直接使用
|
||
this.backgroundImageLoaded = true
|
||
return
|
||
}
|
||
|
||
this.isLoadingBackground = true
|
||
try {
|
||
const result = await getSharedImg()
|
||
if (result && result.code === 200 && result.data) {
|
||
this.specialBackgroundImage =
|
||
'data:image/png;base64,' + result.data.base64
|
||
this.backgroundImageLoaded = true
|
||
} else {
|
||
this.backgroundImageLoaded = false
|
||
this.imageLoadRetryCount++
|
||
}
|
||
} catch (error) {
|
||
this.backgroundImageLoaded = false
|
||
this.imageLoadRetryCount++
|
||
if (this.imageLoadRetryCount < this.maxRetryCount) {
|
||
this.$emit('background-image-retry', this.imageLoadRetryCount)
|
||
} else {
|
||
this.$emit('background-image-error', error)
|
||
}
|
||
} finally {
|
||
this.isLoadingBackground = false
|
||
}
|
||
return this.specialBackgroundImage
|
||
},
|
||
|
||
async generateShareImage() {
|
||
// await this.getBackgroundImage()
|
||
try {
|
||
this.$nextTick(() => {
|
||
const info = uni.getSystemInfoSync()
|
||
console.log(info.platform, '.....info')
|
||
if (info.platform === 'ios') {
|
||
console.log('iOS detected, using html2canvas for capturing.')
|
||
this.capturePageWithHtml2Canvas()
|
||
} else {
|
||
console.log('Non-iOS detected, using snapdom for capturing.')
|
||
this.capturePageWithSnapDom()
|
||
}
|
||
})
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
// 新增：使用html2canvas截取整个页面 (For iOS)
|
||
async capturePageWithHtml2Canvas() {
|
||
return new Promise(async (resolve, reject) => {
|
||
// 确保所有图片都已加载完成
|
||
const waitForImages = async () => {
|
||
// 检查是否正在加载背景图片
|
||
if (this.isLoadingBackground) {
|
||
console.log('等待背景图片接口调用完成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查背景图片是否加载完成
|
||
if (!this.backgroundImageLoaded) {
|
||
console.log('等待背景图片加载完成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查二维码是否存在
|
||
if (!this.qrCodeImage) {
|
||
console.log('等待二维码生成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查特殊背景图片参数是否存在
|
||
if (!this.specialBackgroundImage) {
|
||
console.log('等待特殊背景图片参数...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
console.log('所有图片准备就绪，开始使用html2canvas截图...')
|
||
|
||
// 等待确保渲染完成
|
||
setTimeout(() => {
|
||
const element = this.$el
|
||
if (!element) {
|
||
uni.hideLoading()
|
||
reject(new Error('找不到组件容器'))
|
||
return
|
||
}
|
||
|
||
html2canvas(element, {
|
||
useCORS: true,
|
||
allowTaint: true,
|
||
backgroundColor: null,
|
||
scale: 2, // 提高清晰度
|
||
dpi: 300,
|
||
width: element.offsetWidth,
|
||
height: element.offsetHeight,
|
||
})
|
||
.then(canvas => {
|
||
const dataUrl = canvas.toDataURL('image/jpeg', 1.0)
|
||
uni.hideLoading()
|
||
// this.handleShareGenerated(dataUrl)
|
||
this.$emit('share-generated', dataUrl)
|
||
resolve()
|
||
})
|
||
.catch(err => {
|
||
uni.hideLoading()
|
||
console.error('html2canvas截取失败:', err)
|
||
uni.showToast({
|
||
title: '图片生成失败，请稍后重试',
|
||
icon: 'none',
|
||
})
|
||
reject(err)
|
||
})
|
||
}, 1000)
|
||
}
|
||
|
||
// 开始等待图片加载
|
||
waitForImages()
|
||
})
|
||
},
|
||
|
||
// 使用snapDOM截取整个页面
|
||
async capturePageWithSnapDom() {
|
||
return new Promise(async (resolve, reject) => {
|
||
// 确保所有图片都已加载完成
|
||
const waitForImages = async () => {
|
||
// 检查是否正在加载背景图片
|
||
if (this.isLoadingBackground) {
|
||
console.log('等待背景图片接口调用完成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查背景图片是否加载完成
|
||
if (!this.backgroundImageLoaded) {
|
||
console.log('等待背景图片加载完成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查二维码是否存在
|
||
if (!this.qrCodeImage) {
|
||
console.log('等待二维码生成...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
// 检查特殊背景图片参数是否存在
|
||
if (!this.specialBackgroundImage) {
|
||
console.log('等待特殊背景图片参数...')
|
||
setTimeout(waitForImages, 100)
|
||
return
|
||
}
|
||
|
||
console.log('所有图片准备就绪，开始截图...')
|
||
|
||
// 等待确保渲染完成
|
||
setTimeout(async () => {
|
||
const element = this.$el
|
||
if (!element) {
|
||
reject(new Error('找不到组件容器'))
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 获取元素的所有可能尺寸
|
||
const rect = element.getBoundingClientRect()
|
||
const offsetWidth = element.offsetWidth
|
||
const offsetHeight = element.offsetHeight
|
||
const scrollWidth = element.scrollWidth
|
||
const scrollHeight = element.scrollHeight
|
||
const clientWidth = element.clientWidth
|
||
const clientHeight = element.clientHeight
|
||
|
||
// 计算实际需要的尺寸（取最大值确保完整）
|
||
const elementWidth = Math.max(
|
||
offsetWidth,
|
||
scrollWidth,
|
||
clientWidth,
|
||
rect.width
|
||
)
|
||
const elementHeight = Math.max(
|
||
offsetHeight,
|
||
scrollHeight,
|
||
clientHeight,
|
||
rect.height
|
||
)
|
||
|
||
setTimeout(async () => {
|
||
try {
|
||
const result = await snapdom(element, {
|
||
width: elementWidth,
|
||
height: elementHeight,
|
||
quality: 1,
|
||
compress: false,
|
||
|
||
// useProxy: true,
|
||
})
|
||
const canvas = await result.toCanvas()
|
||
|
||
const dataUrl = canvas.toDataURL('image/jpeg')
|
||
|
||
uni.hideLoading()
|
||
// this.handleShareGenerated(dataUrl)
|
||
this.$emit('share-generated', dataUrl)
|
||
resolve()
|
||
} catch (err) {
|
||
uni.hideLoading()
|
||
console.error('snapDOM截取失败:', err)
|
||
uni.showToast({
|
||
title: '图片生成失败，请稍后重试',
|
||
icon: 'none',
|
||
})
|
||
reject(err)
|
||
}
|
||
}, 500)
|
||
} catch (err) {
|
||
uni.hideLoading()
|
||
console.error('snapDOM初始化失败:', err)
|
||
uni.showToast({
|
||
title: '图片生成失败，请稍后重试',
|
||
icon: 'none',
|
||
})
|
||
reject(err)
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
// 开始等待图片加载
|
||
waitForImages()
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.special-share-page {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 背景图片样式 */
|
||
.share-bg-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading-container {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 2;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.share-wrapper {
|
||
position: absolute;
|
||
z-index: 2;
|
||
bottom: 22%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.portal-frame {
|
||
padding: 32rpx;
|
||
width: 520rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portal-frame.is-loaded {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 特殊场景二维码样式区域 - 用户自定义样式位置 */
|
||
.qr-code-outer {
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.qr-code,
|
||
.qr-code-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.qr-code {
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.qr-code-placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.loader {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border: 8rpx solid rgba(0, 0, 0, 0.1);
|
||
border-left-color: #0072ff;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* 特殊场景会员编号样式区域 - 用户自定义样式位置 */
|
||
.member-code-text {
|
||
/* 用户可以在这里自定义会员编号的样式 */
|
||
}
|
||
|
||
/* 特殊场景下的会员编号样式 */
|
||
.special-member-code-style {
|
||
/* 用户可以在这里自定义特殊场景下的会员编号样式 */
|
||
/* 例如：不同的位置、颜色、字体等 */
|
||
}
|
||
</style>
|