123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481 |
- <<<<<<< HEAD
- <template>
- <view class="content">
- <!-- <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"
- :loadMake="loadMake"
- :usingComponents="usingComponents"
- @result="qrR"
- />
- </view> -->
- <!-- #ifndef MP-ALIPAY -->
- <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" /> -->
- <!-- #endif -->
- <!-- #ifdef MP-ALIPAY -->
- <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" /> -->
- <!-- #endif -->
- <!-- <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view> -->
- <!-- <view class="tki-qrcode-canvas"> -->
- <image :src="ctxSrc" mode="widthFix" class="tki-qrcode-canvas"></image>
- <!-- </view> -->
- <!-- <view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
- <text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
- </view> -->
- <!-- <view class="share-bottom flex">
- <text>长按二维码下载</text>
- </view> -->
- </view>
- </template>
- <script>
- import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
- import { spreadBanner } from '@/api/shareQrCode.js';
- import { getUserInfo } from '@/api/login.js';
- import { weixindata, shareData, loadShareData } from '@/utils/wxAuthorized.js';
- import { mapState } from 'vuex';
- import { share } from '@/api/wx';
- export default {
- computed: {
- ...mapState(['baseURL', 'urlFile']),
- ...mapState('user', ['userInfo'])
- },
- // components: { tkiQrcode },
- data() {
- return {
- cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
- size: 180, //生成的二维码大小
- unit: 'upx', //大小单位尺寸
- // show: true,//默认使用组件中的image标签显示二维码
- val: '', //要生成的内容
- background: '#ffffff', //二维码背景色
- foreground: '#333333', //二维码前景色
- pdground: '#333333', //二维码角标色
- icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
- iconSize: 40, //二维码图标大小
- lv: 3, //容错级别
- onval: false, //监听val值变化自动重新生成二维码
- loadMake: false, //组件初始化完成后自动生成二维码,val需要有值
- usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
- showLoading: false, //是否显示loading
- loadingText: '二维码生成中', //loading文字
- src: '', // 二维码生成后的图片地址或base64
- ratio: 1, //页面比例用于计算
- ctxSrc: '', //要显示的图片
- loading: true, //是否载入图片中
- canHeight: '',
- canWeidth: '',
- login: false //判断是否登录
- };
- },
- onShow() {
- let obj = this;
- if (!obj.login) {
- // 判断是否已经登录
- getUserInfo()
- .then(e => {
- obj.login = true;
- uni.showLoading({
- title: '邀请图生成中',
- mask: true
- });
- obj.loadCodeList();
- })
- .catch(e => {
- console.log(e);
- });
- }
- },
- // onReady() {
- // let obj = this;
- // let query = uni.createSelectorQuery();
- // // 获取页面比例
- // query
- // .select('.content')
- // .fields(
- // {
- // size: true
- // },
- // e => {
- // // 保存比例
- // this.ratio = e.width / 750;
- // }
- // )
- // .exec();
- // // 获取画布宽高信息
- // query
- // .select('#qrShareBox')
- // .fields(
- // {
- // size: true
- // },
- // e => {
- // obj.canHeight = e.height;
- // obj.canWeidth = e.width;
- // }
- // )
- // .exec({});
- // },
- methods: {
- // 设置分享数据
- setShare() {
- let obj = this;
- // 加载分享数据
- // #ifdef H5
- obj.loadSareData().then(e => {
- weixindata({
- link: obj.ctxSrc, // 分享链接
- imgUrl:obj.baseURL+obj.urlFile+'/img/logo.jpg',
- desc:'欢迎加入满园春',
- title: '满园春线上商城',
- success: function() {},
- fail: function() {}
- });
- });
- // #endif
- },
- loadSareData() {
- if (!shareData) {
- return loadShareData();
- } else {
- return new Promise((resolve, reject) => {
- resolve(shareData);
- });
- }
- },
- loadCodeList() {
- let obj = this;
- // 加载二维码信息
- spreadBanner({
- // // #ifdef MP
- // type: 1
- // // #endif
- })
- .then(e => {
- console.log(e);
- // 保存二维码图片
- // this.src = e.data.real_url;
- obj.ctxSrc = e.data[0].wap_poster;
- // 生成画布
- // this.loadImg(e.data.real_url);
- uni.hideLoading();
- // 加载分享数据
- // obj.setShare()
- })
- .catch(e => {
- console.log(e)
- // uni.showModal({
- // title: '生成失败请刷新页面',
- // showCancel: false
- // });
- uni.hideLoading();
- });
- },
- // 长按画布事件
- alertCanv() {
- uni.showModal({
- title: '请先点击生成图片',
- showCancel: false
- });
- },
- // 生成图片
- showImg() {
- uni.showLoading({
- title: '图片生成中',
- mask: true
- });
- let obj = this;
- //因为和uni.showLoading载入效果冲突需要延迟执行生成图片方法
- setTimeout(function() {
- uni.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: obj.canWeidth,
- height: obj.canHeight,
- destWidth: obj.canWeidth,
- destHeight: obj.canHeight,
- fileType: 'jpg',
- quality: 1,
- canvasId: 'qrShareBox',
- success: res => {
- uni.hideLoading();
- uni.showModal({
- title: '创建成功,长按二维码下载图片',
- showCancel: false
- });
- // 显示生成的图片
- obj.loading = false;
- obj.ctxSrc = res.tempFilePath;
- },
- fail(e) {
- console.log(e);
- }
- });
- }, 50);
- },
- // 开始渲染画布
- loadImg(src) {
- let obj = this;
- const ctxBg = '/static/img/img14.jpg'; //画布背景
- let context = uni.createCanvasContext('qrShareBox');
- const codeSize = this.size * this.ratio; //计算二维码大小
- const codeX = ((523 - this.size) * this.ratio) / 2; //二维码所在x轴位置
- const codeY = 700 * this.ratio; //二维码所在y轴位置
- const codeBoxColor = '#FFFFFF'; //包裹框颜色
- const codeBoxWidht = 0; //包裹边框宽度
- const codeBoxSize = (codeBoxWidht / 2) * this.ratio; //计算二维码白色包裹框大小
- const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
- const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
- const codeBoxEnd = codeSize + codeBoxWidht * this.ratio; //计算包裹框大小
- // const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
- const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 30) * this.ratio; //文字距离上边距高度
- const fontLeft = codeX - 50 * this.ratio; //文字左侧距离
- const fontSize = 14; //文字大小
- const fontText = '邀请人:' + uni.getStorageSync('userInfo').nickname; //文字内容
- // 插入背景图片
- context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
- // // 插入文字
- context.setFontSize(fontSize);
- context.fillText(fontText, fontLeft, fontTop);
- // 插入边框
- context.beginPath();
- context.setLineJoin('round'); //边框类型
- context.setLineWidth(codeBoxWidht * this.ratio);
- context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
- context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
- context.stroke();
- // 插入二维码
- context.drawImage(src, codeX, codeY, codeSize, codeSize);
- // 开始渲染
- context.draw();
- },
- // 創建二维码
- creatQrcode() {
- this.$refs.qrcode._makeCode();
- },
- // 保存二维码到图库
- saveQrcode() {
- this.$refs.qrcode._saveCode();
- },
- // 生成二维码后返回base64
- qrR(res) {
- this.src = res;
- },
- //清空二维码(清空二维码会触发result回调 返回值为空)
- clearQrcode(e) {
- this.$refs.qrcode._clearCode();
- this.val = '';
- }
- }
- };
- </script>
- <style lang="scss">
- .content {
- // padding-top: 30rpx;
- }
- // #qrShareBox {
- // position: absolute;
- // left: -9999rpx;
- // top: -9999rpx;
- // }
- .qrimg {
- position: absolute;
- left: -9999rpx;
- top: -9999rpx;
- }
- .tki-qrcode-canvas {
- width: 750rpx;
- margin: 0 auto;
- }
- .share-bottom {
- width: 560rpx;
- height: 80rpx;
- color: #ffffff;
- background-color: $base-color;
- margin: 0 auto;
- font-size: $font-lg - 2rpx;
- margin-top: 30rpx;
- border-radius: 99rpx;
- justify-content: center;
- &.action-share-bottom {
- background-color: $color-gray;
- }
- }
- </style>
- =======
- <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>
- </view>
- </template>
- <script>
- // import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
- import { getUserInfo,spreadBanner } from '@/api/user.js';
- export default {
- props: {
- qrval: {
- // 要生成的二维码值
- type: String,
- }
- },
- data() {
- return {
- url: '',
- backImg:'',
- userInfo:''
- };
- },
- onLoad() {
- this.spread();
- this.getInfo();
- },
- computed: {
- cpSize() {
- if(this.unit == "upx"){
- return uni.upx2px(this.size)
- }else{
- return this.size
- }
- }
- },
- methods: {
- spread(){
- let obj = this;
- spreadBanner({
- type:2
- }).then(({ data }) => {
- obj.backImg = data[0].wap_poster;
- });
- },
- getInfo(){
- let obj = this;
- getUserInfo({}).then(({ data }) => {
- obj.userInfo = data;
- // obj.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('保存失败')
- }
- })
- }
- }
- })
- },
- //生成二维码
- // make() {
- // let obj = this;
- // uQRCode.make({
- // canvasId: 'qrcode',
- // componentInstance: this,
- // text: obj.url,
- // size: 150,
- // margin: 10,
- // backgroundColor: '#ffffff',
- // foregroundColor: '#000000',
- // fileType: 'png',
- // correctLevel: uQRCode.defaults.correctLevel,
- // success: res => {
- // // console.log(res)
- // }
- // })
- // },
- // 请求载入数据
- // async loadData() {
- // let obj = this;
- // obj.url = 'http://btex.frp.liuniu946.com/?id='+ obj.userInfo.invite_code;
- // obj.make();
- // },
- },
- };
- </script>
- <style lang="scss">
- page{
- width: 100%;
- min-height: 100%;
- .container{
- width: 100%;
- height: 100%;
- }
- }
- .backImg{
- position: absolute;
- width: 100%;
- height: 100%;
- }
- .portrait{
- width: 100%;
- text-align: center;
- padding-top: 80rpx;
- padding-bottom: 30rpx;
- image{
- width: 250rpx;
- height: 250rpx;
- }
- }
- .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>
- >>>>>>> 4114c25969fb9b7b2c1d4af1f04837ed1c250f54
|