|
|
@@ -1,105 +1,106 @@
|
|
|
<template>
|
|
|
- <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="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 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>
|
|
|
- <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 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>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
+ mapState
|
|
|
} from 'vuex';
|
|
|
import {
|
|
|
- getUserInfo
|
|
|
+ spreadBanner
|
|
|
} from '@/api/user.js';
|
|
|
-
|
|
|
- var that
|
|
|
+ import {
|
|
|
+ interceptor,
|
|
|
+ saveUrl
|
|
|
+ } from '@/utils/loginUtils';
|
|
|
+ // #ifdef H5
|
|
|
+ import {
|
|
|
+ weixindata
|
|
|
+ } from '@/utils/wxAuthorized';
|
|
|
+ // #endif
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- 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,
|
|
|
+ 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();
|
|
|
}
|
|
|
},
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ let obj = this;
|
|
|
+ //监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次
|
|
|
+ setTimeout(function() {
|
|
|
+ obj.loadCodeList();
|
|
|
+ uni.stopPullDownRefresh(); //停止下拉刷新动画
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
computed: {
|
|
|
- ...mapState(['baseURL', 'urlFile']),
|
|
|
+ ...mapState(['weichatObj', 'baseURL', 'urlFile']),
|
|
|
...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
- const obj = this;
|
|
|
- if (!this.userInfo.uid) {
|
|
|
- getUserInfo({}).then(e => {
|
|
|
- // 保存返回用户数据
|
|
|
- obj.setUserInfo(e.data);
|
|
|
- //成功跳转首页
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.val = 'http://www.tingjiu.liuniukj.com/index/#/pages/public/register?spread=' + this.userInfo
|
|
|
- .phone
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
+ comfirm(text) {
|
|
|
+ // let text = this.userInfo.uid
|
|
|
+ console.log(text);
|
|
|
+ const result = this.uniCopy(text);
|
|
|
+ if (result === false) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '不支持'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // this.$refs.popup.close();
|
|
|
+ },
|
|
|
uniCopy(content) {
|
|
|
/**
|
|
|
* 小程序端 和 app端的复制逻辑
|
|
|
@@ -134,261 +135,212 @@
|
|
|
return result;
|
|
|
// #endif
|
|
|
},
|
|
|
- comfirm() {
|
|
|
- const result = this.uniCopy(this.val);
|
|
|
- if (result === false) {
|
|
|
- uni.showToast({
|
|
|
- title: '不支持'
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '复制成功',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
+ 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();
|
|
|
+ });
|
|
|
},
|
|
|
- qrR(res) {
|
|
|
- this.erweimasrc = res
|
|
|
- console.log(res, 'erweima');
|
|
|
- this.createPoster()
|
|
|
+ currentChange(e) {
|
|
|
+ this.current = e.detail.current;
|
|
|
},
|
|
|
- async createPoster() {
|
|
|
- let that = this
|
|
|
- // 获取设备信息,主要获取宽度,赋值给canvasW 也就是宽度:100%
|
|
|
- this.SystemInfo = await this.getSystemInfo();
|
|
|
- // 获取商品主图,二维码信息,APP端会返回图片的本地路径(H5端只能返回原路径)
|
|
|
- this.goodsImg = await this.getImageInfo('/static/img/sharebase.jpg');
|
|
|
- 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 = 150 * this.ratio;
|
|
|
- this.ewmBg = 180 * this.ratio;
|
|
|
- console.log(this.canvasH, 'this.canvasH')
|
|
|
- // this.canvasH = this.goodsImg.height + this.ewmW + 200; // 画布高度 = 主图高度+二维码高度 + 文字图片的间距(大概50)
|
|
|
+ // 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>
|
|
|
|
|
|
- // 如果主图,二维码图片,设备信息都获取成功,开始绘制海报,这里需要用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,宽度,高度)
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- // 绘制商品主图,二维码
|
|
|
- ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
|
|
|
- .canvasH) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
|
|
|
- ctx.fillRect((this.canvasW / 2 - this.ewmBg / 2), this.canvasH - 70 *
|
|
|
- this.ratio - this.ewmBg, this.ewmBg, this.ewmBg) // fillRect(x,y,宽度,高度)
|
|
|
+ .imgw750h375 {
|
|
|
+ width: 100%;
|
|
|
+ height: 958rpx;
|
|
|
+ }
|
|
|
|
|
|
- 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,绘制图像的宽度,绘制图像的高度,二维码的宽,高)
|
|
|
+ .matop {
|
|
|
+ // margin-top: 40rpx;
|
|
|
+ }
|
|
|
|
|
|
- // 3、绘制商品标题,多余文字自动换行
|
|
|
- ctx.setFontSize(16); // setFontSize() 设置字体字号
|
|
|
- ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
|
|
|
+ .andr-shQ-padL30 {
|
|
|
+ // padding-left: 30rpx;
|
|
|
+ }
|
|
|
|
|
|
- /* 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-padR30 {
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ }
|
|
|
|
|
|
- // 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-Flex {
|
|
|
+ // display: flex;
|
|
|
+ }
|
|
|
|
|
|
+ .andr-shQ-FlexDirC {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
|
|
|
- // 邀请信息
|
|
|
- // ctx.setFontSize(16)
|
|
|
- // ctx.setFillStyle('#333')
|
|
|
- // ctx.fillText('长按二维码立即预约', this.ewmW + 40, this.canvasW +100);
|
|
|
+ .andr-shQ-w100B {
|
|
|
+ // width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- // 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-JusCC {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
|
|
|
- // 获取设备信息
|
|
|
- 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
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ .andr-shQ-marginT30 {
|
|
|
+ // margin-top: 30rpx;
|
|
|
}
|
|
|
-</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
- .hb {
|
|
|
- margin: auto;
|
|
|
+ .andr-shQ-bgc06B163 {
|
|
|
+ background-color: $base-color;
|
|
|
}
|
|
|
|
|
|
- .qrimg {
|
|
|
- position: absolute;
|
|
|
- left: -9999rpx;
|
|
|
- top: -9999rpx;
|
|
|
+ .andr-shQ-cFFF {
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
- button {
|
|
|
- height: 88upx;
|
|
|
- background-color: #feca00;
|
|
|
- color: #fff;
|
|
|
- border-radius: 44upx;
|
|
|
- text-align: center;
|
|
|
- line-height: 88upx;
|
|
|
- width: 60%;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 30upx;
|
|
|
+ .andr-shQ-bdR50 {
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .andr-shQ-h86 {
|
|
|
+ height: 86rpx;
|
|
|
}
|
|
|
|
|
|
- .btm-btn {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- width: 750rpx;
|
|
|
- height: 200rpx;
|
|
|
- display: flex;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
+ .andr-shQ-AIC {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 26rpx;
|
|
|
+ .baocun {
|
|
|
+ color: #ffffff;
|
|
|
+ background: $base-color;
|
|
|
+ text-align: center;
|
|
|
+ width: 80%;
|
|
|
+ margin: 50rpx auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
|
|
|
- image {
|
|
|
- width: 66rpx;
|
|
|
- height: 66rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ padding: 0rpx 0rpx !important;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
}
|
|
|
+
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .cbnagan {
|
|
|
+ width: 80%;
|
|
|
+ background: $base-color;
|
|
|
+ margin: 50rpx auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
</style>
|