完善canvas图片绘制

app.json

@@ -9,7 +9,8 @@
 		"pages/ranking/ranking",
 		"pages/picture/picture",
 		"pages/personal/personal",
-		"pages/auth/auth"
+		"pages/auth/auth",
+		"pages/works/works"
 	],
 	"tabBar": {
 		"custom": true,

config.js

@@ -1,5 +1,6 @@
-var host = "https://vote.daiguanyun.com";
+// var host = "https://vote.daiguanyun.com";
-var host = "http://192.168.2.15:8810";
+// var host = "http://192.168.2.15:8810";
+var host = "https://fenggu.scdxtc.cn";
 var config = {
     host:host,
     getopenid: host + "/index/getOpenId",
@@ -18,6 +19,8 @@ var config = {
     search: host + '/index/search',
     getBottleCategories: host + '/index/getBottleCategories',//酒瓶标题
     composeBottle: host + '/index/composeBottle',//保存图片
-    getBottleWidgets: host + '/index/getBottleWidgets',//查询作品
+    getBottleWidgets: host + '/index/getBottleWidgets',//查询脸庞
+    myBottleReleaseList: host + '/index/myBottleReleaseList',//查询自己的作品
+    publishMyBottle: host + '/index/publishMyBottle',//分享作品
 }
 module.exports = config;

pages/canvasposter/canvasposter.js

@@ -21,62 +21,19 @@ Page({
 		itemList: [],
 		showBtn: false, //按钮
 		showBox: false, //弹框
-		titlelist: ['脸谱', '背景', '按钮', '川剧', '人物', '文字', '装饰'],
+		// titlelist: ['脸谱', '背景', '按钮', '川剧', '人物', '文字', '装饰'],
+		titlelist: [],
 		titleIndex: '-1',
 		allList: [
-			'../../img/background/3.png',
+			'../../img/background/1.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
-			'../../img/background/3.png',
 		],
 		allIndex: '-1',
-		faceImg: [
-			'../../img/face/3.png',
-			'../../img/face/4.png',
-			'../../img/face/3.png',
-			'../../img/face/3.png',
-		],
-		operaImg: [
-			'../../img/opera/3.png',
-			'../../img/opera/4.png',
-			'../../img/opera/5.png',
-			'../../img/opera/5.png',
-			'../../img/opera/4.png',
-			'../../img/opera/3.png',
-		],
-		backgroundImg: [
-			'../../img/background/2.png',
-			'../../img/background/3.png',
-			'../../img/background/2.png',
-			'../../img/background/3.png',
-		],
-		buttonImg: [
-			'../../img/button/2.png',
-			'../../img/button/1.png',
-			'../../img/button/2.png',
-			'../../img/button/1.png',
-		],
-		personageImg: [
-			'../../img/personage/1.png',
-			'../../img/personage/2.png',
-			'../../img/personage/3.png',
-		],
-		wordImg: [
-			'../../img/word/1.png',
-			'../../img/word/2.png',
-			'../../img/word/3.png',
-		],
-		decorateImg: [
-			'../../img/decorate/1.png',
-			'../../img/decorate/2.png',
-			'../../img/decorate/3.png',
-		],
 		isOk: false,
-		isNo:false
+		isNo: false,
+		closeTime: null,
+		titleVal:'',
+		showTitle:false,
+		times:0
 	},
 	chooseTitle(e) {
 		let that = this;
@@ -85,46 +42,11 @@ Page({
 				allIndex: '-1'
 			})
 		}
-		that.setData({
+		this.setData({
 			titleIndex: e.currentTarget.dataset.index,
-			showBox: true,
 			showBtn: true
 		})
-		if (that.data.titlelist[that.data.titleIndex] == "脸谱") {
+		this.getBottleWidgets(that.data.titlelist[that.data.titleIndex].id);
-			that.setData({
-				allList: that.data.faceImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "川剧") {
-			that.setData({
-				allList: that.data.operaImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "背景") {
-			that.setData({
-				allList: that.data.backgroundImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "按钮") {
-			that.setData({
-				allList: that.data.buttonImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "人物") {
-			that.setData({
-				allList: that.data.personageImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "文字") {
-			that.setData({
-				allList: that.data.wordImg
-			})
-		}
-		if (that.data.titlelist[that.data.titleIndex] == "装饰") {
-			that.setData({
-				allList: that.data.decorateImg
-			})
-		}
 	},
 	chooseImg(e) {
 		let that = this;
@@ -133,14 +55,38 @@ Page({
 			showBox: false,
 			showBtn: false
 		})
-		if (that.data.titleIndex == 1) {
+		if (that.data.titleIndex == 0) {
-			this.setBackGroundImg({
+			wx.getStorage({ //获取本地缓存
-				url: that.data.backgroundImg[that.data.allIndex]
+				key: that.data.allList[that.data.allIndex].img,
+				success: function(res) {
+					console.log(res);
+					that.setBackGroundImg({
+						url: res.data
 					});
+				},
+			})
 		} else {
+			wx.getStorage({ //获取本地缓存
+				key: that.data.allList[that.data.allIndex].img,
+				success: function(res) {
 					that.setDropItem({
-				url: that.data.allList[that.data.allIndex]
+						url: res.data
 					});
+				},
+			})
+		}
+	},
+	titleInput(e){
+		this.setData({
+			titleVal:e.detail.value
+		})
+	},
+	submit(){
+		if(this.data.titleVal==''){
+			wx.showToast({title:'请输入标题',icon:'none'})
+		} else {
+			wx.showToast({title:'设置标题成功',icon:'none'})
+			this.setData({showTitle:false})
 		}
 	},
 	onShow: function() {
@@ -161,16 +107,16 @@ Page({
 				this.sysData = sysData;
 				// 设置画布宽高，this.sysData.windowWidth为屏幕的宽度
 				this.setData({
-					canvasWidth: this.sysData.windowWidth *canvasPre, // 如果觉得不清晰的话，可以把所有组件、宽高放大一倍
+					canvasWidth: this.sysData.windowWidth *
+					canvasPre, // 如果觉得不清晰的话，可以把所有组件、宽高放大一倍
 					canvasHeight: this.sysData.windowWidth * canvasPre * hCw,
 					backGroundWidth: this.sysData.windowWidth,
 					backGroundHeight: this.sysData.screenHeight
 				})
-
 			}
 		})
 		this.setBackGroundImg({
-			url: this.data.backgroundImg[0]
+			url: '../../img/background/1.png'
 		});
 		this.getBottleCategories();
 	},
@@ -191,7 +137,6 @@ Page({
 	},
 	// 设置背景图片
 	setBackGroundImg(imgData) {
-		console.log(imgData);
 		let data = {}; // 存储图片信息
 		// 获取图片信息，网络图片需先配置download域名才能生效
 		wx.getImageInfo({
@@ -200,7 +145,6 @@ Page({
 				// 初始化数据
 				let maxWidth = this.data.backGroundWidth,
 					maxHeight = this.data.backGroundHeight; // 设置最大宽高
-				console.log(maxWidth, maxHeight);
 				if (res.width > maxWidth || res.height > maxHeight) { // 原图宽或高大于最大值就执行
 					if (res.width / res.height > maxWidth / maxHeight) { // 判断比例使用最大值的宽或高作为基数计算
 						data.width = maxWidth;
@@ -222,6 +166,7 @@ Page({
 				data.scale = 1; // scale缩放
 				data.rotate = 1; // 旋转角度
 				data.active = false; // 选中状态
+				data.angle = 0;
 				items[0] = data; // 每增加一张图片数据增加一条信息
 				this.setData({
 					itemList: items
@@ -259,7 +204,8 @@ Page({
 				data.scale = 1; // scale缩放
 				data.rotate = 1; // 旋转角度
 				data.active = false; // 选中状态
-				console.log(data);
+				data.angle = 0;
+				console.log(data, 123);
 				items[items.length] = data; // 每增加一张图片数据增加一条信息
 				this.setData({
 					itemList: items
@@ -314,10 +260,13 @@ Page({
 	// 放开图片
 	WraptouchEnd() {
 		this.synthesis(); // 调用合成图方法
+		clearTimeout(this.data.closeTime);
+		this.data.closeTime = setTimeout(() => {
 			this.setData({
 				showBtn: false,
 				funBox: true
 			})
+		}, 1000)
 	},
 	// 点击伸缩图标
 	oTouchStart(e) {
@@ -342,12 +291,14 @@ Page({
 		items[index]._tx = e.touches[0].clientX;
 		items[index]._ty = e.touches[0].clientY;
 		//移动的点到圆心的距离
-		items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[index]._ty - 10)
+		items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[
+			index]._ty - 10)
 
 		items[index].scale = items[index].disPtoO / items[index].r;
 
 		//移动后位置的角度
-		items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
+		items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[
+			index]._ty)
 		//角度差
 		items[index].new_rotate = items[index].angleNext - items[index].anglePre;
 
@@ -358,7 +309,8 @@ Page({
 		//用过移动后的坐标赋值为移动前坐标
 		items[index].tx = e.touches[0].clientX;
 		items[index].ty = e.touches[0].clientY;
-		items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
+		items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index]
+			.ty)
 
 		//赋值setData渲染
 		this.setData({
@@ -422,7 +374,20 @@ Page({
 	openMask() {
 		this.synthesis();
 		this.setData({
-			showCanvas: true
+			showCanvas: true,
+			showTitle:true
+		})
+	},
+	downLoadImg(netUrl, storageKeyUrl) {
+		wx.getImageInfo({
+			src: netUrl, //请求的网络图片路径
+			success: function(res) {
+				//请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
+				wx.setStorage({
+					key: storageKeyUrl,
+					data: res.path,
+				});
+			}
 		})
 	},
 	synthesis() { // 合成图片
@@ -431,15 +396,16 @@ Page({
 		// 画背景色（白色）
 		maskCanvas.setFillStyle('#fff');
 		maskCanvas.fillRect(0, 0, this.data.canvasWidth, this.data.backGroundHeight);
-		console.log(this.data.canvasWidth, this.data.backGroundHeight);
 		items.forEach((currentValue, index) => {
 			maskCanvas.save();
 			maskCanvas.translate(0, 0);
 			maskCanvas.beginPath();
 			maskCanvas.translate(currentValue.x, currentValue.y); // 圆心坐标
 			maskCanvas.rotate(currentValue.angle * Math.PI / 180);
-			maskCanvas.translate(-(currentValue.width * currentValue.scale / 2), -(currentValue.height *currentValue.scale / 2))
+			maskCanvas.translate(-(currentValue.width * currentValue.scale / 2), -(currentValue.height *
-			maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * currentValue.scale,currentValue.height * currentValue.scale);
+				currentValue.scale / 2))
+			maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * currentValue.scale,
+				currentValue.height * currentValue.scale);
 			maskCanvas.restore();
 		})
 		// reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制
@@ -470,8 +436,14 @@ Page({
 						title: '保存成功',
 						icon: "success"
 					})
+					this.saveImgEv(this.data.canvasTemImg);
 				},
 				fail: res => {
+					wx.showModal({
+						title: '提示',
+						content: '保存失败，请确保相册权限已打开',
+						success: (e) => {
+							if (e.confirm) {
 								wx.openSetting({
 									success: settingdata => {
 										if (settingdata.authSetting['scope.writePhotosAlbum']) {
@@ -484,9 +456,8 @@ Page({
 										console.log(error)
 									}
 								})
-					wx.showModal({
+							}
-						title: '提示',
+						}
-						content: '保存失败，请确保相册权限已打开',
 					})
 				}
 			})
@@ -496,30 +467,113 @@ Page({
 			})
 		}
 	},
+	// 保存图片接口
+	saveImgEv(imgSrc) {
+		wx.uploadFile({
+			url: urlPath.composeBottle,
+			filePath: imgSrc,
+			name: 'image',
+			formData: {
+				'name': this.data.titleVal
+			},
+			header: {
+				"Content-Type": "multipart/form-data",
+				'token': wx.getStorageSync('token')
+			},
+			success: (data)=> {
+				if(data.statusCode==200){
+					wx.showToast({
+						title:'保存成功',
+						icon:'none'
+					})
+					this.setData({
+						showCanvas:false
+					})
+				}
+			},
+			fail: function(data) {
+				console.log(data);
+			}
+		})
+	},
+	// 分享图片
 	shareImg() {
 		if (wx.getStorageSync('token')) {
+			if(this.data.times==0){
+				wx.showToast({
+					title:'正在调起分享',
+					duration:5000
+				})
+				this.setData({
+					times:this.data.times++
+				})
+				wx.uploadFile({
+					url: urlPath.composeBottle,
+					filePath: this.data.canvasTemImg,
+					name: 'image',
+					formData: {
+						'name': this.data.titleVal
+					},
+					header: {
+						"Content-Type": "multipart/form-data",
+						'Content-Type': 'application/json',
+						'token': wx.getStorageSync('token')
+					},
+					success: (res)=> {
+						let newRes = JSON.parse(res.data);
+						if(newRes.code==0){
 							wx.downloadFile({
-				url: this.data.canvasTemImg,
+								url: 'https://fenggu.scdxtc.cn' + newRes.data.src,
 								success: (res) => {
 									wx.showShareImageMenu({
-						path: res.tempFilePath
+										path: res.tempFilePath,
+										success:(res)=>{
+											this.shareEv(newRes.data.id);
+										}
 									})
 								}
 							})
+						}
+					},
+					fail: function(data) {
+						console.log(data);
+					}
+				})
+			}
 		} else {
 			this.setData({
 				isLogin: true
 			})
 		}
 	},
+	// 分享事件
+	shareEv(id) {
+		wx.request({
+			url: urlPath.publishMyBottle,
+			data: {id: id},
+			header: {'token': wx.getStorageSync('token')},
+			method: 'post',
+			success: (res) => {
+				if (res.data.code == 0) {
+					wx.showToast({title: '分享作品成功'})
+				}
+			}
+		});
+	},
+	// 关闭授权
 	chooseBtn(e) {
 		let loginIndex = e.currentTarget.dataset.index;
 		this.setData({
 			isOk: false,
 			isNo: false
 		})
-		loginIndex==1 ? this.setData({isOk:true}) : this.setData({isNo:true})
+		loginIndex == 1 ? this.setData({
+			isOk: true
+		}) : this.setData({
+			isNo: true
+		})
 	},
+	// 确认授权
 	shouq(e) {
 		wx.getUserProfile({ //获取用户昵称
 			desc: '用于完善会员资料',
@@ -528,8 +582,13 @@ Page({
 					userInfo: res.userInfo,
 					isLogin: false
 				})
-				wx.showToast({title:'授权成功',icon:'none'})
+				wx.showToast({
-				this.setData({isOk:false})
+					title: '授权成功',
+					icon: 'none'
+				})
+				this.setData({
+					isOk: false
+				})
 				wx.login({ //调用授权登录
 					success: res => {
 						wx.request({
@@ -537,15 +596,18 @@ Page({
 							method: 'post',
 							data: {
 								code: res.code,
-								wx_ame:this.data.userInfo.nickName,
+								wx_name: this.data.userInfo.nickName,
 								avater: this.data.userInfo.avatarUrl,
 							},
 							success(res) {
 								console.log(res, 1234);
 								if (res.data.code == 0) {
-									wx.setStorageSync('token', res.data.data.token);
+									wx.setStorageSync('token', res.data.data
-									wx.setStorageSync('openid', res.data.data.openid);
+										.token);
-									wx.setStorageSync('user', res.data.data.user);
+									wx.setStorageSync('openid', res.data.data
+										.openid);
+									wx.setStorageSync('user', res.data.data
+										.user);
 								}
 							}
 						});
@@ -553,18 +615,73 @@ Page({
 				})
 			},
 			fail: (res) => {
-				wx.showToast({title:'授权失败',icon:'none'})
+				wx.showToast({
-				this.setData({isOk:false})
+					title: '授权失败',
+					icon: 'none'
+				})
+				this.setData({
+					isOk: false
+				})
 			}
 		})
 	},
 	getBottleCategories() {
 		wx.request({
 			url: urlPath.getBottleCategories,
-			data: {},
+			success: (res) => {
-			success(res) {
+				if (res.data.code == 0) {
-				console.log(res);
+					if (res.data.data.length) {
+						this.setData({
+							titlelist: res.data.data
+						})
+					}
+				}
 			}
 		});
+	},
+	getBottleWidgets(id) {
+		wx.request({
+			url: urlPath.getBottleWidgets,
+			method: 'post',
+			data: {
+				category_id: id,
+				size: 60
+			},
+			success: (res) => {
+				if (res.data.code == 0) {
+					if (res.data.data.length) {
+						let newArr = [];
+						res.data.data.forEach(item => {
+							let url = 'https://fenggu.scdxtc.cn' + item.img;
+							this.downLoadImg(url, 'https://fenggu.scdxtc.cn' + item.img);
+							let obj = {
+								id: item.id,
+								name: item.name,
+								img: 'https://fenggu.scdxtc.cn' + item.img
+							}
+							newArr.push(obj)
+						})
+						this.setData({
+							allList: newArr,
+							showBox: true
+						})
+					} else {
+						wx.showToast({
+							title:'无内容',
+							icon:'none'
+						})
+						this.setData({
+							showBox: false
+						})
+					}
+					
+				}
+			}
+		});
+	},
+	checkWorkEv() {
+		wx.navigateTo({
+			url: '/pages/works/works'
+		})
 	}
 })

pages/canvasposter/canvasposter.wxml

@@ -27,6 +27,14 @@
 		<button bindtap='disappearCanvas'>关闭</button>
 	</view>
 </view>
+<!-- 输入框 -->
+<view wx:if="{{showTitle}}" class="content-box">
+	<view class="input-box">
+		<text>请为作品添加标题</text>
+		<input type="text" value="{{titleVal}}" bind:input="titleInput" placeholder="请收入作品标题" />
+		<view bindtap='submit'>确定</view>
+	</view>
+</view>
 <!-- 画布 -->
 <canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>
 <!-- 右下角操作按钮 -->
@@ -35,19 +43,19 @@
 	<image src="../../img/download-icon.png" bindtap="openMask"></image>
 </view>
 <!-- 我的作品 -->
-
+<navigator wx:if="{{funBox}}" url="/pages/works/works" hover-class="" class="works-btn">我的作品</navigator>
 <view wx:if="{{funBox}}" class="choose-box {{showBox?'showBox':''}}">
 	<view>
 		<scroll-view scroll-x="true">
 			<view class="scrollView title-box">
-				<view wx:for="{{titlelist}}" class="{{titleIndex==index?'titleActive':''}}" data-index="{{index}}" bindtap="chooseTitle" wx:key="index">{{item}}</view>
+				<view wx:for="{{titlelist}}" class="{{titleIndex==index?'titleActive':''}}" data-index="{{index}}" data-id="{{item.id}}" bindtap="chooseTitle" wx:key="index">{{item.name}}</view>
 			</view>
 		</scroll-view>
 	</view>
 	<view>
 		<scroll-view scroll-x="true">
 			<view class="scrollView img-box">
-				<view wx:for="{{allList}}" data-index="{{index}}" bindtap="chooseImg" wx:key="index"><image class="{{allIndex==index?'allActive':''}}" mode="widthFix" src="{{item}}" lazy-load></image></view>
+				<view wx:for="{{allList}}" data-index="{{index}}" bindtap="chooseImg" wx:key="index"><image class="{{allIndex==index?'allActive':''}}" mode="widthFix" src="{{item.img}}" lazy-load></image></view>
 			</view>
 		</scroll-view>
 	</view>

pages/canvasposter/canvasposter.wxss

@@ -238,6 +238,56 @@
 	border: 4rpx dashed rgba(255, 255, 255, .4);
 	box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, .8);
 }
+
+.works-btn {
+	position: fixed;
+	right: 20rpx;
+	top: 20rpx;
+	z-index: 10000;
+	background-color: rgba(0,0,0,.3);
+	color: #fff;
+	font-size: 28rpx;
+	border-radius: 10rpx;
+	padding: 16rpx 20rpx;
+}
+.content-box {
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 100001;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.input-box {
+	display: flex;
+	flex-direction: column;
+	background-color: rgba(255,255,255,.6);
+	border-radius: 6rpx;
+	padding: 20rpx;
+	color: #000;
+	font-size: 26rpx;
+	text-align: center;
+}
+.input-box text {
+	font-weight: bold;
+}
+.input-box input {
+	background-color: #fff;
+	margin-top: 20rpx;
+	text-align: left;
+	padding: 10rpx 20rpx;
+	height: auto;
+}
+.input-box view {
+	width: 100%;
+	margin-top: 20rpx;
+	padding: 20rpx;
+	color: #fff;
+	background-color: rgba(0,0,0,.2);
+}
 .auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1000;}
 .auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
 .auth-top {display: flex;}

pages/works/works.js

@@ -0,0 +1,171 @@
+// pages/works/works.js
+var urlPath = require('../../config.js');
+Page({
+
+	/**
+	 * 页面的初始数据
+	 */
+	data: {
+		workTitleArr: ['保存的作品', '分享的作品'],
+		workIndex: 0,
+		imgArr: [{
+				imgSrc: '../../img/background/1.png',
+				workName: '饺子吃肉肉饺子吃肉肉饺子吃肉肉饺子吃'
+			},
+			{
+				imgSrc: '../../img/background/1.png',
+				workName: '饺子吃肉肉'
+			},
+			{
+				imgSrc: '../../img/background/1.png',
+				workName: '饺子吃肉肉'
+			},
+			{
+				imgSrc: '../../img/background/1.png',
+				workName: '饺子吃肉肉'
+			},
+			{
+				imgSrc: '../../img/background/1.png',
+				workName: '饺子吃肉肉'
+			},
+		],
+		page: 1,
+		size: 200
+	},
+
+	/**
+	 * 生命周期函数--监听页面加载
+	 */
+	onLoad: function(options) {
+		this.checkImg();
+	},
+	// chooseTitle(e){
+	// 	let newIndex = e.currentTarget.dataset.index;
+	// 	this.setData({
+	// 		workIndex:newIndex
+	// 	})
+	// 	console.log(this.data.workIndex);
+
+	// },
+	checkImg() {
+		wx.request({
+			url: urlPath.myBottleReleaseList,
+			data: {
+				page: this.data.page,
+				size: this.data.size
+			},
+			header: {
+				'token': wx.getStorageSync('token')
+			},
+			method: 'post',
+			success: (res) => {
+				if (res.data.code == 0) {
+					let newArr = [];
+					if (res.data.data.list.length) {
+						res.data.data.list.forEach(item => {
+							let obj = {
+								name: item.name,
+								id: item.id,
+								imgSrc: 'https://fenggu.scdxtc.cn' + item.release_img,
+								userId: item.user_id,
+								time: item.create_time,
+								isShare: item.production_id //0未分享
+							}
+							newArr.push(obj);
+						})
+					}
+					this.setData({
+						imgArr: newArr
+					})
+				}
+			}
+		});
+	},
+	shareEv(e) {
+		wx.downloadFile({
+			url: this.data.imgArr[e.currentTarget.dataset.index].imgSrc,
+			success: (res) => {
+				wx.showShareImageMenu({
+					path: res.tempFilePath,
+					success:(res)=>{
+						this.shareImg(e.currentTarget.dataset.id,e.currentTarget.dataset.index);
+					},
+					fail:(err)=>{
+						console.log(err);
+					}
+				})
+			}
+		})
+	},
+	shareImg(id,index){
+		wx.request({
+			url: urlPath.publishMyBottle,
+			data: {
+				id: id
+			},
+			header: {
+				'token': wx.getStorageSync('token')
+			},
+			method: 'post',
+			success: (res) => {
+				if (res.data.code == 0) {
+					this.data.imgArr[index].isShare=1;
+					this.setData({
+						imgArr:this.data.imgArr
+					})
+					wx.showToast({
+						title: '分享作品成功'
+					})
+				}
+			}
+		});
+	},
+	/**
+	 * 生命周期函数--监听页面初次渲染完成
+	 */
+	onReady: function() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面显示
+	 */
+	onShow: function() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面隐藏
+	 */
+	onHide: function() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面卸载
+	 */
+	onUnload: function() {
+
+	},
+
+	/**
+	 * 页面相关事件处理函数--监听用户下拉动作
+	 */
+	onPullDownRefresh: function() {
+
+	},
+
+	/**
+	 * 页面上拉触底事件的处理函数
+	 */
+	onReachBottom: function() {
+
+	},
+
+	/**
+	 * 用户点击右上角分享
+	 */
+	onShareAppMessage: function() {
+
+	}
+})

pages/works/works.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/works/works.wxml

@@ -0,0 +1,16 @@
+<!--pages/works/works.wxml-->
+<!-- 标题 -->
+<!-- <view class="title-box">
+	<view wx:for="{{workTitleArr}}" wx:key="index" bindtap="chooseTitle" data-index="{{index}}" class="title-btn {{workIndex==index?'workActive':''}}">{{item}}</view>
+</view> -->
+<!-- 列表 -->
+<view class="img-list">
+	<view class="item-box" wx:for="{{imgArr}}" wx:key="index">
+		<image src="{{item.imgSrc}}" mode="widthFix" lazy-load></image>
+		<text class="clips2">{{item.name}}</text>
+		<view class="time">{{item.time}}</view>
+		<view wx:if="{{item.isShare==0}}" class="share-box" bindtap="shareEv" data-id="{{item.id}}" data-index="{{index}}">
+			<image src="../../img/share-icon.png"></image>
+		</view>
+	</view>
+</view>

pages/works/works.wxss

@@ -0,0 +1,69 @@
+/* pages/works/works.wxss */
+page {
+	background-color: #F5f5f5;
+}
+.title-box {
+	display: flex;
+	justify-content: space-around;
+	margin-top: 20rpx;
+}
+.title-btn {
+	font-size: 28rpx;
+	color: #999;
+}
+.workActive {
+	color: #2a7be9!important;
+	text-shadow: 2rpx 2rpx 2rpx rgba(0,0,0,1);
+}
+
+.img-list {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	padding: 20rpx;
+}
+.img-list .item-box{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 48%;
+	background-color: #fff;
+	margin-bottom: 20rpx;
+}
+.share-box {
+	position: absolute;
+	top: 20rpx;
+	right: 20rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 6rpx;
+	background-color: #fff;
+	box-shadow: 3rpx 3rpx ,10rpx rgba(0,0,0,.8);
+}
+.share-box image {
+	width: 40rpx!important;
+	height: 40rpx;
+}
+.img-list image {
+	width: 100%;
+}
+.img-list text {
+	width: 100%;
+	height: auto;
+	font-size: 26rpx;
+	color: #333;
+	padding: 10rpx 20rpx;
+	line-height: 40rpx;
+}
+.time {
+	width: 100%;
+	font-size: 24rpx;
+	color: #999;
+	text-align: left;
+	padding: 0 20rpx 10rpx 20rpx;
+}
+.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}