results.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="container">
  3. <block v-if="type==2">
  4. <image style="width: 80%;" :src="qrcode" mode="widthFix"></image>
  5. <view class="hg120">
  6. </view>
  7. <view class="btm-btn-block">
  8. <view class="content flex-row-between">
  9. <block>
  10. <view class="btn btn22" @click="dofile">下载二维码</view>
  11. <view class="btn btn11" @click="setup" data-index="index">修改</view>
  12. </block>
  13. </view>
  14. </view>
  15. </block>
  16. <block v-else>
  17. <view class="header_success">
  18. <image class="header_success_icon" src="../../static/images/success.png" mode=""></image>
  19. <view class="header_success-tip">
  20. 智能替换成功
  21. </view>
  22. </view>
  23. <view class="header_success_bg">
  24. <view class="flex-center header_success_title">
  25. <image src="../../static/images/line.png" mode=""></image>
  26. 替换图片
  27. <image src="../../static/images/line.png" mode=""></image>
  28. </view>
  29. <image style="width: 60%;" :src="qrcode" mode="widthFix"></image>
  30. <view class="flex-center" @click="dofile">
  31. <view class="btm-btn">
  32. <image class="dofile-icon" src="../../static/images/file.png" mode=""></image>下载图片
  33. </view>
  34. </view>
  35. </view>
  36. </block>
  37. </view>
  38. </template>
  39. <script>
  40. // #ifdef MP-WEIXIN
  41. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  42. // #endif
  43. export default {
  44. data() {
  45. return {
  46. qrcode: "",
  47. type: 1,
  48. info: "",
  49. card_num:"",
  50. URL: getApp().globalData.URL,
  51. }
  52. },
  53. onLoad(e) {
  54. console.log(e)
  55. this.type = e.type;
  56. if (e.type == 2) {
  57. this.card_num=e.card_num;
  58. this.edit_detail();
  59. }else{
  60. this.qrcode = uni.getStorageSync("qrcode");
  61. }
  62. },
  63. onShareAppMessage(e) {
  64. },
  65. methods: {
  66. edit_detail(e) {
  67. this.request({
  68. url: "picture/edit_detail",
  69. data: {
  70. card_num: this.card_num,
  71. },
  72. }).then(res => {
  73. console.log(res, "res")
  74. if (res.code === '200') {
  75. this.qrcode = res.data.re_url;
  76. }
  77. }).catch((res) => {
  78. });
  79. },
  80. setup(e) {
  81. uni.redirectTo({
  82. url: 'replace?card_num='+this.card_num,
  83. })
  84. },
  85. dofile(e) {
  86. // #ifdef H5
  87. uni.showModal({
  88. title: '提示',
  89. content: '请长按二维码图片进行保存',
  90. showCancel: false,
  91. confirmText: '好的',
  92. });
  93. // #endif
  94. // #ifdef MP-WEIXIN
  95. var url = this.qrcode;
  96. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  97. //成功的逻辑
  98. console.log(res, "保存成功")
  99. wx.showToast({
  100. title: '保存成功',
  101. icon: 'none',
  102. mask: true,
  103. })
  104. }).catch((err) => {
  105. console.log(err, "保存失败")
  106. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg ===
  107. "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
  108. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  109. uni.showModal({
  110. title: '提示',
  111. content: '需要您授权保存相册',
  112. showCancel: false,
  113. success: modalSuccess => {
  114. uni.openSetting({
  115. success(settingdata) {
  116. console.log("settingdata", settingdata)
  117. if (settingdata.authSetting['scope.writePhotosAlbum']) {
  118. uni.showModal({
  119. title: '提示',
  120. content: '获取权限成功,再次点击图片即可保存',
  121. showCancel: false,
  122. })
  123. } else {
  124. uni.showModal({
  125. title: '提示',
  126. content: '获取权限失败,将无法保存到相册哦~',
  127. showCancel: false,
  128. })
  129. }
  130. },
  131. fail(failData) {
  132. console.log("failData", failData)
  133. },
  134. complete(finishData) {
  135. console.log("finishData", finishData)
  136. }
  137. })
  138. }
  139. })
  140. }
  141. // 失败后的逻辑
  142. })
  143. // #endif
  144. },
  145. }
  146. }
  147. </script>
  148. <style>
  149. .hg120{
  150. height: 120rpx;
  151. }
  152. .container {
  153. text-align: center;
  154. }
  155. .header_success {
  156. text-align: center;
  157. font-size: 30rpx;
  158. font-family: PingFang SC, PingFang SC-Medium;
  159. font-weight: 500;
  160. color: #181818;
  161. }
  162. .header_success_icon {
  163. width: 144rpx;
  164. height: 144rpx;
  165. }
  166. .header_success-tip {
  167. padding: 20rpx 0 32rpx 0;
  168. }
  169. .header_success_bg {
  170. width: 670rpx;
  171. background: linear-gradient(180deg, #f4f8ff, #ffffff);
  172. border-radius: 16rpx 16rpx 0px 0px;
  173. margin: 0 auto;
  174. text-align: center;
  175. }
  176. .header_success_title {
  177. font-size: 30rpx;
  178. font-family: PingFang SC, PingFang SC-Medium;
  179. font-weight: 500;
  180. color: #3488ff;
  181. padding: 40rpx 0;
  182. }
  183. .header_success_title image {
  184. width: 17rpx;
  185. height: 24rpx;
  186. margin: 0 15rpx;
  187. }
  188. .btm-btn {
  189. width: 670rpx;
  190. height: 98rpx;
  191. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  192. border-radius: 8rpx;
  193. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  194. font-size: 32rpx;
  195. font-weight: 500;
  196. text-align: center;
  197. color: #fff;
  198. line-height: 98rpx;
  199. margin: 0 auto;
  200. margin-top: 100rpx;
  201. }
  202. .dofile-icon {
  203. width: 31rpx;
  204. height: 31rpx;
  205. }
  206. .btm-btn-block{
  207. position: fixed;
  208. bottom: 30rpx;
  209. width: 100%;
  210. }
  211. .btm-btn-block .content {
  212. padding: 0rpx 40rpx;
  213. }
  214. .btm-btn-block .content .btn {
  215. flex: none;
  216. width: 325rpx;
  217. height: 98rpx;
  218. border-radius: 8rpx;
  219. text-align: center;
  220. line-height: 98rpx;
  221. font-size: 32rpx;
  222. font-weight: 500;
  223. }
  224. .btm-btn-block .content .btn11 {
  225. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  226. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  227. color: #fff;
  228. }
  229. .btm-btn-block .content .btn22 {
  230. box-shadow: 0px 0px 8px 0px rgba(207, 219, 234, 0.4);
  231. color: #3387FF;
  232. background: #FFFFFF;
  233. }
  234. </style>