103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
<template>
|
|
<!-- 分享海报 -->
|
|
<div class="content">
|
|
<div class="share">
|
|
<image class="poster" :src="posterImg" show-menu-by-longpress="{{true}}"
|
|
@load="imgLoad"
|
|
:style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
|
|
></image>
|
|
<view class="close" @click="closeShow"><up-icon name="close" color="#fff" size="26"/></view>
|
|
<text>长按图片分享好友</text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
export default {
|
|
props: {
|
|
posterImg: String
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
imgWidth: 1,
|
|
imgHeight: 1
|
|
})
|
|
|
|
// 关闭
|
|
function closeShow() {
|
|
context.emit('closeShow')
|
|
}
|
|
|
|
function imgLoad(e) {
|
|
let imgWidth = e.detail.width
|
|
let imgHeight = e.detail.height
|
|
let pWid = uni.getSystemInfoSync().windowWidth
|
|
let pHig = uni.getSystemInfoSync().windowHeight
|
|
let imgRate = imgWidth / imgHeight
|
|
let pRate = pWid / pHig
|
|
// 先判断图片宽高值
|
|
if(imgWidth > imgHeight) {
|
|
// 如果图片宽度大于屏幕宽度，就把图片宽度设为屏幕的宽度，高度设为其比例
|
|
if(imgWidth > pWid) {
|
|
data.imgWidth = pWid
|
|
data.imgHeight = (pWid / imgRate).toFixed(2)
|
|
} else {
|
|
data.imgWidth = imgWidth
|
|
data.imgHeight = imgHeight
|
|
}
|
|
} else {
|
|
if(imgHeight > pHig * 0.65) {
|
|
data.imgWidth = (pHig * 0.65 * imgRate).toFixed(2)
|
|
data.imgHeight = (pHig * 0.65).toFixed(2)
|
|
} else {
|
|
data.imgWidth = imgWidth
|
|
data.imgHeight = imgHeight
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
...toRefs(data),
|
|
closeShow,
|
|
imgLoad
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba($color: #000000, $alpha: 0.7);
|
|
z-index: 1001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.share{
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.close{
|
|
position: absolute;
|
|
right: 0;
|
|
top: -70rpx;
|
|
}
|
|
text{
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
margin-top: 20rpx;
|
|
}
|
|
.poster{
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|