qrCode.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <view class="content">
  3. <view class="step">
  4. <uni-steps active-color="#07c160" :options="options" :active="1"></uni-steps>
  5. </view>
  6. <view style="height: 130rpx;"></view>
  7. <!-- <view class="hg72"></view> -->
  8. <block v-if="obj.state==1">
  9. <view v-if="is_auth">
  10. <view class="home-content">
  11. <view class="home-content-title flex-center">
  12. 微信授权二维码
  13. </view>
  14. <view class="home-content-code ">
  15. <view class="home-content-tip">
  16. *新创建的小程序请先保存图片微信长按识别后,再让商家扫码进行授权。或者复制链接在微信打开,再让商家扫码进行授权
  17. </view>
  18. <view class="flex-center">
  19. <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="qrcodeVal" :size="size" :unit="unit"
  20. :background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
  21. :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
  22. @result="qrR" />
  23. </view>
  24. <view @click="Refresh" class="flex-center" style="font-size: 26rpx;">
  25. <uni-icons color="#999" type="refreshempty" size="25"></uni-icons>
  26. 如授权完成,点击此处刷新页面
  27. </view>
  28. <!-- <view class="">
  29. {{qrcodeVal}}
  30. </view> -->
  31. </view>
  32. </view>
  33. <view class="bottom-bar" style="background: none;">
  34. <button @click="upCode">
  35. 下载二维码
  36. </button>
  37. <button @click="upCopy" style="margin-top: 25rpx;">
  38. 复制链接
  39. </button>
  40. </view>
  41. </view>
  42. <view v-else class="bottom-bar">
  43. <view class="auth-text flex-center">
  44. <uni-icons color="#999" type="checkbox-filled" size="30"></uni-icons> 已授权
  45. </view>
  46. <button @click="rest" style="width: 500rpx;">
  47. 重新授权
  48. </button>
  49. </view>
  50. </block>
  51. </view>
  52. </template>
  53. <script>
  54. import optionsData from './data.js'
  55. // #ifdef MP-WEIXIN
  56. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  57. // #endif
  58. import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue"
  59. export default {
  60. components: {
  61. tkiQrcode,
  62. },
  63. data() {
  64. return { //二维码相关参数
  65. ifShow: true,
  66. val: '二维码', // 要生成的二维码值
  67. size: 350, // 二维码大小
  68. unit: 'upx', // 单位
  69. background: '#000000', // 背景色
  70. foreground: '#ffffff', // 前景色
  71. pdground: '#ffffff', // 角标色
  72. icon: '', // 二维码图标
  73. iconsize: 40, // 二维码图标大小
  74. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  75. onval: false, // val值变化时自动重新生成二维码
  76. loadMake: true, // 组件加载完成后自动生成二维码
  77. src: '', // 二维码生成后的图片地址或base64
  78. info: {},
  79. id: "",
  80. URL: getApp().globalData.URL,
  81. qrcodeVal: "",
  82. wxqr: 1,
  83. qrcodeImg:'',
  84. obj:null,
  85. is_auth:false,
  86. options:optionsData.options
  87. }
  88. },
  89. onLoad(e) {
  90. this.wechat_index();
  91. },
  92. methods: {
  93. upCopy(){
  94. uni.setClipboardData({
  95. data: this.qrcodeVal,
  96. success: function (r) {
  97. }
  98. });
  99. },
  100. Refresh(){
  101. this.wechat_index();
  102. },
  103. wechat_index() {
  104. this.request({
  105. url: 'setting/wechat_index',
  106. data: {
  107. admin_id: uni.getStorageSync("admin_id"),
  108. },
  109. }).then(res => {
  110. console.log(res, "res")
  111. if (res.code === "200") {
  112. this.obj = res.data;
  113. this.is_auth= false;
  114. // 未授权
  115. if(res.data.state==1 && res.data.status==0){
  116. this.is_auth= true;
  117. this.https();
  118. }
  119. }
  120. });
  121. },
  122. rest(){
  123. this.is_auth= true;
  124. this.https();
  125. },
  126. qrR(e) {
  127. this.qrcodeImg=e;
  128. console.log(e, "ee")
  129. },
  130. https() {
  131. this.request({
  132. url: 'WechatAuthorization/index',
  133. data: {
  134. admin_id: uni.getStorageSync("admin_id"),
  135. },
  136. }).then(res => {
  137. console.log(res, "res")
  138. if (res.code === "200") {
  139. this.qrcodeVal = res.data;
  140. setTimeout(()=>{
  141. this.$refs.qrcode._makeCode()
  142. },50)
  143. }
  144. });
  145. },
  146. upCode(e) {
  147. // #ifdef H5
  148. uni.showModal({
  149. title: '提示',
  150. content: '请长按二维码图片进行保存',
  151. showCancel: false,
  152. confirmText: '好的',
  153. });
  154. // #endif
  155. // #ifdef MP-WEIXIN
  156. this.$refs.qrcode._saveCode()
  157. return
  158. var url = this.qrcodeImg;
  159. console.log(url, "url")
  160. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  161. //成功的逻辑
  162. console.log(res, "保存成功")
  163. uni.showToast({
  164. title: '保存成功',
  165. icon: 'none',
  166. mask: true,
  167. })
  168. }).catch((err) => {
  169. console.log(err, "保存失败")
  170. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
  171. err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  172. "saveImageToPhotosAlbum:fail authorize no response") {
  173. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  174. uni.showModal({
  175. title: '提示',
  176. content: '需要您设置授权保存相册',
  177. showCancel: false,
  178. success: modalSuccess => {
  179. uni.openSetting({
  180. success(settingdata) {
  181. console.log("settingdata", settingdata)
  182. if (settingdata.authSetting[
  183. 'scope.writePhotosAlbum']) {
  184. uni.showModal({
  185. title: '提示',
  186. content: '获取权限成功,再次点击图片即可保存',
  187. showCancel: false,
  188. })
  189. } else {
  190. uni.showModal({
  191. title: '提示',
  192. content: '获取权限失败,将无法保存到相册哦~',
  193. showCancel: false,
  194. })
  195. }
  196. },
  197. fail(failData) {
  198. console.log("failData", failData)
  199. },
  200. complete(finishData) {
  201. console.log("finishData", finishData)
  202. }
  203. })
  204. }
  205. })
  206. }
  207. // 失败后的逻辑
  208. })
  209. // #endif
  210. },
  211. }
  212. }
  213. </script>
  214. <style>
  215. page {
  216. background: #F5F7FA;
  217. }
  218. .home-content-tip{
  219. font-size: 28rpx;
  220. color: red;
  221. padding: 10rpx 10rpx 0 10rpx;
  222. }
  223. .hg72 {
  224. height: 72rpx;
  225. }
  226. .home-content {
  227. background: #FFFFFF;
  228. width: 670rpx;
  229. height: 843rpx;
  230. margin: 0 auto;
  231. position: relative;
  232. }
  233. .home-content-title {
  234. width: 100%;
  235. height: 154rpx;
  236. background: linear-gradient(180deg, #07c160, #07c160);
  237. border-radius: 16rpx 16rpx 0px 0px;
  238. font-size: 36rpx;
  239. font-family: PingFang SC, PingFang SC-Medium;
  240. font-weight: 500;
  241. color: #ffffff;
  242. }
  243. .home-content-code {
  244. width: 100%;
  245. height: 689rpx;
  246. font-size: 32rpx;
  247. font-family: PingFang SC, PingFang SC-Regular;
  248. font-weight: 400;
  249. color: #464646;
  250. text-align: center;
  251. }
  252. .home-content-code image {
  253. width: 400rpx;
  254. height: 400rpx;
  255. margin-bottom: 64rpx; margin-top: 64rpx;
  256. }
  257. .home-content-code-title {
  258. padding: 0 30rpx;
  259. color: red;
  260. }
  261. .code-btn {
  262. font-size: 32rpx;
  263. font-family: PingFang SC, PingFang SC-Regular;
  264. font-weight: 400;
  265. color: #3c8cff;
  266. margin-bottom: 35rpx;
  267. }
  268. .bottom-bar {
  269. position: fixed;
  270. /* bottom: 50rpx; */
  271. width: 100%;
  272. z-index: 1000;
  273. padding: 30rpx 0;
  274. }
  275. .bottom-bar button {
  276. text-align: center;
  277. width: 690rpx;
  278. height: 90rpx;
  279. background: linear-gradient(132deg, #07c160 0%, #07c160 100%);
  280. box-shadow: 0px 2rpx 12rpx #07c160;
  281. opacity: 1;
  282. border-radius: 10rpx;
  283. color: #fff;
  284. font-size: 32rpx;
  285. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  286. font-weight: 500;
  287. color: #ffffff;
  288. }
  289. .auth-text{
  290. text-align: center;
  291. font-size: 52rpx;
  292. padding-bottom: 100rpx;
  293. color: #999;
  294. }
  295. </style>