favorites.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <view class="container">
  3. <swiper class="posters-box" :autoplay="false" :circular="false" :interval="3000" :duration="500"
  4. @change="bindchange" previous-margin="40px" next-margin="40px">
  5. <block v-for="(item, index ) in shareList" :key="index">
  6. <swiper-item>
  7. <!-- #ifndef MP -->
  8. <image class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill'
  9. :src="item.wap_poster"></image>
  10. <!-- #endif -->
  11. <!-- #ifdef MP -->
  12. <image class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill'
  13. :src="item.poster"></image>
  14. <!-- #endif -->
  15. </swiper-item>
  16. </block>
  17. </swiper>
  18. <!-- #ifndef MP -->
  19. <div class="preserve">
  20. <div class="line"></div>
  21. <div class="tip">长按保存图片</div>
  22. <div class="line"></div>
  23. </div>
  24. <!-- #endif -->
  25. <!-- #ifdef MP -->
  26. <view class='keep' @click='savePosterPath'>保存海报</view>
  27. <!-- #endif -->
  28. </view>
  29. </template>
  30. <script>
  31. import {
  32. spreadBanner
  33. } from '@/api/user.js';
  34. import {
  35. mapState
  36. } from 'vuex';
  37. export default {
  38. // #ifdef MP
  39. onShareAppMessage: function(res) {
  40. // 保存邀请人
  41. let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
  42. let data = {
  43. path: path,
  44. imageUrl: this.poster,
  45. title: this.userInfo.nickname + '邀请您进入绿津'
  46. };
  47. return data;
  48. },
  49. // #endif
  50. data() {
  51. return {
  52. shareList: [],
  53. swiperIndex: 0,
  54. poster: '', // 当前海报
  55. }
  56. },
  57. onLoad(option) {
  58. uni.setNavigationBarTitle({
  59. title: this.$t("tab.b2"),
  60. });
  61. this.loadData();
  62. },
  63. computed: {
  64. ...mapState('user', ['userInfo']),
  65. },
  66. methods: {
  67. bindchange(e) {
  68. let shareList = this.shareList;
  69. this.swiperIndex = e.detail.current;
  70. // #ifdef MP
  71. this.poster = shareList[this.swiperIndex].poster;
  72. // #endif
  73. console.log(this.poster)
  74. },
  75. // 保存海报
  76. savePosterPath: function() {
  77. let that = this;
  78. if (that.poster == '') {
  79. that.poster = that.shareList[0].poster;
  80. }
  81. uni.downloadFile({
  82. url: that.poster,
  83. success(resFile) {
  84. if (resFile.statusCode === 200) {
  85. uni.getSetting({
  86. success(res) {
  87. if (!res.authSetting['scope.writePhotosAlbum']) {
  88. uni.authorize({
  89. scope: 'scope.writePhotosAlbum',
  90. success() {
  91. uni.saveImageToPhotosAlbum({
  92. filePath: resFile.tempFilePath,
  93. success: function(res) {
  94. return that.$api.msg(
  95. '保存成功');
  96. },
  97. fail: function(res) {
  98. return that.$api.msg(res
  99. .errMsg);
  100. },
  101. complete: function(res) {},
  102. })
  103. },
  104. fail() {
  105. uni.showModal({
  106. title: '您已拒绝获取相册权限',
  107. content: '是否进入权限管理,调整授权?',
  108. success(res) {
  109. if (res.confirm) {
  110. uni.openSetting({
  111. success: function(
  112. res) {
  113. console
  114. .log(
  115. res
  116. .authSetting
  117. )
  118. }
  119. });
  120. } else if (res.cancel) {
  121. return that.$api.msg(
  122. '已取消!');
  123. }
  124. }
  125. })
  126. }
  127. })
  128. } else {
  129. uni.saveImageToPhotosAlbum({
  130. filePath: resFile.tempFilePath,
  131. success: function(res) {
  132. return that.$api.msg('保存成功');
  133. },
  134. fail: function(res) {
  135. return that.$api.msg(res.errMsg);
  136. },
  137. complete: function(res) {},
  138. })
  139. }
  140. },
  141. fail(res) {
  142. }
  143. })
  144. } else {
  145. return that.$api.msg(resFile.errMsg);
  146. }
  147. },
  148. fail(res) {
  149. return that.$api.msg(res.errMsg);
  150. }
  151. })
  152. },
  153. // #ifdef MP-WEIXIN
  154. // 保存画图图片到本地
  155. seav(url) {
  156. uni.showLoading({
  157. title: '生成中...',
  158. mask: true
  159. });
  160. uni.saveImageToPhotosAlbum({
  161. filePath: this.poster,
  162. complete(result) {
  163. uni.hideLoading();
  164. console.log(result);
  165. uni.showToast({
  166. title: '保存图片成功!',
  167. duration: 2000,
  168. icon: 'none'
  169. });
  170. }
  171. });
  172. },
  173. // #endif
  174. // 获取海报
  175. loadData() {
  176. let obj = this;
  177. uni.showLoading({
  178. title: '获取中',
  179. mask: true,
  180. });
  181. spreadBanner({
  182. // #ifdef H5
  183. type: 2,
  184. // #endif
  185. // #ifdef MP
  186. type: 1
  187. // #endif
  188. }).then(res => {
  189. uni.hideLoading();
  190. obj.shareList = res.data;
  191. console.log('obj.shareList', obj.shareList);
  192. }).catch(err => {
  193. uni.hideLoading();
  194. });
  195. },
  196. }
  197. }
  198. </script>
  199. <style lang="scss">
  200. page {
  201. background: #a3a3a3;
  202. height: 100%;
  203. }
  204. .container {
  205. width: 100%;
  206. .posters-box {
  207. width: 100%;
  208. height: 1000rpx;
  209. margin-top: 40rpx;
  210. .slide-image {
  211. width: 100%;
  212. height: 100%;
  213. border-radius: 15rpx;
  214. }
  215. }
  216. .posters-box .slide-image.active {
  217. transform: none;
  218. transition: all 0.2s ease-in 0s;
  219. }
  220. .posters-box .slide-image.quiet {
  221. transform: scale(0.8333333);
  222. transition: all 0.2s ease-in 0s;
  223. }
  224. .keep {
  225. font-size: 30rpx;
  226. background: $base-color;
  227. color: #fff;
  228. width: 600rpx;
  229. height: 80rpx;
  230. border-radius: 50rpx;
  231. text-align: center;
  232. line-height: 80rpx;
  233. margin: 38rpx auto;
  234. }
  235. }
  236. .preserve {
  237. color: #fff;
  238. text-align: center;
  239. margin-top: 38rpx;
  240. display: flex;
  241. align-items: center;
  242. justify-content: center;
  243. .line {
  244. width: 100rpx;
  245. height: 1px;
  246. background-color: #fff;
  247. }
  248. .tip {
  249. margin: 0 20rpx;
  250. font-size: 28rpx;
  251. }
  252. }
  253. </style>