分享

xiaochengxu/components/zhangyuhao-poster/Poster.vue

@@ -0,0 +1,295 @@
+<template>
+	<view class="canvas">
+		<canvas canvas-id="myCanvas" :style="{width: width+'px',height: height+'px'}"></canvas>
+	</view>
+</template>
+<!-- 
+list参数说明：
+ 图片渲染：
+ type: 'image',
+ x: X轴位置,
+ y: Y轴位置,
+ path: 图片路径,
+ width: 图片宽度,
+ height: 图片高度,
+ rotate: 旋转角度
+ shape: 形状，默认无，可选值：circle 圆形
+ area: {x,y,width,height}  // 绘制范围，超出该范围会被剪裁掉 该属性与shape暂时无法同时使用，area存在时，shape失效
+ 
+ 文字渲染：
+ type: 'text',
+ x: X轴位置,
+ y: Y轴位置,
+ text: 文本内容,
+ size: 字体大小,
+ textBaseline： 基线 默认top  可选值：'top'、'bottom'、'middle'、'normal'
+ color: 颜色
+ 
+ 多行文字渲染：
+ type: 'textarea',
+ x: X轴位置,
+ y: Y轴位置,
+ width：换行的宽度
+ height: 高度，溢出会展示“...”
+ lineSpace: 行间距
+ text: 文本内容,
+ size: 字体大小,
+ textBaseline： 基线 默认top  可选值：'top'、'bottom'、'middle'、'normal'
+ color: 颜色
+ -->
+<script>
+	export default {
+		name: "Poster",
+		props: {
+			// 绘制队列
+			list: {
+				type: Array,
+				required: true
+			},
+			width: {
+				type: Number,
+				required: true
+			},
+			height: {
+				type: Number,
+				required: true
+			},
+			backgroundColor: {
+				type: String,
+				default: 'rgba(0,0,0,0)'
+			}
+		},
+		emit: ['on-success', 'on-error'],
+		data() {
+			return {
+				posterUrl: '',
+				ctx: null, //画布上下文
+				counter: -1, //计数器
+				drawPathQueue: [], //画图路径队列
+			};
+		},
+		watch: {
+			drawPathQueue(newVal, oldVal) {
+				// 绘制单行文字
+				const fillText = (textOptions) => {
+					this.ctx.setFillStyle(textOptions.color)
+					this.ctx.setFontSize(textOptions.size)
+					this.ctx.setTextBaseline(textOptions.textBaseline || 'top')
+					this.ctx.fillText(textOptions.text, textOptions.x, textOptions.y)
+				}
+				// 绘制段落
+				const fillParagraph = (textOptions) => {
+					this.ctx.setFontSize(textOptions.size)
+					let tempOptions = JSON.parse(JSON.stringify(textOptions));
+					// 如果没有指定行间距则设置默认值
+					tempOptions.lineSpace = tempOptions.lineSpace ? tempOptions.lineSpace : 10;
+					// 获取字符串
+					let str = textOptions.text;
+					// 计算指定高度可以输出的最大行数
+					let lineCount = Math.floor((tempOptions.height + tempOptions.lineSpace) / (tempOptions.size +
+						tempOptions.lineSpace))
+					// 初始化单行宽度
+					let lineWidth = 0;
+					let lastSubStrIndex = 0; //每次开始截取的字符串的索引
+
+					// 构建一个打印数组
+					let strArr = str.split("");
+					let drawArr = [];
+					let text = "";
+					while (strArr.length) {
+						let word = strArr.shift()
+						text += word;
+						let textWidth = this.ctx.measureText(text).width;
+						if (textWidth > textOptions.width) {
+							// 因为超出宽度 所以要截取掉最后一个字符
+							text = text.substr(0, text.length - 1)
+							drawArr.push(text)
+							text = "";
+							// 最后一个字还给strArr
+							strArr.unshift(word)
+						} else if (!strArr.length) {
+							drawArr.push(text)
+						}
+					}
+
+					if (drawArr.length > lineCount) {
+						// 超出最大行数
+						drawArr.length = lineCount;
+						let pointWidth = this.ctx.measureText('...').width;
+						let wordWidth = 0;
+						let wordArr = drawArr[drawArr.length - 1].split("");
+						let words = '';
+						while (pointWidth > wordWidth) {
+							words += wordArr.pop();
+							wordWidth = this.ctx.measureText(words).width
+						}
+						drawArr[drawArr.length - 1] = wordArr.join('') + '...';
+					}
+					// 打印
+					for (let i = 0; i < drawArr.length; i++) {
+						tempOptions.y = tempOptions.y + tempOptions.size * i + tempOptions.lineSpace * i; // y的位置
+						tempOptions.text = drawArr[i]; // 绘制的文本
+						fillText(tempOptions)
+					}
+				}
+				// 绘制背景
+				this.ctx.setFillStyle(this.backgroundColor);
+				this.ctx.fillRect(0, 0, this.width, this.height);
+				/* 所有元素入队则开始绘制 */
+				if (newVal.length === this.list.length) {
+					try {
+						// console.log('生成的队列：' + JSON.stringify(newVal));
+						console.log('开始绘制...')
+						for (let i = 0; i < this.drawPathQueue.length; i++) {
+							for (let j = 0; j < this.drawPathQueue.length; j++) {
+								let current = this.drawPathQueue[j]
+								/* 按顺序绘制 */
+								if (current.index === i) {
+									/* 文本绘制 */
+									if (current.type === 'text') {
+										console.log('绘制文本：' + current.text);
+										fillText(current)
+										this.counter--
+									}
+									/* 多行文本 */
+									if (current.type === 'textarea') {
+										console.log('绘制段落：' + current.text);
+										fillParagraph(current)
+										this.counter--
+									}
+									/* 图片绘制 */
+									if (current.type === 'image') {
+										console.log('绘制图片：' + current.path);
+										if (current.area) {
+											// 绘制绘图区域
+											this.ctx.save()
+											this.ctx.beginPath(); //开始绘制
+											this.ctx.rect(current.area.x, current.area.y, current.area.width, current.area
+												.height)
+											this.ctx.clip();
+											// 设置旋转中心
+											let offsetX = current.x + Number(current.width) / 2;
+											let offsetY = current.y + Number(current.height) / 2;
+											this.ctx.translate(offsetX, offsetY)
+											let degrees = current.rotate ? Number(current.rotate) % 360 : 0;
+											this.ctx.rotate(degrees * Math.PI / 180)
+											this.ctx.drawImage(current.path, current.x - offsetX, current.y - offsetY,
+												current.width, current.height)
+											this.ctx.closePath();
+											this.ctx.restore(); // 恢复之前保存的上下文
+										} else if (current.shape == 'circle') {
+											this.ctx.save(); // 保存上下文，绘制后恢复
+											this.ctx.beginPath(); //开始绘制
+											//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
+											let width = (current.width / 2 + current.x);
+											let height = (current.height / 2 + current.y);
+											let r = current.width / 2;
+											this.ctx.arc(width, height, r, 0, Math.PI * 2);
+											//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+											this.ctx.clip();
+											// 设置旋转中心
+											let offsetX = current.x + Number(current.width) / 2;
+											let offsetY = current.y + Number(current.height) / 2;
+											this.ctx.translate(offsetX, offsetY)
+											let degrees = current.rotate ? Number(current.rotate) % 360 : 0;
+											this.ctx.rotate(degrees * Math.PI / 180)
+											this.ctx.drawImage(current.path, current.x - offsetX, current.y - offsetY,
+												current.width, current.height)
+											this.ctx.closePath();
+											this.ctx.restore(); // 恢复之前保存的上下文
+										} else {
+											this.ctx.drawImage(current.path, current.x, current.y, current.width, current
+												.height)
+										}
+										this.counter--
+									}
+								}
+							}
+						}
+					} catch (err) {
+						console.log(err)
+						this.$emit('on-error', err)
+					}
+				}
+			},
+			counter(newVal, oldVal) {
+				if (newVal === 0) {
+					this.ctx.draw()
+					/* draw完不能立刻转存，需要等待一段时间 */
+					setTimeout(() => {
+						console.log('final counter', this.counter);
+						uni.canvasToTempFilePath({
+							canvasId: 'myCanvas',
+							success: (res) => {
+								console.log('in canvasToTempFilePath');
+								// 在H5平台下，tempFilePath 为 base64
+								// console.log('图片已保存至本地：', res.tempFilePath)
+								this.posterUrl = res.tempFilePath;
+								this.$emit('on-success', res.tempFilePath)
+							},
+							fail: (res) => {
+								console.log(res)
+							}
+						}, this)
+					}, 1000)
+				}
+			}
+		},
+		mounted() {
+			this.ctx = uni.createCanvasContext('myCanvas', this)
+			this.generateImg()
+			console.log('mounted')
+		},
+
+		methods: {
+			create() {
+				this.generateImg()
+			},
+			generateImg() {
+				console.log('generateimg')
+				this.counter = this.list.length
+				this.drawPathQueue = []
+				/* 将图片路径取出放入绘图队列 */
+				for (let i = 0; i < this.list.length; i++) {
+					let current = this.list[i]
+					current.index = i
+					/* 如果是文本直接放入队列 */
+					if (current.type === 'text' || current.type === 'textarea') {
+						this.drawPathQueue.push(current)
+						continue
+					}
+					/* 图片需获取本地缓存path放入队列 */
+					uni.getImageInfo({
+						src: current.path,
+						success: (res) => {
+							current.path = res.path
+							this.drawPathQueue.push(current)
+						}
+					})
+				}
+			},
+			saveImg() {
+				uni.canvasToTempFilePath({
+					canvasId: 'myCanvas',
+					success: (res) => {
+						// 在H5平台下，tempFilePath 为 base64
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: () => {
+								console.log('save success');
+							}
+						});
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.canvas {
+		position: fixed;
+		top: 100rpx;
+		left: 750rpx;
+	}
+</style>

xiaochengxu/js_sdk/share.js

@@ -11,25 +11,30 @@ export default {
 		})
 	},
 	onShareAppMessage(res) {
-		debugger
+		console.log(1111)
 		let that = this;
-		let imageUrl = that.shareUrl || '';
+		// let imageUrl = that.shareUrl || '';
+		let imageUrl = 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/min1.png'
 		if (res.from === 'button') {
+			console.log(2222)
 		//这块需要传参，不然链接地址进去获取不到数据
-			let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
+			// let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
+			let path = `/pages/cardHolder/scanCodeAddCard`
 			return {
 				title: '商品分享~',
 				path: path,
+				imageUrl: imageUrl,
+				content:'这里是分享内容啊！',
+				desc:"这里是自定义描述啊！"
+			};
+		}
+		if (res.from === 'menu') {
+			return {
+				title: '商通线上商城',
+				path: '/pages/tabBarPro/index/index',
 				imageUrl: imageUrl
 			};
 		}
-		// if (res.from === 'menu') {
-		// 	return {
-		// 		title: '商通线上商城',
-		// 		path: '/pages/tabBarPro/index/index',
-		// 		imageUrl: imageUrl
-		// 	};
-		// }
 	},
 	// 分享到朋友圈
 	onShareTimeline() {
@@ -42,5 +47,4 @@ export default {
 	methods: {
 
 	}
-}
-
+}

xiaochengxu/pages.json

@@ -2,22 +2,29 @@
 	"easycom": {
 		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
 	},
-	"pages": [
+	"pages": [{
+			"path": "pages/mySet/myInfo",
+			"style": {
+				"navigationBarTitleText": "我的名片",
+				"enablePullDownRefresh": false
+			}
+
+		},
 		{
 			"path": "pages/circle/circle",
 			"style": {
 				"navigationBarTitleText": "圈子",
 				"enablePullDownRefresh": false
 			}
-		
-		}, 
+
+		},
 		{
 			"path": "pages/mySet/mySet",
 			"style": {
 				"navigationBarTitleText": "我的",
 				"enablePullDownRefresh": false
 			}
-		
+
 		}, {
 			"path": "pages/cardHolder/cardHolder",
 			"style": {
@@ -93,7 +100,7 @@
 			"style": {
 				"navigationBarTitleText": "我的证件",
 				"enablePullDownRefresh": false,
-				"navigationStyle":"custom"
+				"navigationStyle": "custom"
 			}
 
 		}, {
@@ -124,13 +131,6 @@
 				"enablePullDownRefresh": false
 			}
 
-		}, {
-			"path": "pages/mySet/myInfo",
-			"style": {
-				"navigationBarTitleText": "我的名片",
-				"enablePullDownRefresh": false
-			}
-
 		}, {
 			"path": "pages/mySet/myAccount",
 			"style": {
@@ -148,61 +148,50 @@
 
 		}
 
-	    ,{
-            "path" : "pages/mySet/newCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "新增名片",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/editHome",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "主页信息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/editCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "编辑名片",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mySet/lookCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "证件分享",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/cardHolder/scancode",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "扫码添加",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/cardHolder/scanCodeAddCard",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "添加名片",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+		, {
+			"path": "pages/mySet/newCard",
+			"style": {
+				"navigationBarTitleText": "新增名片",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/editHome",
+			"style": {
+				"navigationBarTitleText": "主页信息",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/editCard",
+			"style": {
+				"navigationBarTitleText": "编辑名片",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mySet/lookCard",
+			"style": {
+				"navigationBarTitleText": "证件分享",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/cardHolder/scancode",
+			"style": {
+				"navigationBarTitleText": "扫码添加",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/cardHolder/scanCodeAddCard",
+			"style": {
+				"navigationBarTitleText": "添加名片",
+				"enablePullDownRefresh": false
+			}
+
+		}
+	],
 	"tabBar": {
 		"custom": false,
 		"color": "#656765",

xiaochengxu/pages/cardHolder/cardHolder.vue

@@ -1,6 +1,5 @@
 <template>
 	<view class="content">
-		
 		<u-navbar title="电子名片" placeholder>
 			<view class="u-nav-slot relative" slot="left">
 				<u-icon name="bell" size="26" @click="toNotice"></u-icon>
@@ -36,66 +35,67 @@
 			    title
 				:loading='loading'
 			></u-skeleton> -->
-			<view v-if='islongPress'>
-				<view @click="del">删除</view>
-				<view @click='islongPress=false'>取消</view>
-				<u-checkbox-group placement="column"
-				@change="checkboxChange($event,'')">
-					<u-checkbox :checked='checked' name='全部' :customStyle="{marginBottom: '8px'}">
-					</u-checkbox>
-				</u-checkbox-group>
-			</view>
-			
-		<mescroll-body v-if='cardHolderList'  :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
-		<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="content3 flex">
-			<view class="left">
-				<view class="top flex-row-center">
-					<image :src="item.headSculpture" mode="widthFix" class="img"></image>
-				</view>
-				<view class="bottom flex flex-evenly">
-					<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
-					<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
-					<uni-icons @click='share(item)'  type="redo" size="20" color=''></uni-icons>
-				</view>
-			</view>
-			<view class="right">
-				<view class="row1 flex">
-					<text>{{item.name}}</text>
-					<text class="line"></text>
-					<text>{{item.post}}</text>
-					<u-checkbox-group v-if='islongPress' placement="column"
-						@change="checkboxChange($event,index)">
-						<u-checkbox :name='index+1' :checked='item.checked' :customStyle="{marginBottom: '8px'}">
-						</u-checkbox>
-					</u-checkbox-group>
-				</view>
-				<view class="row2">
-					{{item.companyName}}
-				</view>
-				<view class="row3" @click="toMap(item)">
-					<uni-icons type="redo" size="20"></uni-icons>
-					<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
-				</view>
-				<view class="row3">
-					<uni-icons type="redo" size="20"></uni-icons>
-					<text>{{item.phone}}</text>
+		<view v-if='islongPress'>
+			<view @click="del">删除</view>
+			<view @click='islongPress=false'>取消</view>
+			<u-checkbox-group placement="column" @change="checkboxChange($event,'')">
+				<u-checkbox :checked='checked' name='全部' :customStyle="{marginBottom: '8px'}">
+				</u-checkbox>
+			</u-checkbox-group>
+		</view>
+
+		<mescroll-body v-if='cardHolderList' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
+			@down="downCallback">
+			<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="content3 flex">
+				<view class="left">
+					<view class="top flex-row-center">
+						<image :src="item.headSculpture" mode="widthFix" class="img"></image>
+					</view>
+					<view class="bottom flex flex-evenly">
+						<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
+						<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
+						<uni-icons @click='share(item)' type="redo" size="20" color=''></uni-icons>
+					</view>
 				</view>
-				<view @click='remarkEdit(item)' class="row3">
-					<uni-icons type="redo" size="20"></uni-icons>
-					<text >{{item.remark?item.remark:'单击添加备注'}}</text>
+				<view class="right">
+					<view class="row1 flex">
+						<text>{{item.name}}</text>
+						<text class="line"></text>
+						<text>{{item.post}}</text>
+						<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
+							<u-checkbox :name='index+1' :checked='item.checked' :customStyle="{marginBottom: '8px'}">
+							</u-checkbox>
+						</u-checkbox-group>
+					</view>
+					<view class="row2">
+						{{item.companyName}}
+					</view>
+					<view class="row3" @click="toMap(item)">
+						<uni-icons type="redo" size="20"></uni-icons>
+						<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
+					</view>
+					<view class="row3">
+						<uni-icons type="redo" size="20"></uni-icons>
+						<text>{{item.phone}}</text>
+					</view>
+					<view @click='remarkEdit(item)' class="row3">
+						<uni-icons type="redo" size="20"></uni-icons>
+						<text>{{item.remark?item.remark:'单击添加备注'}}</text>
+					</view>
 				</view>
 			</view>
-		</view>
 		</mescroll-body>
 		<u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" title="选择分类" @close="isShowType=false"
 			@cancel="isShowType=false" closeOnClickOverlay @confirm="typeConfirm"></u-picker>
 		<lyuan-tx-asr ref="asr" :uploadMethod="uploadFile" @change="asrChange" @fileChange="fileChange" appId=""
 			secretId="" secretKey=""></lyuan-tx-asr>
 		<u-toast ref="uToast"></u-toast>
-		<u-modal :show="delShow" title="提示" showCancelButton='true' @cancel="delShow=false" @confirm="delConfirm" :content='"已选中"+this.checkedList.length+"张名片，确定删除？"'></u-modal>
-		<u-modal :show="modalShow" @confirm='remarkConfirm' :confirmColor="remark?'#2979ff':'#ccc'" showCancelButton='true' title="备注" >
+		<u-modal :show="delShow" title="提示" showCancelButton='true' @cancel="delShow=false" @confirm="delConfirm"
+			:content='"已选中"+this.checkedList.length+"张名片，确定删除？"'></u-modal>
+		<u-modal :show="modalShow" @confirm='remarkConfirm' :confirmColor="remark?'#2979ff':'#ccc'"
+			showCancelButton='true' title="备注">
 			<view class="slot-content">
-				<u--textarea v-model="remark" placeholder="输入备注，不超过150个字" ></u--textarea>
+				<u--textarea v-model="remark" placeholder="输入备注，不超过150个字"></u--textarea>
 			</view>
 		</u-modal>
 		<view v-if='qrcodeShow' class="shade">
@@ -105,7 +105,7 @@
 				</view>
 				<image :src="currectData.qrCode" mode=""></image>
 			</view>
-			
+
 		</view>
 		<u-popup :show="popupshow" mode="bottom">
 			<view>
@@ -113,7 +113,7 @@
 					<text>分享到</text>
 				</view>
 				<view class="content">
-					
+
 					<view class="block" @click="toUrl()">
 						<button class="moment">
 							<text class="iconfont icon-weixin"></text>
@@ -122,12 +122,7 @@
 						</button>
 					</view>
 					<view class="block">
-						<button class="wechat" open-type="share">
-							<text class="iconfont icon-pengyouquan"></text>
-							<!-- <image src="/static/img/wechat.png" mode="aspectFill"></image> -->
-							<button class="shareBtn" type="default" data-name="shareBtn">
-								分享给微信好友</button>
-						</button>
+						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 分享</button>
 					</view>
 				</view>
 				<view class="cancel" @click.stop="handleHiddenShare">
@@ -135,33 +130,43 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- <image :src="poster" style="width: 750rpx;height: 1334rpx;"></image> -->
+		<!-- 生成图片 -->
+		<poster v-if="list.length" :list="list" background-color="#FFF"
+			@on-success="posterSuccess" ref="poster" @on-error="posterError"></poster>
 	</view>
 </template>
 
 <script>
+	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
 		mixins: [MescrollMixin],
+		components: {
+			Poster
+		},
 		data() {
 			return {
+				poster: '',
+				canvasData: [],
 				searchVal: '',
 				isShowType: false,
-				loading:true,
+				loading: true,
 				typeName: '',
 				typeColumns: [],
-				cardHolderList:[],
-				currectData:[],
-				type:1,
-				popupshow:false,
-				modalShow:false,
-				remark:'',
+				cardHolderList: [],
+				currectData: [],
+				type: 1,
+				popupshow: false,
+				modalShow: false,
+				remark: '',
 				islongPress: false,
-				checked:false,
-				checkedList:[],
-				delShow:false,
-				qrcodeShow:false,
-				unread:0,
-				noticeList:[],
+				checked: false,
+				checkedList: [],
+				delShow: false,
+				qrcodeShow: false,
+				unread: 0,
+				noticeList: [],
 			};
 		},
 		onShow() {
@@ -173,55 +178,97 @@
 			}
 			this.searchVal = uni.getStorageSync("search_val") ? uni.getStorageSync("search_val") : ''
 		},
+		mounted() {
+			
+		},
+		onLoad: function() {
+			wx.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"]
+			})
+		},
 		onShareAppMessage(res) {
-			debugger
+			console.log(1111)
 			let that = this;
-			let imageUrl = that.shareUrl || '';
+			//生成名片图片
+			let imageUrl = this.poster
+			console.log("imageUrl",imageUrl)
 			if (res.from === 'button') {
-			//这块需要传参，不然链接地址进去获取不到数据
-				let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
+				let path = `/pages/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
 				return {
-					title: '名片夹',
+					title: `${that.currectData.name}分享的名片~`,
 					path: path,
+					imageUrl: imageUrl,
+				};
+			}
+			if (res.from === 'menu') {
+				return {
+					title: '商通线上商城',
+					path: '/pages/tabBarPro/index/index',
 					imageUrl: imageUrl
 				};
 			}
-			// if (res.from === 'menu') {
-			// 	return {
-			// 		title: '商通线上商城',
-			// 		path: '/pages/tabBarPro/index/index',
-			// 		imageUrl: imageUrl
-			// 	};
-			// }
+		},
+		// 分享到朋友圈
+		onShareTimeline() {
+			return {
+				title: '商通线上商城',
+				path: '/pages/index/index',
+				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
+			};
 		},
 		methods: {
-			toHome(item){
+			posterError(err) {
+			                console.log(err)
+			            },
+			            posterSuccess(url) {
+			                // 生成成功，会把临时路径在这里返回
+			                this.poster = url;
+			                console.log(url)
+			            },
+			toHome(item) {
 				uni.navigateTo({
-					url: "/pages/mySet/myHome?id="+item.personalHomeId
+					url: "/pages/mySet/myHome?id=" + item.personalHomeId
 				})
 			},
 			delSearchVal() {
 				this.searchVal = ""
 				this.mescroll.resetUpScroll()
 			},
-			toUrl(){
+			toUrl() {
 				console.log(this.currectData)
-				this.popupshow=false
-				this.qrcodeShow=true
+				this.popupshow = false
+				this.qrcodeShow = true
 			},
-			share(item){
-				this.currectData=item
-				this.popupshow=true
+			share(item) {
+				this.currectData = item
+				this.canvasData = [{
+						type: 'image',
+						path: item.currentBackground,
+						x: 0,
+						y: 0,
+						width: 750,
+						height: 424
+					},{
+						type: 'text',
+						text:item.name,
+						x: 0,
+						y: 0,
+						size:13
+					},
+					
+				]
+				this.popupshow = true
 			},
-			async delConfirm(){
+			async delConfirm() {
 				uni.showLoading({
 					title: '数据加载中',
-					mask:true
+					mask: true
 				})
-				
-				for(var i=0;i<this.checkedList.length;i++){
-					await this.$request.baseRequest('admin.unimall.cardHolderInfo', 'delete',{
-						id:this.checkedList[i].data.id,
+
+				for (var i = 0; i < this.checkedList.length; i++) {
+					await this.$request.baseRequest('admin.unimall.cardHolderInfo', 'delete', {
+						id: this.checkedList[i].data.id,
 					}, failres => {
 						console.log('res+++++', failres.errmsg)
 						this.$refs.uToast.show({
@@ -229,55 +276,63 @@
 							message: failres.errmsg,
 						})
 					}).then(res => {
-						console.log(i,this.checkedList.length-1)
-						if(i==this.checkedList.length-1){
+						console.log(i, this.checkedList.length - 1)
+						if (i == this.checkedList.length - 1) {
 							uni.hideLoading()
 							this.$refs.uToast.show({
 								type: 'success',
 								message: '删除成功',
 							})
-							this.delShow=false
-							this.islongPress=false
+							this.delShow = false
+							this.islongPress = false
 							this.mescroll.resetUpScroll()
 						}
 					})
 				}
 			},
-			del(){
-				this.delShow=true
+			del() {
+				this.delShow = true
 			},
-			
-			longpress(){
-			    console.log("长按事件",1111111111);
-			    this.islongPress = true;
-				
+
+			longpress() {
+				console.log("长按事件", 1111111111);
+				this.islongPress = true;
+
 			},
 			checkboxChange(e, i) {
-				console.log(e,i,111111111)
-				if(i===''){
+				console.log(e, i, 111111111)
+				if (i === '') {
 					console.log(this.checked)
 					this.checked = !this.checked;
 					this.cardHolderList.map(item => item.checked = this.checked);
 					this.$forceUpdate()
 					var checkList = this.cardHolderList.filter((item) => {
-							return item.checked == true
-						})
-					var data=checkList.map((item,index) => {return {index:index,data:item}})
+						return item.checked == true
+					})
+					var data = checkList.map((item, index) => {
+						return {
+							index: index,
+							data: item
+						}
+					})
 					this.checkedList = JSON.parse(JSON.stringify(data))
-				}else{
+				} else {
 					if (e[0]) {
-						this.checkedList.push({index:i,data:this.cardHolderList[i]})
+						this.checkedList.push({
+							index: i,
+							data: this.cardHolderList[i]
+						})
 					} else {
 						var index = this.checkedList.findIndex((item) => {
 							return item.index == i
 						})
 						this.checkedList.splice(index, 1)
 					}
-					if(this.checkedList.length!=this.cardHolderList.length){
-						this.checked=false
+					if (this.checkedList.length != this.cardHolderList.length) {
+						this.checked = false
 					}
 				}
-				
+
 				// for(var i=0;i<this.cardList.length;i++){
 				// 	console.log(this.cardList[i].checked)
 				// 	// if(this.cardList[i].checkedList.length>0){
@@ -286,11 +341,11 @@
 				// }
 				console.log(this.checkedList)
 			},
-			remarkConfirm(){
-				if(this.remark){
-					this.currectData.remark=this.remark
-					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update',{
-						cardHolderInfo:JSON.stringify(this.currectData),
+			remarkConfirm() {
+				if (this.remark) {
+					this.currectData.remark = this.remark
+					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update', {
+						cardHolderInfo: JSON.stringify(this.currectData),
 					}, failres => {
 						console.log('res+++++', failres.errmsg)
 						this.$refs.uToast.show({
@@ -302,25 +357,25 @@
 							type: 'success',
 							message: '修改备注成功',
 						})
-						this.modalShow=false
+						this.modalShow = false
 						this.mescroll.resetUpScroll()
 					})
 				}
 			},
-			remarkEdit(item){
-				this.currectData=item
-				this.modalShow=true
+			remarkEdit(item) {
+				this.currectData = item
+				this.modalShow = true
 			},
-			switchType(item){
-				this.type=2
-				this.currectData=item
-				this.isShowType=true
+			switchType(item) {
+				this.type = 2
+				this.currectData = item
+				this.isShowType = true
 			},
-			typeConfirm(e){
-				if(this.type==2){
-					this.currectData.classify=e.value[0].circleName
-					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update',{
-						cardHolderInfo:JSON.stringify(this.currectData),
+			typeConfirm(e) {
+				if (this.type == 2) {
+					this.currectData.classify = e.value[0].circleName
+					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update', {
+						cardHolderInfo: JSON.stringify(this.currectData),
 					}, failres => {
 						console.log('res+++++', failres.errmsg)
 						this.$refs.uToast.show({
@@ -334,17 +389,17 @@
 						})
 						this.mescroll.resetUpScroll()
 					})
-				}else{
+				} else {
 					this.typeName = e.value[0].circleName
 				}
 				this.isShowType = false
 			},
-			init(){
+			init() {
 				this.getList()
-				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list',{
-					page:1,
-					limit:9999,
-					commonId:uni.getStorageSync("userInfo").id
+				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
+					page: 1,
+					limit: 9999,
+					commonId: uni.getStorageSync("userInfo").id
 				}, failres => {
 					console.log('res+++++', failres.errmsg)
 					this.$refs.uToast.show({
@@ -352,39 +407,41 @@
 						message: failres.errmsg,
 					})
 				}).then(res => {
-					this.typeColumns=[res.data.items]
+					this.typeColumns = [res.data.items]
 					this.mescroll.resetUpScroll()
 					console.log(this.typeColumns)
 				})
 			},
-			getList(){
-					this.$request.baseRequest('admin.unimall.cardNewsInfo', 'list',{
-						receiveId:uni.getStorageSync("userInfo").id,
-					}, failres => {
-						console.log('res+++++', failres.errmsg)
-						this.$refs.uToast.show({
-							type: 'error',
-							message: failres.errmsg,
-						})
-					}).then(res => {
-						this.noticeList=res.data.items
-						if(this.noticeList.length>0){
-							var data=this.noticeList.filter((item)=>{return item.newsFlag==0})
-							this.unread=data?data.length:0
-						}
-						console.log(this.unread)
+			getList() {
+				this.$request.baseRequest('admin.unimall.cardNewsInfo', 'list', {
+					receiveId: uni.getStorageSync("userInfo").id,
+				}, failres => {
+					console.log('res+++++', failres.errmsg)
+					this.$refs.uToast.show({
+						type: 'error',
+						message: failres.errmsg,
 					})
+				}).then(res => {
+					this.noticeList = res.data.items
+					if (this.noticeList.length > 0) {
+						var data = this.noticeList.filter((item) => {
+							return item.newsFlag == 0
+						})
+						this.unread = data ? data.length : 0
+					}
+					console.log(this.unread)
+				})
 			},
-			upCallback(page){
+			upCallback(page) {
 				var that = this
 				uni.showLoading({
-						title: '数据加载中'
-					})
-				this.$request.baseRequest('admin.unimall.cardHolderInfo', 'list',{
-					page:page.num,
-					limit:page.size,
-					commonId:uni.getStorageSync("userInfo").id,
-					searchContent:this.searchVal
+					title: '数据加载中'
+				})
+				this.$request.baseRequest('admin.unimall.cardHolderInfo', 'list', {
+					page: page.num,
+					limit: page.size,
+					commonId: uni.getStorageSync("userInfo").id,
+					searchContent: this.searchVal
 				}, failres => {
 					console.log('res+++++', failres.errmsg)
 					this.$refs.uToast.show({
@@ -394,17 +451,17 @@
 					uni.hideLoading()
 				}).then(res => {
 					console.log(res)
-					if(page.num == 1) this.cardHolderList = [];
+					if (page.num == 1) this.cardHolderList = [];
 					let curPageLen = res.data.items.length;
 					let totalPage = res.data.total;
 					for (var i = 0; i < res.data.items.length; i++) {
-						res.data.items[i].checked=false
-						if(res.data.items[i].classify){
-							res.data.items[i].classifyName=res.data.items[i].classify[0]
+						res.data.items[i].checked = false
+						if (res.data.items[i].classify) {
+							res.data.items[i].classifyName = res.data.items[i].classify[0]
 						}
 					}
-					this.cardHolderList=res.data.items
-					this.loading=false
+					this.cardHolderList = res.data.items
+					this.loading = false
 					// if(res.data.items.length>0){
 					// 	for(var i=0;i<res.data.items.length;i++){
 					// 	res.data.items[i].name=res.data.items[i].circleName[0]
@@ -428,17 +485,17 @@
 					// 		this.cardTypeList=[{circleName:'默认分类',name:'默'}]
 					// 	 }
 					// }
-					
-					
+
+
 					this.$nextTick(() => {
 						console.log(that)
-					// mescroll.endSuccess(data.result);
-					that.mescroll.endBySize(curPageLen, totalPage)
+						// mescroll.endSuccess(data.result);
+						that.mescroll.endBySize(curPageLen, totalPage)
 					});
-					
+
 					// if (res.errno == 200) {
 					uni.hideLoading()
-					
+
 					// }
 				})
 			},
@@ -472,7 +529,7 @@
 										})
 										uni.hideLoading()
 									}).then(res1 => {
-										uni.setStorageSync("userInfo",res1.data)
+										uni.setStorageSync("userInfo", res1.data)
 									})
 								}
 							})
@@ -551,7 +608,7 @@
 			},
 			selectType() {
 				this.isShowType = true
-				this.type=1
+				this.type = 1
 			},
 			scan() {
 				// console.log(1)
@@ -563,14 +620,14 @@
 						console.log('条码类型：' + res.scanType);
 						console.log('条码内容：' + res.result);
 						uni.navigateTo({
-							url: "/pages/cardHolder/scanCodeAddCard?id="+res.result
+							url: "/pages/cardHolder/scanCodeAddCard?id=" + res.result
 						})
 					}
 				});
 			},
 			toMap(item) {
 				uni.navigateTo({
-					url: "/pages/cardHolder/map?location="+item.location
+					url: "/pages/cardHolder/map?location=" + item.location
 				})
 			},
 		}
@@ -592,6 +649,7 @@
 
 	.content1 {
 		margin-top: 20rpx;
+
 		.search {
 			margin-left: 20rpx;
 			border: 1px solid #ccc;
@@ -609,8 +667,7 @@
 	}
 
 	.content2 {
-		.all-type {
-		}
+		.all-type {}
 	}
 
 	.content3 {
@@ -623,15 +680,15 @@
 			width: 30%;
 
 			.top {
-				
+
 				margin-bottom: 20rpx;
 			}
+
 			.img {
 				width: 80%;
 			}
 
-			.bottom {
-			}
+			.bottom {}
 		}
 
 		.right {
@@ -645,23 +702,26 @@
 			}
 		}
 	}
-	.slot-content{
-		width:100%;
+
+	.slot-content {
+		width: 100%;
 	}
-	.shade{
-		background:rgba(0,0,0,0.2);
-		width:100%;height:100vh;
-		position:fixed;
-		top:0;
-		left:0;
+
+	.shade {
+		background: rgba(0, 0, 0, 0.2);
+		width: 100%;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
 	}
-	.qrCode{
-		position:absolute;
-		top:50%;
-		left:0;
-		right:0;
+
+	.qrCode {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
 		transform: translateY(-50%);
-		text-align:center;
+		text-align: center;
 	}
-	
 </style>

xiaochengxu/pages/circle/detail.vue

@@ -327,6 +327,7 @@
 				this.getCardList(page)
 			},
 			changeCard(val) {
+				
 				this.selectRowCard = val
 				this.swapNameCards = true
 				this.isShowCard = true

xiaochengxu/pages/mySet/myInfo.vue

@@ -150,6 +150,9 @@
 				</view>
 			</view>
 		</u-popup>
+		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
+		                <image :src="selectCode" mode="widthFix"></image>
+				</u-popup>
 	</view>
 </template>
 
@@ -158,6 +161,8 @@
 	export default {
 		data() {
 			return {
+				isShowCode:false,
+				selectCode:'',
 				id: '',
 				radiovalue: '仅从自己名片列表删除',
 				radiolist: [{
@@ -183,7 +188,8 @@
 		methods: {
 			
 			showCode(val){
-				
+				this.selectCode = val.qrCodeMyself
+				this.isShowCode = true
 			},
 			share(){