shareQrCode.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <view class="andr-shQ-padL30 andr-shQ-padR30 andr-shQ-Flex andr-shQ-FlexDirC">
  3. <view class="andr-shQ-w100B andr-shQ-Flex andr-shQ-JusCC">
  4. <swiper class="imgw750h375 matop" :indicator-dots="false" :current="current" @change="currentChange" >
  5. <swiper-item v-for="(item, index) in rwmListArr" :key="index"><image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" /></swiper-item>
  6. </swiper>
  7. </view>
  8. <view class="baocun" @click="comfirm(userInfo.uid+'')">复制邀请码</view>
  9. <!-- #ifdef H5 -->
  10. <!-- <view class="baocun">长按二维码保存图片</view> -->
  11. <!-- #endif -->
  12. <!-- #ifdef MP-WEIXIN -->
  13. <view class="baocun" @click="seav">保存图片并转发</view>
  14. <!-- <button open-type="share" class="baocun btn" v-if="scLoading == 2">分享到微信</button> -->
  15. <!-- #endif -->
  16. </view>
  17. </template>
  18. <script>
  19. // import weixinObj from "@/plugin/jweixin-module/index.js";
  20. import { mapState } from 'vuex';
  21. import { spreadBanner } from '@/api/user.js';
  22. import { interceptor, saveUrl } from '@/utils/loginUtils';
  23. // #ifdef H5
  24. import { weixindata, weixinlocation,shareLoad } from '@/utils/wxAuthorized';
  25. // #endif
  26. export default {
  27. data() {
  28. return {
  29. rwmListArr: [],
  30. current: 0,
  31. imgSrc: ''
  32. };
  33. },
  34. onLoad(option) {
  35. uni.showLoading({
  36. title: '邀请图生成中',
  37. mask: true
  38. });
  39. // 判断是否强制登录
  40. this.loadCodeList();
  41. // #ifdef MP-WEIXIN
  42. uni.authorize({
  43. scope: 'scope.writePhotosAlbum',
  44. complete() {}
  45. });
  46. // #endif
  47. // #ifdef H5
  48. // weixinObj.showAllNonBaseMenuItem();
  49. this.IndexShare()
  50. // wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  51. // let path = '/#/pages/index/index' + '?';
  52. // console.log(obj.Path)
  53. // // 保存邀请人
  54. // path += 'spread=' + this.userInfo.uid;
  55. // wx.updateAppMessageShareData({
  56. // title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺', // 分享标题
  57. // desc: '欢迎加入Xingwang鑫旺', // 分享描述
  58. // link: this.baseURL + path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  59. // imgUrl: '../../static/img/logo.png', // 分享图标
  60. // success: function () {
  61. // // 设置成功
  62. // }
  63. // })
  64. // });
  65. // #endif
  66. },
  67. onShow() {
  68. if (this.loginInterceptor && !this.hasLogin) {
  69. saveUrl();
  70. // 登录拦截
  71. interceptor();
  72. }
  73. },
  74. //下拉刷新
  75. onPullDownRefresh() {
  76. let obj = this;
  77. //监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次
  78. setTimeout(function() {
  79. obj.loadCodeList();
  80. uni.stopPullDownRefresh(); //停止下拉刷新动画
  81. }, 1000);
  82. },
  83. computed: {
  84. ...mapState(['weichatObj', 'baseURL', 'urlFile']),
  85. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  86. },
  87. methods: {
  88. comfirm(text) {
  89. // let text = this.userInfo.uid
  90. console.log(text);
  91. const result = this.uniCopy(text);
  92. if (result === false) {
  93. uni.showToast({
  94. title: '不支持'
  95. });
  96. } else {
  97. uni.showToast({
  98. title: '复制成功',
  99. icon: 'none'
  100. });
  101. }
  102. // this.$refs.popup.close();
  103. },
  104. uniCopy(content) {
  105. /**
  106. * 小程序端 和 app端的复制逻辑
  107. */
  108. //#ifndef H5
  109. uni.setClipboardData({
  110. data: content,
  111. success: function() {
  112. console.log('success');
  113. return true;
  114. }
  115. });
  116. //#endif
  117. /**
  118. * H5端的复制逻辑
  119. */
  120. // #ifdef H5
  121. if (!document.queryCommandSupported('copy')) {
  122. //为了兼容有些浏览器 queryCommandSupported 的判断
  123. // 不支持
  124. return false;
  125. }
  126. let textarea = document.createElement('textarea');
  127. textarea.value = content;
  128. textarea.readOnly = 'readOnly';
  129. document.body.appendChild(textarea);
  130. textarea.select(); // 选择对象
  131. textarea.setSelectionRange(0, content.length); //核心
  132. let result = document.execCommand('copy'); // 执行浏览器复制命令
  133. textarea.remove();
  134. return result;
  135. // #endif
  136. },
  137. loadCodeList() {
  138. let self = this;
  139. // 加载二维码信息
  140. // let andrUid = uni.getStorageSync('andrUid')||'';
  141. spreadBanner({
  142. // #ifdef H5
  143. type: 2,
  144. // #endif
  145. // #ifdef MP
  146. type: 1,
  147. // #endif
  148. }).then(e => {
  149. if (e.status == 200) {
  150. console.log(e.data)
  151. self.rwmListArr = e.data;
  152. // #ifdef H5
  153. self.imgSrc = self.rwmListArr[0].wap_poster;
  154. // #endif
  155. // #ifdef MP-WEIXIN
  156. self.imgSrc = self.rwmListArr[0].poster;
  157. // #endif
  158. }
  159. uni.hideLoading();
  160. });
  161. },
  162. currentChange(e) {
  163. this.current = e.detail.current;
  164. },
  165. // #ifdef H5
  166. IndexShare() {
  167. let obj = this;
  168. let pages = getCurrentPages();
  169. // 获取当前页面
  170. let page = pages[pages.length - 1];
  171. let path = '/#/pages/index/index' + '?';
  172. // 保存传值
  173. for (let i in page.options) {
  174. path += i + '=' + page.options[i] + '&';
  175. }
  176. console.log(obj.Path)
  177. // 保存邀请人
  178. path += 'spread=' + this.userInfo.uid;
  179. let data = {
  180. link: this.baseURL + path,
  181. title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺',
  182. desc:'欢迎加入Xingwang鑫旺',
  183. imgUrl: ''
  184. };
  185. console.log(data,'分享数据');
  186. shareLoad(data);
  187. },
  188. // #endif
  189. // #ifdef MP-WEIXIN
  190. seav() {
  191. uni.getImageInfo({
  192. src: this.imgSrc,
  193. complete: function (result) {
  194. let path = result.path;
  195. uni.getSetting({
  196. success(res) {
  197. console.log(res)
  198. if (!res.authSetting['scope.writePhotosAlbum']) {
  199. uni.authorize({
  200. scope:'scope.writePhotosAlbum',
  201. success(res) {
  202. uni.saveImageToPhotosAlbum({
  203. filePath:path,
  204. complete(result) {
  205. }
  206. });
  207. },
  208. complete(result) {
  209. uni.showToast({
  210. title: '请先授权保存图片',
  211. duration: 2000,
  212. icon:'none'
  213. });
  214. obj.seav();
  215. }
  216. })
  217. }else{
  218. uni.saveImageToPhotosAlbum({
  219. filePath:path,
  220. complete(result) {
  221. uni.showToast({
  222. title: '保存图片成功!',
  223. duration: 2000,
  224. icon:'none'
  225. });
  226. }
  227. });
  228. }
  229. }
  230. });
  231. }
  232. });
  233. }
  234. // #endif
  235. }
  236. };
  237. </script>
  238. <style lang="scss">
  239. .imgw750h375 {
  240. width: 700rpx;
  241. height: 958rpx;
  242. }
  243. .matop{
  244. margin-top: 40rpx;
  245. }
  246. .andr-shQ-padL30 {
  247. padding-left: 30rpx;
  248. }
  249. .andr-shQ-padR30 {
  250. padding-right: 30rpx;
  251. }
  252. .andr-shQ-Flex {
  253. display: flex;
  254. }
  255. .andr-shQ-FlexDirC {
  256. flex-direction: column;
  257. }
  258. .andr-shQ-w100B {
  259. width: 100%;
  260. }
  261. .andr-shQ-JusCC {
  262. justify-content: center;
  263. }
  264. .andr-shQ-marginT30 {
  265. margin-top: 30rpx;
  266. }
  267. .andr-shQ-bgc06B163 {
  268. background-color: $base-color;
  269. }
  270. .andr-shQ-cFFF {
  271. color: #ffffff;
  272. }
  273. .andr-shQ-bdR50 {
  274. border-radius: 50rpx;
  275. }
  276. .andr-shQ-h86 {
  277. height: 86rpx;
  278. }
  279. .andr-shQ-AIC {
  280. align-items: center;
  281. }
  282. .baocun {
  283. color: #ffffff;
  284. background: $base-color;
  285. text-align: center;
  286. width: 80%;
  287. margin: 50rpx auto;
  288. font-size: 28rpx;
  289. padding: 25rpx 0rpx;
  290. border-radius: 50rpx;
  291. }
  292. .btn{
  293. padding: 0rpx 0rpx !important;
  294. margin: 0rpx auto;
  295. margin-bottom: 100rpx;
  296. }
  297. /* #ifdef H5 */
  298. .cbnagan {
  299. width: 80%;
  300. background: $base-color;
  301. margin: 50rpx auto;
  302. font-size: 28rpx;
  303. text-align: center;
  304. }
  305. /* #endif */
  306. </style>