123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446 |
- <template>
- <view class="container">
- <view class="" style="height: 80rpx;">
-
- </view>
- <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px',}" canvas-id="myCanvas" id="myCanvas" class="hb"></canvas>
-
- <div class="preserve">
- <div class="line"></div>
- <div class="tip">长按保存图片</div>
- <div class="line"></div>
- </div>
-
-
- <view class='keep' @click='saveShareQrcode' v-if="!loading">保存海报</view>
-
- </view>
- </template>
- <script>
- import {
- spreadBanner,
- getWxmpInviteQrcode
- } from '@/api/user.js';
- import {
- qrcode
- } from '@/api/user.js';
- import {
- mapState
- } from 'vuex';
- export default {
-
- onShareAppMessage: function(res) {
-
-
- 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;
-
- },
-
- data() {
- return {
- bl: 0.95,
- canvasW: '',
- canvasH: '',
- bgimg: '',
- qrimg: '',
- shareList: [],
- swiperIndex: 0,
- poster: '',
- loading: true
- }
- },
- onLoad(option) {
-
-
-
-
-
-
-
-
- this.loadData();
- },
- computed: {
- ...mapState('user',['userInfo']),
- },
- methods: {
- bindchange(e) {
- let shareList = this.shareList;
- this.swiperIndex = e.detail.current;
-
- this.poster = shareList[this.swiperIndex].poster;
-
-
-
-
- console.log(this.poster)
- },
-
- savePosterPath: function() {
- let that = this;
- if (that.poster == '') {
-
- that.poster = this.bgimg
- }
- 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);
- }
- })
- },
-
-
- 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'
- });
- }
- });
- },
-
-
- loadData() {
- let obj = this;
- uni.showLoading({
- title: '获取中',
- mask: true,
- });
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- getWxmpInviteQrcode().then(res => {
- console.log(res)
- obj.bgimg = res.data.bgimg
- obj.qrcode = res.data.qrcode
- uni.hideLoading();
- obj.createPoster()
-
- })
- },
- async createPoster() {
- let that = this
-
- this.SystemInfo = await this.getSystemInfo();
-
- this.goodsImg = await this.getImageInfo(that.bgimg);
- this.ewmImg = await this.getImageInfo(that.qrcode);
- this.canvasW = this.SystemInfo.windowWidth * that.bl;
- this.ratio = this.SystemInfo.windowWidth / 750;
- let x = 750*this.goodsImg.height/this.goodsImg.width
-
- this.canvasH = x * this.ratio * that.bl;
- this.ewmW = 220 * this.ratio;
-
-
- console.log(this.canvasH, 'this.canvasH')
-
-
-
- if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this
- .SystemInfo.errMsg == 'getSystemInfo:ok') {
- console.log('ok')
- uni.showToast({
- icon: 'loading',
- mask: true,
- duration: 10000,
- title: '海报绘制中',
- });
- setTimeout(() => {
- var ctx = uni.createCanvasContext('myCanvas', this);
-
- ctx.setFillStyle('#fff');
- ctx.fillRect(0, 0, this.canvasW, this.canvasH)
-
-
- ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this.canvasH)
-
- ctx.drawImage(this.ewmImg.path,40*this.ratio,this.canvasH - 50*this.ratio - this.ewmW, this.ewmW, this.ewmW)
-
-
- ctx.setFontSize(16);
- ctx.setFillStyle('#555');
- let name = this.userInfo.nickname
- let len = 8
- if(name.length > len) {
- name = name.substr(0,len) + '...'
- }
- ctx .fillText(name, 100*this.ratio + this.ewmW,this.canvasH- this.ewmW/2 - 80*this.ratio)
- ctx .fillText('邀请您加入母婴严选', 100*this.ratio + this.ewmW,this.canvasH- this.ewmW/2 -16*this.ratio)
- ctx.draw(false, (ret) => {
- console.log(ret)
- uni.showToast({
- icon: 'none',
- title: '生成成功!',
- });
- that.loading = false
- that.fina = true
- uni.canvasToTempFilePath({
- canvasId: 'myCanvas',
- quality: 1,
- fileType: 'jpg',
- complete: function(res) {
-
- console.log(res)
- that.canvasShow = false
- that.shareQrcodeUrl = res.tempFilePath
- that.$forceUpdate()
- setTimeout(function() {
- console.log(that.shareQrcodeUrl, that
- .canvasShow)
- }, 2000)
- },
- })
- });
- }, 1500)
- } else {
- console.log('err')
- }
- },
-
- getSystemInfo() {
- return new Promise((req, rej) => {
- uni.getSystemInfo({
- success: function(res) {
- req(res)
- }
- });
- })
- },
-
- getImageInfo(image) {
- return new Promise((req, rej) => {
- uni.getImageInfo({
- src: image,
- success: function(res) {
- req(res)
- },
- });
- })
- },
-
- saveShareQrcode() {
- console.log(this.shareQrcodeUrl)
- uni.saveImageToPhotosAlbum({
- filePath: this.shareQrcodeUrl,
- success: (res) => {
- uni.showToast({
- icon: 'none',
- position: 'bottom',
- title: "成功保存到相册",
- });
- },
- fail: (err) => {
-
- if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
- uni.showModal({
- title: '提示',
- content: '需要您授权保存相册',
- showCancel: false,
- success(res) {
- if (res.confirm) {
- uni.openSetting({
- success(settingdata) {
- if (settingdata.authSetting[
- 'scope.writePhotosAlbum']) {
- uni.showModal({
- title: '提示',
- content: '获取权限成功,再次保存图片即可成功',
- showCancel: false,
- })
- } else {
- uni.showModal({
- title: '提示',
- content: '获取权限失败,无法保存到相册',
- showCancel: false
- })
- }
- }
- })
- }
- }
- })
- }
- },
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background: #a3a3a3;
- height: 100%;
- }
- .container {
- width: 100%;
- padding-bottom: 100rpx;
- .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: 750rpx;
- position: fixed;
- height: 100rpx;
- text-align: center;
- line-height: 100rpx;
- bottom: 0;
- left: 0;
- }
- }
- .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;
- }
- }
- .hb {
- margin: auto;
- border-radius: 20rpx;
- overflow: hidden;
- }
- </style>
|