域名已经添加了。开发工具测试没问题,真机调试,就提示权限不足。
图片地址设置为外网地址也无法看到图片。下载保存说权限不足。
域名已经添加了。我问了支付宝的,支付宝说联系你们。
代码如下:
<template>
<view>
<uni-nav-bar dark title="生成设备二维码" backgroundColor="#18BC37" right-text="返回" @clickRight="gotoback">
</uni-nav-bar>
<uni-popup ref="popup" type="message">
<uni-popup-message type="error" :message="errormsg" :duration="2000"></uni-popup-message>
</uni-popup>
<view class='qrcode-box'>
<view class='qrcode-canvas-view'>
<image style="width:500rpx;height:500rpx" :src="qrcodeimg"></image>
</view>
</view>
<view class='qrcode-opretion'>
<button @click="savePic" class='qrcode-btn'>保存图片</button>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
id: '',
qrcodeimg: ''
}
},
onLoad(option) {
this.id = option.id;
this.qrcodeimg = "https://tl.langren8.com/qrcode.aspx?device=" + this.id;
},
onShow() {},
methods: {
gotoback() {
uni.navigateBack({
});
},
savePic() {
this.saveHttpImg(this.qrcodeimg);
},
//下载网络图片
saveHttpImg(url) {
let _t = this;
uni.downloadFile({
url: url, //仅为示例,并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
let file = res.tempFilePath;
_t.save(file)
}
}
});
},
//保存图片到本地
save(url) {
let _this = this;
_this.$util._loading("保存中...");
uni.saveImageToPhotosAlbum({
filePath: url,
success: () => {
uni.hideLoading();
_this.$util._toast("图片已保存");
},
fail: () => {
uni.hideLoading();
_this.$util._toast("保存失败");
},
complete: () => {
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.qrcode-box {
display: flex;
align-items: center;
justify-content: center;
}
.qrcode-canvas-view {
border: solid 1rpx #ccc;
width: 501rpx;
height: 501rpx;
}
.qrcode-canvas {
height: 500rpx;
width: 500rpx;
}
.qrcode-set {
float: left;
margin-left: 50rpx;
width: auto;
height: auto;
}
.qrcode-color {
position: relative;
}
.qrcode-color .flex {
width: 100%;
height: 60rpx;
}
.qrcode-color .color-tips {
float: left;
height: 60rpx;
line-height: 60rpx;
}
.qrcode-color .color-current {
float: left;
width: 115rpx;
height: 60rpx;
line-height: 60rpx;
}
.qrcode-color .color-box {
float: left;
width: 40rpx;
height: 40rpx;
margin: 10rpx 0rpx 0rpx 10rpx;
border: 2rpx solid #666;
}
.qrcode-color .wrapper.wrapper-absolute .color-picker-wrapper {
background: #fff;
position: absolute;
right: 20rpx;
top: 115rpx;
z-index: 10;
border: solid 10rpx #fff;
box-shadow: 1rpx 1rpx 12rpx 8rpx #ccc;
}
.qrcode-color .wrapper.wrapper-relative .color-picker-wrapper {
position: relative;
z-index: 999;
background: #fff;
padding: 25rpx;
display: flex;
justify-content: center;
}
.qrcode-logo {
margin-top: 50rpx;
width: 100%;
height: 60rpx;
}
.logo-switch {
float: left;
margin: 0rpx 5rpx 0rpx 0rpx;
zoom: 0.7;
}
.update-logo {
float: left;
}
.logo-img {
float: left;
margin: 10rpx 0rpx 0rpx 10rpx;
border: 2rpx solid #aaa;
border-radius: 6rpx;
line-height: 80rpx;
text-align: center;
background: #ccc;
color: #fff;
font-size: 50rpx;
width: 80rpx;
height: 80rpx;
}
.message-content {
padding: 1%;
width: 88%;
border: 1rpx solid #ebebeb;
min-height: 40rpx;
height: 7em;
margin: 20rpx auto;
}
.qrcode-btn {
width: 660rpx;
background: #381508;
color: #fff;
margin: 20rpx auto;
border-radius: 16rpx;
}
.mask {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1;
background: #000;
opacity: 0.3;
transition: all 2s;
}
</style>