157 lines
3.5 KiB
Vue
157 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<uni-popup ref="posterRef" type="center" :safe-area="false">
|
||
|
|
<view class="container" @click="close">
|
||
|
|
<view id="img-box" style="width: 100%;height: calc(100vh - 200rpx);overflow: hidden;padding-top: 32rpx;">
|
||
|
|
<image :src="url" mode="widthFix" style="width: 100%;border-radius: 12rpx;"
|
||
|
|
show-menu-by-longpress="true"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="flex justify-around margin-tb bg-white" style="width: 100vw;">
|
||
|
|
<view class="btn" @click="savePic">存为图片</view>
|
||
|
|
<view class="btn" @click="share">微信好友</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "createPoster",
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
url: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open() {
|
||
|
|
// uni.hideTabBar({
|
||
|
|
// fail() {
|
||
|
|
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
this.$refs.posterRef.open()
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$refs.posterRef.close()
|
||
|
|
// uni.showTabBar()
|
||
|
|
this.$emit('close')
|
||
|
|
},
|
||
|
|
share() {
|
||
|
|
uni.showShareImageMenu({
|
||
|
|
path: this.url,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 保存到相册
|
||
|
|
savePic() {
|
||
|
|
|
||
|
|
uni.getSetting({
|
||
|
|
success: (res) => {
|
||
|
|
console.log(res)
|
||
|
|
// 判断是否拥有此权限进行拉起授权 和 重新授权功能
|
||
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||
|
|
// 未授权此项权限 拉起授界面
|
||
|
|
uni.authorize({
|
||
|
|
scope: 'scope.writePhotosAlbum',
|
||
|
|
success: () => {
|
||
|
|
// 授权成功后 就可以执行 需要权限的 操作函数了
|
||
|
|
uni.saveImageToPhotosAlbum({
|
||
|
|
filePath: this.url,
|
||
|
|
success: (res) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存成功',
|
||
|
|
icon: 'success',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存失败',
|
||
|
|
icon: 'none',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
/*
|
||
|
|
第一次拒绝授权后必须在 uni.authorize的fail中使用
|
||
|
|
uni.openSetting 才能进入设置界面打开授权按钮
|
||
|
|
*/
|
||
|
|
|
||
|
|
// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
|
||
|
|
uni.showModal({
|
||
|
|
title: '是否重新授权相册功能',
|
||
|
|
success(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
uni.openSetting({
|
||
|
|
success() {
|
||
|
|
console.log('开启权限成功');
|
||
|
|
},
|
||
|
|
fail() {
|
||
|
|
console.log('开启权限失败');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else if (res.cancel) {
|
||
|
|
console.log('拒绝开启开启权限');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.saveImageToPhotosAlbum({
|
||
|
|
filePath: this.url,
|
||
|
|
success: (res) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存成功',
|
||
|
|
icon: 'success',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存失败',
|
||
|
|
icon: 'none',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
width: 90vw;
|
||
|
|
margin: 32rpx auto 0;
|
||
|
|
// height: 500rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 130rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
// padding: 20rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
font-family: Roboto;
|
||
|
|
font-size: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 200rpx;
|
||
|
|
color: #0B0E26;
|
||
|
|
// border: 1px solid #fff;
|
||
|
|
}
|
||
|
|
</style>
|