TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[二维码可分享]

Browse Source
This commit is contained in:
张冬雪
2021-10-25 11:50:52 +08:00
parent b80e1d69e4
commit b93f540824
3 changed files with 659 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

528
pages/instrument/Spread.vue
View File

@@ -1,237 +1,325 @@
<template> <template>
<view class="content"> <view class="shareContent">
<view class="codeContent"> <view class="codeContent" v-if="!posterShow" @click="coverCode">
<view class="codeTop"> <view class="codeTop">
<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image> <image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="codeTop-title"> <view class="codeTop-title">
<view class="codeTop-name"> <view class="codeTop-name">{{companyInfo.name}}</view>
{{companyInfo.name}} <view class="codeTop-tips">邀请你 加入链商星球</view>
</view> </view>
<view class="codeTop-tips"> </view>
邀请你 加入链商星球 <view class="codeCode">
</view> <image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
</view> <view class="codeImg-text">点击二维码，进行保存</view>
</view> </view>
<view class="codeCode"> </view>
<image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image> <!-- 分享二维码 -->
<!-- 先默认死数据 --> <canvas class="my-canvas" canvas-id="myCanvass" id="myCanvass" />
<!-- <image class="codeImg-code" src="/static/user/wallet-code.png" mode="aspectFill"></image> -->
<view class="codeImg-text"> <view v-if="posterShow">
长按二维码，进行保存 <view class="posterBack"></view>
</view> <view class="poster">
</view> <view class="poster-img">
</view> <image class="img" :src="posterImg" mode="widthFix" />
<!-- <canvas class="codeImg" canvas-id="qrcodeCard"></canvas> --> </view>
</view> <view class="poster-btn">
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
<view class="operate" @tap="posterShow = false">取消</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
import { companiesCode } from '@/apis/interfaces/store' import {
export default { companiesCode
data() { } from '@/apis/interfaces/store'
return { import {
companyInfo : '' saveImageToPhotosAlbum,
} showToast,
}, downloadFile
created() { } from '@/uni_modules/sakura-canvas/js_sdk/util'
companiesCode().then(res=>{ import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
console.log(res.code) let draw = null
this.companyInfo = res
})
},
methods: {
// 绘制图片
shareCanvas(e){
uni.showLoading({
title: '加载中',
})
// 下载头像 export default {
let avatarImg = new Promise(success=>{ data() {
uni.getImageInfo({ return {
src : this.companyInfo.cover, companyInfo: {},
success : res => { posterShow: false, // 是否显示下载弹窗页面
success(res.path) }
} },
}) onShow() {
}) companiesCode().then(res => {
this.companyInfo = res
})
},
methods: {
// 生成海报
async coverCode() {
let img = this.companyInfo.code
let name = this.companyInfo.name
let avatar = this.companyInfo.cover
// 下载二维码 draw = new Draw({
let codeImg = new Promise(success => { width: 375,
uni.getImageInfo({ height: 460,
src : this.companyInfo.code, canvasId: 'myCanvass',
success : res => { _this: this,
success(res.path) background: {
} type: 'color',
}) color: 'white',
}) w: 375,
h: 460,
},
})
let res = await draw.createdSharePoster(({
bgObj
}) => {
let {
width,
height
} = bgObj
this.Popinvite = bgObj
// 绘制内容
return [
// 用户昵称
{
type: 'text',
x: 120,
y: 80,
zIndex: 99,
w: width - (20 * 2),
text: name,
color: '#333',
font: {
size: 20
}
},
Promise.all([avatarImg, codeImg]).then(res => { // 描述
// 绘制海报 {
const ctx = uni.createCanvasContext('qrcodeCard') type: 'text',
ctx.save() x: 120,
y: 110,
zIndex: 99,
w: width - (20 * 2),
text:'邀请你 加入链商星球',
color: '#999',
font: {
size: 16
}
},
// 绘制背景图片 // 用户头像
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603) {
type: 'image',
x: 24,
y: 60,
src: avatar,
w: 80,
h: 80,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
},
// 绘制头像 // 二维码
ctx.drawImage(res[0], 0, 0, 60, 60) {
type: 'image',
x: 80,
y: 190,
w: 200,
h: 200,
zIndex: 99,
src: img,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
}
]
})
if (!res.success) return
this.posterImg = res.data
this.posterShow = true
},
// 绘制二维码 // 保存图片
ctx.drawImage(res[1], 140, 250, 110, 110) async saveImage() {
let {
// 文字 posterImg
ctx.setFontSize(16) } = this
ctx.fillText(this.companyInfo.name, 194, 180 , 270) let res = await saveImageToPhotosAlbum(posterImg)
if (!res.success) return
ctx.setFontSize(16) showToast('保存成功,去相册分享给朋友吧')
ctx.fillText('邀请你加入易货平台', 194, 180 , 270) this.posterShow = false
}
ctx.save(); }
ctx.beginPath(); //开始绘制 }
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
ctx.clip();
// 保存图片
ctx.draw(true, () => {
uni.hideLoading()
uni.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success : res=>{
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
uni.showToast({
title: '分享海报已保存至相册',
icon : 'none'
})
}else{
uni.hideLoading()
}
},
fail : err=>{
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
uni.showModal({
title : '提示',
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
confirmColor: '#d82526',
confirmText : '去设置',
success : res=>{
if (res.confirm){
uni.openSetting()
}
}
})
}
}
})
}
})
})
}).catch(err=>{
uni.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .shareContent {
background: #7c52fc; background: #7c52fc;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
.codeContent { .codeContent {
position: relative; position: relative;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
.codeTop {
position: absolute;
left: 5%;
top: 240rpx;
width: 90%;
background-color: #FFFFFF;
border-radius: 30rpx;
padding: 0 50rpx;
box-sizing: border-box;
box-shadow: 0 0 40rpx rgba(94,59,201,.5);
z-index: 2;
display: flex;
height: 200rpx;
.codeTop-cover {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin: 40rpx 30rpx 0 0;
border: 4rpx solid #FFFFFF;
box-shadow: 0 5rpx 10rpx rgba(94,59,201,.3);
}
.codeTop-title {
padding-top: 50rpx;
.codeTop-name {
font-weight: 600;
font-size: 36rpx;
margin-bottom: 10rpx;
}
.codeTop-tips {
color: $text-gray-m;
}
}
}
.codeCode {
background-color: #FFFFFF;
box-shadow: 0 0 40rpx rgba(27, 0, 111,.4);
position: absolute;
padding: 400rpx 0 200rpx;
left: 10%;
top: 160rpx;
width: 80%;
border-radius: 30rpx;
z-index: 1;
text-align: center;
.codeImg-code {
width: 360rpx;
height: 360rpx;
margin: 0 0 20rpx;
border: 2px solid #f3f3f3;
padding: 30rpx;
box-sizing: border-box;
}
.codeImg-text {
font-size: 32rpx;
color: $text-color;
}
}
}
.codeBnt { .codeTop {
background-color: #7c52fc; position: absolute;
text-align: center; left: 5%;
border-radius: 10rpx; top: 240rpx;
line-height: 90rpx; width: 90%;
font-weight: 600; background-color: #FFFFFF;
font-size: $title-size; border-radius: 30rpx;
color: #FFFFFF; padding: 0 50rpx;
box-shadow: 2px 0 5px rgb(124, 82, 252); box-sizing: border-box;
position: relative; box-shadow: 0 0 40rpx rgba(94, 59, 201, .5);
} z-index: 2;
display: flex;
height: 200rpx;
/* canvas */ .codeTop-cover {
.codeImg { width: 120rpx;
position: absolute; height: 120rpx;
left: -1000%; border-radius: 50%;
height: 603px; margin: 40rpx 30rpx 0 0;
width: 375px; border: 4rpx solid #FFFFFF;
background: white; box-shadow: 0 5rpx 10rpx rgba(94, 59, 201, .3);
} }
.codeTop-title {
padding-top: 50rpx;
.codeTop-name {
font-weight: 600;
font-size: 36rpx;
margin-bottom: 10rpx;
}
.codeTop-tips {
color: $text-gray-m;
}
}
}
.codeCode {
background-color: #FFFFFF;
box-shadow: 0 0 40rpx rgba(27, 0, 111, .4);
position: absolute;
padding: 400rpx 0 200rpx;
left: 10%;
top: 160rpx;
width: 80%;
border-radius: 30rpx;
z-index: 1;
text-align: center;
.codeImg-code {
width: 360rpx;
height: 360rpx;
margin: 0 0 20rpx;
border: 2px solid #f3f3f3;
padding: 30rpx;
box-sizing: border-box;
}
.codeImg-text {
font-size: 32rpx;
color: $text-color;
position: relative;
z-index: 1;
}
}
}
.codeBnt {
background-color: #7c52fc;
text-align: center;
border-radius: 10rpx;
line-height: 90rpx;
font-weight: 600;
font-size: $title-size;
color: #FFFFFF;
box-shadow: 2px 0 5px rgb(124, 82, 252);
position: relative;
}
/* canvas */
.codeImg {
position: absolute;
left: -1000%;
height: 603px;
width: 375px;
background: white;
}
// canvas
.my-canvas {
width: 375px;
height: 667px;
position: fixed;
top: -99999999999rpx;
left: -99999999999rpx;
z-index: -99999999999;
opacity: 0;
}
.posterBack {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
left: 0;
top: 0;
}
.poster {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999999999999;
&-img {
width: 580rpx;
position: relative;
margin: 70rpx auto 20rpx;
.img {
width: 100%;
}
}
&-btn {
padding: 0 $padding * 2;
.operate {
width: 80%;
margin-bottom: 20rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
margin-left: 10%;
display: inline-block;
text-align: center;
color: #fff;
&-cancel {
background-color: $text-price;
}
}
}
}
</style> </style>

363
unpackage/dist/dev/app-plus/app-service.js vendored
View File

@@ -43708,62 +43708,132 @@ var render = function() {
var _c = _vm._self._c || _h var _c = _vm._self._c || _h
return _c( return _c(
"view", "view",
{ staticClass: _vm._$s(0, "sc", "content"), attrs: { _i: 0 } }, { staticClass: _vm._$s(0, "sc", "shareContent"), attrs: { _i: 0 } },
[ [
_c( _vm._$s(1, "i", !_vm.posterShow)
"view", ? _c(
{ staticClass: _vm._$s(1, "sc", "codeContent"), attrs: { _i: 1 } },
[
_c(
"view", "view",
{ staticClass: _vm._$s(2, "sc", "codeTop"), attrs: { _i: 2 } }, {
staticClass: _vm._$s(1, "sc", "codeContent"),
attrs: { _i: 1 },
on: { click: _vm.coverCode }
},
[ [
_c("image", {
staticClass: _vm._$s(3, "sc", "codeTop-cover"),
attrs: {
src: _vm._$s(3, "a-src", _vm.companyInfo.cover),
_i: 3
}
}),
_c( _c(
"view", "view",
{ { staticClass: _vm._$s(2, "sc", "codeTop"), attrs: { _i: 2 } },
staticClass: _vm._$s(4, "sc", "codeTop-title"),
attrs: { _i: 4 }
},
[ [
_c("image", {
staticClass: _vm._$s(3, "sc", "codeTop-cover"),
attrs: {
src: _vm._$s(3, "a-src", _vm.companyInfo.cover),
_i: 3
}
}),
_c( _c(
"view", "view",
{ {
staticClass: _vm._$s(5, "sc", "codeTop-name"), staticClass: _vm._$s(4, "sc", "codeTop-title"),
attrs: { _i: 5 } attrs: { _i: 4 }
}, },
[_vm._v(_vm._$s(5, "t0-0", _vm._s(_vm.companyInfo.name)))] [
), _c(
"view",
{
staticClass: _vm._$s(5, "sc", "codeTop-name"),
attrs: { _i: 5 }
},
[
_vm._v(
_vm._$s(5, "t0-0", _vm._s(_vm.companyInfo.name))
)
]
),
_c("view", {
staticClass: _vm._$s(6, "sc", "codeTop-tips"),
attrs: { _i: 6 }
})
]
)
]
),
_c(
"view",
{ staticClass: _vm._$s(7, "sc", "codeCode"), attrs: { _i: 7 } },
[
_c("image", {
staticClass: _vm._$s(8, "sc", "codeImg-code"),
attrs: {
src: _vm._$s(8, "a-src", _vm.companyInfo.code),
_i: 8
}
}),
_c("view", { _c("view", {
staticClass: _vm._$s(6, "sc", "codeTop-tips"), staticClass: _vm._$s(9, "sc", "codeImg-text"),
attrs: { _i: 6 } attrs: { _i: 9 }
}) })
] ]
) )
] ]
),
_c(
"view",
{ staticClass: _vm._$s(7, "sc", "codeCode"), attrs: { _i: 7 } },
[
_c("image", {
staticClass: _vm._$s(8, "sc", "codeImg-code"),
attrs: { src: _vm._$s(8, "a-src", _vm.companyInfo.code), _i: 8 }
}),
_c("view", {
staticClass: _vm._$s(9, "sc", "codeImg-text"),
attrs: { _i: 9 }
})
]
) )
] : _vm._e(),
) _c("canvas", {
staticClass: _vm._$s(10, "sc", "my-canvas"),
attrs: { id: "myCanvass", _i: 10 }
}),
_vm._$s(11, "i", _vm.posterShow)
? _c("view", [
_c("view", {
staticClass: _vm._$s(12, "sc", "posterBack"),
attrs: { _i: 12 }
}),
_c(
"view",
{ staticClass: _vm._$s(13, "sc", "poster"), attrs: { _i: 13 } },
[
_c(
"view",
{
staticClass: _vm._$s(14, "sc", "poster-img"),
attrs: { _i: 14 }
},
[
_c("image", {
staticClass: _vm._$s(15, "sc", "img"),
attrs: {
src: _vm._$s(15, "a-src", _vm.posterImg),
_i: 15
}
})
]
),
_c(
"view",
{
staticClass: _vm._$s(16, "sc", "poster-btn"),
attrs: { _i: 16 }
},
[
_c("view", {
staticClass: _vm._$s(17, "sc", "operate operate-cancel"),
attrs: { _i: 17 },
on: { click: _vm.saveImage }
}),
_c("view", {
staticClass: _vm._$s(18, "sc", "operate"),
attrs: { _i: 18 },
on: {
click: function($event) {
_vm.posterShow = false
}
}
})
]
)
]
)
])
: _vm._e()
] ]
) )
} }
@@ -43797,7 +43867,7 @@ __webpack_require__.r(__webpack_exports__);
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
/* WEBPACK VAR INJECTION */(function(__f__) {Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0; Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _regenerator = _interopRequireDefault(__webpack_require__(/*! ./node_modules/@babel/runtime/regenerator */ 38));
@@ -43825,120 +43895,135 @@ __webpack_require__.r(__webpack_exports__);
var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375); //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var _default = { data: function data() {return { companyInfo: '' };}, created: function created() {var _this = this;(0, _store.companiesCode)().then(function (res) {__f__("log", res.code, " at pages/instrument/Spread.vue:38");_this.companyInfo = res;});}, methods: { // 绘制图片
shareCanvas: function shareCanvas(e) {var _this2 = this;uni.showLoading({ title: '加载中' }); // 下载头像
var avatarImg = new Promise(function (_success) {uni.getImageInfo({ src: _this2.companyInfo.cover, success: function success(res) {_success(res.path);} });});
// 下载二维码
var codeImg = new Promise(function (_success2) {
uni.getImageInfo({
src: _this2.companyInfo.code,
success: function success(res) {
_success2(res.path);
} });
});
Promise.all([avatarImg, codeImg]).then(function (res) {
// 绘制海报
var ctx = uni.createCanvasContext('qrcodeCard');
ctx.save();
// 绘制背景图片
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603);
// 绘制头像
ctx.drawImage(res[0], 0, 0, 60, 60);
// 绘制二维码
ctx.drawImage(res[1], 140, 250, 110, 110);
// 文字 var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375);
ctx.setFontSize(16);
ctx.fillText(_this2.companyInfo.name, 194, 180, 270);
ctx.setFontSize(16);
ctx.fillText('邀请你加入易货平台', 194, 180, 270);
ctx.save(); var _util = __webpack_require__(/*! @/uni_modules/sakura-canvas/js_sdk/util */ 64);
ctx.beginPath(); //开始绘制
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
ctx.clip();
// 保存图片
ctx.draw(true, function () {
uni.hideLoading();
uni.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: function success(res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function success(res) {
if (res.errMsg == "saveImageToPhotosAlbum:ok") {
uni.showToast({
title: '分享海报已保存至相册',
icon: 'none' });
} else {
uni.hideLoading();
}
},
fail: function fail(err) {
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
uni.showModal({
title: '提示',
content: '暂未授权小程序写入您的相册，无法存储二维码海报',
confirmColor: '#d82526',
confirmText: '去设置',
success: function success(res) {
if (res.confirm) {
uni.openSetting();
}
} });
}
} });
} }); var _draw = _interopRequireDefault(__webpack_require__(/*! @/uni_modules/sakura-canvas/js_sdk/draw */ 66));function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {try {var info = gen[key](arg);var value = info.value;} catch (error) {reject(error);return;}if (info.done) {resolve(value);} else {Promise.resolve(value).then(_next, _throw);}}function _asyncToGenerator(fn) {return function () {var self = this,args = arguments;return new Promise(function (resolve, reject) {var gen = fn.apply(self, args);function _next(value) {asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);}function _throw(err) {asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);}_next(undefined);});};}
var draw = null;var _default =
}); {
data: function data() {
return {
companyInfo: {},
posterShow: false // 是否显示下载弹窗页面
};
},
onShow: function onShow() {var _this = this;
(0, _store.companiesCode)().then(function (res) {
_this.companyInfo = res;
});
},
methods: {
// 生成海报
coverCode: function coverCode() {var _this2 = this;return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee() {var img, name, avatar, res;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:
img = _this2.companyInfo.code;
name = _this2.companyInfo.name;
avatar = _this2.companyInfo.cover;
}).catch(function (err) { draw = new _draw.default({
uni.showToast({ width: 375,
title: '海报下载，请检查网络', height: 460,
icon: 'none' }); canvasId: 'myCanvass',
_this: _this2,
background: {
type: 'color',
color: 'white',
w: 375,
h: 460 } });_context.next = 6;return (
});
draw.createdSharePoster(function (_ref)
{var bgObj = _ref.bgObj;var
width =
bgObj.width,height = bgObj.height;
_this2.Popinvite = bgObj;
// 绘制内容
return [
// 用户昵称
{
type: 'text',
x: 120,
y: 80,
zIndex: 99,
w: width - 20 * 2,
text: name,
color: '#333',
font: {
size: 20 } },
// 描述
{
type: 'text',
x: 120,
y: 110,
zIndex: 99,
w: width - 20 * 2,
text: '邀请你 加入链商星球',
color: '#999',
font: {
size: 16 } },
// 用户头像
{
type: 'image',
x: 24,
y: 60,
src: avatar,
w: 80,
h: 80,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
},
// 二维码
{
type: 'image',
x: 80,
y: 190,
w: 200,
h: 200,
zIndex: 99,
src: img,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
}];
}));case 6:res = _context.sent;if (
res.success) {_context.next = 9;break;}return _context.abrupt("return");case 9:
_this2.posterImg = res.data;
_this2.posterShow = true;case 11:case "end":return _context.stop();}}}, _callee);}))();
},
// 保存图片
saveImage: function saveImage() {var _this3 = this;return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee2() {var posterImg, res;return _regenerator.default.wrap(function _callee2$(_context2) {while (1) {switch (_context2.prev = _context2.next) {case 0:
posterImg =
_this3.posterImg;_context2.next = 3;return (
(0, _util.saveImageToPhotosAlbum)(posterImg));case 3:res = _context2.sent;if (
res.success) {_context2.next = 6;break;}return _context2.abrupt("return");case 6:
(0, _util.showToast)('保存成功,去相册分享给朋友吧');
_this3.posterShow = false;case 8:case "end":return _context2.stop();}}}, _callee2);}))();
} } };exports.default = _default; } } };exports.default = _default;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/vue-cli-plugin-uni/lib/format-log.js */ 24)["default"]))
/***/ }), /***/ }),
/* 375 */ /* 375 */

146
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long