<!--addbook.wxml-->
<!--页面 S-->
<view class="page cover-page">
<!--内容区域 S-->
<view class="cover-wrapper">
<view class="page-wrapper">
<form>
<view class="cover-pic" catchtap="uploadCover">
<image wx:if="{{bookCover}}" mode="aspectFit" src="{{bookCover}}"></image>
<image wx:if="{{!bookCover}}" class="icon_camera" src="../../images/icon/camera_icon@3x.png"></image>
</view>
<view class="author-input"><input type="text" placeholder="书名" bindblur="addBook" data-name="title" name="title" value="{{book.title}}" /></view>
<view class="title-input"><input type="text" placeholder="作者" bindblur="addBook" data-name="author" name="author" value="{{book.author}}" /></view>
</form>
</view>
</view>
<!--内容区域 E-->
<view class="page-footer">封面</view>
</view>
<!--页面 E-->
<form bindsubmit="pagesTextPost">
<block wx:for="{{pages}}" >
<!--图文页面 S-->
<view class="page book-page" wx:if="{{item.type == 2}}">
<!--内容区域 S-->
<view scroll-y="true" class="bookpage-wrapper">
<view class="page-wrapper">
<view class="book-pic" catchtap="uploadBookImg" data-pageidx="{{item.idx}}">
<image wx:if="{{item.imgUrl}}" mode="aspectFit" src="{{item.imgUrl}}"></image>
<image wx:if="{{!item.imgUrl}}" class="icon_camera" src="../../images/icon/camera_icon@3x.png"></image>
</view>
<view class="book-text">
<textarea bindblur="confirmText" data-pageindex="{{index}}" name="{{item.idx}}" maxlength="-1" placeholder="填写内容" value="{{item.text}}" />
</view>
</view>
</view>
<!--内容区域 E-->
<view catchtap="moreAct" data-index="{{index}}" class="page-more">更多</view>
<view class="page-footer">第 {{index}} 页</view>
</view>
<!--图文页面 E-->
<!--文字页面 S-->
<view class="page book-page" wx:if="{{item.type == 1}}">
<!--内容区域 S-->
<view scroll-y="true" class="bookpage-wrapper">
<view class="page-wrapper">
<view class="book-text-page">
<textarea bindblur="confirmText" data-pageindex="{{index}}" name="{{item.idx}}" maxlength="-1" placeholder="填写内容" value="{{item.text}}" />
</view>
</view>
</view>
<!--内容区域 E-->
<view catchtap="moreAct" data-index="{{index}}" class="page-more">更多</view>
<view class="page-footer">第 {{index}} 页</view>
</view>
<!--文字页面 E-->
</block>
<!--页面 S-->
<view class="page add-page" catchtap="addPage" data-type="2">
<view class="add-btn">
<image src="../../images/icon/new_add_btn@3x.png"></image>
</view>
<view class="add-btn-text" >添加新内页</view>
</view>
<!--页面 E-->
<!--预览 S-->
<view class="preview-btn">
<button catchtap="previewBook" data-bookid="{{book.bookId}}" class="btn-primary" hover-class="btn-primary-hover" > 预 览 </button>
</view>
<view class="finish-btn">
<button catchtap="finishBook" class="btn-primary" hover-class="btn-primary-hover" > 保 存 </button>
</view>
<!--预览 E-->
</form>
|
/* addbook.wxss */
page{
background: #eeeeee;
}
.page{
position: relative;
margin: 30rpx 30rpx 0 30rpx;
padding: 30rpx 0 100rpx 0;
border:1rpx soild #dddddd;
border-radius: 10rpx;
background: #fff;
}
.page-more{
position: absolute;
font-size: 26rpx;
left: 20rpx;
bottom: 20rpx;
color: #888888;
}
.page-footer{
position: absolute;
font-size: 26rpx;
right: 20rpx;
bottom: 20rpx;
color: #888888;
}
/*页面垂直滚动*/
/*封面定位*/
.cover-wrapper{
border: 1rpx soild #dddddd;
border-radius: 10rpx;
}
/*内容页定位*/
.bookpage-wrapper {
border: 1rpx soild #dddddd;
border-radius: 10rpx;
background: #fff;
}
.page-wrapper{
margin: 0 30rpx;
}
.btm-del{
height: 40rpx;
width: 40rpx;
margin-left:-20rpx;
}
.btm-del image{
width: 40rpx;
height: 40rpx;
}
/*封面*/
.cover-pic{
margin-top:40rpx;
background: #dddddd;
text-align: center;
}
.icon_camera{
width: 93rpx;
height: 74rpx;
padding: 40% 0;
line-height: 500rpx;
vertical-align: middle;
}
.author-input{
margin: 50rpx 50rpx 0 50rpx;
text-align: center;
border-bottom: 1rpx solid #dddddd;
}
.title-input{
margin: 50rpx 50rpx 0 50rpx;
text-align: center;
border-bottom: 1rpx solid #dddddd;
}
.submit-btn{
margin: 50rpx 50rpx 0 50rpx;
text-align: center;
}
/*封底 按钮*/
.add-page{
height: 375rpx;
padding: 1rpx 0;
background: #ffffff;
}
.add-btn{
margin-top: 130rpx;
text-align: center;
}
.add-btn image{
width: 53rpx;
height: 53rpx;
}
.add-btn-text{
margin-top: 34rpx;
color: #888888;
font-size: 32rpx;
text-align: center;
}
.preview-btn{
margin: 50rpx;
}
.finish-btn{
margin: 50rpx;
padding-bottom: 100rpx;
}
/*内容*/
.book-pic{
margin-top:20rpx;
background: #dddddd;
text-align: center;
}
.book-text{
margin-top: 20rpx;
height: 300rpx;
background: #eeeeee;
overflow: hidden;
}
.book-text input{
height: 300rpx;
word-break: break-all;
}
.book-text-page{
margin-top: 20rpx;
height: 800rpx;
background: #eeeeee;
overflow: hidden;
}
.book-text-page input{
height: 800rpx;
word-break: break-all;
}
|
// addbook.js
Page({
/**
* 页面的初始数据
*/
data: {
bookId: '', //书本ID
bookCover: '', // 书本封面
book: {}, // 书本信息
bookInfo: {}, // 书本信息，不更新到页面
pages: [], // 页面信息
pagesData: [], //页面信息，不更新到页面
idx: 0 // 页面编号 用于添加页面使用
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 如果传入bookId
console.log(options.bookid);
let that = this;
if (options.bookid) {
getApp().getBookInfo(options.bookid, function (data) {
console.log(data.payload.bookInfo);
if (data.code == 0) {
let _Pages = data.payload.bookInfo.pages;
_Pages.forEach(function (element, index) {
element.idx = index + 1;
console.log(index);
}, this);
let maxIdx = _Pages.length;
// 页面数组前插入
_Pages.unshift(Array());
that.setData({
bookId: data.payload.bookInfo.bookId, //书本ID
bookCover: data.payload.bookInfo.coverUrl, // 书本封面
book: data.payload.bookInfo,
bookInfo: data.payload.bookInfo,
pages: data.payload.bookInfo.pages,
pagesData: data.payload.bookInfo.pages,
idx: maxIdx
});
}
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// this.setData({
// bookId: '', //书本ID
// bookCover: '', // 书本封面
// book: {}, // 书本信息
// bookInfo: {}, // 书本信息，不更新到页面
// pages: [], // 页面信息
// pagesData: [], //页面信息，不更新到页面
// idx: 0 // 页面编号 用于添加页面使用
// });
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 预览
previewBook: function (event) {
let bookid = event.currentTarget.dataset.bookid;
if (bookid) {
wx.navigateTo({
url: '../previeweditbook/previeweditbook?bookId=' + bookid
})
} else {
wx.showToast({
title: '请先创建电子书',
icon: 'loading',
duration: 1000
});
}
},
finishBook: function () {
wx.switchTab({
url: '../profile/profile'
});
},
// 添加页面
addPage: function (event) {
let that = this;
let index = that.data.idx + 1;
let type = event.currentTarget.dataset.type;
if (that.data.bookId) {
// 判断上一页内容是否为空
if (that.data.idx == 0) {
let page = {
bookId: that.data.bookId,
idx: index,
text: '',
type: type,
imgUrl: ''
}
that.data.pagesData[index] = page;
that.setData({
pages: that.data.pagesData,
idx: index
});
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 1000
});
} else if (that.data.pagesData[that.data.idx].imgUrl == "" && that.data.pagesData[that.data.idx].text == "") {
wx.showToast({
title: '请完成上一页内容',
icon: 'success',
duration: 1000
});
} else {
let page = {
bookId: that.data.bookId,
idx: index,
text: '',
type: type,
imgUrl: ''
}
that.data.pagesData[index] = page;
that.setData({
pages: that.data.pagesData,
idx: index
});
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 1000
});
}
} else {
wx.showToast({
title: '请先创建电子书',
icon: 'loading',
duration: 1000
});
}
},
// 创建电子书 检查封面图片是否选择
addBook: function (event) {
console.log(event);
let that = this;
let value = event.detail.value;
let name = event.currentTarget.dataset.name;
// event.currentTarget.dataset.name
if (value !== '') {
console.log(event.detail.value);
// 判断是否生成bookId 如果有则更新数据
if (!that.data.bookId) {
// 判断title author
if (name == 'title') {
getApp().addBook(value, "", function (data) {
console.log(data);
if (data.code == 0) {
console.log('创建书成功，并保存书名');
that.setData({
bookId: data.payload.book.bookId,
book: data.payload.book,
bookInfo: data.payload.book
});
if (that.data.bookCover) {
getApp().uploadImage(that.data.bookId, 0, that.data.bookCover, function (data) {
console.log(data);
});
}
}
});
} else if (name == 'author') {
getApp().addBook("", value, function (data) {
console.log(data);
if (data.code == 0) {
console.log('创建书成功,并保存作者');
that.setData({
bookId: data.payload.book.bookId,
book: data.payload.book,
bookInfo: data.payload.book
});
}
});
}
// 有bookId 更新bookInfo
} else {
// 判断title author
if (name == 'title') {
// 判断值是否发生过变化
if (value !== that.data.bookInfo.title) {
getApp().updateBook(that.data.bookId, value, "", function (data) {
console.log(data);
if (data.code == 0) {
console.log('更新title成功');
that.data.bookInfo.title = value;
that.setData({
book: that.data.bookInfo
});
}
});
} else {
console.log('内容没有变化');
}
} else if (name == 'author') {
if (value !== that.data.bookInfo.author) {
getApp().updateBook(that.data.bookId, "", value, function (data) {
console.log(data);
if (data.code == 0) {
console.log('更新author成功');
that.data.bookInfo.author = value;
that.setData({
book: that.data.bookInfo
});
}
});
} else {
console.log('内容没有变化');
}
}
}
} else {
console.log('没有输入内容');
}
},
// 选择封面
uploadCover: function () {
let that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
// var tempFilePaths = res.tempFilePaths;
// 设置精选去一张，所以 0 取得当前的路径地址 res.tempFilePaths[0];
that.setData({
bookCover: res.tempFilePaths[0]
});
// 如果有了bookId，直接上传图片
if (that.data.bookId) {
getApp().uploadImage(that.data.bookId, 0, that.data.bookCover, function (data) {
console.log(data);
});
}
}
})
},
// 选择并上传内容图片
uploadBookImg: function (event) {
let that = this;
let index = event.currentTarget.dataset.pageidx;
console.log(index);
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
// var tempFilePaths = res.tempFilePaths;
// 设置精选去一张，所以 0 取得当前的路径地址 res.tempFilePaths[0];
console.log(that.data.pagesData[index]);
that.data.pagesData[index].imgUrl = res.tempFilePaths[0];
console.log(that.data.pagesData[index].imgUrl);
that.setData({
pages: that.data.pagesData
});
// 如果有了bookId，直接上传图片
getApp().uploadImage(that.data.bookId, index, res.tempFilePaths[0], function (data) {
console.log(data);
});
}
})
},
// 更多操作
moreAct: function (event) {
let that = this;
// 当前页码
console.log(event.currentTarget.dataset.index);
let index = event.currentTarget.dataset.index;
wx.showActionSheet({
itemList: ['切换版式', '删除'],
success: function (res) {
console.log(res.tapIndex);
// 切换版式
if (res.tapIndex == 0) {
if (that.data.pagesData[index].type == 1) {
that.data.pagesData[index].type = 2;
} else if (that.data.pagesData[index].type == 2) {
that.data.pagesData[index].type = 1;
}
that.setData({
pages: that.data.pagesData
});
} else if (res.tapIndex == 1) {
// 删除此页 bookId index
getApp().delPage(that.data.bookId, index, function (data) {
delete that.data.pagesData[index];
that.setData({
pages: that.data.pagesData
});
});
}
},
fail: function (res) {
console.log(res.errMsg)
}
})
},
// 上传表单form text内容
pagesTextPost: function (event) {
console.log(event.detail.value);
},
// confirmText 确认文本内容 传入text.value pages.index
confirmText: function (event) {
let that = this;
console.log(event.detail.value);
console.log(event.currentTarget.dataset.pageindex);
let index = event.currentTarget.dataset.pageindex;
that.data.pagesData[index].text = event.detail.value;
if (event.detail.value.length == 0) {
console.log("请输入内容");
} else {
// 发送页面内容 bookId, idx, text, type
getApp().setPage(that.data.pagesData[index].bookId, that.data.pagesData[index].idx, that.data.pagesData[index].text, that.data.pagesData[index].type, function (data) {
console.log(data);
that.setData({
pages: that.data.pagesData
});
});
}
}
})
|
模板简介：该模板名称为【微信小程序树芽读书创作绘本信息填写页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
