[二维码可分享]

pages/instrument/Spread.vue

@@ -1,150 +1,166 @@
 <template>
-    <view class="content">
+	<view class="shareContent">
-        <view class="codeContent">
+		<view class="codeContent" v-if="!posterShow" @click="coverCode">
 			<view class="codeTop">
 				<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
 				<view class="codeTop-title">
-                    <view class="codeTop-name">
+					<view class="codeTop-name">{{companyInfo.name}}</view>
-                        {{companyInfo.name}}
+					<view class="codeTop-tips">邀请你 加入链商星球</view>
-                    </view>
-                    <view class="codeTop-tips">
-                        邀请你 加入链商星球
-                    </view>
 				</view>
 			</view>
 			<view class="codeCode">
 				<image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
-                <!-- 先默认死数据 -->
+				<view class="codeImg-text">点击二维码，进行保存</view>
-                <!-- <image class="codeImg-code" src="/static/user/wallet-code.png" mode="aspectFill"></image> -->
+			</view>
-                <view class="codeImg-text">
+		</view>
-                    长按二维码，进行保存
+		<!-- 分享二维码 -->
+		<canvas class="my-canvas" canvas-id="myCanvass" id="myCanvass" />
+
+		<view v-if="posterShow">
+			<view class="posterBack"></view>
+			<view class="poster">
+				<view class="poster-img">
+					<image class="img" :src="posterImg" mode="widthFix" />
+				</view>
+				<view class="poster-btn">
+					<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
+					<view class="operate" @tap="posterShow = false">取消</view>
 				</view>
 			</view>
 		</view>
-        <!-- <canvas class="codeImg" canvas-id="qrcodeCard"></canvas> -->
 	</view>
 </template>
 
 <script>
-    import { companiesCode } from '@/apis/interfaces/store'
+	import {
+		companiesCode
+	} from '@/apis/interfaces/store'
+	import {
+		saveImageToPhotosAlbum,
+		showToast,
+		downloadFile
+	} from '@/uni_modules/sakura-canvas/js_sdk/util'
+	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
+	let draw = null
+
 	export default {
 		data() {
 			return {
-    			companyInfo : ''
+				companyInfo: {},
+				posterShow: false, // 是否显示下载弹窗页面
 			}
 		},
-        created() {
+		onShow() {
 			companiesCode().then(res => {
-                console.log(res.code)
 				this.companyInfo = res
 			})
 		},
 		methods: {
-    		// 绘制图片
+			// 生成海报
-            shareCanvas(e){
+			async coverCode() {
-                uni.showLoading({
+				let img = this.companyInfo.code
-                    title: '加载中',
+				let name = this.companyInfo.name
+				let avatar = this.companyInfo.cover
+				
+				draw = new Draw({
+					width: 375,
+					height: 460,
+					canvasId: 'myCanvass',
+					_this: this,
+					background: {
+						type: 'color',
+						color: 'white',
+						w: 375,
+						h: 460,
+					},
 				})
-                
+				let res = await draw.createdSharePoster(({
-                // 下载头像
+					bgObj
-                let avatarImg = new Promise(success=>{
+				}) => {
-                    uni.getImageInfo({
+					let {
-                        src     : this.companyInfo.cover,
+						width,
-                        success : res => {
+						height
-                            success(res.path)
+					} = bgObj
-                        }
+					this.Popinvite = bgObj
-                    })
+					// 绘制内容
-                })
+					return [
-                
+						// 用户昵称
-                // 下载二维码
+						{
-                let codeImg = new Promise(success => {
+							type: 'text',
-                    uni.getImageInfo({
+							x: 120,
-                        src     : this.companyInfo.code,
+							y: 80,
-                        success : res => {
+							zIndex: 99,
-                            success(res.path)
+							w: width - (20 * 2),
-                        }
+							text: name,
-                    })
+							color: '#333',
-                })
+							font: {
-                
+								size: 20
-                Promise.all([avatarImg, codeImg]).then(res => {
-                    // 绘制海报
-                    const 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)
-                    
-                    // 文字
-                    ctx.setFontSize(16)
-                    ctx.fillText(this.companyInfo.name, 194, 180 , 270)
-                    
-                    ctx.setFontSize(16)
-                    ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
-                    
-                    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: '海报下载，请检查网络',
+							type: 'text',
-                        icon : 'none'
+							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' // 图片边框颜色 默认无颜色
+						}
+					]
 				})
+				if (!res.success) return
+				this.posterImg = res.data
+				this.posterShow = true
+			},
+			
+			// 保存图片
+			async saveImage() {
+				let {
+					posterImg
+				} = this
+				let res = await saveImageToPhotosAlbum(posterImg)
+				if (!res.success) return
+				showToast('保存成功,去相册分享给朋友吧')
+				this.posterShow = false
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-    .content {
+	.shareContent {
 		background: #7c52fc;
 		height: 100vh;
 		width: 100vw;
@@ -155,6 +171,7 @@
 		left: 0;
 		right: 0;
 		top: 0;
+
 		.codeTop {
 			position: absolute;
 			left: 5%;
@@ -168,6 +185,7 @@
 			z-index: 2;
 			display: flex;
 			height: 200rpx;
+
 			.codeTop-cover {
 				width: 120rpx;
 				height: 120rpx;
@@ -176,18 +194,22 @@
 				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);
@@ -199,6 +221,7 @@
 			border-radius: 30rpx;
 			z-index: 1;
 			text-align: center;
+
 			.codeImg-code {
 				width: 360rpx;
 				height: 360rpx;
@@ -207,9 +230,12 @@
 				padding: 30rpx;
 				box-sizing: border-box;
 			}
+
 			.codeImg-text {
 				font-size: 32rpx;
 				color: $text-color;
+				position: relative;
+				z-index: 1;
 			}
 		}
 	}
@@ -234,4 +260,66 @@
 		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>

unpackage/dist/dev/app-plus/app-service.js

@@ -43708,11 +43708,16 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c(
     "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)
+        ? _c(
             "view",
-        { staticClass: _vm._$s(1, "sc", "codeContent"), attrs: { _i: 1 } },
+            {
+              staticClass: _vm._$s(1, "sc", "codeContent"),
+              attrs: { _i: 1 },
+              on: { click: _vm.coverCode }
+            },
             [
               _c(
                 "view",
@@ -43738,7 +43743,11 @@ var render = function() {
                           staticClass: _vm._$s(5, "sc", "codeTop-name"),
                           attrs: { _i: 5 }
                         },
-                    [_vm._v(_vm._$s(5, "t0-0", _vm._s(_vm.companyInfo.name)))]
+                        [
+                          _vm._v(
+                            _vm._$s(5, "t0-0", _vm._s(_vm.companyInfo.name))
+                          )
+                        ]
                       ),
                       _c("view", {
                         staticClass: _vm._$s(6, "sc", "codeTop-tips"),
@@ -43754,7 +43763,10 @@ var render = function() {
                 [
                   _c("image", {
                     staticClass: _vm._$s(8, "sc", "codeImg-code"),
-                attrs: { src: _vm._$s(8, "a-src", _vm.companyInfo.code), _i: 8 }
+                    attrs: {
+                      src: _vm._$s(8, "a-src", _vm.companyInfo.code),
+                      _i: 8
+                    }
                   }),
                   _c("view", {
                     staticClass: _vm._$s(9, "sc", "codeImg-text"),
@@ -43764,6 +43776,64 @@ var render = function() {
               )
             ]
           )
+        : _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__) {
 
 "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);
-          } });
 
+
+
+
+
+
+var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375);
+
+
+var _util = __webpack_require__(/*! @/uni_modules/sakura-canvas/js_sdk/util */ 64);
+
+
+
+
+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;
 
-      Promise.all([avatarImg, codeImg]).then(function (res) {
+                draw = new _draw.default({
-        // 绘制海报
+                  width: 375,
-        var ctx = uni.createCanvasContext('qrcodeCard');
+                  height: 460,
-        ctx.save();
+                  canvasId: 'myCanvass',
+                  _this: _this2,
+                  background: {
+                    type: 'color',
+                    color: 'white',
+                    w: 375,
+                    h: 460 } });_context.next = 6;return (
 
-        // 绘制背景图片
-        ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603);
 
-        // 绘制头像
+                  draw.createdSharePoster(function (_ref)
-        ctx.drawImage(res[0], 0, 0, 60, 60);
 
-        // 绘制二维码
+                  {var bgObj = _ref.bgObj;var
-        ctx.drawImage(res[1], 140, 250, 110, 110);
 
-        // 文字
+                    width =
-        ctx.setFontSize(16);
-        ctx.fillText(_this2.companyInfo.name, 194, 180, 270);
 
-        ctx.setFontSize(16);
+                    bgObj.width,height = bgObj.height;
-        ctx.fillText('邀请你加入易货平台', 194, 180, 270);
+                    _this2.Popinvite = bgObj;
+                    // 绘制内容
+                    return [
+                    // 用户昵称
+                    {
+                      type: 'text',
+                      x: 120,
+                      y: 80,
+                      zIndex: 99,
+                      w: width - 20 * 2,
+                      text: name,
+                      color: '#333',
+                      font: {
+                        size: 20 } },
 
-        ctx.save();
+
-        ctx.beginPath(); //开始绘制
+
-        ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
+                    // 描述
-        ctx.clip();
+                    {
+                      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);}))();
+    },
 
     // 保存图片
-        ctx.draw(true, function () {
+    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:
-          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 {
+                posterImg =
-                    uni.hideLoading();
+                _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:
-                fail: function fail(err) {
+                (0, _util.showToast)('保存成功,去相册分享给朋友吧');
-                  if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
+                _this3.posterShow = false;case 8:case "end":return _context2.stop();}}}, _callee2);}))();
-                    uni.showModal({
-                      title: '提示',
-                      content: '暂未授权小程序写入您的相册，无法存储二维码海报',
-                      confirmColor: '#d82526',
-                      confirmText: '去设置',
-                      success: function success(res) {
-                        if (res.confirm) {
-                          uni.openSetting();
-                        }
-                      } });
-
-                  }
-                } });
-
-            } });
-
-        });
-
-      }).catch(function (err) {
-        uni.showToast({
-          title: '海报下载，请检查网络',
-          icon: 'none' });
-
-      });
     } } };exports.default = _default;
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/vue-cli-plugin-uni/lib/format-log.js */ 24)["default"]))
 
 /***/ }),
 /* 375 */