|
|
@@ -1,106 +1,104 @@
|
|
|
<template>
|
|
|
- <view class="andr-shQ-padL30 andr-shQ-padR30 andr-shQ-Flex andr-shQ-FlexDirC">
|
|
|
- <view class="andr-shQ-w100B andr-shQ-Flex andr-shQ-JusCC">
|
|
|
- <swiper class="imgw750h375 matop" :indicator-dots="false" :current="current" @change="currentChange">
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <swiper-item v-for="(item, index) in rwmListArr" :key="index">
|
|
|
- <image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" />
|
|
|
- </swiper-item>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <swiper-item v-for="(item, index) in rwmListArr" :key="index">
|
|
|
- <image :src="item.poster" mode="aspectFit" class="imgw750h375" />
|
|
|
- </swiper-item>
|
|
|
- <!-- #endif -->
|
|
|
-
|
|
|
- </swiper>
|
|
|
+ <view class="main">
|
|
|
+ <view class="qrimg">
|
|
|
+ <tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
|
|
|
+ :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv" :onval="onval" :showLoading="showLoading"
|
|
|
+ :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
|
|
|
</view>
|
|
|
- <!-- <view class="baocun" @click="comfirm(userInfo.uid+'')">复制邀请码</view> -->
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <!-- <view class="baocun">长按二维码保存图片</view> -->
|
|
|
-
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <view class="baocun" @click="seav">保存分享海报</view>
|
|
|
- <!-- <button open-type="share" class="baocun btn" v-if="scLoading == 2">分享到微信</button> -->
|
|
|
- <!-- #endif -->
|
|
|
+ <!-- <view class="qrcode-wrapper">
|
|
|
+ <image class="qrcode-save__image" :src="shareQrcodeUrl" mode="aspectFit"></image>
|
|
|
+ <view class="qrcode-save__btn">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px',}" canvas-id="myCanvas" id="myCanvas"></canvas> -->
|
|
|
+ <canvas :style="{ width: '600rpx', height: '1066rpx',}" canvas-id="myCanvas" id="myCanvas" class="hb"></canvas>
|
|
|
+ <!-- <view class="" v-if="fina">
|
|
|
+ <button text="保存图片" @click="saveShareQrcode">保存图片</button>
|
|
|
+ </view>
|
|
|
+ <view class="" v-if="fina">
|
|
|
+ <button text="保存图片" @click="saveShareQrcode">分享链接</button>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="btm-btn" v-if="fina">
|
|
|
+ <view class="btn" @click="comfirm">
|
|
|
+ <image src="../../static/icon/fzlj.png" mode=""></image>
|
|
|
+ <view class="">
|
|
|
+ 复制邀请链接
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="saveShareQrcode">
|
|
|
+ <image src="../../static/icon/fxhb.png" mode=""></image>
|
|
|
+ <view class="">
|
|
|
+ 保存分享海报
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import {
|
|
|
- mapState
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
} from 'vuex';
|
|
|
import {
|
|
|
- spreadBanner
|
|
|
+ getUserInfo
|
|
|
} from '@/api/user.js';
|
|
|
- import {
|
|
|
- interceptor,
|
|
|
- saveUrl
|
|
|
- } from '@/utils/loginUtils';
|
|
|
- // #ifdef H5
|
|
|
- import {
|
|
|
- weixindata
|
|
|
- } from '@/utils/wxAuthorized';
|
|
|
- // #endif
|
|
|
+
|
|
|
+ var that
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- rwmListArr: [],
|
|
|
- current: 0,
|
|
|
- imgSrc: ''
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- uni.showLoading({
|
|
|
- title: '邀请图生成中',
|
|
|
- mask: true
|
|
|
- });
|
|
|
- // 判断是否强制登录
|
|
|
- this.loadCodeList();
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- uni.authorize({
|
|
|
- scope: 'scope.writePhotosAlbum',
|
|
|
- complete() {}
|
|
|
- });
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- if (this.loginInterceptor && !this.hasLogin) {
|
|
|
- saveUrl();
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
+ cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
|
|
|
+ size:300, //生成的二维码大小
|
|
|
+ unit: 'upx', //大小单位尺寸
|
|
|
+ // show: true,//默认使用组件中的image标签显示二维码
|
|
|
+ val: '', //要生成的内容
|
|
|
+ background: '#ffffff', //二维码背景色
|
|
|
+ foreground: '#333333', //二维码前景色
|
|
|
+ pdground: '#333333', //二维码角标色
|
|
|
+ icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
|
|
|
+ iconSize: 40, //二维码图标大小
|
|
|
+ lv: 3, //容错级别
|
|
|
+ onval: true, //监听val值变化自动重新生成二维码
|
|
|
+ loadMake: true, //组件初始化完成后自动生成二维码,val需要有值
|
|
|
+ usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
|
|
|
+ showLoading: false, //是否显示loading
|
|
|
+
|
|
|
+ erweimasrc: '',
|
|
|
+ canvasW: 0, // 画布宽
|
|
|
+ canvasH: 0, // 画布高
|
|
|
+ SystemInfo: {}, // 设备信息
|
|
|
+ goodsImg: {}, // 商品主图
|
|
|
+ ewmImg: {}, // 二维码图片
|
|
|
+ ewmW: 0, // 二维码大小
|
|
|
+ title: '', // 商品标题
|
|
|
+ canvasShow: true,
|
|
|
+ shareQrcodeUrl: '', //canvas本地路径
|
|
|
+ ratio: '', //画布比例
|
|
|
+ fina: false,
|
|
|
}
|
|
|
},
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- let obj = this;
|
|
|
- //监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次
|
|
|
- setTimeout(function() {
|
|
|
- obj.loadCodeList();
|
|
|
- uni.stopPullDownRefresh(); //停止下拉刷新动画
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
computed: {
|
|
|
- ...mapState(['weichatObj', 'baseURL', 'urlFile']),
|
|
|
+ ...mapState(['baseURL', 'urlFile']),
|
|
|
...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
},
|
|
|
- methods: {
|
|
|
- comfirm(text) {
|
|
|
- // let text = this.userInfo.uid
|
|
|
- console.log(text);
|
|
|
- const result = this.uniCopy(text);
|
|
|
- if (result === false) {
|
|
|
- uni.showToast({
|
|
|
- title: '不支持'
|
|
|
+ onLoad(options) {
|
|
|
+ const obj = this;
|
|
|
+ if (!this.userInfo.uid) {
|
|
|
+ getUserInfo({}).then(e => {
|
|
|
+ // 保存返回用户数据
|
|
|
+ obj.setUserInfo(e.data);
|
|
|
+ //成功跳转首页
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
});
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '复制成功',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- // this.$refs.popup.close();
|
|
|
- },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.val = 'http://store.manyuanchunjia.com/index/#/pages/index/index?spread=' + this.userInfo.uid
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
uniCopy(content) {
|
|
|
/**
|
|
|
* 小程序端 和 app端的复制逻辑
|
|
|
@@ -114,7 +112,7 @@
|
|
|
}
|
|
|
});
|
|
|
//#endif
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* H5端的复制逻辑
|
|
|
*/
|
|
|
@@ -135,211 +133,254 @@
|
|
|
return result;
|
|
|
// #endif
|
|
|
},
|
|
|
- loadCodeList() {
|
|
|
- let self = this;
|
|
|
- // 加载二维码信息
|
|
|
- // let andrUid = uni.getStorageSync('andrUid')||'';
|
|
|
- spreadBanner({
|
|
|
- // #ifdef H5
|
|
|
- type: 2,
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- type: 1,
|
|
|
- // #endif
|
|
|
- }).then(e => {
|
|
|
- if (e.status == 200) {
|
|
|
- console.log(e.data)
|
|
|
- self.rwmListArr = e.data;
|
|
|
- // #ifdef H5
|
|
|
- self.imgSrc = self.rwmListArr[0].wap_poster;
|
|
|
- // #endif
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- self.imgSrc = self.rwmListArr[0].poster;
|
|
|
- // #endif
|
|
|
- }
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
+ comfirm() {
|
|
|
+ const result = this.uniCopy(this.val);
|
|
|
+ if (result === false) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '不支持'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
- currentChange(e) {
|
|
|
- this.current = e.detail.current;
|
|
|
+ qrR(res) {
|
|
|
+ this.erweimasrc = res
|
|
|
+ console.log(res, 'erweima');
|
|
|
+ this.createPoster()
|
|
|
},
|
|
|
- // onShareAppMessage(options){
|
|
|
- // console.log(options,'options')
|
|
|
- // let userInfo = uni.getStorageSync('userInfo');
|
|
|
- // console.log(userInfo)
|
|
|
- // let obj = this;
|
|
|
- // // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
- // let shareObj = {
|
|
|
- // title: "邀请好友领券", // 默认是小程序的名称(可以写slogan等)
|
|
|
- // path: '/pages/index/index?spread='+userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
- // imageUrl: obj.imgSrc,
|
|
|
- // success: function(res){
|
|
|
- // // 转发成功之后的回调
|
|
|
- // if(res.errMsg == 'shareAppMessage:ok'){
|
|
|
- // }
|
|
|
- // },
|
|
|
- // fail: function(){
|
|
|
- // // 转发失败之后的回调
|
|
|
- // if(res.errMsg == 'shareAppMessage:fail cancel'){
|
|
|
- // // 用户取消转发
|
|
|
- // }else if(res.errMsg == 'shareAppMessage:fail'){
|
|
|
- // // 转发失败,其中 detail message 为详细失败信息
|
|
|
- // }
|
|
|
- // }
|
|
|
- // };
|
|
|
- // // 来自页面内的按钮的转发
|
|
|
- // if( options.from == 'button' ){
|
|
|
- // // 此处可以修改 shareObj 中的内容
|
|
|
- // shareObj.path = '/pages/index/index?spread='+userInfo.uid;
|
|
|
- // console.log(shareObj.path,'shareObj.path')
|
|
|
- // }
|
|
|
- // // 返回shareObj
|
|
|
- // return shareObj;
|
|
|
- // },
|
|
|
- // scClick() {
|
|
|
- // let self = this;
|
|
|
- // // #ifdef H5
|
|
|
- // self.imgSrc = self.rwmListArr[self.current].wap_poster;
|
|
|
- // // #endif
|
|
|
- // // #ifdef MP-WEIXIN
|
|
|
- // self.imgSrc = self.rwmListArr[self.current].poster;
|
|
|
- // // #endif
|
|
|
- // },
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- seav() {
|
|
|
- uni.getImageInfo({
|
|
|
- src: this.imgSrc,
|
|
|
- complete: function(result) {
|
|
|
- let path = result.path;
|
|
|
- uni.getSetting({
|
|
|
- success(res) {
|
|
|
- console.log(res)
|
|
|
- if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
- uni.authorize({
|
|
|
- scope: 'scope.writePhotosAlbum',
|
|
|
- success(res) {
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: path,
|
|
|
- complete(result) {}
|
|
|
- });
|
|
|
- },
|
|
|
- complete(result) {
|
|
|
- uni.showToast({
|
|
|
- title: '请先授权保存图片',
|
|
|
- duration: 2000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- obj.seav();
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: path,
|
|
|
- complete(result) {
|
|
|
- uni.showToast({
|
|
|
- title: '保存图片成功!',
|
|
|
- duration: 2000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- // #endif
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- page {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .imgw750h375 {
|
|
|
- width: 100%;
|
|
|
- height: 958rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .matop {
|
|
|
- // margin-top: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .andr-shQ-padL30 {
|
|
|
- // padding-left: 30rpx;
|
|
|
- }
|
|
|
+ async createPoster() {
|
|
|
+ let that = this
|
|
|
+ // 获取设备信息,主要获取宽度,赋值给canvasW 也就是宽度:100%
|
|
|
+ this.SystemInfo = await this.getSystemInfo();
|
|
|
+ // 获取商品主图,二维码信息,APP端会返回图片的本地路径(H5端只能返回原路径)
|
|
|
+ this.goodsImg = await this.getImageInfo('/static/img/sharebase.png');
|
|
|
+ this.ewmImg = await this.getImageInfo(this.erweimasrc);
|
|
|
+ // this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
|
|
|
+ this.ratio = this.SystemInfo.windowWidth / 750;
|
|
|
+ this.canvasW = 600 * this.ratio;
|
|
|
+ this.canvasH = 1066 * this.ratio;
|
|
|
+ this.ewmW = 250 * this.ratio;
|
|
|
+ console.log(this.canvasH, 'this.canvasH')
|
|
|
+ // this.canvasH = this.goodsImg.height + this.ewmW + 200; // 画布高度 = 主图高度+二维码高度 + 文字图片的间距(大概50)
|
|
|
|
|
|
- .andr-shQ-padR30 {
|
|
|
- // padding-right: 30rpx;
|
|
|
- }
|
|
|
+ // 如果主图,二维码图片,设备信息都获取成功,开始绘制海报,这里需要用setTimeout延时绘制,否则可能会出现图片不显示。
|
|
|
+ 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) // fillRect(x,y,宽度,高度)
|
|
|
|
|
|
- .andr-shQ-Flex {
|
|
|
- // display: flex;
|
|
|
- }
|
|
|
+ // 绘制商品主图,二维码
|
|
|
+ ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
|
|
|
+ .canvasH) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
|
|
|
+ ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2),this.canvasH - 85*this.ratio - this.ewmW,
|
|
|
+ this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度,二维码的宽,高)
|
|
|
|
|
|
- .andr-shQ-FlexDirC {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+ // 3、绘制商品标题,多余文字自动换行
|
|
|
+ ctx.setFontSize(16); // setFontSize() 设置字体字号
|
|
|
+ ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
|
|
|
|
|
|
- .andr-shQ-w100B {
|
|
|
- // width: 100%;
|
|
|
- }
|
|
|
+ /* str 这段代码是我百度找的,参考别人的。canvas不能自动换行,需要自行计算 */
|
|
|
+ // let _strlineW = 0;
|
|
|
+ // let _strLastIndex = 0; //每次开始截取的字符串的索引
|
|
|
+ // let _strHeight = this.canvasW +20; //绘制字体距离canvas顶部的初始高度
|
|
|
+ // let _num = 1;
|
|
|
+ // for (let i = 0; i < this.title.length; i++) {
|
|
|
+ // _strlineW += ctx.measureText(this.title[i]).width;
|
|
|
+ // if (_strlineW > this.canvasW-155) {
|
|
|
+ // if(_num == 2 && 2){
|
|
|
+ // //文字换行数量大于二进行省略号处理
|
|
|
+ // ctx.fillText(this.title.substring(_strLastIndex, i-5)+'...', 40, _strHeight);
|
|
|
+ // _strlineW = 0;
|
|
|
+ // _strLastIndex = i;
|
|
|
+ // _num++;
|
|
|
+ // break;
|
|
|
+ // }else{
|
|
|
+ // ctx.fillText(this.title.substring(_strLastIndex, i), 40, _strHeight);
|
|
|
+ // _strlineW = 0;
|
|
|
+ // _strHeight += 20;
|
|
|
+ // _strLastIndex = i;
|
|
|
+ // _num++;
|
|
|
+ // }
|
|
|
+ // }else if (i == this.title.length - 1) {
|
|
|
+ // ctx.fillText(this.title.substring(_strLastIndex, i + 1), 40, _strHeight);
|
|
|
+ // _strlineW = 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ /* end */
|
|
|
|
|
|
- .andr-shQ-JusCC {
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ // ctx.setFontSize(16) // 字号
|
|
|
+ // ctx.setFillStyle('#e31d1a') // 颜色
|
|
|
+ // ctx.fillText('¥'+this.price, 10, this.canvasW +75); // (文字,x,y)
|
|
|
+ // ctx.setFontSize(12)
|
|
|
+ // ctx.setFillStyle('#b8b8b8')
|
|
|
+ // ctx.fillText('原价¥'+this.Oldprice, 100, this.canvasW +75);
|
|
|
|
|
|
- .andr-shQ-marginT30 {
|
|
|
- // margin-top: 30rpx;
|
|
|
- }
|
|
|
|
|
|
- .andr-shQ-bgc06B163 {
|
|
|
- background-color: $base-color;
|
|
|
- }
|
|
|
+ // 邀请信息
|
|
|
+ // ctx.setFontSize(16)
|
|
|
+ // ctx.setFillStyle('#333')
|
|
|
+ // ctx.fillText('长按二维码立即预约', this.ewmW + 40, this.canvasW +100);
|
|
|
|
|
|
- .andr-shQ-cFFF {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ // ctx.setFontSize(16)
|
|
|
+ // ctx.setFillStyle('#333')
|
|
|
+ // ctx.fillText('分享自小程序', this.ewmW + 40, this.canvasW +120);
|
|
|
+ ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
|
|
|
+ console.log(ret)
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '生成成功!',
|
|
|
+ });
|
|
|
+ that.fina = true
|
|
|
+ uni.canvasToTempFilePath({ // 保存canvas为图片
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ quality: 1,
|
|
|
+ fileType: 'jpg',
|
|
|
+ complete: function(res) {
|
|
|
+ // 在H5平台下,tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
|
|
|
+ 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')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取图片信息
|
|
|
+ getImageInfo(image) {
|
|
|
+ return new Promise((req, rej) => {
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: image,
|
|
|
+ success: function(res) {
|
|
|
+ req(res)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- .andr-shQ-bdR50 {
|
|
|
- border-radius: 50rpx;
|
|
|
+ // 获取设备信息
|
|
|
+ getSystemInfo() {
|
|
|
+ return new Promise((req, rej) => {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ 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>
|
|
|
|
|
|
- .andr-shQ-h86 {
|
|
|
- height: 86rpx;
|
|
|
+<style lang="scss">
|
|
|
+ .hb {
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
-
|
|
|
- .andr-shQ-AIC {
|
|
|
- align-items: center;
|
|
|
+ .qrimg {
|
|
|
+ position: absolute;
|
|
|
+ left: -9999rpx;
|
|
|
+ top: -9999rpx;
|
|
|
}
|
|
|
|
|
|
- .baocun {
|
|
|
- color: #ffffff;
|
|
|
- background: $base-color;
|
|
|
+ button {
|
|
|
+ height: 88upx;
|
|
|
+ background-color: #feca00;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 44upx;
|
|
|
text-align: center;
|
|
|
- width: 80%;
|
|
|
- margin: 50rpx auto;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 0rpx 0rpx !important;
|
|
|
- margin: 0rpx auto;
|
|
|
- margin-bottom: 100rpx;
|
|
|
+ line-height: 88upx;
|
|
|
+ width: 60%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30upx;
|
|
|
}
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- .cbnagan {
|
|
|
- width: 80%;
|
|
|
- background: $base-color;
|
|
|
- margin: 50rpx auto;
|
|
|
- font-size: 28rpx;
|
|
|
- text-align: center;
|
|
|
+
|
|
|
+ .btm-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ .btn {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 66rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- /* #endif */
|
|
|
</style>
|