@ -0,0 +1,78 @@ | |||
// components/share/share.js | |||
//TODO: 上传到社区函数未实现,生成的图片需要从服务器端传来 | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
list:[{ | |||
path:"/asset/img/icon-download.png", | |||
text:"下载图片" | |||
},{ | |||
path:"/asset/img/subicon-share.png", | |||
text:"分享" | |||
},{ | |||
path:"/asset/img/subicon-up.png", | |||
text:"上传到社区" | |||
}], | |||
picPath: "" | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
onRet: function () { | |||
wx.reLaunch({ | |||
url: "/Pages/travel/home/home", | |||
}); | |||
}, | |||
genPic:function () { | |||
var query = this.createSelectorQuery() | |||
query.select('#pic').context(function(res) { | |||
this.editorCtx = res.context, | |||
this.editorCtx.insertImage({ | |||
src: picPath//后端传数据进来,保存为data中的变量picPath | |||
}) | |||
}) | |||
}, | |||
switchFun:function(e) { | |||
console.log(e) | |||
if(e.currentTarget.id==0){ | |||
this.download() | |||
}else if(e.currentTarget.id==1){ | |||
this.share() | |||
}else{ | |||
this.upload() | |||
} | |||
}, | |||
download:function() { | |||
wx.downloadFile({ | |||
url: this.data.picPath, | |||
}) | |||
}, | |||
share:function(){ | |||
wx.showShareImageMenu({ | |||
path: this.data.picPath, | |||
}) | |||
}, | |||
upload:function () { | |||
wx.uploadFile({ | |||
filePath: this.data.picPath, | |||
name: 'name',//key值 | |||
url: 'url',//服务器地址 | |||
}) | |||
} | |||
} | |||
}) |
@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@ -0,0 +1,27 @@ | |||
<!--components/share/share.wxml--> | |||
<view style="display: flex;"> | |||
<image class="navi" src="/asset/img/navi.png" bindtap="onRet"></image> | |||
<view style="padding: 0;margin: 0;width: 1px;height:700px;background-color: #7B8B6F;"></view> | |||
<view> | |||
<view class="share"> | |||
<view class="title">计划分享</view> | |||
</view> | |||
<view> | |||
<button class="share-button" bindtap="genPic">点击生成行程总结</button> | |||
</view> | |||
<view> | |||
<editor class="share-editor" id="pic"></editor> | |||
</view> | |||
<view style="display: flex;"> | |||
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="idx"> | |||
<view bindtap="switchFun" id="{{idx}}"> | |||
<image src="{{item.path}}" class="share-img" style="padding-inline: 25px;"></image> | |||
<view class="share-text">{{item.text}}</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> |
@ -0,0 +1,67 @@ | |||
/* components/share/share.wxss */ | |||
.navi { | |||
width: 40px; | |||
height: 30px; | |||
margin: 5px; | |||
padding-top: 10px; | |||
} | |||
.title { | |||
position: relative; | |||
top: 20px; | |||
left: 15px; | |||
font-size: 22px; | |||
font-weight: 900; | |||
color: #000; | |||
} | |||
.share { | |||
display: block; | |||
padding: 0; | |||
margin: 0; | |||
position: relative; | |||
top: -5px; | |||
} | |||
.share-button{ | |||
text-align: center; | |||
color: #7B8B6F; | |||
background-color: #D8CAAF; | |||
font-weight: light; | |||
position: relative; | |||
top: 120rpx; | |||
left: 60rpx; | |||
width: 200px; | |||
} | |||
.share-editor{ | |||
background-color: #D8CAAF; | |||
position: relative; | |||
top: 165rpx; | |||
left: 260rpx; | |||
height: 570rpx; | |||
width: 120rpx; | |||
} | |||
.share-img{ | |||
flex: 5; | |||
position: relative; | |||
top: 180rpx; | |||
left: 60rpx; | |||
width: 30px; | |||
height: 30px; | |||
padding-top: 20px; | |||
padding-left: 20px; | |||
padding-right: 20px; | |||
} | |||
.share-text{ | |||
font-size: 15px; | |||
color: #7B8B6F; | |||
text-align: center; | |||
position: relative; | |||
top: 180rpx; | |||
left: 60rpx; | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
} |