qrCode.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <view class="content">
  3. <view class="step">
  4. <uni-steps active-color="#3387FF" :options="[{title: '扫码授权',url:'./qrCode'}, {title: '小程序配置',url:'./deploy'},
  5. {title: '提交版本',url:'./addVersion'},
  6. {title: '提交审核',url:'./addExamine'},{title: '版本管理',url:'./Versioning'} ]" :active="0"></uni-steps>
  7. </view>
  8. <view style="height: 130rpx;"></view>
  9. <view class="hg72"></view>
  10. <view class="home-content">
  11. <view class="home-content-title flex-center">
  12. 支付宝授权二维码
  13. </view>
  14. <view class="home-content-code flex-center">
  15. <view class="">
  16. <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="qrcodeVal" :size="size" :unit="unit"
  17. :background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
  18. :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
  19. @result="qrR"/>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="bottom-bar" style="background: none;">
  24. <button @click="upCode">
  25. 下载二维码
  26. </button>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. // #ifdef MP-WEIXIN
  32. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  33. // #endif
  34. import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue"
  35. export default {
  36. components: {
  37. tkiQrcode,
  38. },
  39. data() {
  40. return { //二维码相关参数
  41. ifShow: true,
  42. val: '二维码', // 要生成的二维码值
  43. size: 350, // 二维码大小
  44. unit: 'upx', // 单位
  45. background: '#000000', // 背景色
  46. foreground: '#ffffff', // 前景色
  47. pdground: '#ffffff', // 角标色
  48. icon: '', // 二维码图标
  49. iconsize: 40, // 二维码图标大小
  50. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  51. onval: false, // val值变化时自动重新生成二维码
  52. loadMake: true, // 组件加载完成后自动生成二维码
  53. src: '', // 二维码生成后的图片地址或base64
  54. info: {},
  55. id: "",
  56. URL: getApp().globalData.URL,
  57. qrcodeVal: "",
  58. wxqr: 1,
  59. qrcodeImg:'',
  60. }
  61. },
  62. onLoad(e) {
  63. this.http();
  64. },
  65. methods: {
  66. //传入组件的方法
  67. qrR(e) {
  68. this.qrcodeImg=e;
  69. console.log(e, "ee")
  70. },
  71. http() {
  72. this.request({
  73. url: 'Smdcshop/alipay_shouquan',
  74. data: {
  75. admin_id: uni.getStorageSync("admin_id"),
  76. },
  77. }).then(res => {
  78. console.log(res, "res")
  79. if (res.code === "200") {
  80. this.qrcodeVal = res.data
  81. setTimeout(()=>{
  82. this.$refs.qrcode._makeCode()
  83. },50)
  84. }
  85. });
  86. },
  87. upCode(e) {
  88. // #ifdef H5
  89. uni.showModal({
  90. title: '提示',
  91. content: '请长按二维码图片进行保存',
  92. showCancel: false,
  93. confirmText: '好的',
  94. });
  95. // #endif
  96. // #ifdef MP-WEIXIN
  97. this.$refs.qrcode._saveCode()
  98. return
  99. var url = this.qrcodeImg;
  100. console.log(url, "url")
  101. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  102. //成功的逻辑
  103. console.log(res, "保存成功")
  104. uni.showToast({
  105. title: '保存成功',
  106. icon: 'none',
  107. mask: true,
  108. })
  109. }).catch((err) => {
  110. console.log(err, "保存失败")
  111. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
  112. err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  113. "saveImageToPhotosAlbum:fail authorize no response") {
  114. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  115. uni.showModal({
  116. title: '提示',
  117. content: '需要您设置授权保存相册',
  118. showCancel: false,
  119. success: modalSuccess => {
  120. uni.openSetting({
  121. success(settingdata) {
  122. console.log("settingdata", settingdata)
  123. if (settingdata.authSetting[
  124. 'scope.writePhotosAlbum']) {
  125. uni.showModal({
  126. title: '提示',
  127. content: '获取权限成功,再次点击图片即可保存',
  128. showCancel: false,
  129. })
  130. } else {
  131. uni.showModal({
  132. title: '提示',
  133. content: '获取权限失败,将无法保存到相册哦~',
  134. showCancel: false,
  135. })
  136. }
  137. },
  138. fail(failData) {
  139. console.log("failData", failData)
  140. },
  141. complete(finishData) {
  142. console.log("finishData", finishData)
  143. }
  144. })
  145. }
  146. })
  147. }
  148. // 失败后的逻辑
  149. })
  150. // #endif
  151. },
  152. }
  153. }
  154. </script>
  155. <style>
  156. page {
  157. background: #F5F7FA;
  158. }
  159. .hg72 {
  160. height: 72rpx;
  161. }
  162. .home-content {
  163. background: #FFFFFF;
  164. width: 670rpx;
  165. height: 843rpx;
  166. margin: 0 auto;
  167. position: relative;
  168. }
  169. .home-content-title {
  170. width: 100%;
  171. height: 154rpx;
  172. background: linear-gradient(180deg, #449efb, #3387ff);
  173. border-radius: 16rpx 16rpx 0px 0px;
  174. font-size: 36rpx;
  175. font-family: PingFang SC, PingFang SC-Medium;
  176. font-weight: 500;
  177. color: #ffffff;
  178. }
  179. .home-content-code {
  180. width: 100%;
  181. height: 689rpx;
  182. font-size: 32rpx;
  183. font-family: PingFang SC, PingFang SC-Regular;
  184. font-weight: 400;
  185. color: #464646;
  186. text-align: center;
  187. }
  188. .home-content-code image {
  189. width: 400rpx;
  190. height: 400rpx;
  191. margin-bottom: 64rpx;
  192. }
  193. .home-content-code-title {
  194. padding: 0 30rpx;
  195. color: red;
  196. }
  197. .code-btn {
  198. font-size: 32rpx;
  199. font-family: PingFang SC, PingFang SC-Regular;
  200. font-weight: 400;
  201. color: #3c8cff;
  202. margin-bottom: 35rpx;
  203. }
  204. .bottom-bar {
  205. position: fixed;
  206. /* bottom: 50rpx; */
  207. width: 100%;
  208. z-index: 1000;
  209. padding: 30rpx 0;
  210. }
  211. .bottom-bar button {
  212. text-align: center;
  213. width: 690rpx;
  214. height: 90rpx;
  215. background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
  216. box-shadow: 0px 2rpx 12rpx #3387FF;
  217. opacity: 1;
  218. border-radius: 10rpx;
  219. color: #fff;
  220. font-size: 32rpx;
  221. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  222. font-weight: 500;
  223. color: #ffffff;
  224. }
  225. </style>