<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>