Commit a9f20e26 authored by haitao's avatar haitao

fd

parent 2151123d
This diff is collapsed.
<template>
<!-- 商家二维码 -->
<!-- 商家码 -->
<view class="content yocode">
<view class="submitbtn active" @tap="shareQrcode" v-if="!qrShow">生成</view>
<!-- <view class="submitbtn active" @tap="shareFc" v-if="!qrShow">生成</view> -->
<!-- @tap=" saveImage()" -->
<view class="flex_row_c_c modalView" v-if="qrShow" :class="qrShow?'show':''" >
<view class="flex_column">
<!-- backgroundColor-white -->
<view class=" padding1vh border_radius_10px">
<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
<image class="bctpbtns" src="/static/bctp.png" mode="" @tap.prevent.stop="saveImage()"></image>
<image class="fxhbbtns" src="/static/fxhb.png" mode="" @tap.prevent.stop="share()"></image>
</view>
<view class="flex_row marginTop2vh">
<!-- <button type="primary" class="buttons" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
<button type="primary" class="buttons" size="mini" @tap.prevent.stop="hideQr()">关闭</button> -->
<!-- <button type="primary" class="buttons" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
</view>
</view>
</view>
<!-- <button type="primary" class="buttons mt-40 ml-20 mr-20" @tap="shareFc()">生成店铺二维码</button> -->
<view class="hideCanvasView">
<canvas class="hideCanvas"
canvas-id="default_PosterCanvasId"
:style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
</view>
</view>
</template>
<script>
import _app from '@/utils/QS-SharePoster/app.js';
import getSharePoster from '@/utils/QS-SharePoster/QS-SharePoster.js';
// import {usersEquity} from "@/utils/api/partner_center.js";
// import {shareQrcode} from "@/utils/api/user.js"
import {createQrcode as shareQrcode} from "@/utils/api/api.js";
export default {
data() {
return {
poster: {},
qrShow: false,
canvasId: 'default_PosterCanvasId',
type:"1",
url:"",
shopInfo:{},
shop_name:"",
shop_id:0,//url传过来的
}
},
onLoad(opdata) {
this.type = opdata.type;
this.shop_id = opdata.shop_id;
//this.shareFc();//自动生成
this.shopInfo = uni.getStorageSync('userInfo');
this.shop_name = this.shopInfo.shop_name;
this.shareQrcode();
},
methods: {
//生成二维码
async shareQrcode(){
// uni.showLoading({
// title: '加载中'
// });
let res = await shareQrcode({
type: 3,//固定的
//shareid: app.globalData.storeInfo.shop_id
shareid: this.$store.state.userInfo.shop_id,//店铺id
})
if(res.code==0){
this.url = res.data.file;
// let qrcodeurl = window.location.port=="8080"?this.staticUrl1+this.url:this.staticUrl+this.url;
// let qrcodeurl = window.location.port=="8080"?this.staticUrl1+this.url:this.staticUrl1+this.url;
// let qrcodeurl = this.staticUrl1+this.url;
let qrcodeurl = this.staticUrl1+this.url;
this.url = qrcodeurl;
// https://zxluma.jxdsy.cn/attachs/
//console.info(res.data.file,"路径");
// uni.showLoading({
// title: '生成成功'
// });
this.shareFc();
}else{
uni.showLoading({
title: '生成失败'
});
this.$api.msg(res.msg);
}
setTimeout(function () {
uni.hideLoading();
}, 2000);
},
//生成海报
async shareFc() {
//debugger
try {
if (!this.poster.finalPath) {
let backgroundImage;
let rqcodeobj = {}
// 二维码
rqcodeobj = {
text: '开发测试',
size: 150,//bgObj.width*0.2
dx: 380,//bgObj.width*0.05
dy: 765//bgObj.height - bgObj.width*0.25
}
//计算名称的x轴
let len = this.shop_name.length;
let cha = 0;//差值
let dxsss = 0;//xy 坐标
if(len<=10){
//小于
cha = 10-len;
dxsss = 160 + cha*12;
}else{
//大于
cha = len-10;
dxsss = 160 - cha*12;
}
console.log("计算出来的dx",dxsss);
const d = await getSharePoster({
// backgroundImage:"/static/news/sjrwm.png",
backgroundImage:this.statictowUrl+"static/applet5/images/uts/sjrwm.png",
//暂时使用这个
// backgroundImage:"http://q37tb0wtc.bkt.clouddn.com/sjrwm.png",
// backgroundImage:"https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super",
// backgroundImage:"https://luma.jxdsy.cn/attachs/2019/07/29/thumb_5d3ecaa81b681.jpg",
type: 'testShareType',
posterCanvasId: this.canvasId,
// qrCodeArray: ({bgObj, type, bgScale}) => {
// return [rqcodeobj]
// },
imagesArray: ({bgObj, type, bgScale}) => { //接收的第一个参数为背景图片的信息, 第二个参数是自定义标识(感觉这里用不到), 图片为示例图片
const dx = bgObj.width*0.3;
return [
//二维码
//二维码放进去
{
url: this.url,// //"https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?qua=high&where=super",//
dx: 155,//bgObj.width*0.05
dy: 350,//bgObj.height - bgObj.width*0.25
dWidth: 250, // 因为设置了圆形图片 所以要乘以2
dHeight: 250
},
]
},
textArray: ({bgObj, type, bgScale}) => {
const fontSize = bgObj.width*0.045;
const lineHeight = bgObj.height*0.04;
return [
/**
* 商家名称居中 10个字 160/640 刚刚好
* 11个字
*
* 10个以后 每多加一个字 大概要 160- 多出来的个数- 12
*
*
* 10个以下 每少一个字 大概要 160 + 12
*
* ***/
// 文字 先干了
{
text: this.shop_name,//,`测试商家名称测试商家是遭`,//10个字正好
fontWeight: 'bold',
size: 24,
color: '#ffffff',
alpha: 1,
textAlign: 'left',
textBaseline: 'middle',
infoCallBack(textLength) {
//dx 160是侧面对齐
return {
dx: dxsss,//136,//bgObj.width - textLength - fontSize
dy:635 //bgObj.height - lineHeight*2
}
}
},
]
},
setCanvasWH: ({bgObj, type, bgScale}) => { // 为动态设置画布宽高的方法,
this.poster = bgObj;
},
setDraw: ({Context, bgObj, type, bgScale}) => {
// Context.setFillStyle('black');
// Context.setGlobalAlpha(0.3);
// Context.fillRect(0, bgObj.height - bgObj.height*0.2, bgObj.width, bgObj.height*0.2);
},
});
console.log('海报生成成功, 临时路径: ' + d.poster.tempFilePath)
this.poster.finalPath = d.poster.tempFilePath;
console.log(this.poster.finalPath)
}
this.qrShow = true;
} catch (e) {
_app.hideLoading();
_app.showToast(JSON.stringify(e));
console.log(JSON.stringify(e));
console.log('海报生成成功, 临时路径: ' + d.poster.tempFilePath)
}
},
saveImage() {
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: this.poster.finalPath,
success(res) {
_app.showToast('保存成功');
}
})
// #endif
// #ifdef H5
_app.showToast('保存了');
// #endif
},
share() {
// #ifdef APP-PLUS
_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
// #endif
// #ifndef APP-PLUS
_app.showToast('分享了');
// #endif
},
hideQr() {
this.qrShow = false;
}
}
}
</script>
<style lang="scss">
.hideCanvasView {
position: relative;
}
.hideCanvas {
position: fixed;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
.flex_row_c_c {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.modalView {
width: 100%;
height: 100%;
// position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
outline: 0;
transform: scale(3);
perspective: 2500upx;
// background: rgba(0, 0, 0, 0.6);
transition: all .3s ease-in-out;
pointer-events: none;
backface-visibility: hidden;
z-index: 999;
}
.modalView.show {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.flex_column {
display: flex;
flex-direction: column;
}
.backgroundColor-white {
background-color: white;
}
.border_radius_10px {
border-radius: 10px;
position: relative;
.bctpbtns{
position: absolute;
z-index:10000;
right: 0;
bottom:200px;
width: 57upx;
height: 189upx;
}
.fxhbbtns{
position: absolute;
z-index:10000;
right: 0;
bottom:100px;
width: 57upx;
height: 189upx;
}
}
.padding1vh {
/* padding: 1vh; */
}
.posterImage {
/* width: 60vw; */
width: 100vw;
height: 100vh;
}
.flex_row {
display: flex;
flex-direction: row;
}
.marginTop2vh {
margin-top: 2vh;
}
.buttons{
background: #ff6900!important;
line-height: 40px !important;
}
</style>
......@@ -4,8 +4,8 @@ module.exports = {
//是否为开发调试环境 true为本地环境 false 为正式环境
//isdebug:false,//正式
isdebug:true,//测试
isdebug:false,//正式
// isdebug:true,//测试
// xqdebug:false,//正式权限
xqdebug:true,//发布审核权限 也是测试环境的 主要用于ios
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment