128 lines
2.9 KiB
Vue
128 lines
2.9 KiB
Vue
<template>
|
|
<u-popup
|
|
:show="showShare"
|
|
mode="center"
|
|
bgColor="transparent"
|
|
closeable
|
|
@close="closeShare"
|
|
>
|
|
<view class="box-share">
|
|
<view class="box-img">
|
|
<image :src="posterUrl" class="main-img" mode="widthFix" />
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/20230608112210135038.png'"
|
|
mode="widthFix"
|
|
class="btn"
|
|
@click="saveImg"
|
|
/>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
posterUrl: '',
|
|
showShare: false
|
|
}
|
|
},
|
|
methods: {
|
|
closeShare() {
|
|
this.showShare = false
|
|
},
|
|
showView(url) {
|
|
this.posterUrl = url
|
|
this.showShare = true
|
|
},
|
|
saveImg() {
|
|
const _this = this
|
|
uni.getSetting({
|
|
success: getRes => {
|
|
if (getRes.authSetting["scope.writePhotosAlbum"]) {
|
|
_this.downloadImage()
|
|
} else {
|
|
uni.authorize({
|
|
scope: "scope.writePhotosAlbum",
|
|
success: () => {
|
|
_this.downloadImage()
|
|
},
|
|
fail: () => {
|
|
uni.openSetting({
|
|
success: openRes => {
|
|
console.log(typeof openRes, openRes)
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: "请在设置中打开对应权限",
|
|
icon: "none"
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err, 2)
|
|
}
|
|
})
|
|
},
|
|
downloadImage() {
|
|
const _this = this
|
|
const randomID = () => Math.random().toString(36).substring(2)
|
|
uni.downloadFile({
|
|
url: this.posterUrl, // 网络图片的地址
|
|
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", // 指定的本地文件路径
|
|
success: downRes => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: downRes.filePath, // 临时文件地址
|
|
success: function () {
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: "success",
|
|
success() {
|
|
_this.showShare = false
|
|
}
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: "none"
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
uni.showToast({
|
|
title: err.errMsg,
|
|
icon: "error"
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box-share {
|
|
width: 600rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
.box-img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
</style> |