qrCode.vue 5.8 KB

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