|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<view style="position: relative;">
|
|
|
- <view v-if="shareUrl" class="d-flex align-center flex-column">
|
|
|
- <image v-if="!!shareUrl" class="imgBox" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
|
|
|
- <view class="color-999 ss-m-t-20 font-size-14">点击图片预览,长按图片保存</view>
|
|
|
+ <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
|
|
|
+ <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
|
|
|
+ <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览,长按图片保存</view>
|
|
|
</view>
|
|
|
<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
|
|
|
</view>
|
|
@@ -11,10 +11,24 @@
|
|
|
<script setup>
|
|
|
import { ref, computed } from 'vue'
|
|
|
import { userStore } from '@/store/user'
|
|
|
+import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
|
|
const useUserStore = userStore()
|
|
|
const baseInfo = computed(() => useUserStore?.baseInfo)
|
|
|
const shareUrl = ref('')
|
|
|
+const windowWidth = ref(0)
|
|
|
+
|
|
|
+onLoad(() => {
|
|
|
+ const windowInfo = wx.getWindowInfo()
|
|
|
+ windowWidth.value = windowInfo.windowWidth
|
|
|
+ console.log(windowWidth.value, '当前机型屏幕宽')
|
|
|
+})
|
|
|
+
|
|
|
+const imgStyle = computed(() => {
|
|
|
+ if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
|
|
|
+ if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
|
|
|
+ if (windowWidth.value > 375) return `width: 328px; height: 600px;`
|
|
|
+})
|
|
|
|
|
|
// 图片预览
|
|
|
const handlePreviewSharePoster = () => {
|
|
@@ -94,8 +108,4 @@ createPoster()
|
|
|
left: -99999upx;
|
|
|
z-index: -99999;
|
|
|
}
|
|
|
-.imgBox {
|
|
|
- width: 330px;
|
|
|
- height: 600px;
|
|
|
-}
|
|
|
</style>
|