forked from angelo/web-retail-h5
hotfix(share): 分享背景图临时更换发版
This commit is contained in:
woody
parent
67bf731061
commit
c58d2c4cba
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<view class="default-share-page">
|
||||
<!-- 背景图片，替代CSS background -->
|
||||
<img
|
||||
class="share-bg-image"
|
||||
src="/static/images/share-bg.jpg"
|
||||
mode="scaleToFill"
|
||||
crossorigin="anonymous"
|
||||
@load="onBackgroundImageLoad"
|
||||
@error="onBackgroundImageError"
|
||||
/>
|
||||
|
||||
<view class="share-wrapper">
|
||||
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
|
||||
<!-- 二维码样式区域 - 用户自定义样式位置 -->
|
||||
<view class="qr-code-outer">
|
||||
<img
|
||||
class="qr-code"
|
||||
:src="qrCodeImage"
|
||||
mode="aspectFit"
|
||||
v-if="qrCodeImage"
|
||||
/>
|
||||
<view v-else class="qr-code-placeholder">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员编号样式区域 - 用户自定义样式位置 -->
|
||||
<text
|
||||
class="member-code-text"
|
||||
style="font-size: 30rpx; color: #fff; font-weight: bold"
|
||||
>{{ desensitization(userInfo.memberCode) }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
export default {
|
||||
name: 'DefaultSharePage',
|
||||
props: {
|
||||
qrCodeImage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isWechat: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLoaded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backgroundImageLoaded: false,
|
||||
shareButtonShow: true,
|
||||
}
|
||||
},
|
||||
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)
|
||||
},
|
||||
|
||||
async sharePage() {
|
||||
if (!this.qrCodeImage) {
|
||||
uni.showToast({
|
||||
title: '二维码尚未生成',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
|
||||
try {
|
||||
this.shareButtonShow = false
|
||||
await this.$nextTick()
|
||||
|
||||
await this.capturePageWithHtml2Canvas()
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
|
||||
console.error('sharePage error:', error)
|
||||
} finally {
|
||||
// 恢复按钮显示
|
||||
this.shareButtonShow = true
|
||||
}
|
||||
},
|
||||
|
||||
// 使用html2canvas截取整个页面
|
||||
async capturePageWithHtml2Canvas() {
|
||||
console.log('开始使用html2canvas截取页面')
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// 确保所有图片都已加载完成
|
||||
const waitForImages = () => {
|
||||
if (!this.backgroundImageLoaded || !this.qrCodeImage) {
|
||||
setTimeout(waitForImages, 100)
|
||||
return
|
||||
}
|
||||
|
||||
// 额外等待确保渲染完成
|
||||
setTimeout(() => {
|
||||
const element = this.$el
|
||||
if (!element) {
|
||||
reject(new Error('找不到组件容器'))
|
||||
return
|
||||
}
|
||||
|
||||
console.log(
|
||||
'开始html2canvas截取，容器尺寸:',
|
||||
element.offsetWidth,
|
||||
'x',
|
||||
element.offsetHeight
|
||||
)
|
||||
|
||||
html2canvas(element, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
backgroundColor: null,
|
||||
scale: 2,
|
||||
dpi: 400,
|
||||
logging: true,
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
windowWidth: element.offsetWidth,
|
||||
windowHeight: element.offsetHeight,
|
||||
scrollX: 0,
|
||||
scrollY: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
})
|
||||
.then(canvas => {
|
||||
const dataUrl = canvas.toDataURL('image/jpeg', 1)
|
||||
this.$emit('share-generated', dataUrl)
|
||||
resolve()
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('html2canvas截取失败:', err)
|
||||
reject(err)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 开始等待图片加载
|
||||
waitForImages()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.default-share-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 背景图片样式 */
|
||||
.share-bg-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 1;
|
||||
// object-fit: cover;
|
||||
}
|
||||
|
||||
.share-wrapper {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 25%;
|
||||
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;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portal-frame.is-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 二维码样式区域 - 用户自定义样式位置 */
|
||||
.qr-code-outer {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
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 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
/* 用户可以在这里自定义会员编号的样式 */
|
||||
}
|
||||
|
||||
/* 下载按钮样式 */
|
||||
.share-button {
|
||||
margin-top: 28rpx;
|
||||
width: 280rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
color: #fff;
|
||||
border-radius: 36rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
button.share-button {
|
||||
padding: 0;
|
||||
line-height: 72rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.share-button:active {
|
||||
transform: translateY(1rpx);
|
||||
box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
|
||||
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@ module.exports = vm => {
|
|||
|
||||
//#ifdef DEV_SERVER
|
||||
console.log('DEV_SERVER')
|
||||
config.baseURL = 'https://t-bl.beida777.com/prod-api'
|
||||
config.baseURL = 'https://bl.beida777.com/prod-api'
|
||||
//#endif
|
||||
|
||||
//#ifdef QA_SERVER
|
||||
|
|
|
|||
|
|
@ -1,80 +1,31 @@
|
|||
<template>
|
||||
<view
|
||||
class="share-page"
|
||||
style="display: flex; flex-direction: column; height: 100vh"
|
||||
>
|
||||
<view id="shareContainer" class="share-container">
|
||||
<!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
|
||||
<template v-if="!isWechat || (isWechat && !generatedImageUrl)">
|
||||
<!-- 背景图片，替代CSS background -->
|
||||
<img
|
||||
class="share-bg-image"
|
||||
src="/static/images/share-bg.jpg"
|
||||
mode="scaleToFill"
|
||||
crossorigin="anonymous"
|
||||
@load="onBackgroundImageLoad"
|
||||
@error="onBackgroundImageError"
|
||||
/>
|
||||
<view class="share-wrapper">
|
||||
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
|
||||
<view class="qr-code-outer">
|
||||
<img
|
||||
class="qr-code"
|
||||
:src="qrCodeImage"
|
||||
mode="aspectFit"
|
||||
v-if="qrCodeImage"
|
||||
/>
|
||||
<view v-else class="qr-code-placeholder">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div
|
||||
style="
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
{{ desensitization(userInfo.memberCode) }}
|
||||
</div>
|
||||
<div v-if="!isWechat" class="share-button" @click="sharePage">
|
||||
保存图片并分享
|
||||
</div>
|
||||
<img
|
||||
v-if="isWechat"
|
||||
class="share-btn"
|
||||
style="margin-top: 30rpx"
|
||||
src="/static/images/share-btn.svg"
|
||||
mode="scaleToFill"
|
||||
<view id="shareContainer" class="share-container">
|
||||
<!-- 默认场景 -->
|
||||
<DefaultSharePage
|
||||
:qrCodeImage="qrCodeImage"
|
||||
:userInfo="userInfo"
|
||||
:isWechat="isWechat"
|
||||
:isLoaded="isLoaded"
|
||||
@share-generated="handleShareGenerated"
|
||||
ref="defaultSharePage"
|
||||
/>
|
||||
</view>
|
||||
<!-- <image
|
||||
class="share-bg-logo"
|
||||
src="/static/images/share-logo.png"
|
||||
mode="scaleToFill"
|
||||
></image> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 微信环境全屏图片显示 -->
|
||||
<view
|
||||
class="wechat-fullscreen-overlay"
|
||||
v-show="isWechat && generatedImageUrl"
|
||||
@click="closeFullscreenImage"
|
||||
v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
|
||||
>
|
||||
<image
|
||||
class="fullscreen-image"
|
||||
:src="generatedImageUrl"
|
||||
mode="scaleToFill"
|
||||
@load="onGeneratedImageLoad"
|
||||
@error="onGeneratedImageError"
|
||||
@click.stop=""
|
||||
></image>
|
||||
<img class="fullscreen-image" :src="generatedImageUrl" @click.stop="" />
|
||||
</view>
|
||||
</view>
|
||||
<cl-tabbar class="tabbar" :current="2" />
|
||||
|
|
@ -82,54 +33,58 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import { getShareCode } from '@/config/share'
|
||||
import clTabbar from '@/components/cl-tabbar.vue'
|
||||
import DefaultSharePage from '@/components/DefaultSharePage.vue'
|
||||
|
||||
export default {
|
||||
name: 'ShareQRCode',
|
||||
components: {
|
||||
'cl-tabbar': clTabbar,
|
||||
DefaultSharePage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrCodeImage: '',
|
||||
// Set canvas dimensions. It's better to get device screen width for this.
|
||||
canvasWidth: 375,
|
||||
canvasHeight: 800,
|
||||
isLoaded: false,
|
||||
shareButtonShow: true,
|
||||
isWechat: false, // 是否微信环境
|
||||
generatedImageUrl: '', // 生成的图片URL，用于微信长按保存
|
||||
backgroundImageLoaded: false, // 背景图片是否加载完成
|
||||
isWechat: false,
|
||||
generatedImageUrl: '',
|
||||
userInfo: uni.getStorageSync('User'),
|
||||
sourceVisible: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSpecialScene() {
|
||||
return this.userInfo && this.userInfo.sharePosterImage
|
||||
},
|
||||
isDefaultScene() {
|
||||
return !this.isSpecialScene
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.checkWechatEnvironment()
|
||||
this.handleGetShareCode()
|
||||
// Get screen width to set canvas width dynamically
|
||||
// 获取屏幕尺寸
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.canvasWidth = res.windowWidth
|
||||
this.canvasHeight = res.windowHeight
|
||||
},
|
||||
})
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
// Use a short timeout to ensure the initial render is complete before animation
|
||||
// 短暂延迟后启用加载动画
|
||||
setTimeout(() => {
|
||||
this.isLoaded = true
|
||||
}, 100)
|
||||
},
|
||||
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)
|
||||
},
|
||||
// 检测微信环境
|
||||
checkWechatEnvironment() {
|
||||
const ua = navigator.userAgent.toLowerCase()
|
||||
|
|
@ -137,18 +92,14 @@ export default {
|
|||
console.log('微信环境检测:', this.isWechat)
|
||||
},
|
||||
|
||||
// 获取分享二维码
|
||||
handleGetShareCode() {
|
||||
// Don't show loading toast, use the placeholder loader instead
|
||||
// uni.showLoading({ title: '加载中...' })
|
||||
getShareCode()
|
||||
.then(res => {
|
||||
// The screenshot shows the base64 string is in data.datStr
|
||||
if (res.code === 200 && res.data && res.data.dataStr) {
|
||||
this.qrCodeImage = 'data:image/png;base64,' + res.data.dataStr
|
||||
this.$nextTick(() => {
|
||||
if (this.isWechat) {
|
||||
this.sharePage()
|
||||
}
|
||||
this.generateShareImage()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
|
|
@ -166,162 +117,38 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
async sharePage() {
|
||||
if (!this.qrCodeImage) {
|
||||
uni.showToast({
|
||||
title: '二维码尚未生成',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 统一使用html2canvas生成图片
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
|
||||
// 生成分享图片
|
||||
async generateShareImage() {
|
||||
try {
|
||||
// 隐藏按钮，等待DOM更新
|
||||
this.shareButtonShow = false
|
||||
await this.$nextTick()
|
||||
|
||||
// 使用html2canvas截取页面
|
||||
await this.capturePageWithHtml2Canvas()
|
||||
if (this.isSpecialScene) {
|
||||
await this.$refs.specialSharePage.generateShareImage()
|
||||
} else {
|
||||
// 默认场景生成图片
|
||||
await this.$refs.defaultSharePage.sharePage()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成分享图片失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理分享图片生成完成
|
||||
handleShareGenerated(dataUrl) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
|
||||
console.error('sharePage error:', error)
|
||||
} finally {
|
||||
// 恢复按钮显示
|
||||
this.shareButtonShow = true
|
||||
}
|
||||
},
|
||||
|
||||
// 生成的图片加载成功
|
||||
onGeneratedImageLoad() {
|
||||
console.log('生成的图片加载成功')
|
||||
},
|
||||
|
||||
// 生成的图片加载失败
|
||||
onGeneratedImageError(e) {
|
||||
console.error('生成的图片加载失败:', e)
|
||||
uni.showToast({
|
||||
title: '图片显示失败',
|
||||
icon: 'none',
|
||||
this.$nextTick(() => {
|
||||
this.sourceVisible = false
|
||||
})
|
||||
},
|
||||
uni.hideLoading()
|
||||
|
||||
// 关闭全屏图片
|
||||
closeFullscreenImage() {
|
||||
this.generatedImageUrl = ''
|
||||
console.log('关闭全屏图片')
|
||||
},
|
||||
|
||||
// 背景图片加载成功
|
||||
onBackgroundImageLoad() {
|
||||
this.backgroundImageLoaded = true
|
||||
console.log('背景图片加载成功')
|
||||
},
|
||||
|
||||
// 背景图片加载失败
|
||||
onBackgroundImageError(e) {
|
||||
console.error('背景图片加载失败:', e)
|
||||
},
|
||||
|
||||
// 使用html2canvas截取整个页面
|
||||
async capturePageWithHtml2Canvas() {
|
||||
console.log('开始使用html2canvas截取页面')
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// 确保所有图片都已加载完成
|
||||
const waitForImages = () => {
|
||||
if (!this.backgroundImageLoaded || !this.qrCodeImage) {
|
||||
setTimeout(waitForImages, 100)
|
||||
return
|
||||
}
|
||||
|
||||
// 额外等待确保渲染完成
|
||||
setTimeout(() => {
|
||||
const element = document.getElementById('shareContainer')
|
||||
if (!element) {
|
||||
reject(new Error('找不到页面容器'))
|
||||
return
|
||||
}
|
||||
|
||||
console.log(
|
||||
'开始html2canvas截取，容器尺寸:',
|
||||
element.offsetWidth,
|
||||
'x',
|
||||
element.offsetHeight
|
||||
)
|
||||
|
||||
html2canvas(element, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
backgroundColor: null,
|
||||
scale: 2,
|
||||
dpi: 400,
|
||||
logging: true, // 开启日志便于调试
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
windowWidth: element.offsetWidth,
|
||||
windowHeight: element.offsetHeight,
|
||||
scrollX: 0,
|
||||
scrollY: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
})
|
||||
.then(canvas => {
|
||||
const dataUrl = canvas.toDataURL('image/jpeg', 1)
|
||||
|
||||
// 根据环境处理结果
|
||||
if (this.isWechat) {
|
||||
// 微信环境：设置图片供长按保存
|
||||
this.generatedImageUrl = dataUrl
|
||||
uni.hideLoading()
|
||||
} else {
|
||||
// 普通浏览器：直接下载图片
|
||||
this.downloadImage(dataUrl)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '图片已开始下载',
|
||||
icon: 'success',
|
||||
})
|
||||
// 普通浏览器环境
|
||||
if (this.isSpecialScene) {
|
||||
// 特殊场景：设置图片供长按保存（没有下载按钮）
|
||||
this.generatedImageUrl = dataUrl
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('html2canvas截取失败:', err)
|
||||
reject(err)
|
||||
})
|
||||
}, 1000) // 增加等待时间到1000ms
|
||||
}
|
||||
|
||||
// 开始等待图片加载
|
||||
waitForImages()
|
||||
})
|
||||
},
|
||||
|
||||
// 原生图片加载器
|
||||
loadImage(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
|
||||
img.onload = () => {
|
||||
console.log(
|
||||
`图片加载成功: ${src.substring(0, 50)}...`,
|
||||
`${img.width}x${img.height}`
|
||||
)
|
||||
resolve(img)
|
||||
}
|
||||
|
||||
img.onerror = error => {
|
||||
console.error(`图片加载失败: ${src}`, error)
|
||||
reject(new Error(`图片加载失败: ${src}`))
|
||||
}
|
||||
|
||||
img.src = src
|
||||
})
|
||||
},
|
||||
|
||||
// 下载图片
|
||||
|
|
@ -345,176 +172,37 @@ export default {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 背景图片样式 */
|
||||
.share-bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.share-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.share-wrapper {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 370rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.share-bg-logo {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
// margin-top: -60rpx;
|
||||
}
|
||||
|
||||
.portal-frame {
|
||||
padding: 32rpx;
|
||||
width: 520rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portal-frame.is-loaded {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* The single white card for the QR code */
|
||||
.qr-code-outer {
|
||||
width: 300rpx; /* 从400rpx缩小到320rpx */
|
||||
height: 300rpx; /* 从400rpx缩小到320rpx */
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 20rpx; /* 从24rpx减小到20rpx */
|
||||
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx; /* 从16rpx减小到12rpx */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* The image and the placeholder both live inside the outer card */
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.share-button {
|
||||
margin-top: 58rpx; /* 从32rpx减小到28rpx */
|
||||
width: 380rpx; /* 设置固定宽度 */
|
||||
color: #fff;
|
||||
border-radius: 36rpx; /* 从44rpx减小到36rpx */
|
||||
font-size: 16rpx; /* 从30rpx减小到26rpx */
|
||||
font-weight: 500;
|
||||
padding: 12rpx 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#d4af37 0%,
|
||||
#ffd700 30%,
|
||||
#b8860b 70%,
|
||||
#8b7355 100%
|
||||
);
|
||||
// box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
border-radius: 70rpx;
|
||||
text-align: center;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 微信环境全屏覆盖样式 */
|
||||
.wechat-fullscreen-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100%; /* 减去tab栏高度 */
|
||||
|
||||
background-color: transparent; /* 移除背景色 */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch; /* 拉伸对齐 */
|
||||
justify-content: stretch; /* 拉伸对齐 */
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fullscreen-image {
|
||||
width: 100vw;
|
||||
height: 100%; /* 减去tab栏高度 */
|
||||
object-fit: cover; /* 覆盖整个容器，可能会裁剪 */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
@media screen and (max-height: 667px) {
|
||||
.tabbar {
|
||||
height: 70px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 812px) {
|
||||
/* iPhone X及以上机型 */
|
||||
.tabbar {
|
||||
height: 80px !important;
|
||||
}
|
||||
}
|
||||
.tabbar {
|
||||
position: static;
|
||||
bottom: 0;
|
||||
|
|
@ -524,8 +212,17 @@ export default {
|
|||
:v-deep .u-tabbar--fixed {
|
||||
height: 100px !important;
|
||||
}
|
||||
// ::v-deep .u-safe-area-inset-bottom {
|
||||
// display: none !important;
|
||||
// }
|
||||
}
|
||||
|
||||
@media screen and (max-height: 667px) {
|
||||
.tabbar {
|
||||
height: 70px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 812px) {
|
||||
.tabbar {
|
||||
height: 80px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 1.0 MiB |
Loading…
Reference in New Issue