You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.3 KiB
173 lines
4.3 KiB
<template>
|
|
<u-popup v-model="show" mode="center" :maskCloseAble="false" :closeable="true" :maskCustomStyle="{ background: 'rgba(0, 0, 0, 0.5)' }"
|
|
border-radius="18" :z-index="12" @close="onClose()">
|
|
<view class="pop-poster pop-example__container">
|
|
<view class="image__container" @click="handlePreviewImage()">
|
|
<image v-if="imageUrl" show-menu-by-longpress class="image" mode="scaleToFill" :src="imageUrl"></image>
|
|
</view>
|
|
<view class="save-btn__container">
|
|
<view class="save-btn" @click="handleDownload()">保存海报图</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'goods-poster-popup',
|
|
emits: ['update:modelValue'],
|
|
props: {
|
|
// 控制组件显示隐藏
|
|
modelValue: {
|
|
Type: Boolean,
|
|
default: false
|
|
},
|
|
// 获取海报图的api方法
|
|
apiCall: {
|
|
type: Function,
|
|
default: () => {}
|
|
},
|
|
// 获取海报图的api参数
|
|
apiParam: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听海报图弹层显示隐藏
|
|
modelValue: {
|
|
immediate: true,
|
|
handler(val) {
|
|
val ? this.onShowPopup() : this.show = false
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 是否显示弹窗
|
|
show: false,
|
|
// 图片url地址
|
|
imageUrl: ''
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 显示海报弹窗
|
|
onShowPopup() {
|
|
const app = this
|
|
app.apiCall({ ...app.apiParam, channel: app.platform })
|
|
.then(result => {
|
|
app.imageUrl = result.data.imageUrl
|
|
app.show = true
|
|
})
|
|
.catch(err => app.onClose())
|
|
},
|
|
|
|
// 关闭弹窗
|
|
onClose() {
|
|
this.$emit('update:modelValue', false)
|
|
},
|
|
|
|
// 预览图片
|
|
handlePreviewImage() {
|
|
uni.previewImage({ urls: [this.imageUrl] })
|
|
},
|
|
|
|
// 保存海报图片
|
|
handleDownload() {
|
|
const app = this
|
|
uni.showLoading({ title: '加载中' })
|
|
// 下载海报图片
|
|
uni.downloadFile({
|
|
url: app.imageUrl,
|
|
success(res) {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
// 图片保存到相册
|
|
app.onSaveImage(res.tempFilePath)
|
|
},
|
|
fail(res) {
|
|
console.log('fail', res)
|
|
uni.hideLoading()
|
|
app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
|
|
}
|
|
})
|
|
},
|
|
|
|
// 图片保存到相册
|
|
onSaveImage(tempFilePath) {
|
|
const app = this
|
|
// #ifndef H5
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success(data) {
|
|
app.$success('保存成功')
|
|
// 关闭弹窗
|
|
app.onClose()
|
|
},
|
|
fail(err) {
|
|
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
const names = tempFilePath.split('/')
|
|
const fileName = names[names.length - 1]
|
|
app.fileDownLoadForH5({ name: fileName, blob: tempFilePath })
|
|
app.onClose()
|
|
// #endif
|
|
},
|
|
|
|
// 兼容H5端下载图片
|
|
// #ifdef H5
|
|
fileDownLoadForH5({ name, blob }) {
|
|
const linkElement = document.createElement('a')
|
|
linkElement.setAttribute('href', blob)
|
|
linkElement.setAttribute('downLoad', name)
|
|
linkElement.click()
|
|
},
|
|
// #endif
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pop-poster {
|
|
width: 560rpx;
|
|
position: relative;
|
|
background: #fff;
|
|
padding: 76rpx 76rpx 40rpx 76rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
// 图片容器
|
|
.image__container {
|
|
.image {
|
|
display: block;
|
|
width: 420rpx;
|
|
height: 636rpx;
|
|
box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
// 保存按钮
|
|
.save-btn__container {
|
|
margin-top: 30rpx;
|
|
|
|
.save-btn {
|
|
color: rgb(255, 255, 255);
|
|
color: $main-text;
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
border-radius: 38rpx;
|
|
height: 76rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |