JING
8 months ago
parent
2110a7edcc
commit
0df518c15c
@ -0,0 +1,203 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<view class="imgList"> |
||||
<!--如果是多个就用imgBox--> |
||||
<!-- <view class="imgBox"> |
||||
<image src="/static/img/index/pic.png" mode="aspectFill"></image> |
||||
</view> |
||||
|
||||
<view class="imgBox"> |
||||
<image src="/static/img/index/pic.png" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="imgBox"> |
||||
<image src="/static/img/index/pic.png" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="imgBox"> |
||||
<image src="/static/img/index/pic.png" mode="aspectFill"></image> |
||||
</view> --> |
||||
<!--如果是一个就用picBox--> |
||||
<!-- <view class="picBox"> |
||||
<image src="/static/img/index/pic.png" mode="aspectFill"></image> |
||||
</view> --> |
||||
<view class="picBox"> |
||||
<image :src="xurl" mode="aspectFill"></image> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="btnList"> |
||||
<view class="btnBox a1"> |
||||
<view class="btnImg"> |
||||
<image src="/static/img/user/delete.png" mode="widthFix"></image> |
||||
</view> |
||||
<view class="btnTxt" @click="deletePic">删除照片</view> |
||||
</view> |
||||
<view class="btnBox a2"> |
||||
<view class="btnImg"> |
||||
<image src="/static/img/user/download.png" mode="widthFix"></image> |
||||
</view> |
||||
<view class="btnTxt" @click="savePic">保存到相册</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
old_url:'', |
||||
xurl:'', |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
//数据 |
||||
var _this =this; |
||||
var url = option.url; |
||||
if(_this.$com.isNull(url)) |
||||
{ |
||||
uni.navigateBack({ |
||||
delta:1, |
||||
}) |
||||
} |
||||
_this.old_url = url; |
||||
_this.xurl = decodeURIComponent(url); |
||||
}, |
||||
onShow() { |
||||
var _this = this; |
||||
_this.checkAuth(); |
||||
}, |
||||
methods: { |
||||
//判断 |
||||
checkAuth() { |
||||
var _this = this; |
||||
console.log('已授权---'); |
||||
uni.authorize({ |
||||
scope: 'scope.writePhotosAlbum', |
||||
success(res) { |
||||
console.log('已授权', res); |
||||
|
||||
}, |
||||
fail(err) { |
||||
|
||||
uni.showModal({ |
||||
title: '授权失败', |
||||
content: '请在设置界面打开存储相关权限', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
uni.openSetting() |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
}) |
||||
}, |
||||
deletePic() |
||||
{ |
||||
var _this = this; |
||||
_this.$com.showError('暂不支持删除'); |
||||
}, |
||||
//保存道相册 |
||||
savePic(){ |
||||
var _this =this; |
||||
var url = _this.xurl; |
||||
uni.getSetting({ |
||||
success(res) { |
||||
console.log(res.authSetting); |
||||
if(!res.authSetting['scope.writePhotosAlbum']) |
||||
{ |
||||
uni.openSetting(); |
||||
} |
||||
else |
||||
{ |
||||
// 下载图片 |
||||
uni.downloadFile({ |
||||
url: url, |
||||
success: downloadResult => { |
||||
if (downloadResult.statusCode === 200) { |
||||
// 下载成功，保存图片到相册 |
||||
uni.saveImageToPhotosAlbum({ |
||||
filePath: downloadResult.tempFilePath, |
||||
success: () => { |
||||
uni.showToast({ |
||||
title: '保存成功' |
||||
}); |
||||
}, |
||||
fail: () => { |
||||
uni.showToast({ |
||||
title: '保存失败', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
fail: () => { |
||||
uni.showToast({ |
||||
title: '下载失败', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.container{padding: 20rpx 26rpx;} |
||||
.imgList{width: 100%; height: auto; |
||||
display: flex; flex-wrap: wrap; |
||||
justify-content: space-around; /* 使子元素在容器中均匀分布 */ |
||||
align-items: center; /* 如果需要垂直居中子元素 */ |
||||
} |
||||
.imgBox{width: 340rpx; height: 440rpx; margin-bottom: 20rpx; } |
||||
.imgBox image{width: 340rpx; height: 440rpx; border-radius: 24rpx;} |
||||
|
||||
|
||||
.picBox{width: 660rpx; height: 770rpx; margin-top: 20rpx;margin-bottom: 20rpx; } |
||||
.picBox image{width: 660rpx; height: 770rpx; border-radius: 24rpx;} |
||||
|
||||
.btnList{ |
||||
width: 100%; height: 88rpx; |
||||
display: flex; flex-wrap: wrap; |
||||
justify-content: space-around; /* 使子元素在容器中均匀分布 */ |
||||
align-items: center; /* 如果需要垂直居中子元素 */ |
||||
} |
||||
.btnBox{ |
||||
width: 340rpx; height: 88rpx; |
||||
border-radius: 44rpx; |
||||
display: flex; |
||||
} |
||||
.btnBox .btnImg{ |
||||
width:126rpx ; |
||||
height: 88rpx; |
||||
} |
||||
.btnBox .btnImg image{ |
||||
width:30rpx ; |
||||
height: 30rpx; |
||||
margin-top: 29rpx; |
||||
margin-left: 80rpx; |
||||
} |
||||
.btnBox .btnTxt{ |
||||
width:214rpx ; |
||||
height: 88rpx; |
||||
font-weight: 700; |
||||
font-size: 30rpx; |
||||
line-height: 88rpx; |
||||
} |
||||
.a1{ |
||||
background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%); |
||||
color:#7A74F0; |
||||
} |
||||
.a2{ |
||||
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%); |
||||
color:#FFFFFF; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue