uniapp小程序实现海报下载图片到手机本地
【代码】uniapp小程序实现海报下载图片到本地。
·
图片效果
<template>
<u-popup :show="show" closeable @close="handleClose" zIndex="999999">
<view class="shareModel">
<view class="title">分享店铺</view>
<!-- 分享模态框 -->
<view class="share-container" @click.stop>
<view class="merchant-info">
<view class="merchantName">{{ storeInfo.merchantName }}</view>
<view class="store-img">
<image class="img" :src="storeInfo.merchantIconStaticPath" mode="aspectFill" />
</view>
<view class="tip">(微信扫描二维码即可进入)</view>
</view>
<view class="user-info">
<view class="header-name">
<u-avatar size="60" :src="$userInfo.portraitFile && $userInfo.portraitFile.staticPath" />
<text>{{ $userInfo.userName }}</text>
</view>
<u--image :showLoading="true" :src="goodsIcon" width="100rpx" height="100rpx" />
</view>
</view>
<view class="share-bot" @click.stop>
<view class="share-btns">
<view class="btns-list" @click="onSaveImg">
<u--image :showLoading="true" :src="copyLink" width="72rpx" height="72rpx" />
<text>复制链接</text>
</view>
<view class="btns-list" @click="onSaveImg">
<u--image :showLoading="true" :src="saveIcon" width="72rpx" height="72rpx" />
<text>保存海报</text>
</view>
</view>
</view>
</view>
</u-popup>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
components: {},
mixins: [],
props: {
show: {
type: Boolean,
default: false
},
imgUrl: {
type: String,
default: ''
},
storeInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
saveIcon: require('../../static/download.png'),
copyLink: require('../../static/copyLink.png'),
goodsIcon: require('../../static/goodsIcon.png'),
settingWritePhotosAlbum: false
}
},
watch: {},
computed: {
...mapState(['$userInfo'])
},
created() {},
methods: {
handleClose() {
this.$emit("update:show", false)
this.$emit('close')
},
saveImageToPhotosAlbumFun() {
const that = this;
uni.downloadFile({
url: that.storeInfo.merchantIconStaticPath, //图片的地址
success: function(res) {
const tempFilePath = res.tempFilePath //通过res中的tempFilePath 得到需要下载的图片地址
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功'
});
},
fail: () => {
uni.showToast({
title: '保存失败',
icon: 'error'
});
},
complete: res => {
uni.hideLoading();
}
});
}
})
},
// 保存图片
async onSaveImg() {
const that = this;
// #ifdef MP-WEIXIN
uni.showLoading({
title: '二维码下载中'
});
uni.getSetting({
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveImageToPhotosAlbumFun()
} else {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
that.saveImageToPhotosAlbumFun()
},
fail: () => {
uni.showModal({
title: '提示',
content: '请先在设置页面打开“保存相册”使用权限',
confirmText: '去设置',
cancelText: '算了',
success: data => {
if (data.confirm) {
uni.openSetting();
}
uni.hideLoading();
}
});
},
complete: res => {
uni.hideLoading();
}
});
}
}
});
// #endif
}
}
}
</script>
<style lang="scss">
.shareModel {
width: 100%;
background-color: #F5F5F5;
color: #2D2D2D;
.title {
padding: 32rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.share-container {
margin: 0 80rpx 24rpx;
padding: 32rpx;
height: 100%;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0 6rpx 20rpx rgba(110, 108, 108, 0.1);
border-radius: 24rpx;
.merchant-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.merchantName {
margin-bottom: 48rpx;
font-weight: bold;
font-size: 32rpx;
}
.tip {
padding: 24rpx 0 48rpx;
color: #999999;
font-size: 24rpx;
}
.store-img {
padding: 20rpx;
background-color: #F5F5F5;
.img {
width: 380rpx;
height: 380rpx;
}
}
}
.user-info {
display: flex;
align-items: center;
justify-content: space-between;
.header-name {
display: flex;
align-items: center;
text {
margin-left: 12rpx;
}
}
}
}
.share-bot {
width: 100%;
background: #FFFFFF;
.share-btns {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
padding: 30rpx 0;
.btns-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text {
color: #2D2D2D;
font-size: 28rpx;
margin-top: 8rpx;
}
}
}
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)