Commit bf61c5f4b1a14075edbf4efa5fa4f015137e82be
1 parent
4ee9880a46
Exists in
master
bug 修复
Showing
1 changed file
with
1 additions
and
1 deletions
Show diff stats
src/components/uni-popup/uni-popup-post.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="uni-popup-post"> | 2 | <view class="uni-popup-post"> |
| 3 | <image | 3 | <image |
| 4 | class="uni_post_img" | 4 | class="uni_post_img" |
| 5 | :src="postUrl" | 5 | :src="postUrl" |
| 6 | /> | 6 | /> |
| 7 | <view | 7 | <view |
| 8 | @tap="saveAndClose" | 8 | @tap="saveAndClose" |
| 9 | class="uni_post_button_box" | 9 | class="uni_post_button_box" |
| 10 | > | 10 | > |
| 11 | 保存图片 | 11 | 保存图片 |
| 12 | </view> | 12 | </view> |
| 13 | </view> | 13 | </view> |
| 14 | </template> | 14 | </template> |
| 15 | 15 | ||
| 16 | <script> | 16 | <script> |
| 17 | export default { | 17 | export default { |
| 18 | name: 'UniPopupPost', | 18 | name: 'UniPopupPost', |
| 19 | props: { | 19 | props: { |
| 20 | postUrl: { | 20 | postUrl: { |
| 21 | type: String, | 21 | type: String, |
| 22 | default: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', | 22 | default: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', |
| 23 | }, | 23 | }, |
| 24 | }, | 24 | }, |
| 25 | inject: ['popup'], | 25 | inject: ['popup'], |
| 26 | data() { | 26 | data() { |
| 27 | return {} | 27 | return {} |
| 28 | }, | 28 | }, |
| 29 | created() { | 29 | created() { |
| 30 | console.log('dada', this) | 30 | console.log('dada', this) |
| 31 | }, | 31 | }, |
| 32 | methods: { | 32 | methods: { |
| 33 | // 保存图片并关闭窗口 | 33 | // 保存图片并关闭窗口 |
| 34 | saveAndClose() { | 34 | saveAndClose() { |
| 35 | // 获取用户保存相册权限 | 35 | // 获取用户保存相册权限 |
| 36 | const scope = 'scope.writePhotosAlbum' | 36 | const scope = 'scope.writePhotosAlbum' |
| 37 | const that = this | 37 | const that = this |
| 38 | uni.getSetting({ | 38 | uni.getSetting({ |
| 39 | success(res) { | 39 | success(res) { |
| 40 | console.log('获取用户保存相册权限', res) | 40 | console.log('获取用户保存相册权限', res) |
| 41 | if (!res.authSetting[scope]) { | 41 | if (!res.authSetting[scope]) { |
| 42 | uni.authorize({ | 42 | uni.authorize({ |
| 43 | scope, | 43 | scope, |
| 44 | success() { | 44 | success() { |
| 45 | console.log('获取用户保存相册权限---->', '授权成功') | 45 | console.log('获取用户保存相册权限---->', '授权成功') |
| 46 | // 保存到相册 | 46 | // 保存到相册 |
| 47 | uni.showLoading({ | 47 | uni.showLoading({ |
| 48 | title: '保存中', | 48 | title: '保存中', |
| 49 | }) | 49 | }) |
| 50 | that.saveImage() | 50 | that.saveImage() |
| 51 | }, | 51 | }, |
| 52 | fail() { | 52 | fail() { |
| 53 | console.log('获取用户保存相册权限---->', '授权失败') | 53 | console.log('获取用户保存相册权限---->', '授权失败') |
| 54 | that.secondGetPhoteAuthor() | 54 | that.secondGetPhoteAuthor() |
| 55 | }, | 55 | }, |
| 56 | }) | 56 | }) |
| 57 | } else { | 57 | } else { |
| 58 | console.log('拥有授权权限') | 58 | console.log('拥有授权权限') |
| 59 | // 保存到相册 | 59 | // 保存到相册 |
| 60 | uni.showLoading({ | 60 | uni.showLoading({ |
| 61 | title: '保存中', | 61 | title: '保存中', |
| 62 | }) | 62 | }) |
| 63 | that.saveImage() | 63 | that.saveImage() |
| 64 | } | 64 | } |
| 65 | 65 | ||
| 66 | that.popup.close() | 66 | that.popup.close() |
| 67 | }, | 67 | }, |
| 68 | fail(res) { | 68 | fail(res) { |
| 69 | console.log('授权失败------>', res) | 69 | console.log('授权失败------>', res) |
| 70 | uni.showToast({ | 70 | uni.showToast({ |
| 71 | title: '保存失败', | 71 | title: '保存失败', |
| 72 | icon: 'none', | 72 | icon: 'none', |
| 73 | duration: 2000, | 73 | duration: 2000, |
| 74 | }) | 74 | }) |
| 75 | }, | 75 | }, |
| 76 | }) | 76 | }) |
| 77 | }, | 77 | }, |
| 78 | // 保存到相册 | 78 | // 保存到相册 |
| 79 | saveImage() { | 79 | saveImage() { |
| 80 | const that = this | 80 | const that = this |
| 81 | uni.getImageInfo({ | 81 | uni.getImageInfo({ |
| 82 | src: that.postUrl, | 82 | src: that.postUrl, |
| 83 | success(res) { | 83 | success(res) { |
| 84 | console.log('图片读取是否可行', res) | 84 | console.log('图片读取是否可行', res) |
| 85 | uni.saveImageToPhotosAlbum({ | 85 | uni.saveImageToPhotosAlbum({ |
| 86 | filePath: res.path, | 86 | filePath: res.path, |
| 87 | success() { | 87 | success() { |
| 88 | uni.hideLoading() | ||
| 88 | uni.showToast({ | 89 | uni.showToast({ |
| 89 | title: '已保存到相册', | 90 | title: '已保存到相册', |
| 90 | icon: 'none', | 91 | icon: 'none', |
| 91 | duration: 2000, | 92 | duration: 2000, |
| 92 | }) | 93 | }) |
| 93 | uni.hideLoading() | ||
| 94 | }, | 94 | }, |
| 95 | fail(err) { | 95 | fail(err) { |
| 96 | console.log('用户拒绝', err) | 96 | console.log('用户拒绝', err) |
| 97 | if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { | 97 | if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { |
| 98 | console.log('当用户拒绝，再次发起授权') | 98 | console.log('当用户拒绝，再次发起授权') |
| 99 | that.secondGetPhoteAuthor() | 99 | that.secondGetPhoteAuthor() |
| 100 | } else if (err.errMsg === 'saveImageToPhotosAlbum:fail cancel') { | 100 | } else if (err.errMsg === 'saveImageToPhotosAlbum:fail cancel') { |
| 101 | uni.showToast({ | 101 | uni.showToast({ |
| 102 | title: '已取消保存', | 102 | title: '已取消保存', |
| 103 | icon: 'none', | 103 | icon: 'none', |
| 104 | duration: 2000, | 104 | duration: 2000, |
| 105 | }) | 105 | }) |
| 106 | uni.hideLoading() | 106 | uni.hideLoading() |
| 107 | } else { | 107 | } else { |
| 108 | uni.showToast({ | 108 | uni.showToast({ |
| 109 | title: '请截屏保存分享', | 109 | title: '请截屏保存分享', |
| 110 | icon: 'none', | 110 | icon: 'none', |
| 111 | duration: 2000, | 111 | duration: 2000, |
| 112 | }) | 112 | }) |
| 113 | uni.hideLoading() | 113 | uni.hideLoading() |
| 114 | } | 114 | } |
| 115 | }, | 115 | }, |
| 116 | }) | 116 | }) |
| 117 | }, | 117 | }, |
| 118 | fail(res) { | 118 | fail(res) { |
| 119 | console.log('授权失败----->', res) | 119 | console.log('授权失败----->', res) |
| 120 | uni.hideLoading() | 120 | uni.hideLoading() |
| 121 | uni.showToast({ | 121 | uni.showToast({ |
| 122 | title: '保存失败', | 122 | title: '保存失败', |
| 123 | icon: 'none', | 123 | icon: 'none', |
| 124 | duration: 2000, | 124 | duration: 2000, |
| 125 | }) | 125 | }) |
| 126 | }, | 126 | }, |
| 127 | }) | 127 | }) |
| 128 | }, | 128 | }, |
| 129 | // 二次请求授权 | 129 | // 二次请求授权 |
| 130 | secondGetPhoteAuthor() { | 130 | secondGetPhoteAuthor() { |
| 131 | const that = this | 131 | const that = this |
| 132 | uni.showModal({ | 132 | uni.showModal({ |
| 133 | title: '保存海报', | 133 | title: '保存海报', |
| 134 | content: '需要您提供保存相册权限', | 134 | content: '需要您提供保存相册权限', |
| 135 | success: (res) => { | 135 | success: (res) => { |
| 136 | if (res.confirm) { | 136 | if (res.confirm) { |
| 137 | uni.openSetting({ | 137 | uni.openSetting({ |
| 138 | success(settingdata) { | 138 | success(settingdata) { |
| 139 | console.log('settingdata 二次弹窗获取', settingdata) | 139 | console.log('settingdata 二次弹窗获取', settingdata) |
| 140 | if (settingdata.authSetting['scope.writePhotosAlbum']) { | 140 | if (settingdata.authSetting['scope.writePhotosAlbum']) { |
| 141 | console.log('二次弹窗获取---->', '获取 相册 权限成功，给出再次点击图片保存到相册的提示。') | 141 | console.log('二次弹窗获取---->', '获取 相册 权限成功，给出再次点击图片保存到相册的提示。') |
| 142 | uni.showLoading({ | 142 | uni.showLoading({ |
| 143 | title: '保存中', | 143 | title: '保存中', |
| 144 | }) | 144 | }) |
| 145 | that.saveImage() | 145 | that.saveImage() |
| 146 | } else { | 146 | } else { |
| 147 | uni.showToast({ | 147 | uni.showToast({ |
| 148 | title: '保存失败', | 148 | title: '保存失败', |
| 149 | icon: 'none', | 149 | icon: 'none', |
| 150 | duration: 2000, | 150 | duration: 2000, |
| 151 | }) | 151 | }) |
| 152 | console.log('二次弹窗获取', '获取 相册 权限失败，给出不给权限就无法正常使用的提示') | 152 | console.log('二次弹窗获取', '获取 相册 权限失败，给出不给权限就无法正常使用的提示') |
| 153 | } | 153 | } |
| 154 | }, | 154 | }, |
| 155 | }) | 155 | }) |
| 156 | } else { | 156 | } else { |
| 157 | uni.showToast({ | 157 | uni.showToast({ |
| 158 | title: '保存失败', | 158 | title: '保存失败', |
| 159 | icon: 'none', | 159 | icon: 'none', |
| 160 | duration: 2000, | 160 | duration: 2000, |
| 161 | }) | 161 | }) |
| 162 | } | 162 | } |
| 163 | }, | 163 | }, |
| 164 | fail(err) { | 164 | fail(err) { |
| 165 | uni.showToast({ | 165 | uni.showToast({ |
| 166 | title: '保存失败', | 166 | title: '保存失败', |
| 167 | icon: 'none', | 167 | icon: 'none', |
| 168 | duration: 2000, | 168 | duration: 2000, |
| 169 | }) | 169 | }) |
| 170 | console.log('再次失败', err) | 170 | console.log('再次失败', err) |
| 171 | }, | 171 | }, |
| 172 | }) | 172 | }) |
| 173 | }, | 173 | }, |
| 174 | }, | 174 | }, |
| 175 | } | 175 | } |
| 176 | </script> | 176 | </script> |
| 177 | <style lang="scss" scoped> | 177 | <style lang="scss" scoped> |
| 178 | .uni-popup-post { | 178 | .uni-popup-post { |
| 179 | border-radius: 8px 8px 0px 0px; | 179 | border-radius: 8px 8px 0px 0px; |
| 180 | display: flex; | 180 | display: flex; |
| 181 | flex-direction: column; | 181 | flex-direction: column; |
| 182 | justify-content: space-between; | 182 | justify-content: space-between; |
| 183 | align-items: center; | 183 | align-items: center; |
| 184 | } | 184 | } |
| 185 | 185 | ||
| 186 | .uni_post_img { | 186 | .uni_post_img { |
| 187 | width: 690rpx; | 187 | width: 690rpx; |
| 188 | height: 466.667px; | 188 | height: 466.667px; |
| 189 | margin-top: -180rpx; | 189 | margin-top: -180rpx; |
| 190 | } | 190 | } |
| 191 | 191 | ||
| 192 | .uni_post_button_box { | 192 | .uni_post_button_box { |
| 193 | height: 112rpx; | 193 | height: 112rpx; |
| 194 | line-height: 112rpx; | 194 | line-height: 112rpx; |
| 195 | background-color: #ff6b4a; | 195 | background-color: #ff6b4a; |
| 196 | border-radius: 4px; | 196 | border-radius: 4px; |
| 197 | width: 350px; | 197 | width: 350px; |
| 198 | color: #fff; | 198 | color: #fff; |
| 199 | text-align: center; | 199 | text-align: center; |
| 200 | margin-top: 44rpx; | 200 | margin-top: 44rpx; |
| 201 | font-family: PingFangSC-Medium; | 201 | font-family: PingFangSC-Medium; |
| 202 | font-size: 14px; | 202 | font-size: 14px; |
| 203 | color: #ffffff; | 203 | color: #ffffff; |
| 204 | letter-spacing: -0.26px; | 204 | letter-spacing: -0.26px; |
| 205 | text-align: center; | 205 | text-align: center; |
| 206 | } | 206 | } |
| 207 | </style> | 207 | </style> |