|
|
@@ -1,146 +1,273 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <image @longtap="bc_code" class="backImg" :src="backImg"></image>
|
|
|
- <view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view>
|
|
|
+ <swiper class="posters-box" :autoplay="false" :circular="false" :interval="3000" :duration="500"
|
|
|
+ @change="bindchange" previous-margin="40px" next-margin="40px">
|
|
|
+ <block v-for="(item, index ) in shareList" :key="index">
|
|
|
+ <swiper-item>
|
|
|
+ <!-- #ifndef MP -->
|
|
|
+ <image class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill'
|
|
|
+ :src="item.wap_poster"></image>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <image class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill'
|
|
|
+ :src="item.poster"></image>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ <!-- #ifndef MP -->
|
|
|
+ <div class="preserve">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="tip">长按保存图片</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <view class='keep' @click='savePosterPath'>保存海报</view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { spreadBanner } from '@/api/user.js';
|
|
|
-export default {
|
|
|
- // components: { tkiQrcode },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- url: '',
|
|
|
- backImg: '',
|
|
|
- userInfo: ''
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.spread();
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: this.$t("tab.b2"),
|
|
|
- });
|
|
|
- },
|
|
|
- computed: {
|
|
|
- cpSize() {
|
|
|
- if (this.unit == 'upx') {
|
|
|
- return uni.upx2px(this.size);
|
|
|
- } else {
|
|
|
- return this.size;
|
|
|
+ import {
|
|
|
+ spreadBanner
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ // #ifdef MP
|
|
|
+ onShareAppMessage: function(res) {
|
|
|
+ // 保存邀请人
|
|
|
+ let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
|
|
|
+ let data = {
|
|
|
+ path: path,
|
|
|
+ imageUrl: this.poster,
|
|
|
+ title: this.userInfo.nickname + '邀请您进入绿津'
|
|
|
+ };
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shareList: [],
|
|
|
+ swiperIndex: 0,
|
|
|
+ poster: '', // 当前海报
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- spread() {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- let obj = this;
|
|
|
- spreadBanner({
|
|
|
- //#ifdef H5
|
|
|
- type: 2,
|
|
|
- //#endif
|
|
|
- //#ifdef MP
|
|
|
- type:1,
|
|
|
- //#endif
|
|
|
- //#ifdef APP-PLUS
|
|
|
- type:2,
|
|
|
- //#endif
|
|
|
- }).then(({ data }) => {
|
|
|
- console.log(data);
|
|
|
- //#ifdef MP
|
|
|
- obj.backImg = data[0].poster;
|
|
|
- //#endif
|
|
|
- //#ifdef H5
|
|
|
- obj.backImg = data[0].wap_poster;
|
|
|
- //#endif
|
|
|
- //#ifdef APP-PLUS
|
|
|
- obj.backImg = data[0].wap_poster;
|
|
|
- //#endif
|
|
|
- uni.hideLoading();
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.$t("tab.b2"),
|
|
|
});
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
- bc_code() {
|
|
|
- let that = this;
|
|
|
- console.log('保存二维码', this.backImg);
|
|
|
- uni.downloadFile({
|
|
|
- //获得二维码的临时地址
|
|
|
- url: this.backImg,
|
|
|
- success: res => {
|
|
|
- //console.log('获取url',res)
|
|
|
- if (res.statusCode == 200) {
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath, //传入临时地址
|
|
|
- success() {
|
|
|
- that.$api.msg('保存成功'); //封装的提示
|
|
|
- },
|
|
|
- fail() {
|
|
|
- that.$api.msg('保存失败');
|
|
|
- }
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['userInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bindchange(e) {
|
|
|
+ let shareList = this.shareList;
|
|
|
+ this.swiperIndex = e.detail.current;
|
|
|
+ // #ifdef MP
|
|
|
+ this.poster = shareList[this.swiperIndex].poster;
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ console.log(this.poster)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存海报
|
|
|
+ savePosterPath: function() {
|
|
|
+ let that = this;
|
|
|
+ if (that.poster == '') {
|
|
|
+ that.poster = that.shareList[0].poster;
|
|
|
+ }
|
|
|
+ uni.downloadFile({
|
|
|
+ url: that.poster,
|
|
|
+ success(resFile) {
|
|
|
+ if (resFile.statusCode === 200) {
|
|
|
+ uni.getSetting({
|
|
|
+ success(res) {
|
|
|
+ if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.writePhotosAlbum',
|
|
|
+ success() {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: resFile.tempFilePath,
|
|
|
+ success: function(res) {
|
|
|
+ return that.$api.msg(
|
|
|
+ '保存成功');
|
|
|
+ },
|
|
|
+ fail: function(res) {
|
|
|
+ return that.$api.msg(res
|
|
|
+ .errMsg);
|
|
|
+ },
|
|
|
+ complete: function(res) {},
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ uni.showModal({
|
|
|
+ title: '您已拒绝获取相册权限',
|
|
|
+ content: '是否进入权限管理，调整授权？',
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.openSetting({
|
|
|
+ success: function(
|
|
|
+ res) {
|
|
|
+ console
|
|
|
+ .log(
|
|
|
+ res
|
|
|
+ .authSetting
|
|
|
+ )
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (res.cancel) {
|
|
|
+ return that.$api.msg(
|
|
|
+ '已取消！');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: resFile.tempFilePath,
|
|
|
+ success: function(res) {
|
|
|
+ return that.$api.msg('保存成功');
|
|
|
+ },
|
|
|
+ fail: function(res) {
|
|
|
+ return that.$api.msg(res.errMsg);
|
|
|
+ },
|
|
|
+ complete: function(res) {},
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return that.$api.msg(resFile.errMsg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+ return that.$api.msg(res.errMsg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // 保存画图图片到本地
|
|
|
+ seav(url) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '生成中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: this.poster,
|
|
|
+ complete(result) {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(result);
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存图片成功！',
|
|
|
+ duration: 2000,
|
|
|
+ icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // 获取海报
|
|
|
+ loadData() {
|
|
|
+ let obj = this;
|
|
|
+ uni.showLoading({
|
|
|
+ title: '获取中',
|
|
|
+ mask: true,
|
|
|
+ });
|
|
|
+ spreadBanner({
|
|
|
+ // #ifdef H5
|
|
|
+ type: 2,
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ type: 1
|
|
|
+ // #endif
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ obj.shareList = res.data;
|
|
|
+ console.log('obj.shareList', obj.shareList);
|
|
|
+ }).catch(err => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-page {
|
|
|
- width: 100%;
|
|
|
- min-height: 100%;
|
|
|
+ page {
|
|
|
+ background: #a3a3a3;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .posters-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 1000rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .slide-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .posters-box .slide-image.active {
|
|
|
+ transform: none;
|
|
|
+ transition: all 0.2s ease-in 0s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .posters-box .slide-image.quiet {
|
|
|
+ transform: scale(0.8333333);
|
|
|
+ transition: all 0.2s ease-in 0s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .keep {
|
|
|
+ font-size: 30rpx;
|
|
|
+ background: $base-color;
|
|
|
+ color: #fff;
|
|
|
+ width: 600rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin: 38rpx auto;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.backImg {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.portrait {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding-top: 80rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- image {
|
|
|
- width: 250rpx;
|
|
|
- height: 250rpx;
|
|
|
+
|
|
|
+ .preserve {
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 38rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.text {
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 55rpx;
|
|
|
- letter-spacing: 15rpx;
|
|
|
-}
|
|
|
-.uid-name {
|
|
|
- padding: 50rpx 0rpx;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-.copy-btn {
|
|
|
- color: #ffffff;
|
|
|
- background-color: #4ba6ed;
|
|
|
- border-radius: 50rpx;
|
|
|
- width: 170rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- margin: 0rpx auto;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.tki-qrcode {
|
|
|
- position: fixed;
|
|
|
- bottom: 10%;
|
|
|
- left: 30%;
|
|
|
-}
|
|
|
-canvas {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- margin: auto;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
