|
|
@@ -1,92 +1,286 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <image src="../../static/img/sharebase.png" mode="widthFix" class="baseimg"></image>
|
|
|
- <view class="erweima">
|
|
|
- <tki-qrcode
|
|
|
- :cid="cid"
|
|
|
- ref="qrcode"
|
|
|
- :val="val"
|
|
|
- :size="size"
|
|
|
- :unit="unit"
|
|
|
- :background="background"
|
|
|
- :foreground="foreground"
|
|
|
- :pdground="pdground"
|
|
|
- :iconSize="iconSize"
|
|
|
- :lv="lv"
|
|
|
- :onval="onval"
|
|
|
- :loadMake="loadMake"
|
|
|
- :usingComponents="usingComponents"
|
|
|
- @result="qrR"
|
|
|
- />
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <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 {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
- import {
|
|
|
- getUserInfo
|
|
|
- } from '@/api/user.js';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- val: '',
|
|
|
- cid: 'cid',
|
|
|
- size: 150,
|
|
|
- unit: '150',
|
|
|
- background: '#FFFFFF',
|
|
|
- foreground: '#000000',
|
|
|
- pdground: '#000000',
|
|
|
- icon: '',
|
|
|
- iconSize: 40,
|
|
|
- lv: 3,
|
|
|
- onval: true,
|
|
|
- loadMake: true,
|
|
|
- usingComponents: true,
|
|
|
+import { spreadBanner } from '@/api/user.js';
|
|
|
+// import { qrcode } from '@/api/user.js';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ // #ifdef MP
|
|
|
+ onShareAppMessage: function(res) {
|
|
|
+ // if (res.from === 'button') {
|
|
|
+
|
|
|
+ // 保存邀请人
|
|
|
+ let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
|
|
|
+ console.log('path',path)
|
|
|
+ let data = {
|
|
|
+ path: path,
|
|
|
+ imageUrl: this.poster,
|
|
|
+ title: this.userInfo.nickname + '邀请您进入卡羚能服'
|
|
|
};
|
|
|
+ console.log('---data---',data)
|
|
|
+ return data;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shareList: [],
|
|
|
+ swiperIndex: 0,
|
|
|
+ poster: '', // 当前海报
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // console.log('---option---',option)
|
|
|
+ // let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
|
|
|
+ // console.log('path',path)
|
|
|
+ // if(option.scene){
|
|
|
+ // // 存储邀请人
|
|
|
+ // this.spread = opt.pid;
|
|
|
+ // uni.setStorageSync('spread', opt.pid);
|
|
|
+ // }
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bindchange(e) {
|
|
|
+ let shareList = this.shareList;
|
|
|
+ this.swiperIndex = e.detail.current;
|
|
|
+ // #ifdef MP
|
|
|
+ this.poster = shareList[this.swiperIndex].poster;
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // // #ifndef MP
|
|
|
+ // this.poster = shareList[this.swiperIndex].wap_poster;
|
|
|
+ // // #endif
|
|
|
+
|
|
|
+ console.log(this.poster)
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- const obj = this;
|
|
|
- if(!this.userInfo.uid){
|
|
|
- getUserInfo({}).then(e => {
|
|
|
- // 保存返回用户数据
|
|
|
- obj.setUserInfo(e.data);
|
|
|
- //成功跳转首页
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- });
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.val = this.baseURL+ this.urlFile+'/#/pages/index/index?spread=' + this.userInfo.uid
|
|
|
+
|
|
|
+ // 保存海报
|
|
|
+ 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'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapState(['baseURL', 'urlFile']),
|
|
|
- ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
+ // #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();
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- qrR(res) {
|
|
|
- this.src = res;
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- };
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.baseimg {
|
|
|
+ page {
|
|
|
+ background: #a3a3a3;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+.container {
|
|
|
width: 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;
|
|
|
+ }
|
|
|
}
|
|
|
-.erweima {
|
|
|
- width: 300rpx;
|
|
|
- position: absolute;
|
|
|
- top: 928rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
+.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;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
