uni-app 生成带参太阳码并保存到相册
<template>
<view class="container">
<view class="qrcode" @click="saveImg">
<van-image :width="width" fit="contain" :lazy-load="true" :height="height" :src="qrCodeUrl"></van-image>
<view class="name" v-if="userName">{{userName}}</view>
<view class="dec">扫我！扫我！</view>
<van-divider></van-divider>
</view>
<van-action-sheet
:show="showActionSheet"
:actions="actions"
z-index="2022"
cancel-text="取消"
close-on-click-overlay
@cancel="close"
@click-overlay="close"
@select="select"
/>
</view>
</template>
<script>
import api from "../../api/qrcode.js"
export default {
data() {
return {
width:'560rpx',
height:'560rpx',
phone:'',
qrCodeUrl:'',
userName:null,
showActionSheet:false,
actions:[
{
name: '保存到相册',
color: '#ee0a24'
}
],
saveImage:''
}
},
onLoad() {
let systemInfo=uni.getSystemInfoSync()
console.log(systemInfo)
this.height=this.width=systemInfo.screenWidth*0.7
let userInfo=uni.getStorageSync("userInfo")
this.phone=userInfo.memberInfo.phone
this.userName=userInfo.memberInfo.corporateName?userInfo.memberInfo.corporateName:null
console.log(userInfo)
this.getQRCode()
// 请求获取保存到相册权限
uni.authorize({
scope: 'scope.writePhotosAlbum',
success(res) {
},
fail(err) {//这里是用户拒绝授权后的回调
}
})
},
methods: {
// 获取二维码信息
async getQRCode(){
// 获取小程序appId
const accountInfo = uni.getAccountInfoSync();
let appId=accountInfo.miniProgram.appId
let path='pages/index/index'
let scene=this.phone
// 获取分享太阳码
let {data,code,message} = await api.getQRCode({appId,scene,path})
console.log(data,code,message)
if(code===200){
this.saveImage=data
this.qrCodeUrl= 'data:image/png;base64,' + data
}
},
// 关闭actionsheet
close(){
console.log("弹窗关闭了")
this.showActionSheet=false
},
// 点击操作弹窗选项
select(e){
if(e.detail.name =="保存到相册"){
this.save()
}
console.log(e)
},
// 图片点击
saveImg(){
let that=this
//获取相册授权
uni.getSetting({
success(res) {
console.log(res)
console.log(res.authSetting['scope.writePhotosAlbum'])
// 如果已拒绝
if (!res.authSetting['scope.writePhotosAlbum']) {
that.openConfirm()
} else {//用户已经授权过了
uni.authorize({
scope: 'scope.writePhotosAlbum',
success(resa) {
console.log('获取授权',resa)
//这里是用户同意授权后的回调
// that.saveImgToLocal();
that.showActionSheet=true
},
fail(err) {//这里是用户拒绝授权后的回调
console.log(err)
// uni.openSetting({
// })
}
})
}
}
})
},
openConfirm(){
uni.showModal({
title: '请求授权',
content: '要将图片保存到您的相册，需要请求您的额权限，若不同意将无法保存到相册',
success: (res)=> {
if (res.confirm) {
uni.openSetting();// 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法保存到相册',
icon: 'none',
duration: 1000
})
}
}
});
},
// 保存图片到相册
save(){
this.showActionSheet=false
let that=this
let fileManage=uni.getFileSystemManager()
fileManage.writeFile({
filePath:wx.env.USER_DATA_PATH+'/qrcode.png',
data:that.saveImage,
encoding:"base64",
success:res=>{
uni.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH+'/qrcode.png',
success: function () {
uni.showToast({
title:'成功保存到相册'
})
console.log('save success');
},
fail:function(err){
uni.showToast({
title:res,
icon:"none"
})
}
});
}
})
}
}
}
</script>
<style scoped lang="scss">
.container{
position: relative;
text-align: center;
padding: 40rpx;
.qrcode{
position: relative;
padding: 40rpx;
border-radius: 20rpx;
background-color: #FFFFFF;
.name{
padding: 20rpx;
text-align: center;
position: relative;
font-weight: bold;
letter-spacing: 6rpx;
}
.dec{
// padding: 20rpx;
text-align: center;
color: #b5b8b8;
font-size: 30rpx;
letter-spacing: 6rpx;
}
}
}
</style>
