libo
/
ztb-mini
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

--海报分享--

featrue/v4.4
DESKTOP-A1SENDA\HUzy 4 years ago
parent
a85a25483f
commit
d2d17b9911
3 changed files with 215 additions and 104 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      pages/article/detail/index.js
  2. 153
      pages/article/detail/index.wxml
  3. 122
      pages/article/detail/index.wxss

44
pages/article/detail/index.js
View File

@ -283,21 +283,9 @@ Page({
createNewImg() {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("red")
context.fillRect(0, 0, 375, 667)
var path2 = "/assets/image/def_image.png";
context.drawImage(path2, 0, 0, 375,667)
// context.drawImage(path2, 0, 0, 120, 120);
// context.save(); // 保存当前context的状态
var name = 'hahahaha';
//绘制名字
context.setFontSize(24);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText(name, 185, 340);
context.stroke();
context.draw();
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
@ -318,7 +306,35 @@ Page({
}, 200);
},
baocun(){
//点击保存到相册
baocun:function(){
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
console.log('filePath',filePath)
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
},fail:function(res){
console.log(11111)
}
})
}
})
},
coloseHb(){
console.log(this.data)
this.setData({
maskHidden:false

153
pages/article/detail/index.wxml
View File

@ -17,7 +17,8 @@
</wux-image>
<view class="text-cut text-df" style="max-width:400rpx;margin-left:12rpx">{{momentDetail.creatorName || ''}}</view>
<view class="text-black" style="border-left:2rpx solid #999999;margin-left:12rpx;height:24rpx;"></view>
<view class="text-cut text-df text-gray" style="max-width:400rpx;margin-left:12rpx">{{momentDetail.createTime}}</view>
<view class="text-cut text-df text-gray" style="max-width:400rpx;margin-left:12rpx">{{momentDetail.createTime}}
</view>
</view>
<view class="bg-white" wx:if="{{momentDetail.labelList.length}}" style="padding-left:30rpx">
<wux-tag wx:for="{{momentDetail.labelList}}" wx:key="index" color="blue">{{item}}</wux-tag>
@ -32,11 +33,12 @@
</view>
<view wx:if="{{momentDetail.millPaperId}}" style="padding: 0rpx 32rpx 20rpx 32rpx">
<wux-tag bind:click="toMill">
<text style="background-color:#ddd;border-radius: 32rpx;text-align: center;width:32rpx;height:32rpx;line-height:32rpx">#</text>
<text
style="background-color:#ddd;border-radius: 32rpx;text-align: center;width:32rpx;height:32rpx;line-height:32rpx">#</text>
<text class="text-df" style="margin-left:16rpx">{{momentDetail.millPaperName}}</text>
<text class="cuIcon-right text-balck" style="font-size:24rpx;margin-left:32rpx;padding-top:2rpx"></text>
</wux-tag>
</view>
</wux-tag>
</view>
<view style="height:20rpx;width:750rpx;background-color:#f3f3f3"></view>
<view class="text-bold text-lg" style="padding:36rpx 30rpx 10rpx 30rpx">评论</view>
<view class="bg-white list-empty" style="height:400rpx" wx:if="{{!commentList.length}}">
@ -45,19 +47,24 @@
<view class="text-empty" style="margin-top:32rpx">{{requesting? '正在加载' : '暂无评论'}}</view>
</view>
<view wx:else>
<view wx:for-item="pageItem" class="cu-list menu-avatar comment" wx:for-index="pageIndex" wx:for="{{commentList}}" wx:key="pageIndex">
<view wx:for-item="pageItem" class="cu-list menu-avatar comment" wx:for-index="pageIndex"
wx:for="{{commentList}}" wx:key="pageIndex">
<view wx:for="{{pageItem}}" wx:key="index" class="cu-item" style="padding:30rpx;align-items: flex-start">
<wux-image width="{{40}}" height="{{40}}" shape="circle" src="{{item.replierAvatarUrl}}" mode="aspectFill">
<image class="image-load" style="width:40px;height:40px" slot="loading" src="/assets/image/ygImg.png"></image>
<image class="image-load" style="width:40px;height:40px" slot="error" src="/assets/image/ygImg.png"></image>
<image class="image-load" style="width:40px;height:40px" slot="empty" src="/assets/image/ygImg.png"></image>
<image class="image-load" style="width:40px;height:40px" slot="loading" src="/assets/image/ygImg.png">
</image>
<image class="image-load" style="width:40px;height:40px" slot="error" src="/assets/image/ygImg.png">
</image>
<image class="image-load" style="width:40px;height:40px" slot="empty" src="/assets/image/ygImg.png">
</image>
</wux-image>
<view class="content" style="padding-left:20rpx">
<view class="flex flex-justify text-black">
<view class="text-gray text-cut" style="width: 160px">{{item.replierNickname}}</view>
<view data-page="{{pageIndex}}" data-index="{{index}}" bindtap="postLikeComment">
<text class="text-df text-black" style="margin-right:4rpx">{{item.likeQuantity || '赞'}}</text>
<text class="cuIcon-appreciate{{item.isLiked ? 'fill' : ''}} text-{{item.isLiked ? 'blue' : 'gray'}}"></text>
<text
class="cuIcon-appreciate{{item.isLiked ? 'fill' : ''}} text-{{item.isLiked ? 'blue' : 'gray'}}"></text>
</view>
</view>
<view class="text-black text-content text-df">{{item.content}}</view>
@ -73,7 +80,8 @@
</scroll-view>
<view class="cu-bar foot input" style="bottom:{{inputBottom}}px" wx:if="{{momentDetail}}">
<view class="flex flex-center" style="height:{{100 + safeBottom}}rpx;padding-bottom: {{safeBottom}}rpx;" wx:if="{{!focus}}">
<view class="flex flex-center" style="height:{{100 + safeBottom}}rpx;padding-bottom: {{safeBottom}}rpx;"
wx:if="{{!focus}}">
<view class="search-form" style="border-radius: 12rpx;width:370rpx;margin-left: 32rpx" bindtap="showComment">
<input placeholder="点击输入评论" disabled="true" adjust-position="{{false}}" focus="{{false}}"></input>
</view>
@ -84,7 +92,8 @@
</view>
<view class="action" bindtap="likePost" style="margin-right:24rpx">
<wux-badge count="{{momentDetail.likeQuantity}}" top="-8" right="-8" overflowCount="999">
<image style="width:40rpx;height:38rpx" src="/assets/image/prase_blue.png" wx:if="{{momentDetail.isLiked}}"></image>
<image style="width:40rpx;height:38rpx" src="/assets/image/prase_blue.png" wx:if="{{momentDetail.isLiked}}">
</image>
<image style="width:40rpx;height:38rpx" src="/assets/image/prase_black.png" wx:else></image>
</wux-badge>
</view>
@ -101,71 +110,89 @@
</view>
</view>
<view style="padding:30rpx 10rpx 30rpx 30rpx;width:100%" wx:else>
<textarea id="content" maxlength="180" style="height:160rpx;width:100%" focus="{{focus}}" cursor-spacing="40" show-confirm-bar="{{false}}" adjust-position="{{false}}" bindinput="bindInput" placeholder="输入评论，最多180字" placeholder-style="color:#aaa" bindfocus="inputFocus" bindblur="inputBlur"></textarea>
<textarea id="content" maxlength="180" style="height:160rpx;width:100%" focus="{{focus}}" cursor-spacing="40"
show-confirm-bar="{{false}}" adjust-position="{{false}}" bindinput="bindInput" placeholder="输入评论，最多180字"
placeholder-style="color:#aaa" bindfocus="inputFocus" bindblur="inputBlur"></textarea>
<view class="flex" style="justify-content: flex-end;">
<button class="cu-btn offer-btn" style="background-color: #008AFF" bindtap="submitComment">发表</button>
</view>
</view>
<!--生成海报 bindtap='baocun' -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<!-- <image src="{{imagePath}}" class='shengcheng'></image> -->
<!-- <view class='baocun'></view> -->
<view class='shengcheng2'>
<view class="topImg">
<image src="/assets/image/im_poster_header_no_title.png" style="width:100%;height:100%"></image>
<!--生成海报 bindtap='baocun' -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePathHb}}" class='shengcheng'></image>
<!-- <view class='baocun'></view> -->
<view class='shengcheng2'>
<view class="topImg">
<image wx:if="{momentDetail.millPaperName}" src="/assets/image/img_poster_header_has_title.png"
style="width:100%;height:100%"></image>
<image wx:else src="/assets/image/im_poster_header_no_title.png" style="width:100%;height:100%"></image>
<view wx:if="{momentDetail.millPaperName}" class="titleTextArea"><text>{{momentDetail.millPaperName}}</text>
</view>
<view class="contentText">
<image src="/assets/image/img_poster_bg.png" style="width:100%;height:100%"></image>
</view>
<view class="footzt">
<view class="footImg1">
<image src="/assets/image/img_poster_footer.png" style="width:100%;height:100%"></image>
</view>
<view class="contentText">
<image src="/assets/image/img_poster_bg.png" style="width:100%;height:100%"></image>
<view class="contentTextArea">
<view class="contentTextAreaTopTitle">
<text>{{momentDetail.title}}</text>
</view>
<view class="footImg2">
<view class="footIcon">
<view class="footSmallIconArea">
<view class="footSmallIcon">
<image src="/assets/image/ic_save_poster.png" style="width:100%;height:100%"></image>
</view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">保存相册</view>
<view class="contentTextAreaMidContent">
<text>{{momentDetail.content}}</text>
</view>
</view>
</view>
<view class="footzt">
<view class="footImg1">
<image src="/assets/image/img_poster_footer.png" style="width:100%;height:100%"></image>
</view>
<view class="footImg2">
<view class="footIcon" bindtap='baocun'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<image src="/assets/image/ic_save_poster.png" style="width:100%;height:100%"></image>
</view>
</view>
<view class="footIcon" style="margin-left:15rpx">
<view class="footSmallIconArea">
<view class="footSmallIcon">
<image src="/assets/image/weixinicon.png" style="width:100%;height:100%"></image>
</view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">微信</view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">保存相册</view>
</view>
<view class="footIcon" style="margin-left:15rpx">
<view class="footSmallIconArea">
<view class="footSmallIcon"><image src="/assets/image/pyqicon.png" style="width:100%;height:100%"></image> </view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">朋友圈</view>
</view>
<view class="footIcon" style="margin-left:15rpx" >
<view class="footSmallIconArea">
<view class="footSmallIcon">
<button open-type="share" class="share-btn">
<image src="/assets/image/weixinicon.png" style="width:100%;height:100%"></image>
</button>
</view>
</view>
<view class="footIcon" style="margin-left:147rpx" bindtap='baocun'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<text class="cuIcon-close" style="font-size:62rpx"></text>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">微信</view>
</view>
</view>
<view class="footIcon" style="margin-left:15rpx" bindtap='onShareTimeline'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<image src="/assets/image/pyqicon.png" style="width:100%;height:100%"></image>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">关闭</view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">朋友圈</view>
</view>
</view>
<view class="footIcon" style="margin-left:147rpx" bindtap='coloseHb'>
<view class="footSmallIconArea">
<view class="footSmallIcon">
<text class="cuIcon-close" style="font-size:62rpx"></text>
</view>
</view>
</view>
<view class="footSmalltextArea">
<view class="footSmalltext">关闭</view>
</view>
</view>
</view>
</view>
</view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>
</view>
</view>
</view>
</view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>
</view>

122
pages/article/detail/index.wxss
View File

@ -2,17 +2,17 @@
.offer-btn {
width: 160rpx;
height: 56rpx;
background-color: #008AFF;
background-color: #008AFF;
border-radius: 23px;
color: white;
font-size: 24rpx;
}
.image-load {
width: 50px;
height: 50px;
display: flex;
align-items: center;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rpx;
}
@ -25,16 +25,19 @@
height: 40px;
}
.share-btn{
.share-btn {
background-color: #fff;
padding-left: 0px;
padding-right: 0px;
height:32px;
height: 32px;
line-height: 32px
}
.share-btn::after{ border: none; }
.shengcheng{
.share-btn::after {
border: none;
}
.shengcheng {
width: 670rpx;
height: 1190rpx;
position: fixed;
@ -44,7 +47,8 @@
z-index: 10;
margin-top: 2%;
}
.shengcheng2{
.shengcheng2 {
width: 670rpx;
height: 80%;
position: fixed;
@ -54,21 +58,63 @@
top: 142rpx;
margin-top: 2%;
}
.topImg{
.topImg {
width: 670rpx;
height: 174rpx;
}
.contentText{
.contentText {
width: 670rpx;
height: 885rpx;
}
.footzt{
.contentTextArea {
width: 670rpx;
height:280rpx;
height: 612rpx;
z-index: 10;
position: absolute;
top: 176rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 48rpx;
color: #3539F8;
}
.contentTextAreaTopTitle {
width: 100%;
height: 50rpx;
position: absolute;
top: 30rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0rpx, 32rpx, 0rpx, 32rpx;
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #000000;
}
.contentTextAreaMidContent{
width: 100%;
height: 535rpx;
position: absolute;
top: 60rpx;
padding: 0rpx, 32rpx, 0rpx, 32rpx;
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #000000;
padding:32rpx
}
.footzt {
width: 670rpx;
height: 280rpx;
position: absolute;
bottom: 0rpx;
}
.baocun{
.baocun {
display: block;
width: 670rpx;
height: 140rpx;
@ -80,26 +126,30 @@
background: white;
color: white;
font-size: 32rpx;
top:82%;
top: 82%;
z-index: 11;
}
.footImg1{
.footImg1 {
width: 670rpx;
height:240rpx;
height: 240rpx;
}
.footImg2{
.footImg2 {
width: 670rpx;
height:140rpx;
height: 140rpx;
background-color: white;
display: flex;
justify-content: flex-start;
}
.footIcon{
.footIcon {
width: 120rpx;
height:140rpx;
height: 140rpx;
}
.footSmallIconArea{
.footSmallIconArea {
width: 100%;
height: 64rpx;
display: flex;
@ -108,24 +158,42 @@
margin-top: 10rpx;
}
.footSmallIcon{
.footSmallIcon {
width: 64rpx;
height: 64rpx;
justify-content: center;
align-items: center;
}
.footSmalltextArea{
.footSmalltextArea {
width: 100%;
height: 33rpx;
display: flex;
justify-content: center;
align-items: center;
}
.footSmalltext{
width:120rpx;
.footSmalltext {
width: 120rpx;
height: 33rpx;
display: flex;
justify-content: center;
align-items: center;
}
.titleTextArea {
width: 670rpx;
height: 174rpx;
z-index: 10;
position: absolute;
top: -20rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 48rpx;
color: #3539F8;
margin-bottom: 30rpx;
}
Write Preview
Loading…
Cancel
Save